자주쓰는 배열 순회 메소드 정리

js를 쓰면서 배열, 객체를 순회하는 일이 많은데, 이때 매번 헷깔리는 메소드들을 한번 정리해보는 시간을 가져보자

배열순회

**forEach

const arr1 = ["ktw", "ldk", "jjh"];
arr1.forEach((e,i) => { console.log(e,i) });
// "ktw" 0
// "ldk" 1
// "jjh" 2

**map

const arr1 = [1,2,3,4,5]
const arr2 = arr1.map(e => e*2) 
// arr1은 그대로 [1,2,3,4,5]
// arr2는 [2,4,6,8,10]

*map의 3번째 인자에 본인 array값을 넣을수있음

const arr2 = arr1.map(el,index,array) =>  array.map(v => v*2));
// [[2,4,6,8,10],[2,4,6,8,10],[2,4,6,8,10],[2,4,6,8,10],[2,4,6,8,10]]
// arr1배열 자체의 값을 2배로 늘린다음 행의 개수만큼 늘림

**filter

const arr1 = [1,2,3,4,5]
arr2 = arr1.filter( e => e > 3)
// arr1은 그대로 [1,2,3,4,5]
// arr2는 [4,5]

reduce

??? 제대로 공부하기

for in (배열, 객체 모두 사용가능)

• 객체의 key값에 접근은 가능하나 value에 접근하는건 불가능하다 따라서 value에 접근하려면 아래처럼 for in문 안에서 obj[v]로 접근해야한다
• 배열에서도 사용가능

const obj = {
    id:1,
    name:"ktw",
    old:28
}
const arr = [10,20,30]

for(let v in obj){ console.log(v,obj[v]) }
// id 1
// name ktw
// old 28

for(let v in arr){ console.log(v,arr[v]) }
// 0 10
// 1 20
// 2 30

for of (배열에서만 사용가능)

• Symbol.iterator을 가지는 컬렉션에 대해 사용가능 (주로 배열인거같음)
• 객체에서 사용불가능

const arr1 = [1,2,3,4,5];
const obj1 = {name:"ktw", old:28}

for(let v of arr){ console.log(v) } // 1,2,3,4,5
for(let v of obj){ console.log(v) } // Uncaught TypeError: obj is not iterable

some

배열안의 객체가 콜백 메소드의 조건을 하나라도 만족하면 true, 아니면 false

const arr1 = [1,2,3,4,5,6];
arr1.some(e => e>0) //true
arr1.some(e => e>3) //true
arr1.some(e => e>7) //false

every

배열안의 객체가 콜백 메소드의 조건을 모두 만족하면 true, 아니면 false

const arr1 = [1,2,3,4,5,6];
arr1.every(e => e>0) //true
arr1.every(e => e>3) //false

객체순회

Object.keys(), Object.values(), Object.entries()

• 객체의 key값만, value값만 따로 추출해서 배열로 만들거나 [key,value]형태의 배열로 만들어주는 메소드

const obj = {
  name : "ktw",
  id : "1",
  old : 28,
}

const keys = Object.keys(obj) // ["name", "id", "old"]
const values = Object.values(obj) // ["ktw", "1", 28]
const entries = Object.entries(obj) // [["name","ktw"], ["id","1"], ["old",28]]

for(let v in keys){ console.log(v, keys[v]) } 
// 0 "name" // 1 "id" // 2 "old"