[2023 신입부원 기초 스터디] 박민규 #6주차 - JavaScript

조건문

 

JS에서의 if문

if (조건) {

    실행될 코드;

}

 

예시)

const a = 10;

const b = 20;

if (a < b) {

    console.log('a가 더 작아요.')

} else {

    console.log('a가 더 커요.')

}

--> a가 더 작아요 출력.

 

<단, 실행부가 한 줄일 땐>

if (a < b) console.log('a가 더 작아요')

이렇게 한 줄로 if문 작성 가능

 

또, else if 를 파이썬 처럼 계속 사용할 수도 있다.

 

Switch문

switch (변수 혹은 값) {

    case 값1:

        실행될 코드;

        break;

    default:

        아무것도 해당되지 않을 때 실행될 코드;

}

의 형태로 변수나 값의 경우에 따라 각각 다른 코드를 실행시킬 수 있다. 

하나의 case를 작성할 때마다 break를 꼭 붙여주어야 의도치않은 값을 출력하게 됨을 방지할 수 있다.

값이 딱 떨어지는 경우에는 if문보다 switch문이 가독성이 더 좋을 수 있으므로 적절한 상황에 잘 사용하자.

 

 

For문

for (시작값; 조건식; 증감값) {

    반복될 코드;

}

예시)

for (let i = 0; i < 5; i++) {

    console.log(i);

}

0~ 4까지 출력.

코드를 실행하기 전에 조건식이 만족하는 지 확인하고 조건식이 참일 경우에만 코드를 실행한다.

 

break와 continue를 사용하여 특정 조건에서는 반복문을 종료시키거나, 넘어갈 수 있다.

 

For of 문

for (const i of 배열) {

    실행될 코드;

}

이 코드를 실행하면 반복이 한 번 진행될 때 마다 변수i에 배열의 요소들이 인덱스 순서로 할당되게 된다.

 

While문

while (반복을 유지할 조건) {

     실행될 코드;

}

 

Do while문

do {

    실행될 코드;

} while (반복을 유지할 조건);

 

while문과의 차이점은 do while문은 코드를 무조건 한 번 실행되고 이후에 조건을 확인하여 반복한다는 데에 있다.

 

함수

반복해서 작성할 코드를 최소화시키기 위하여 반복되는 부분을 함수로 작성한다.

예시) 볶음밥 만드는 함수

function bok(main){

    console.log(`${main} 볶음밥`);

}

bok('제육');

bok('새우');

-----> 제육 볶음밥 

         새우 볶음밥 출력.

 

위에서 function 옆에 bok이 함수 이름이고, ()안에 있는 main은 bok함수 안에서 이용될 인자이다. ``사이에 ${main}은 '${main}'이라는 문자열이 아닌, main이라는 변수에 할당된 값이 출력되게 된다.

bok()을 통해 함수를 호출하고, ()안에 main에 할당될 값을 입력하면 함수가 완성된다.

 

※인자 = 함수의 입력 값 = Arguments

매개변수 = 함수의 입력 변수 = Parameter

 

※ 함수 내부에서 선언된 변수를 지역변수라고 하고, 그 함수 안에서만 이용이 가능하다. (조건문이나 반복문에서도 마찬가지)

 

또 호출된 인자가 부족할 땐 선언되지 않은 인자에 undefined라는 값을 할당한 것과 같음

이를 방지하기 위해서 인자에 미리 default값을 줄 수 있음

 

만약 필요한 인자 개수보다 더 많이 할당을 하려고 하면 인자 개수만큼만 할당이 된다.

모든 할당된 인자 값은 argument 배열에 추가되므로 오류는 발생하지 않는다.

지정한 인자를 제외한 나머지 모든 인자를 모두 출력하기 위해선 rest parameter을 이용하면 된다.

ex) function sum(a, b, ...rest) {

    console.log(rest);

}

sum(10, 20, 30, 40, 50, 60, 70);

----> [30, 40, 50, 60, 70] 출력.

 

return을 사용하여 함수에 값을 반환할 수도 있다.

 

함수의 여러가지 표현

function sum(a, b) {

    return(a + b);

}

console.log(sum(10, 20));

위의 코드를 다양한 방식으로 표현해보자

 

함수의 표현식

const sum = function (a, b) {

    console.log(a + b);

};

sum(10, 20);

 

화살표 함수

const sum = (a, b) => a + b;           <--- 명령어가 한 줄일 때

console.log(sum(10, 20));

 

const sum = (a, b) => {                   <--- 명령어가 두 줄 이상일 때

    return a + b;

};

console.log(sum(10, 20));