[TIL] 007. JavaScript - Object 2 methods

Object.keys()

Object.keys메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다. 객체의 내장 메소드가 아니라 객체 생성자인 Object가 직접 가지고 있는 메소드이다.

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

Object.keys(fruit) // ['name', 'weight', 'price', 'isFresh'] 출력

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

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

  console.log(value)
}

Object.keys메소드가 리턴하는 값은 배열이기 때문에 이걸로 우리가 반복문을 사용할 수 있다!

Object.values()

Object.values는 객체의 키가 아닌 값으로 이루어진 배열을 리턴한다.

const values = Object.values(fruit);

console.log(values);
// ['melon', 4350, 16500, true] 출력

Object.entries()

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

const entries = Object.entries(fruit);

console.log(entries);

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

for-in

반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6 에서 추가된 문법이다.

const arr = ['coconut', 'banana', 'pepper', 'coriander']

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

/*
// 위의 for문을 풀어쓰면 아래와 같다.
for (let i = 0; i < arr.length; i ++) {
  console.log(i)
  console.log(arr[i])
} 
*/

// for..in문은 배열뿐 아니라 객체에서도 사용할수 있다!
const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
let emptyObj = {};

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

  console.log(key);
  console.log(value);
  emptyObj[key] = value;
}

console.log(emptyObj);

/*
emptyObj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}
*/

이렇게 객체를 가지고 for-in문을 사용하면, for-in문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 된다.