Object

key, value 두 값에 접근할 땐 Object.entries()

for...in 문은 프로토타입으로 상속받은 속성까지 열거하는 특성이 있으므로
자칫, 뒤통수를 얻어맞기 쉽다. 그래서 가급적이면 for..in 사용은 지양하도록.

for..in 보다는 Object.entries( )

/* bad
for (const key in collection) {
  iterator(collection[key], key, collection);
} 
*/
  
😁 for of + Object.entries + 구조분해할당 😃
for (const [key, value] of Object.entries(collection)) {
  iterator(collection[key], key, collection);
}

😁Object.entries + forEach 😃 
Object.entries(generateEvents).forEach(([key, value]) => {
  

배열 안에 key, value가 담겨진 배열[ [key:'value'], ...]로 반환되기 때문에
for...of, forEach등과 함께 사용하면 된다.

단, Object.entries로 반환된 배열은 객체가 정의된 순서와 상관이 없이 나온다.
그래서 배열 순서가 쓸 곳이 있다면, sort() 도 함께 사용해야 한다.

배열에서도 이와 유사한 기능을 하는 배열.entries() 메서드가 있다.

key에만 접근할 때는 Object.keys()

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.keys(object1));
// ["a", "b", "c"]

Object.keys( ) : 객체의 key 로 이루어진 배열이 반환된다.

for...of와 함께 쓰면 순환하면서 접근할 수 있다.

value에만 접근할 때는 Object.values()

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// ["somestring", 42, false]

Object.values( ) : 객체의 value로 이루어진 배열이 반환된다.

for...of와 함께 쓰면 순환하면서 접근할 수 있다.**

특정 key 확인할 때는 hasOwnProperty

obj = new Object();
obj.name = 'colki';
obj = {prop: 'colki'}

/* 직접 소유한 obj 고유속성 */
obj.hasOwnProperty('prop');             // returns true

/* 프로토타입 상속받은 속성 */
obj.hasOwnProperty('toString');         // returns false
obj.hasOwnProperty('hasOwnProperty');   // returns false  

__.hasOwnProperty()객체의 속성이 있는 지 확인 후 boolean을 반환.
단 상속 받는 속성이 아닌 직접 가지고 있는 객체의 속성 확인.

const person = {
  name: 'hany',
  age: 20,
  gender: 'female',
  address: 'seoul'
};


for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}  

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}
  
// "name" 
// "age"
// "gender"
// "address"
  

또한 for...in으로 순환할 때 같이 사용하기도 한다.
프로토타입 상속받은 속성도 열거하는 for...in의 허점?을 방지하고 객체만의 속성을 순환하기 위해서 객체.hasOwnProperty(key) 를 사용해서 2중으로 처리해주는 것도 방법이 될 수 있다.

Array

인덱스에만 접근 할 때는 for문(순환)

인덱스 0에서 사용한 로직을 인덱스 1, 2, 3... 에도 똑같이 적용된다.
대부분 무난하게 for문을 사용한다.

앞 로직에 의해 다음 인덱스 로직이 바뀔 때는 while

var n = 0;
var x = 0;

while (n < 3) {
  n++;
  x += n;
}  
             
// 첫번째 반복; n=1 과 x=1
// 두번째 반복; n=2 과 x=3
// 세번째 반복; n=3 과 x=6
             
반복을 살펴보면, n을 x에 계속 더하게 된다.            
세번째 반복후, n<3 이라는 초건은 더 이상 참이아니가 되므로 반복은 종료된다
  
  

while은 조건문이 참일 때 반복문을 실행한다.

while (condition) { statement }

인덱스 0에서 사용한 로직의 결과가 다음 인덱스 1 에 영향을 주게 되는 경우 사용한다.

index와 value을 받을 때는 entries()

const a = ['a', 'b', 'c'];

for (const [index, element] of a.entries())
  console.log(index, element);
  // 0 "a"
  // 1 "b"
  // 2 "c"

배열.entries()
arr.entries()

object에서는 Object.entries(obj)였지만 배열에서는 구문이 간단하다.

for...of와 함께 사용해서 배열을 순회할 수 있다.

value에만 접근 할 때는 for...of

const iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
  
// 10
// 20
// 30
  
/** string에서도 사용가능하다! 😮**/
  
const iterable = "boo";

for (const value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

for...of 는 각 요소를 반복

함수 넘겨서 사용할 때는 forEach

/** 구조분해할당**/
newArray.forEach(([key, value]) => {
  iterator(value, key, collection)
})  
  
  
//  for문
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// forEach문
items.forEach(function(item){
  copy.push(item);
});

forEach는 콜백함수를 받아서 배열의 각 요소마다 실행한다.

for문(array[i]) 보다 value를 명확하게 표현할 수 있고 잘 읽힌다.

또한 매개변수 2번째인자로 index, 3번째 인자로 배열을 받을 수 있다.
그래서 forEach는 여러개의 배열에 같은 iterator 를 적용할 때 쓰면 편리하다.

단, 모든 요소에 대해 콜백함수를 모두 실행하고 리턴값을 뱉으며 종료되는 메서드이기 때문에, 만약 특정 값을 찾고 그만두는 로직을 구현하고 싶을 때 forEach를 사용한다면 무조건 배열의 마지막 요소까지 돌고 끝이 난다.. 그래서 이럴 경우에는 사용을 지양한다.

예외를 던지지 않고는 forEach( )를 중간에 멈출 수 없습니다. 중간에 멈춰야 한다면 forEach()가 적절한 방법이 아닐지도 모릅니다. -MDN-

함수를 적용해서 새 배열로 받을 땐 map

const a = [
  {a:1},
  {b:2},
  {c:2}
];

const b = a.map((o, i) => {
  o.index = i;
  return o;
});

console.log(b);  
// [{a: 1, index: 0}, {b: 2, index: 1}, {c: 2, index: 2}]

map이 두번째 인자로 index받는 것을 이용해서 
객체로 이루어진 배열에서 각 객체 요소에 key, value를 추가해줄 수 있다.

forEach와 마찬가지로
매개변수 2번째인자로 index, 3번째 인자로 배열을 받을 수 있다.
그래서 map은 여러개의 배열에 같은 iterator 를 적용할 때 쓰면 편리하다.

empty 요소 순회

추가로 배열에서 empty 요소가 있을 경우 순회방법에 따라서
empty를 조회할 수도 하지못할 수도 있다.

for, for ... of 는 empty요소도 확인하여 undefined 값이라도 리턴하지만

forEach처럼 콜백함수를 받는 고차함수는 empty value는 확인하지 않고 패스한다.

const arr = new Array(5);
arr[0] = 1;
arr[4] = 5;

console.log(arr);  
// (5) [1, empty × 3, 5]                           

https://interacting.tistory.com/145?category=777643