객체의 키를 변수로 접근
const obj = {
order: '햄버거'
}
obj.price = 1000
obj['price'] = 1000기존에 obj라는 객체를 생성하고 프로퍼티를 추가하고 싶을 때, 위와 같은 방식으로 값을 추가했습니다.
그런데 객체는 키와 값을 변수를 통해서도 값을 할당해 줄 수 있습니다.
const word = 'price'
obj[word] = 2000
console.log(obj) //{order: "햄버거", price: 2000}이처럼 변수를 통해 객체의 키를 접근하면 변수 word가 가지는 값에 따라 다른 키와 값을 가질 수 있습니다.
객체 순회
순서가 있는 배열과 달리, 객체는 순서가 없어서 키를 통해서만 접근해야 합니다.
그런데 경우에 따라 객체에 있는 키와 값을 전부 사용해야 될 경우가 생길 수도 있습니다. 다행히 객체도 모든 키와 값을 접근할 수 있는 방법이 있습니다. 하지만 배열과 달리 객체는 순서가 정해져 있지는 않습니다. 그래서 객체의 순회는순서가 보장되지 않은 순회라고 부릅니다.
const arr = ['coconut', 'banana', 'pepper', 'coriander']
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}배열에서 모든 값을 구할 때는 위와 같이 반복문을 이용했습니다.
하지만 객체는 객체의 길이도 알 수 없고 인덱스도 없기 때문에 이와 같은 방법으로는 불가능합니다.
1. Object.keys(), Object.values(), Object.entries()
const obj = {
name: 'melon',
weight: 4350,
price: 16500,
isFresh: true
}
Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']
object.keys()메소드는 객체가 가지고 있는 키들의 목록을 배열로 리턴 해줍니다.
객체의 내장 메소드가 아닌 객체 생성자인 Object가 직접 가지고 있는 메소드입니다.
const keys = Object.keys(obj)
const value = [];
for (let i = 0; i < keys.length; i++) {
const key = keys[i] // 각각의 키
value[i] = obj[key]
}
console.log(value) // ["melon", 4350, 16500, true]위와 같이 객체의 키로 반복문을 통해 값을 얻어낼 수도 있습니다.
그런데 새로운 ES6의 문법에서는 Object.keys와 마찬가지로 Object생성자의 메소드인 프로퍼티를 리턴하는
Object.values와, 키와 값의 쌍으로 이루어진 길이 2짜리 배열을 리턴하는Object.entries도 생겼습니다.
2. for-in
반복문인 for문과 같은 문법이지만, 객체와 배열을 위해 ES6에서 추가되었습니다.
const arr = ['coconut', 'banana', 'pepper', 'coriander']
for (let i = 0; i < arr.length; i ++) {
console.log(i)
console.log(arr[i])
} 배열의 값을 구할 때 사용했던 문법인데, 자주 사용하다 보니 이걸 간단하게 축약한 문법이 나왔습니다.
for (let i in arr) {
console.log(i)
console.log(arr[i])
}위 for-in문법은 배열의 값을 구할 때 사용했던 for문과 기능적으로 완전히 동일합니다.
i를 0으로 초기화하고, 배열의 길이와 비교하고, i를 1씩 증가시키는 코드를 생략할 수 있게 만들었습니다.
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문은 객체에서도 사용할 수 있는데, 배열은 인덱스에 해당하는 변수가 숫자가 할당되지만
객체의 각각의 키에 해당하는 문자열을 할당받게 됩니다.
