[JavaScript] 반복문을 알아보자

[ JavaScript 반복문 ]

1. for : 고전적인 for문

2. for(...in...) : 객체 순회

3. for(...of...) : 이터러블 순회

※ 이터러블에는 (String, Array, Map, Set 등이 있다.) 이터러블은 차후에 다시 알아보자

4. forEach(): 배열 순회 전용 메서드

5. while : 고전적인 while문

6. do while : 고전적인 do...while문

7. Object 객체 메서드: 객체 순회 전용

8. Array.prototye 메서드 : 배열 전용

9. Jquery 사용시 가능한 .each()

 

현재 내가 주로 사용하며 공부해야 할 것은 2번, 3번, 4번 이며, 이것에 대해서 천천히 알아보자

※ 반복문은 말 그대로 반복을 하기 때문에 모든 수행조건을 한번씩 실행 한다.

 

[ for(...in...) ]

<예제 1>

let test = {

    name : "Kim",

    gender : "male"

};


for(let key in Object) {

    // 반복 수행 할 코드

    console.log(key); // name, gender (순서대로 하나씩 출력)

    console.log(test[key]);  // Kim, Male (순서대로 하나씩 출력)

};

 

예제1을 보면 test라는 Object에 반복문 for(...in...)을 사용하여 console.log() 함수를 반복 실행 해보았다.

 

  - key = test라는 Object의 키(key)

  - test[key] = test라는 Object의 키(key)에 해당하는 값(value);

 

 

 

[ for(...of...) ]

<예제 2>

let test1 = [10, 20, 30];



for(let item of test1) {

    console.log(item); // 10, 20, 30 (순서대로 하나씩 출력)

    console.log(test1[item]);  // undefined

};

 

예제 2를 보면 test1 이라는 Array에 반복문 for(...of...)을 사용하여 console.log() 함수를 반복 실행 해보았다.

 

  - item = test1이라는 Array안에 있는 요소이다.

  - test1[item] = test1이라는 Array는 Obejct 처럼 (key : value)쌍이 아니기 때문에 item으로 접근이 불가능하다.

 

 

 

[ forEach() ]

<예제 3>

let test1 = [10, 20, 30];



test1.forEach(function(value, index, array) {

    console.log(value);  // 10, 20, 30 (순서대로 하나씩 출력)

    console.log(index);  // 0, 1, 2 (순서대로 하나씩 출력)

    console.log(array);  // [10, 20, 30]

    console.log(array[index]);  // 10, 20, 30 (순서대로 하나씩 출력)

});

 

예제 3을 보면 test1 이라는 Array에 반복문 forEach()를 사용하여 console.log() 함수를 반복 실행 해보았다.

 

  - value = test1이라는 Array안에 있는 요소이다.

  - index = test1이라는 Array안에 있는 요소의 index이다.

  - array = test1이라는 Array이다.

  - array[index] = test1이라는 Array안에 index에 해당하는 요소이다.