[javascript] for in, for of, forEach

 

for in문

---

for in문은 객체의 반복문으로 객체의 프로퍼티를 순회하며 작업을 수행한다. 이 때, 열거가 가능한 ([[Enumerable]]속성이 true인) 객체만 사용이 가능하다.

객체의 key값에 접근할 수 있으며, 이를 이용하여 속성값을 출력하거나 저장할 수 있다.

 

 

예제

const obj = {
  name: 'nabi',
  age: 2,
  type: 'korean shothair',
}

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

//name:nabi
//age:2
//type:korean shothair

 

 

const list = {
  person1: {
    id: 1,
    name: "kim",
    age: 20,
  },
  person2: {
    id: 2,
    name: "lee",
    age: 22,
  },
  person3: {
    id: 3,
    name: "park",
    age: 21,
  },
}


const posts = []
for(const key in list){
  posts.push(list[key])
}

console.log(posts)

//[{id: 1, name: 'kim', age: 20},{id: 2, name: 'lee', age: 22},{id: 3, name: 'park', age: 21}]

 

 

 

 

for of문

---

for of문은 반복 가능한(iterable한) 객체에 사용할 수 있는 반복문이다.

iterable 객체는 배열, 문자, Map, Set, NodeList 등이 있다.

for of문은 주로 배열 안의 값들을 하나씩 처리하고자 할 때 사용된다.

 

 

예제

const name = ['lee', 'kim', 'park', 'choi'];

for(let item of name){
  console.log(item)
}

//lee
//kim
//park
//choi

 

 

const list = [
  {
    id: 1,
    name: "kim",
    age: 20,
  },
  {
    id: 2,
    name: "lee",
    age: 22,
  },
  {
    id: 3,
    name: "park",
    age: 21,
  },
]


const posts = []
for(let item of list){
  posts.push(item)
}

console.log(posts)

//[{id: 1, name: 'kim', age: 20},{id: 2, name: 'lee', age: 22},{id: 3, name: 'park', age: 21}]

 

 

 

 

forEach()

---

forEach는 배열 전용 메서드로 배열을 순회하여 반복 실행할 때 사용한다.

forEach의 콜백함수 파라미터에는 현재 요소값(currentElement), 현재 요소 인덱스(index), 원본 배열(array)가 들어간다.

 

 

 

예제

const list = ['철수', '영희', '길동'];

list.forEach((value, index, array)=>{
  console.log(`index: ${index} value: ${value} array: ${array}`)
})

//index: 0 value: 철수 array: 철수,영희,길동
//index: 1 value: 영희 array: 철수,영희,길동
//index: 2 value: 길동 array: 철수,영희,길동

 

const list = [
  {
    id: 1,
    name: "kim",
    age: 20,
  },
  {
    id: 2,
    name: "lee",
    age: 22,
  },
  {
    id: 3,
    name: "park",
    age: 21,
  },
]


const posts = []
list.forEach((value, index)=>{
  posts.push({id:value.id, name:value.name, age:value.age})
})

console.log(posts)

//[{id: 1, name: 'kim', age: 20},{id: 2, name: 'lee', age: 22},{id: 3, name: 'park', age: 21}]

 

 

 

성능은 forEach > for of > for in 순서대로 속도가 빠르다고 하니 참고해서 사용하면 될 듯 하다.