[Javascript] 반복문 정리

반복문에는 다음의 종류가 있다.

 

for

for in

for of

forEach

 

while 문

while

do while

 

Object 객체 메서드

Object.keys

Object.values

Object.entries

 

Array.prototype 메서드

배열.forEach

배열.map

배열.filter

 

// for
for (let i = 0; i < 5; i++){
    console.log(i * 2);
}

0
2
4
6
8

// for in : 객체의 프로퍼티 키 열거 전용
// for (const key in 객체) {반복 수행 코드 ...}
// 해당 객체가 상속받는 Prototype 체인 상의 모든 Property 키를 열거한다. (Enumerable이 False인 경우는 제외)
const obj = {
    name: "james",
    job: "Police"
}

for (const key in obj) {
    console.log(`${key} : ${obj[key]}`)
}

name : james
job : Police

// for of
// for (const elem of iterable) { 반복 수행 코드 }
const arr = [10, 20, 30]
for (const elem of arr) {
    console.log(elem)
}

10
20
30

// forEach() : 배열 순회 전용 메서드
// 배열.forEach(function(value, index, array) {반복 수행 코드})
arr2 = [10, 20, 30]
arr2.forEach((value, index, array) => { // 매개변수로 value, index, array가 들어감
    console.log(`${index} : ${value}`); // 콜백 함수 호출
})

0 : 10
1 : 20
2 : 30

// while
let num = 0;
while (num < 3) {
    console.log(num);
    num++;
}

0
1
2

// do while
do {
    console.log("1회 실행될 예정")
} while (false);

1회 실행될 예정

// Object 객체 메서드
// Object.values : 객체의 프로퍼티 값을 배열로 반환해준다.
console.log(Object.values({
    name: "Hodong",
    job: "Gagman"
}));

[ 'Hodong', 'Gagman' ]

// Array.prototype 메서드 : 배열 전용

// 1) 배열.forEach( (value, index, array) => { 반복 수행 코드} )
//    : 배열의 길이만큼 반복하여 콜백 함수를 호출한다.
//    : 콜백함수의 매개변수로 value, index, array가 들어온다.
[1, 2, 3, 4].forEach((value, index, array) => {
    console.log(value);
});

1
2
3
4

// 2) 배열.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가 짝수인 경우에 Array로 반환
})

console.log(filter_result)  // [2, 4]

1
2
3
4
[ 2, 4 ]

// 3. 배열.map((value, index, array) => { 반복 수행 코드 } )
//    : forEach와 다른 점 : 각 콜백함수에서 return하는 값들로 새로운 배열을 만들어 반환한다.
const map_result = [1, 2, 3, 4].map((value, index, array) => {
    console.log(value); // 1, 2, 3, 4 출력
    return value * 10;  // 각 Element에 10을 곱하여 배열로 Return
})

1
2
3
4
[ 10, 20, 30, 40 ]

// break    : 코드 블럭에서 탈출
// continue : 코드 블럭 중 반복 중단하고 다음 반복으로 넘어감

// 추천 Method
// 배열 : 배열.forEach()
// 객체 : Object.keys(객체)

 

 

 

 

Ref : https://curryyou.tistory.com/202