콘텐츠
이번에 다뤄 볼 것은 JavaScript 의 조건문 과 반복문 이다. 프로그래밍 언어엔 대부분 존재하는 기본적인 구조로 프로그램의 흐름을 제어하는 기초 중의 기초다.
JavaScript 조건문
조건문은 특정 조건을 만족 할 때 실행 되는 분기가 되어주는 역할을 한다.
예를 들어 변수의 값이 홀수, 짝수 인 경우 다르게 하는 등 말이다. 그리고 이 조건문은 크게 if 와 switch 가 있다.
if 문
기본적인 조건문 if 는 주어진 특정 조건이 true 일 때 블록(중괄호로 감싸진 영역 {}) 내의 코드가 실행되게 만든다. 바로 예시 코드를 보자.
let x = 5;
if(x == 5){
console.log('조건이 맞으면 실행');
}위의 코드를 보면 변수 안엔 5의 값이 들어 있다.
그래서 if 문 안에 조건에 따라 x 가 5와 일치할 때 블록 안에 코드인 console.log 가 실행되어 콘솔창엔 ‘조건이 맞으면 실행’ 이란 글자가 출력 된다.
이처럼 기본적인 if의 구조는 다음과 같다.
if(조건) {
실행될 코드
}if…else 문
if 조건문엔 else 가 함께 사용될 수 있다. else 의 역할은 조건에 해당하지 않을 때 실행될 코드 블록을 지정할 수 있다. 예시 코드는 다음과 같다.
let x = 6;
if(x == 5){
console.log('조건이 맞으면 실행');
}else{
console.log('조건이 틀리면 실행'); // 해당 console.log 가 실행
}위의 코드는 방금과 달리 x 에 값 6 이 할당되어 있어 조건에 맞지 않는다.
즉, 5가 아닌 값이 들어가면 else 뒤 블록 사이에 들어있는 코드가 실행되는 것이다.
다중 조건 else if
if…else 조합 외에도 한 가지 조합이 더 있는데 바로 else if 다.
이는 만약 첫 번째 조건이 거짓(false) 일 경우 다음으로 체크할 조건을 연속으로 확인 할 때 사용한다.
let x = 6;
if(x == 5){
console.log('x는 5 입니다.');
}else if(x == 6){
console.log('x는 6 입니다.'); // 해당 console.log 실행
}else{
console.log('x는 5와 6이 아닙니다.');
}switch 문
이제 if 와 관련 없는 새로운 조건문 switch 문에 대해 알아보자.
switch 문은 변수나 표현 식을 else if 와 같이 여러가지 값에 따라 비교할 때 사용하게 된다.
let x = 6;
switch (x){
case 5:
console.log('x는 5 입니다.');
break;
case 6:
console.log('x는 6 입니다.'); // // 해당 console.log 실행
break;
default:
console.log('x는 5와 6이 아닙니다.');
}여기서 특이한 키워드인 ‘break’ 를 볼 수 있을텐데 switch 문은 실행 될 코드의 끝에 break; 를 작성하지 않으면 그 다음 case 의 코드도 순차적으로 실행하게 된다.
이를 fall-through 현상이라 한다.
fall-through 현상
이 현상이 발생하는 이유는 switch 문 자체가 break, return 등의 키워드 없이 다음 case 를 실행하게 만든 것이 의도 되었기 때문이다.
JavaScript 또한 C 언어에 어느 정도 영향을 받았는데 C 언어에 영향을 받은 여러 프로그래밍 언어들 또한 비슷하게 동작하여 일관성을 유지했다는 이야기가 있다.
그래서 이 현상 자체를 이용한 프로그래밍 코드도 있다.
switch (x){
case '기린':
case '말':
case '토끼':
console.log('변수 x엔 초식동물이 할당 되었습니다.');
break;
case '사자':
case '호랑이':
case '표범':
console.log('변수 x엔 육식동물이 할당 되었습니다.');
break;
default:
console.log('그룹에 없는 동물 입니다.');
}그런데 사실 실무에서 이렇게 코딩하는 건 본 적이 없다…! 애초에 switch 문도 잘 사용하지 않았다.
if 문 vs switch 문
둘 다 비슷한 동작을 하므로 프로그래머가 무엇을 사용하든 같은 결과를 낼 수 있지만, 코드의 유지보수성과 가독성을 고려하여 상황에 따라 사용하기 좋은 구문은 다르다.
if 문이 유리한 경우:
- 비교 조건이 복잡할 경우
- 변수 값의 범위를 검사하는 경우 (숫자가 0~10 사이에 있는지 등)
- 조건의 수가 적을 때
- 변수의 타입이나 복잡한 표현 식을 평가 할 때
switch 문이 유리한 경우:
- 변수 값이 정해진 값들 중 하나 일 때
- 동일한 변수에 대한 여러 값과의 비교일 때
- 값에 따라 명확하게 다른 동작이 필요할 때
- 여러 조건이 같은 코드를 실행해야 할 때 (위에 언급한 fall-through 현상)
JavaScript 반복문
반복문은 주어진 조건에 따라 코드를 반복하는 역할을 한다. 예를 들면 변수의 값이 바뀔 때 까지 블록 내의 코드를 계속 실행, 변수의 값이 1씩 증가 하다 10이 될 때 까지 이 코드가 반복 등의 작업을 할 때 사용한다.
반복문을 제대로 익히면 조건에 따른 코드의 반복 실행으로 코드 수를 간결하게, 효율적으로 작성할 수 있다. 다른 사람의 50 줄 자리 코드를 10 자리 안으로 줄이는 것도 농담이 아니다.
이 반복문엔 기본적으로 for, while, do…while 등이 있다.
for 문
먼저 반복문 하면 처음 배우는 for 문이 있다. for 문은 괄호 안에 변수 선언, 조건, 반복 한 다음 실행할 내용 이렇게 크게 세 가지를 작성하고 중간에 작성한 조건이 만족하는 동안만 코드가 반복된다.
for (변수 선언; 조건; 반복 한 다음 실행될 내용){
//실행될 코드
}다음은 for 문의 예시 코드로 10번 코드를 반복하는 코드를 작성해보았다.
for (let i = 1; i <= 10; i++){
console.log(i);
}
for (let i = 1; i <= 10; i = i + 1){
console.log(i);
}위와 아래 코드는 모두 같은 동작을 반복한다. 그런데 여기서 특이한 코드를 하나 볼 수 있는데 i++ 이다. JavaScript 에서 i++ 을 이용하면 변수 자체의 값이 1 이 증가해 다시 넣을 필요가 없다.
두 코드를 해석 하면 반복문에 사용될 변수 i 를 선언해 i가 1 씩 증가하고 i가 10 까지 커지면 반복이 종료된다. 해당 코드를 실행하면 다음과 같은 결과를 확인할 수 있다.
while 문
while 은 위의 for 문 보다 간단하다. 괄호 안의 조건이 참(true) 일 경우 계속 반복이 실행된다. 위의 for 문 코드를 while 로 작성하면 다음과 같이 작성할 수 있다.
let i = 1;
while(i <= 10){
console.log(i);
i++;
};do…while 문
do…while 은 while 과 같이 조건이 참(true) 일 때 계속 반복되는 것은 동일하지만, 한 번은 무조건 실행 된 후 반복된다는 점이 다르다.
let x = false;
while(x){
console.log('실행 테스트'); // 이 코드는 실행되지 않는다.
};
do{
console.log('실행 테스트'); // 이 코드는 실행 된다.
}while(x);오늘은 JavaScript 의 기본이며, 프로그래밍을 시작 했다 할 수 있을 JavaScript의 조건문과 반복문을 알아보았다.
이 두 요소는 제대로 배워야 하는데 프로그래밍을 할 때 계속 사용 되기 때문이다.
특히, 반복문은 잘 활용하면 같은 동작을 하는 코드 임에도 최소한의 줄 수로 실행하게 하고 계속 사용될 알고리즘을 작성할 때도 중요하다. 거기에 더해 Object 와 Array 를 다룰 때 아마 계속 사용하게 될 것 이다.
지금도 회사에서 코딩을 할 때 기존의 코드를 반복문을 활용해 줄여 나갈 때 그 쾌감과 즐거움이 대단한데 다른 분들도 그 기분을 느꼈으면 좋겠다. 👍
조건문은 그냥 코딩의 시작이자 끝일 것이다. 하나의 코드를 작성할 때 if 를 사용하지 않는 경우가 없을 정도다.
여튼 변수, 데이터 타입, 반복문과 조건문 까지만 배웠어도 변수의 값을 다루는 다양한 코드를 작성할 수 있게 된 것이다.