[JavaScript] for...in문, for...of문, forEach문

 

 

---

목차
 
1. for 문
2. for...in 문
3. for...of 문
4. forEach문

---

 
 

1. for 문

---

반복문은 같은 명령문은 여러번 반복하는 구문이다. 대표적으로 for문이 있다.

for (let i = 0; i < 5; ++i) {
  console.log(i + "번째 출력");
}

// output:
// 0번째 출력
// 1번째 출력
// 2번째 출력
// 3번째 출력
// 4번째 출력

 

for 문의 구조는 아래와 같다.

• let i = 0; → 초기화 (1)
• i < 5; → 조건식 (2)
• console.. → 실행문 (3)
• ++i → 증감문 (4)

for 문의 초기화 부분에서 선언된 변수는 for문 외부에서 접근이 불가하다. 만약 접근하고 싶다면 외부에서 먼저 선언하면 된된다.

let i;
for (i = 0; i < 5; ++i) {
  console.log(i + "번째 출력"); // 결과는 위와 같다.
}

console.log(i); // 5

 

 

 

2. for...in문

---

for...in 문과  for...of문은 배열, 객체, 문자열 등과 같은 반복 가능한 객체의 값을 하나씩 가져와 반복할 수 있게 한다.

for...in문은 객체의 key를 하나씩 가져온다.

const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}

for (const key in obj) {
  console.log(obj[key]);
}

// output:
// value1
// value2
// value3

 
 
 
배열과 문자열도 값마다 index(key)를 가지고 있기때문에 for...in문을 사용할 수 있다.

하지만 아래와 같은 문제점이 발생할 수 있다.

const arr = [0, 1, 2];

for (const i in arr) {
  console.log(arr[i + 1]);
}

//output:
// undefined
// undefined
// undefined

const str = 'str';

for (const i in str) {
  console.log(str[i + 1]);
}

//output:
// undefined
// undefined
// undefined

 

 

분명 인덱스에 1을 더해서 실행했을 뿐이니 기대되는 출력값은 1, 2, undefined와 t, r, undefined일 것이다.

하지만 여기서 i는 number 타입이 아니라 string 타입이기 때문에 결국, '1'+1연산의 결과는 '11'이 된다. 따라서 모두 undefined가 출력되는 것이다.

이를 방지하기 위해 아래와 같은 트릭을 사용할 수도 있다.

for (const i in arr) {
  console.log(arr[+i + 1]);
}

//output:
// 1
// 2
// undefined

 
문자열에 + 기호를 붙이면 number타입으로 자동 형변환을 하기 때문에 가독성이 좋지 못하다고 생각된다면 그냥 일반 for 문을 사용하면 된다.
 

 

3. for...of

---

for...of 문은 iterable한 속성을 지닌 String, Array, TypedArray, Map, Set에서 값을 하나씩 가져온다.

 

하지만 객체는 iterable이 아니기 때문에 사용할 수 없다.  따라서 Object.keys(object) 혹은 Object.values(object)를 통해 배열로 바꿔서 값을 가져올 수 있으며 Object.entries(object)를 이용하면 enumerable 속성의 key와 value 배열을 동시에 가져올 수 있다.

const obj = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3',
}

for (const value of obj) { // TypeError: obj is not iterable
  console.log(value);
}

for (const key of Object.keys(obj)) {
  console.log(key);
}
// output:
// key1
// key2
// key3

for (const value of Object.values(obj)) {
  console.log(value);
}
// output:
// value1
// value2
// value3

for (const [key, value] of Object.entries(obj)) {
  console.log(key + ': ' + value);
}
// output:
// key1: value1
// key2: value2
// key3: value3

 
for...of 문은 iterable하지 못한, 즉 Symbol.iterator key 속성을 지니고 있지 않으면 사용할 수 없다. 유사 배열이 그 종류 중 하나이다.

 

 

 

*유사배열객체(Array-like Objects)

유사 객체 배열은 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다.  JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다.

 

 

 

예시

---

HTML

<div class="text">Hello</div>
<div class="text">World</div>
<div class="text">I'm</div>
<div class="text">Programmer</div>

 

 

 

JavaScript

const texts = document.querySelectorAll('.text');
console.log(texts);

 

 

 

결과값

 

 

 

 

배열처럼 보이지만 풀어보면 아래와 같이된다. 

{
  0: div.text,
  1: div.text,
  2: div.text,
  3: div.text,
  length: 4,
}

 

 

 

즉 배열같이 생겼지만 객체이기 때문에 유사 배열 객체라고 한다. 

유사 배열 객체와 일반 객체의 중요한 차이는 배열의 forEach, map, filter, reduce 같은 메서드를 사용할 수 없다는 것이다. 위와 같은 메서드를 사용하고 싶다면 Array.from() 메서드를 사용하면 된다.

 

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다. - MDN

 

const texts = document.querySelectorAll('.text');
Array.from(texts).map((text) => console.log(text));

 

 

 

4. forEach문

---

foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드이다. (ES6부터는 Map,Set 지원)

forEach문은 배열의 요소들을 반복하여 작업을 수행할수 있다. foreach구문의 인자로 callback함수를 등록할수 있고 배열의 각 요소들이 반복될 때 이 callback 함수가 호출된다. callback 함수에서 배열요소의 인덱스와 값에 접근할수 있다.

let arr = ['가','나','다','라'];

arr.forEach(function(item, i ,arr2){
    console.log(item, i, arr2[index+1]);
})

//첫번쨰 인수는 배열의 각각의 item
//두번쨰 인수는 배열의 index
//세번째 인수는 배열 그자체

 
 
 
for..of와 forEach() 예제

---

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];

// for(const movement of movements) {
  for(const [i, movement] of movements.entries()){
    if(movement > 0) {
      console.log(`Movement ${i+1}: You deposited ${movement}`);
    } else {
      console.log(`Movement ${i+1}: You withdrew ${Math.abs(movement)}`);
    }
}



console.log('------------------forEach----------------------');
movements.forEach(function(mov, i, arr) {
  if(mov > 0) {
    console.log(`Movement ${i+1}: You deposited ${mov}`);
  } else {
    console.log(`Movement ${i+1}: You withdrew ${Math.abs(mov)}`);
  }
});

// 0: function(200)
// 1: function(450)
// 2: function(400)
// ...

 

*Math.abs() : 숫자의 절대값을 반환하는 메서드

 

 

 

 

결과값