모던 자바 스크립트 Deep Dive 를 읽고 정리한 글 입니다.
제어문
조건에 따라 코드 블록을 실행(조건문) 하거나 반복 실행(반복문) 할 때 사용
코드의 실행 흐름 인위적 제어 가능
가독성 저하
8.1 블록문
블록문 (코드 블록, 블록)
- 0개 이상의 문을 중괄호로 묶은 것
- 블록문을 하나의 실행 단위로 취급
- 블록문의 끝에서는 세미 콜론을 붙이지 않음
// 블록문
{
var foo = 10;
}
//제어문
var x = 1;
if (x<10) {
x++;
}
// 함수 선언문
function sum(a, b) {
return a + b;
}
8.2 조건문
조건문
주어진 조건식의 평가 결과에 따라 블록문의 실행을 결정
조건식은 불리언 값으로 평가 될 수 있는 표현식
if ... else 문
주어진 조건식의 평가 결과 논리적 참, 거짓에 따라 실행할 코드 블럭 결정
조건식은 불리언 값으로 평가 -> 암묵적 타입 변환\
else if문은 여러번 사용 가능
if (조건식) {
// 조건식 1이 참이면 이 코드 블럭 실행
} else if (조건식2) {
// 조건식 2가 참이면 이 코드 블럭 실행
} else {
// 조건식 1과 2 모두 거짓이면 이 코드 블럭 샐행
}
코드 블록 내의 문이 하나라면 중괄호 생략 가능
var num = 2;
var kind;
if (num > 0) kind = '양수';
else if (num < 0) kind = '음수';
else kind = '영';
consloe.log(kind); //=> 양수
if... esle문 => 삼항 조건 연산자
num > 0 ? '양수' : '음수" 는 표현식 => 삼항 조건 연산자는 값으로 평가되는 표현식 => 변수 할당 가능
if ... else 문 는 표현식 아님 => 값으로 사용할 수 없음 => 변수에 할당 불가능
- 단순 값의 결정 : 삼항 조건 연산자
- 여러 줄의 문 : if ... else
// x가 짝수이며 result 변수에 '짝수'를 할당하고, 홀수이면 문자열 '홀수'를 할당
var num = 2;
var result;
if (x % 2) { // 2 % 2는 0이다. 이때 0은 false로 암묵적 변환
result = '홀수';
} else {
result = '짝수';
}
console.log(result); // => 짝수
-----------------------------------------------------------------
// 두 가지 경우의 수를 갖을 때
var x = 2;
//0은 false로 취급
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // => 짝수
-----------------------------------------------------------------
// 세 가지 경우의 수를 가질 때
var num = 2;
//0은 false로 취급
var kind = num ? (num > 0 ? '양수' : '음수' ) : '영';
console.log(kind); // => 양수
switch 문
주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름 옮김
- case 문 : 상황을 표현하는 표현식
- default 문 : 일치하는 case 문이 없을 때, 선택 사용
불리언 값보다 문자열, 숫자 값의 표현식이 더 많음
참, 거짓 보다 다양한 상황에 따라 실행할 코드 블록 결정할 때 사용
가독성을 높이기 위해서 if.. else문 사용 우선
break 문이 없다면 case 문의 표현식과 일치하지 않더라도 실행 흐름이 다음 case 문으로 연이어 이동
default 문에는 break 문을 생략
switch (표현식) {
case 표현식1:
switch 문의 표현식과 표현식1이 일치하면 실행될 문;
break;
case 표현식2:
switch 문의 표현식과 표현식2가 일치하면 실행될 문;
break;
default:
switch 문의 표현식과 일치하는 case 문이 없을 때 실행될 문;
}
폴스루
문을 실행한 후 switch문을 탈출하지 않고 모든 case문과 default문 실행
break 문을 생략한 폴스루가 유용한 경우도 있음
8.3 반복문
반복문
조건식의 평가 결과가 참인 경우 코드 블록 실행
그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록 다시 실행
조건식이 거짓일 때까지 반복
반복문 대체 기능
forEach 메서드 : 배열 순회
for ... in 문 : 객체의 프로퍼티 열거
for ... of 문 : 이터러블 순회
for 문
조건식이 거짓으로 평가 될 때까지 코드 블록 반복 실행
반복 횟수 명확
변수 선언문, 조건식, 증감식 선택적 사용
어떤 식도 선언하지 않으면 무한루프
for (변수 선언문 또는 할당문; 조건식; 증감식 ) {
조건식이 참인 경우 반복 실행될 문;
}
이중 중첩 for 문
for (var i = 1; i <= 6; i++) {
for (var j = 1; j <= 6; j++) {
if (i + j === 6)
console.log ('[${i}, ${j}]');
}
}
중첩된 for 문의 내부 for문에서 break 문을 실행 => 내부 for 문을 탈출하여 외부 for 문으로 진입
외부 for 문 탈출 => 레이블 문 사용
// outer 라는 식별자가 붙은 레이블 for문
outer: for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
// i + j === 3 이면 outer라는 식별자가 붙은 레이블 for문을 탈출
if (i+j === 3) break outer;
console.log('inner [${i}, ${j}');
}
}
console.log('Done!');
whlie 문
조건식의 평가가 참이면 코드 블록을 계속해서 반복 실행
반복 횟수 불명확
- 조건문의 평가 결과 거짓 : 코드 블록 실행하지 않고 종료 => 암묵적 타입 변환
- 조건문의 평가 결과 참 : 무한 루프 => if 문으로 탈출 조건을 만들고 break 문으로 코드 블록 탈출
var count = 0;
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행
while (count < 3) {
console.log(count); // => 0 1 2
count++l
}
do ... while 문
코드 블록을 먼저 실행하고 조건식 평가
코드 블록은 무조건 한 번 이상 실행
var count = 0;
// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행
do {
consloe.log(count); // => 0 1 2
count++;
} while (count < 3);
8.4 break 문
break 문
레이블 문, 반복문, switch 문 코드 블록 탈출
반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복 회피
반복문, switch 문에 사용시 break 문에 레이블 식별자 지정하지 않음
그 이외 사용 시 문법 에러(SyntaxError) 발생
레이블 문
식별자가 붙은 문
프로그램의 실행 순서 제어
이중 중첩 for 문 이외의 경우에는 비권장
// foo라는 레이블 식별자가 붙은 레이블 문
foo: console.log('foo');
문자열에서 특정 문자의 인덱스 검색 예시
var string = 'Hello World.';
var search = 'l';
var index;
// 문자열은 유사 배열이므로 for문으로 순회 가능
for (var i = 0; i < string.length; i++) {
// 문자열이 개별문자가 'l' 이면
if (string[i] ==== search) {
index = i;
break; // 반복문 탈출
}
}
console.log(index); // => 2
// 혹은 String.prototype.indexOf 메소드를 사용해도 같은 동작
cosole.log(string.indexOf(search)): // => 2
8.5 continue문
continue문
반복문의 코드 블록 실행을 현 지점에서 중단
반복문의 증감식으로 실행 흐름을 이동
break문처럼 반복문을 탈출하지 않음
- if문 내에서 실행해야 할 코드가 한 줄 : continue문 사용 지양
- if문 내에서 실행해야 할 코드가 여러 줄 : continue문 사용
// continue문을 사용 안함 : if문 내에 코드를 작성
for (var i = 0; i < string.length; i++ ) {
// l 이면 카운트를 증가
if (string[i] === search) {
count++;
//code
//code
//code
}
}
// continue문을 사용 : if문 밖에 코드 작성 가능
for (var i = 0; i < string.length; i++ ) {
// l 이 아니면 카운트를 증가시키지 않는다
if (string[i] !== search) continue;
count++;
//code
//code
//code
}
}
문자열에서 특정 문자의 개수를 세는 예
var string = 'Hello World.';
var search = 'l';
var count = 0;
// 문자열은 유사 배열이므로 for문으로 순회 가능
for (var i = 0; i < string.length; i++) {
// 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동
if (string[i] !== search) continue;
count++; // coutinue 문이 실행되면 이 문은 실행되지 않는다.
}
console.log(count); // => 3
// 혹은 String.prototype.indexOf 메소드를 사용해도 같은 동작
const regexp = new RegExp(search, 'g');
cosole.log(string.match(regexp).length): // => 3