Javascript 제어문과 함수

• 조건문 (if, else, switch)
• 반복문 (for, while, do-while)

 

 

1. 조건문

---

 if 문

• 특정 조건이 참(true)일 경우에 특정 블록 코드를 실행

let score = 85;

if (score >= 60) { // (특정 조건)
    console.log("합격입니다.");
}

 

---

 if-else 문

• 조건에 따라 서로 다른 코드 블록을 실행

let score = 75;

if (score >= 90) { 
    console.log("A");
} else if (score >= 80) {
    console.log("B");
} else if (score >= 70) {
    console.log("C");
} else {
    console.log("F");
}
// 이런 식으로 여러 조건을 처리 가능

 

---

 switch 문

• 주어진 표현식의 값을 평가하고, 해당 값과 일치하는 case 블록을 실행

switch (표현식) {
    case 값1:
        // 값1과 일치할 때 실행되는 코드
        break;
    case 값2:
        // 값2와 일치할 때 실행되는 코드
        break;
    default:
        // 어떤 값과도 일치하지 않을 때 실행되는 코드
}

 

---

---

    궁금한 점    

여기서 if 문과 switch문 둘 다

조건에 따라 코드의 흐름을 제어하는 공통점이 있다.

 비슷해 보이지만 어떤 쓰임새에 다른지

확실하게 알아보자.

구분	if 문	switch문
구조	조건문으로 구성	case문으로 구성
조건 평가	여러 조건 사용(복잡한 구조에 용이)	단일 표현식 값에 따라 나뉨
사용 사례	복잡한 조건, 여러개의 변수	여러 경우의 단순 값 비교
가독성	복잡한 조건일 시 가독성이 어려움	여러 조건을 명확하게 나열해 가독성에 용이함
성능	조건에 따라 성능 차이 X	case가 많을 시 효율적
구문	if (조건) {...}	switch (표현식) {case 값 : ...}

 

 

---

2. 반복문 (Loops)

---

 for  문

• 조건이 참(true)인 동안 특정 코드를 반복 실행 (중요! 반복 횟수가 명확할 때 사용)

for (초기화; 조건; 증감) {
// 실행할 코드
}
// 초기화: 반복문이 시작할 때 한 번 실행되는 코드로, 반복에 사용할 변수를 초기화.
// 조건: 반복을 계속할지 결정하는 조건식입니다. 조건이 참(true)인 동안 반복문이 실행.
// 증감: 반복이 끝난 후 실행되는 코드로, 변수를 증가시키거나 감소.
// ex)
for (let i = 0; i < 5; i++) {
  console.log(i);
}

 

 

---

 while  문

• 조건이 거짓(false)로 바뀔 때까지 실행 (중요! 반복 횟수가 명확하지 않을 때 사용)
• 조건이 항상 참일 때 무한히 반복되기 때문에 적절한 조건을 설정해야 함

let i = 0;

while (i < 5) { 
    console.log(i);
    i++; // i를 증가시켜야 무한 루프를 방지
}

---

---

호기심

무한 루프에 한번 빠져봅시다

위에 예제는 i를 ++증감시켜 0~4까지만 출력해 종료하는 조건을 세웠다.

하지만

i++를 빼볼까? ㅎㅎ

 

만약 무한 루프에 빠진다면 빠르게

window는 Ctrl + C를 연타하자

mac은 control^ + C를 연타하자

 

CPU와 메모리가 비명 지른다... ㅎㅎ

무한 루프에 빠진 상태로 놔두면

CPU, 메모라사용량 증가로 성능이 저하되고 

시스템 불안정으로 인해 강제로 종료하거나 재부팅 해야한다..

그만 알아보자..

---

---

 do-while  문

• 반복문이 최소 한 번 실행된 후 조건을 평가

let i = 0;

do { // 반복 실행할 코드
    console.log(i);
    i++;
} while (i < 5); // 조건

---

---

 

궁금한 점

while과 do-while의 차이점이 뭘까??

구분	while 문	do-while 문
조건 평가 위치	반복문 시작 전 조건을 평가	반복문 끝에서 조건을 평가
최소 실행	조건이 거짓일 경우 실행이 안됨	최소 한번은 실행됨
사용의 예	조건이 참인 동안 반복	최소 한번 실행후 조건 확인이 필요함

 

---

---

 for ... of 문

• 배열을 순환할 때 사용

const fruits = ["apple", "banana", "cherry"];

// for (let element of array) { … } 형식

for (let fruit of fruits) {
  console.log(fruit);
}

---

 for ... in 문 

