- for : 고전적인 for문
- for in : 객체의 프로퍼티 키 열거 전용
- for of : 이터러블 순회 전용
- forEach(): 배열 순회 전용 메서드
- while : 고전적인 while문
- do while : 고전적인 do...while문
- Object 객체 메서드: 객체 순회 전용
- Array.prototye 메서드 : 배열 전용
=> for(let i = 0; i < 10; i++){...반복 수행 코드...}
for (let i = 0; i < 10; i++){ console.log(i); // 0~9까지 출력 }
=> for(const key in 객체){...반복 수행 코드...}
const obj = {
name: 'curryyou',
job: 'engineer'
}
for (const key in obj){
console.log(`${key} : ${obj[key]}`);
}
// name : curryyou
// job : engineer
=> for(const item of 이터러블){...반복 수행 코드...}
const arr = [10, 20, 30];
for (const item of arr){
console.log(item); // 10, 20, 30 출력
}
=> 배열.forEach( function(value, index, array){...반복 수행 코드...} )
[10, 20, 30].forEach((value, index, array)=>{
console.log(`${index} : ${value}`); // 0 : 10, 1 : 20, 2: 30 출력
})
=> while(조건식){...반복 수행 코드...}
let num = 0;
while(num <3){
console.log(num); // 0~2 까지 출력
num++;
}
=> do{...반복 수행 코드...} while(조건식);
do{
console.log('일단 한번은 실행된다.'); // 이 코드만 한번 실행되고 반복 종료.
}while(false);
1) Object.keys(객체)
: 객체의 프로퍼티 '키'를 배열로 반환
Object.keys({name:'curryyou', job:'engineer'});
// [ 'name', 'job' ]
2) Object.values(객체)
: 객체의 프로퍼티 '값'을 배열로 반환
Object.values({name:'curryyou', job:'engineer'});
// [ 'curryyou', 'engineer' ]
3) Object.entries(객체)
: 객체의 프로퍼티 [키, 값]을 배열로 반환
Object.entries({name:'curryyou', job:'engineer'});
// [ [ 'name', 'curryyou' ], [ 'job', 'engineer' ] ]
1) 배열.forEach( (value, index, array)=>{...반복 수행 코드...} )
: 배열의 length만큼 반복하여 콜백함수를 호출한다.
: 콜백함수의 매개변수로 value에 요소값, index에 인덱스, array에 원본배열이 들어온다.
[1, 2, 3, 4].forEach((value, index, array)=>{
console.log(value); // 1, 2, 3, 4 출력
})
2) 배열.map( (value, index, array)=>{...반복 수행 코드...} )
: forEach와 동일(순회 방식, 콜백함수 매개변수 등)
: 다른점 => 각 콜백함수에서 return 하는 값들으로 새로운 배열을 만들어 반환한다.
const map_reuslt = [1, 2, 3, 4].map((value, index, array)=>{
console.log(value); // 1, 2, 3, 4 출력
return value*10; // 각 요소에 10을 곱한 값을 배열로 반환
})
console.log(map_reuslt);
// [ 10, 20, 30, 40 ]
3) 배열.filter( (value, index, array)=>{...반복 수행 코드...} )
: forEach와 동일(순회 방식, 콜백함수 매개변수 등)
: 다른점 => 각 콜백함수에서 return하는 값이 true일 때만, 그때의 value 값들로 새로운 배열을 만들어 반환한다.
const filter_result = [1, 2, 3, 4].filter((value, index, array)=>{
console.log(value); // 1, 2, 3, 4 출력
return value%2 == 0; // value가 짝수인 값들을 배열로 반환
})
console.log(filter_result);
// [ 2, 4 ]
4) 배열.reduce( (previousValue, currentValue, currendIndex, array)=>{...반복 수행 코드...}, initialValue )
: 두번째 매개변수인 initialValue값을 시작으로,
: 각 콜백함수가 return하는 값이 다음에 실행되는 콜백함수의 previousValue로 들어간다.
: 최종적으로 마지막 콜백함수가 return하는 값을 반환한다.(아래의 코드를 보면 이해가 잘 됨.)
const reduce_result = [1, 2, 3, 4].reduce((pv, cv, idx, arr)=>{
return pv + cv; // 이전 콜백함수가 리턴한 값에 현재의 요소 값을 더함(누적 개념)
}, 100); // 100을 초기값으로 줌
console.log(reduce_result);
// 110 (100 + 1 + 2 + 3 + 4 결과)
* 배열에는 이 외에도 every(), some(), find(), findIndex() 등의 메서드가 존재한다.
: 반복문과 switch문에서 사용되어 해당 코드 블럭에서 탈출시킨다.
: for문 순회 중에 break; 을 만나면 for 자체를 나가버린다(반복 종료!)
for (let i = 0; i < 10; i++){
if(i == 5){break;} // i값이 5가 되는 순간 for문 종료 => 0~4 까지만 출력
console.log(i);
}
: 해당 차수(?)의 반복을 중단하고, 다음 반복으로 넘어간다.
: for문 순회 중에 continue;를 만나면 for문 처음의 증감식/조건식 부분으로 넘어간다.
for (let i = 0; i < 10; i++){
if(i%2 === 0){continue;} // i가 짝수라면, 다음 반복으로 넘어감 => 홀수만 출력됨
console.log(i);
}
일반적인 순회용 반복문은 아래의 메서드 사용을 추천한다.
함수형 프로그래밍에 가깝기도 하고, 예상치 못한 버그를 예방할 수 있기 때문이다.
참조