객체의 키를 변수로 접근하기

const info = {
  name : '김개발'
}

• info 객체에 키를 생성하고 값을 할당해주려고 한다. 키와 값은 변수를 통해 받아온다.

const verb = 'developes'
const project = 'facebook'

• 위와 같은 변수가 주어졌을 때, info 객체에 키와 값을 할당하는 방법은 2 가지가 있다.

// 1. 변수가 가지는 값에 따라 키와 값이 달라진다.
info[verb] = project

// 2. 키와 값이 항상 정해져 있다.
info.developes = 'facebook'

객체 순회하기

• 객체의 요소는 인덱스(순서)가 없다. 객체의 값은 키를 통해서만 접근이 가능하다.
• 하지만 순회 가능하다!

1. Object.keys()

• 객체의 키 목록을 배열로 리턴한다.
• 객체 내장 메서드가 아니고, 객체 생성자인 Object 가 직접 가지고 있는 메서드이다. <- 이 부분 공부해서 설명 추가하기

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

• Object.keys() 가 리턴하는 값이 배열이기 때문에 이제는 반복문을 사용할 수 있다.

const keys = Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

for (let i = 0; i < keys.length; i++) {
  const key = keys[i] // 각각의 키
  const value = obj[key] // 각각의 키에 해당하는 각각의 값

  console.log(value)
}

• ES6 에서 객체의 value 값을 배열로 반환하는 Object.values() 와 객체의 key, value 값을 배열로 반환하는 Object.entries() 가 추가되었다.

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

2. for... in

• 반복문인 for 문과 같은 종류의 문법이지만 객체와 배열을 위해 ES6 에서 추가된 문법

• 객체 순환과 배열 순환 모두 가능하다.

• 1) i를 0으로 초기화하고 2) 배열의 길이와 비교하고 3) i를 1씩 증가시킨다. 이는 자바스크립트 엔진 내부에서 자동으로 결정된다.

• 배열에서 for... in 문 사용

// for 문
const arr = ['coconut', 'banana', 'pepper', 'coriander']

for (let i = 0; i < arr.length; i ++) {
  console.log(i)
  console.log(arr[i])
} 

// for... in 문
for (let i in arr) {
  console.log(i)
  console.log(arr[i])
}

• 객체에서 for... in 문 사용

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

for (let key in obj) {
  const value = obj[key]

  console.log(key)
  console.log(value)
}