이 글의 목적
📌 객체 순회를 잘 알아두면 남들이 읽은 코드에 대해서 두려움을 줄여준다고 합니다.
객체 순회
Object.keys,values,entries
개별 자료 구조에서 순회(iteration)에 관한 메서드들은 여러개가 있습니다.
map.keys() map.values() map.entires() 이 메서드들은 포괄적인 용도로 만들어졌기 때문에
메서드를 적용할 자료구조는 일련의 합의를 준수해야 합니다.
Oject keys, values, entries
일반 객체엔 다음과 같은 메서드를 사용할 수 있습니다.
- Object.keys() : 객체 속성의 이름을 배열로 반환합니다.
- Object.values() : 객체 속성의 값들을 반환합니다.
- Object.entries() : 객체 쌍
[키, 값]의 배열을 반환합니다.
// Object.keys()의 예시
const object1 = {
a: 'somestring',
b: 42,
c: false
};
console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]
// Object.entries()의 예시
const object1 = {
a: 'somestring',
b: 42
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}
// Expected output:
// "a: somestring"
// "b: 42"
객체 변환하기
객체엔 map filter 같은 배열 전용 메서드를 사용할 수 없습니다.
하지만 Object.entries와 Object.fromEntries를 순차적으로 적용하면 객체에도 배열 전용 메서드 사용할 수 있습니다.
구조 분해 할당
개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 합니다.
가끔은 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 하죠.
이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 구조 분해 할당(destructuring assignment)을
사용할 수 있습니다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조 분해는 그 진가를 발휘합니다.
배열 분해하기
배열은 어떻게 분해할 수 있을까요?
구조 분해 할당을 이용할 수 있습니다.
let arr = ["Bora", "Lee"]
//구조 분해 할당을 이용해 firstNamer과 surname을 할당
let [firstName, surname] = arr;
alert(firstName); //Bora
alert(surname); //Leesplit를 이용한 방법
분해(destructuring)는 파괴(destructive)를 의미하지 않습니다.
let [firstName, surname] = "Bora Lee".split('');기본값 설정하기
=를 이용하면 할당할 값이 없을 때 기본으로 할당해 줄 값인 기본값(default value)을 설정할 수 있습니다.
let [name = "당근마겟", surname = "0203"] = ["Julius"];
alert(name);
alert(surname);콜론은 '분해하려는 객체의 프로퍼티: 목표 변수' 와 같은 형태로 사용합니다.
배열 혹은 함수의 매개변수에서 했던 것처럼 객체에도 표현식이나 함수 호출을 기본값으로 할당할 수 있습니다.
let없이 구조 분해하여 할당하기
1. let 없이 변수 선언하기
2. (...) 중괄호를 통해 표현식으로 인식하게 만들기
let title, width, height;
// 에러가 발생하지 않습니다.
({title, width, height} = {title: "Menu", width: 200, height: 100});
alert( title ); // Menu중첩 구조 분해
객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나
객체의 정보를 추출할 수 있습니다. 이를 중첩 구조 분해(nested destructuring)이라고 합니다.
let options = {
size: {
width: 100,
height: 200
},
items: ["Cake", "Donut"],
extra: true
};
//코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
size: {
width,
height
},
items: [item1, item2],
title = "Menu"
} = options;함수 매개변수
함수에 매개변수가 많은데 이 중 상당수는 선택적으로 쓰이는 경우가 있습니다.
let options = {
title: "My menu",
items: ["Item1", "Item2"]
};
//똑똑한 함수는 전달받은 객체를 분해해 변수에 즉시 할당함
function showMenu({title = "Untitled, width = 200, height= 300, items = []}) {
alert(`${title} ${width} ${height}`);
alert(item);
}
showMenu(options);