앞서 Object(2) 에서, 객체의 키를 사용하는 여러 방법을 배웠습니다. 이 방법을 사용하면 객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능합니다.
information이라는 객체 하나를 만들어 봅시다!
const information = {
name: '김개발'
}여기에 키 하나를 생성하고, 그 키에 값을 할당해주려고 합니다. 그런데 키와 값을 변수를 통해 받아온다면 어떻게 해야할까요?
const key = 'job';
const value = 'developer';key의 값을 키로 사용해야 하고, value의 값을 그 키의 값으로 사용한다고 했을때 👇🏻
information[key] = value // [A]
information.key = 'developer' // [B][A]와 같이 할당할 수 있습니다. [B]의 방식으로도 할당할 수는 있지만, key에 할당된 'job'이라는 값이 프로퍼티명으로 할당되는 것이 아니라 job 자체를 프로퍼티명으로 할당하게 됩니다.
console.log(information);
// 출력 결과
{ name: '김개발', job: 'developer' } // [A]
{ name: '김개발', key: 'developer' } // [B]객체 순회하기
Object(2) 에서는 객체는 순서가 없고 키를 통해서만 접근해야 한다고 했습니다. 하지만 여러가지 이유로 객체에 있는 모든 키에 한번씩 접근해야하는 코드를 써야한다면 어떻게 해야할까요? 다행히도 객체도 배열처럼 순회가 가능합니다!
다만 배열과 다르게 명확하게 정해진 순서가 없기 때문에, 어떤 순서에 따라 객체의 키에 접근하게 될지는 알 수 없습니다. 때문에 객체의 순회는 "순서가 보장되지 않은 순회"입니다. 배열을 순회할때 다음과 같이 for 문을 사용했었는데요,
const arr = ['coconut', 'banana', 'strawberry', 'apple'];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}이런 반복문은 배열이 length 라는 속성을 가지고 있고, 인덱스를 통해 각 배열요소에 접근할수 있었기 때문인데요. 객체는 length 속성이 따로 주어져있지 않고, 인덱스도 없기 때문에 이런식의 반복문은 불가능합니다. 대신 크게 두가지의 방법으로 객체의 반복문 작성이 가능합니다.
방법 1. Object.keys()
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 문법에서는 Object.keys 외에도 마찬가지로 Object생성자의 메서드인 Object.values, Object.entries 와 같은 자매품들이 추가되었습니다.
Object.values는 객체의 키가 아닌 값으로 이루어진 배열을 반환합니다.
Object.entries는 객체의 키와 값의 쌍으로 이루어진, length가 2인 배열을 반환합니다. 각 배열에서 인덱스 [0]의 값은 각각의 키를, 인덱스 [1]의 값은 해당 키에 해당하는 값을 가지게 됩니다.
const values = Object.values(obj)
// ['melon', 4350, 16500, true]
const entries = Object.entries(obj)
/*
[
['name', 'melon'],
['weight', 4350],
['price', 16500],
['isFresh', true]
]
*/방법 2. for-in
객체를 순회하는 두번째 방법은 for-in 문입니다. 반복문인 for문과 같은 종류의 문법이지만, 객체와 배열을 위해 특별히 존재하는, ES6에서 추가된 문법입니다. 또한 객체 순회 뿐만 아니라 일반적인 배열을 순회할때도 사용할 수 있습니다.
const arr = ['coconut', 'banana', 'strawberry', 'apple'];
for (let i = 0; i < arr.length; i++) {
console.log(i)
console.log(arr[i])
}앞서 예시로 등장했었던 배열의 반복문입니다. for문을 그동안 많이 써본 분들이라면, 배열에 대한 for문 선언시 사용하는 for(let i = 0; i < arr.length; i++) 코드가 아주 자주 사용되는 코드라는걸 알고계실텐데요. for-in문을 통해 간단하게 축약하면 다음과 같습니다.
for (let i in arr) {
console.log(i)
console.log(arr[i])
}i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 등의 코드를 생략할수 있게 만든 ES6 문법입니다. 이 for-in 문을 활용하면 인덱스의 값으로 무엇을 할당하고, 반복문이 몇번 돌아야 할지를 자바스크립트 엔진 내부에서 자동으로 결정하게 됩니다.
다음으로는 객체에서의 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-in 문을 사용하면, for-in 문의 인덱스에 해당하는 변수(key)가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열(name, weight, price, isFresh)을 할당받게 됩니다.
출처 : wecode
