자바스크립트는 반복문인 for 문, while 문, do... while 문을 제공한다. 그 외에도 반복문을 대체할 수 있는 다양한 기능을 제공한다.
반복문(Loop)
for 문
for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.
for(초기화식; 조건식; 증감식) {
조건식이 참인 경우 반복할 코드;
}for 문의 괄호 안에는 세미콜론으로 구분되는 세 가지 항목이 있다.
for(let i = 0; i < 2; i++) {
console.log(i);
}
// 0
// 1위의 예시를 살펴보면, 가장 먼저 초기화식인 let i = 0; 이 실행된다. 그 후 i < 2;라는 조건식이 실행되는데, 현재 i의 값이 0이므로 조건식의 결과는 true이므로 console.log(i) 코드가 실행된다. 코드 실행이 종료되면 증감식 i++가 실행되어 i의 값은 1이 된다. 이렇게 반복하다가 조건식의 평가가 false일 때, 즉 i의 값이 2가 될 때 for 문은 종료된다.
📌 for 문에서 초기화식, 조건식, 증감식 모두 생략한다면 무한루프가 된다.
for(;;) {
// 코드가 무한 반복됨
}👉 중첩 for 문
for 문 안에 for 문을 중첩해서 사용할 수 있다.
for(let i = 1; i < 10; i++) {
for(let j = 1; j < 10; j++) {
console.log(i, j, i*j);
}
}
// 1 1 1
// 1 2 2
// 1 3 3
// 1 4 4
// 1 5 5
// 1 6 6
// 1 7 7
// 1 8 8
// 1 9 9
// ...
// 9 7 63
// 9 8 72
// 9 9 81예시로 구구단을 출력해보았다.
1. 첫 번째 for 문의 조건식을 실행시켜 두 번째 for 문으로 들어가고, 두 번째 for 문이 실행된다.
2. 두 번째 for 문의 조건이 모두 완료되면 첫 번째 for 문으로 돌아가고, 두 번째 for 문의 조건식은 초기화된다.
3. 이 과정을 반복하여 첫 번째 for 문의 조건식이 false가 되면 for 문은 종료된다.
while 문
while 문은 조건식의 평가 결과가 true이면 코드 블록을 반복 실행한다. for 문은 반복 횟수가 명확할 때 사용하고 while 문은 반복 횟수가 불명확할 때 주로 사용한다.
while(조건식) {
// 조건식이 참이면 반복할 코드
}조건문의 평가 결과가 false가 되면 코드 블록을 실행하지 않고 종료한다.
let i = 0;
while(i < 3) {
console.log(i);
i++;
}
// 0
// 1
// 2📌 while 문에서 조건식의 평가 결과가 언제나 true이면 무한루프가 된다.
while(true) {
// 코드가 무한 반복됨
}무한루프에서 탈출하려면 코드 블록 내에 if 문으로 탈출 조건을 만들고 break 문을 사용한다.
let i = 0;
while(true) {
console.log(i);
i++;
if(i === 3) break; // i의 값이 3이 되면 반복문을 빠져나온다.
}
// 0
// 1
// 2do... while 문
do... while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다.
do {
// 실행할 코드
} while(조건식);코드가 먼저 실행되고, 조건식의 평가 결과가 true인 동안에 코드는 계속 실행된다. do... while 문은 조건식의 평가 결과에 상관없이 코드 블록을 최소한 한 번이라도 실행하고 싶을 때 사용한다.
let i = 0;
do {
console.log(i);
i++; // i의 값이 3보다 작으면 계속 실행된다.
} while(i < 3);
// 0
// 1
// 2반복문 탈출하기 - break 문
while 문에서 살펴봤듯이 break 문은 코드 블록을 탈출한다.
중첩 for 문의 내부 for 문에서 break를 실행하면 내부 for 문을 탈출하고 외부 for 문으로 진입하는데, 외부 for 문까지 탈출하려면 레이블 문을 사용한다.
🔎 레이블 문: 식별자가 붙은 문
outer: for(let i = 0; i < 3; i++) {
for(let j = 0; j < 3; j++) {
if(i + j === 3) break outer; // i + j === 3이면 outer 탈출
console.log(`${i}, ${j});
}
}
console.log('Done!');
// 0, 0
// 0, 1
// 0, 2
// 1, 0
// 1, 1
// Done!📢 레이블 문은 중첩 for 문을 탈출할 때 유용하지만 그 밖의 경우에는 권장하지 않는다. 레이블 문을 사용하면 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 커지기 때문이다.
다음 반복으로 넘어가기 - continue 문
continue 문은 현재 진행 중인 반복을 멈추고 바로 다음 반복을 실행시킨다. break 문처럼 반복문을 탈출하지는 않는다.
for (let i = 0; i < 5; i++) {
if (i === 3) continue; // i의 값이 3이면 실행을 중단하고 반복문의 증감식으로 이동한다.
console.log(i);
}
// 0
// 1
// 2
// 4배열 메서드
forEach
forEach 메서드는 Array(배열) 객체에서 사용할 수 있는 메서드이다. 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다.
const numbers = [1, 2, 3];
const result = [];
// numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출
numbers.forEach(item => result.push(item + 1));
console.log(result);
// [2, 3, 4]forEach 메서드는 콜백 함수를 호출할 때 배열의 요소값과 인덱스, 호출한 배열을 순차적으로 전달한다.
const number = [1, 2, 3];
numbers.forEach((item, index, arr) => {
console.log(item, index, arr);
});
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]
forEach 메서드는 break, continue 문을 사용할 수 없고, 배열의 모든 요소를 순회한다.
map
map 메서드는 forEach 메서드처럼 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. 둘의 차이점은 forEach 메서드는 단순히 반복문을 대체하기 위한 메서드이고, map 메서드는 요소값을 다른 값으로 매핑한 새로운 배열을 생성한다는 점이다.
// map 사용
const numbers = [1, 2, 3];
const result = numbers.map(item => item + 1);
console.log(result);
// [2, 3, 4]// forEach 사용
const numbers = [1, 2, 3];
const result = numbers.forEach(item => item + 1);
console.log(result);
// undefined같은 코드를 map 메서드와 forEach 메서드를 사용하여 출력하였다. map 메서드는 배열의 모든 요소에 콜백 함수를 실행시켜 새로운 배열을 반환한다는 점을 알 수 있다.
filter
filter 메서드 또한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. 하지만 콜백 함수의 반환값이 true인 요소들만 추출한 새로운 배열을 반환한다.
const numbers = [1, 2, 3, 4, 5, 6];
const result = numbers.filter(item => item % 2 === 0);
console.log(result);
// [2, 4, 6]reduce
reduce 메서드는 콜백 함수의 반환값을 다음 순회 시 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다.
reduce 메서드는 첫 번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받는데, 콜백 함수에는 초기값(콜백 함수의 이전 반환값), 처리할 요소값, 인덱스, reduce 메서드를 호출한 배열이 전달된다.
const result = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0);
console.log(result);
// 10 (0(초기값) + 1 + 2 + 3 + 4)reduce 메서드의 두 번째 인수인 초기값은 생략할 수도 있지만, 에러가 발생할 수 있으니 언제나 초기값을 전달하는 것이 안전하다.
객체 프로퍼티 열거
for ...in 문
객체의 모든 프로퍼티를 순회하며 열거하려면 for ...in 문을 사용한다.
const city = {
name : 'Seoul',
code : 11
}
// city 객체의 프로퍼티를 모두 순회하면서 프로퍼티 키를 key 변수에 할당한 후 코드를 실행
for (const key in city) {
console.log(`${key} : ${city[key]}`);
}
// name : Seoul
// code : 11for ...in 문은 객체의 프로퍼티 뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거한다. 하지만 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티만 순회하며 열거한다.
객체 메서드
객체 자신의 고유 프로퍼티만 열거하기 위해서는 Object.keys/values/entries 메서드를 사용한다.
Object.keys
Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.
const city = {
name : 'Seoul',
code : 11
}
console.log(Object.keys(city));
// ['name', 'code']Object.values
Object.values 메서드는 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환한다.
const city = {
name : 'Seoul',
code : 11
}
console.log(Object.values(city));
// ['Seoul', 11]Object.entries
Object.entries 메서드는 객체 자신의 열거 가능한 프로퍼티 [키, 값]을 배열로 반환한다.
const city = {
name : 'Seoul',
code : 11
}
console.log(Object.entries(city));
// [['name', 'Seoul'], ['code', 11]]이터러블 순회
for ...of 문
for ...of 문은 ES6에서 도입된 문법으로 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. for ...of 문은 이터러블 객체(자료를 반복할 수 있는 객체)에서만 사용할 수 있다. 배열, 문자열, Map, Set 등이 이터러블 객체이다.
const number = [1, 2, 3];
for (const item of number) {
//item 변수에 1, 2, 3이 할당
console.log(item);
}
// 1
// 2
// 3정리
for 문: 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행while 문: 조건식의 평가 결과가 true이면 코드 블록을 반복 실행. 반복 횟수가 명확할 때 for 문 사용, 반복 횟수가 불명확할 때 while 문 사용do... while문 : 코드 블록을 먼저 실행하고 조건식을 평가. 조건식의 평가 결과에 상관없이 코드 블록을 최소한 한 번이라도 실행하고 싶을 때 사용break 문: 코드 블록 탈출 /continue 문: 현재 진행 중인 반복 멈추고 바로 다음 반복 실행forEach: 배열 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출map: 배열의 요소값을 다른 값으로 매핑한 새로운 배열 생성filter: 콜백 함수의 반환값이 true인 요소들만 추출한 새로운 배열을 반환reduce: 콜백 함수의 반환값을 다음 순회 시 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환for ...in 문:객체의 모든 프로퍼티를 순회하며 열거Object.keys: 객체의 프로퍼티 키를 배열로 반환Object.values: 객체의 프로퍼티 값을 배열로 반환Object.entries: 객체의 프로퍼티 [키, 값]을 배열로 반환for ...of문 : 이터러블 객체(자료를 반복할 수 있는 객체)에서만 사용
참고
모던 자바스크립트 Deep Dive (도서)
