위코드 pre-course를 수강하면서...
자바스크립트에 대해 더 배우게 되었습니다!
제가 몰랐던 부분들이 또 나왔습니다!

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

프리스터디 시리즈에서는,객체의 값에 접근하는 법만 간단히 적어두었습니다.
그리고 key와 value를 변수로 만들수 있다는 것까지요.
이렇게 변수로 변환된 key에 접근하려면 어떻게 할까요?

먼저 사람을 구성하는 객체를 하나 만들어봅니다.

let human = {
	skin: '피부'
}

추가로 다른 장기를 넣을거에요!

let newKey = 'brain' //새로운 key 이름입니다.
let newValue = '뇌' //새로운 key에 할당될 vaule 이름입니다.

human[newKey] = newValue //첫번째 방법
human.brain = '뇌'//두번째 방법

이렇게 작성했을때, 첫번째와 두번째 방법의 특징입니다.

1. 첫번째 방법: 변수 newKey와 newValue가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해집니다.
2. 두번째 방법 : 이 경우 키와 값은 항상 정해져 있게 됩니다.

객체를 순회하는 법

이 글에서 for 문을 사용해 객체나 배열 등등을 순회하는 방법을 썼습니다.
그러나 이 방법 외에도 다른 방식으로 객체를 순회하는 방법이 있습니다!

keys(),values(),entries()

Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드입니다. 객체의 내장 메소드가 아니라 객체 생성자인 Object 가 직접 가지고 있는 메소드입니다. 사용법은 다음과 같습니다.

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

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

와! key만 따로 뽑아서 나열해준다니 멋집니다.

새로운 ES6 문법에서는 Object.keys 외에도 마찬가지로 Object생성자의 메소드인 Object.values, Object.entries 와 같은 자매품들이 추가되었습니다.

!!

Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴합니다. Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴합니다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 됩니다.

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

const entries = Object.entries(obj)

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

고마워요,ES6!!

for-in문

반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6 에서 추가된 문법입니다. 이건 객체 순회 외에도, 일반적인 배열을 순회할때도 아주 유용합니다.
for문을 그동안 많이 써본 분들이라면, 배열에 대한 for문 선언시 쓰는 for(let i = 0; i < arr.length; i ++) 이런 문법이 아주 자주 사용되는 문법이라는걸 알고계실텐데요. 이걸 간단하게 축약한 문법이 바로 다음과 같습니다.

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

i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할수 있게 만든 ES6 문법입니다. 이 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)
}

물론 for(let i = 0; i < arr.length; i ++) 문법을 이해하지 못하면, 당장은 for in 문이 어색할 수 있을 것 같네요. 하지만 저렇게 가볍게 쓰면 확실히 편해보이니 자주 사용해주어야겠습니다.