replit을 풀면서 시간이 제일 오래 걸렸던 과제였다. 머리가 아프다.
객체 자체의 공부가 부족했다고 느꼈기 때문에 일단 기본적인 개념을 정리하고 다음 포스트에서 문제를 풀어보자
1. 객체의 키를 변수로 접근하기
객체의 특정 키를 만들고 값을 할당해보자
const information = {
name : '김개발'
}키와 값을 변수를 통해 받아, 위에 키와 값을 할당해보자
const verb = 'developes'
const project = 'facebook'verb의 값을 키로 사용, project의 값을 드 그 키의 값으로 사용한다고 했을 때
information[verb] = project // [A]
information.developes = 'facebook' // [B]A와 B방식 모두 할당이 가능하다. 차이점을 보자면 B의 경우 키와 값이 항상 정해져있고, A의 경우 변수 verb와project가 가지는 값에 따라 변할 수 있다.
2. 객체의 반복문
객체의 반복문도 사용해보지 않아 몇번을 읽어 봤는지 모르겠다...
1. object.keys()
Object.keys 메소드는 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드이다.
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.values, Object.entries 메소드도 알아보자
Object.values 는 객체의 키가 아닌 값으로 이루어진 배열을 리턴, Object.entries 는 객체의 키와 값의 쌍으로 이루어진 길이 2짜리 배열로 이루어진, 배열을 리턴한다.
const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]
const entries = Object.entries(obj)
/*
entries === [
['name', 'melon'],
['weight', 4350],
['price', 16500],
['isFresh', true]
]
*/Object.entries가 조금 복잡해보이긴 하지만, Object.keys, Object.values, Object.entries 세가지 중에서 제일 유용하게 쓰인다고 한다.
2. for-in
두번째 방법은 for-in문이다. 객체와 배열을 위해 존재해는 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])
}i를 0으로 초기화하고, 배열의 길이와 비교 후, i를 1씩 증가시키는 등의 코드를 생략할 수 있게 만든 ES6문법이다. 간단하지만 여러번 사용해야 익숙해질 수 있다.
이번에는 객체에서 사용핼보자
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 문의 인덱스에 해당하는 변수가, 숫자가 아닌 객체의 각각의 키에 해당하는 문자열을 할당받게 된다.
자 이제 Assignment를 풀어보자...
