반응형
1. for
기본적인 반복문.
for (let i = 0; i < 10; i++){
console.log(i); // 0~9까지 출력
}
// for 문에서 break 사용하기
for (let i = 0; i < 10; i++){
if(i == 5){break;} // i값이 5가 되는 순간 for문 종료 => 0~4 까지만 출력
console.log(i);
}
// for 문에서 continue 사용하기
for (let i = 0; i < 10; i++){
if(i%2 === 0){continue;} // i가 짝수라면, 다음 반복으로 넘어감 => 홀수만 출력됨
console.log(i);
}
2. for in
배열 뿐만이 아니라 object에서도 사용할 수 있다. Object 내 키 값을 가져오기 위해 사용되기도 한다.
const obj = {
name: 'young',
job: 'front'
}
for (const key in obj){
console.log(`${key} : ${obj[key]}`);
}
// name : young
// job : front
3. for of
string, array, map, set, DOM 컬렉션 등 iterable 객체에서 사용 가능.
const arr = [1, 2, 3];
for (const item of arr){
console.log(item); // 1, 2, 3
}
4. forEach()
배열에서 유용하다.
['a', 'b', 'c'].forEach((value, index, array)=>{
console.log(`${index}: ${value}`);
})
// 0: 'a', 1: 'b', 2: 'c' 출력
5. while
let i=1;
while (i<=10) {
console.log("Number: " + i);
i++;
}
6. do while
do{
console.log('여기가 최소 한 번은 실행됨'); // 이 코드만 한 번 실행되고 반복 종료!
} while(false);
7. Object 객체 메서드
1) Object.keys({...})
Object.keys({name:'young', job:'front'});
// [ 'name', 'job' ]
2) Object.values({...})
Object.values({name:'young', job:'front'});
// [ 'young', 'front' ]
3) Object.entries({...})
Object.entries({name:'young', job:'front'});
// [ [ 'name', 'young' ], [ 'job', 'front' ] ]
8. Array.prototype (배열 전용)
1) 배열.forEach((v, i, a) => {...반복 코드...})
[1, 2, 3, 4].forEach((value, index, array)=>{
console.log(value); // 1, 2, 3, 4 출력
})
2) 배열.map((v, i, a) => {...반복 코드...})
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((v, i, a) => {...반복 코드...})
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, currentIndex, array) => {...반복 코드...}, initailValue)
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 결과)
반응형
'웹_프론트엔드 > JavaScript' 카테고리의 다른 글
[자바스크립트] 이미지 URL을 File 또는 FileList로 변환하기 (0) | 2023.11.10 |
---|---|
[JS] 클로저란? (0) | 2023.07.25 |
[JS] 스코프(Scope)란? (0) | 2023.07.24 |
[JS] 연속된 정수 배열을 만드는 다양한 방법 (0) | 2023.07.14 |
자바스크립트 스크롤 애니메이션 넣기 - Intersection Observer API (0) | 2023.03.31 |