• 객체를 순환할 때 사용
• 배열의 인덱스를 반복할 때는 for...of 또는 for 문을 사용하는 것이 더 안전합니다.

const person = { name: "John", age: 30 };

for (let key in person) {
  console.log(key + ": " + person[key]);
}

---

3. 함수 (Function)

• 함수 표현식

function add(x, y) {
  return x + y;
}

const result = add(2, 3); // 5

 

▼ 함수 표현식: 호이스팅이 적용되지 않아, 초기화 되기 전에는 호출 불가능 ▼

greet();  // 오류 발생! ReferenceError: Cannot access 'greet' before initialization

const greet = function() { // 변수에 함수를 할당하는 방식 호이스팅 적용X
  console.log('Hello!');
};

 

▼ 함수 내에 선언: 호이스팅이 적용되어 선언 이전에 호출 가능 ▼

greet();  // 'Hello!'

function greet() { // 함수 내에 변수 선언하는 방식
  console.log('Hello!');
};

---

• 화살표 함수

화살표 함수란??

ES6에서 도입된 함수 표현식

function을 대신해  =>  로 짧고 간결하게 작성 가능!

// 일반 함수 표현식
const add = function(a, b) {
  return a + b;
};

// 화살표 함수
특징 - 중괄호{}와 return이 없어도 자동으로 암시적 반환함
const add = (a, b) => a + b;

---

• 콜백 함수로 자주 사용됨

 콜백(callback) 함수란?? 

함수의 인수로 전달되어, 특정 이벤트나 조건이 발생했을 때 호출되는 함수

비동기 처리 방식

function fetchData(callback) {
    setTimeout(() => {
        const data = '데이터 수신 완료';
        callback(data); // 콜백 함수 호출
    }, 2000);
}

fetchData((result) => {
    console.log(result); // 2초 후 변수data 출력
});


이벤트 처리

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
    console.log('버튼이 클릭되었습니다!'); // 버튼 클릭 시 실행
});


배열 메서드와 함께 사용

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(num) {
    return num * 2; // 각 숫자를 두 배로 만드는 콜백 함수
});

console.log(doubled); // [2, 4, 6, 8, 10]

---

• IIFE(즉시 실행 함수 표현식)로 사용 가능

 IIFE란??? 

(Immediately Invoked Function Expression)의 약자로

말 그대로 정의되자마자 즉시 실행되는 함수

주로 변수의 범위를 제한하고 코드 충돌을 방지하는데 용이 함

표현식은 ()로 감싸서 표현
(function() { 
    // 함수 내용
    console.log('이 함수는 즉시 실행됩니다!');
})(); 
마지막에 ()를 추가해 즉시 실행


변수 범위 제한
(function() {
    var localVar = '나는 지역 변수입니다!';
    console.log(localVar);
})();

console.log(localVar); // ReferenceError: localVar is not defined
위 처럼 외부에서 접근 불가능 / IIFE는 내부에서만 접근 가능

 

---

• This와 함수의 표현

THIS

호출된 문맥에 따라 This가 결정

메서드로 호출되면 그 객체를 가리킴

전역에서 호출되면 전역 객체를 가리킴

 

함수 표현식과 This의 관계

내부 객체의 속성을 참조

const person = {
  name: '철수',
  greet: function() {
    console.log(this.name);  // person객체의 name속성을 참조해 출력
  }
};

person.greet(); // '철수' 호출

 

 

화살표 함수와 This의 관계

화살표 함수에서 This는 외부 스코프를 참조해 undefined를 출력한다

const person = {
  name: '철수',
  greetArrow: () => {
    console.log(this.name);  // 여기서의 'this'는 person 객체가 아닌 외부 스코프를 참조
 
  }
};

person.greetArrow(); // undefined 출력

 

화살표 함수를 이용하려면

const person = {
  name: '철수',
  greetArrow: function() {   // 순서2. greetArrow를 일반함수로 arrowFunc를 감싸준다
    const arrowFunc = () => {   //순서3. arrowFunc라는 변수를 선언하고 그 변수에 화살표 함수를 넣는다
      console.log(this.name);    //순서4.  '철수' 출력
    };
    arrowFunc();   // 순서3. 여기 arrowFunc 변수에 정의된 화살표 함수를 호출하는 역할(즉 console.log(this.name)를 호출)
  }
};

person.greetArrow();   //순서1. '철수' 출력

이러한 방법이 있지만

 

화살표 함수에서 this를 사용해야 할 때는

일반 함수에  화살표 함수를 감싸  사용해야한다.

 

 

끝!