들어가며
JavaScript 객체는 key와 value로 데이터를 저장합니다.
객체 안의 값을 사용하려면 속성에 접근해야 합니다.
가장 자주 사용하는 방법은 점 표기법과 대괄호 표기법입니다.
점 표기법
점 표기법은 가장 기본적인 객체 속성 접근 방법입니다.
1
2
3
4
5
6
7
8
const person = {
name: "taewok",
age: 23,
job: "Developer",
};
console.log(person.name); // "taewok"
console.log(person.age); // 23
속성 이름을 코드에 직접 작성할 수 있을 때는 점 표기법이 읽기 쉽습니다.
대괄호 표기법
대괄호 표기법은 속성 이름을 문자열로 접근합니다.
1
2
3
4
5
6
7
const person = {
name: "taewok",
age: 23,
job: "Developer",
};
console.log(person["name"]); // "taewok"
속성 이름이 변수에 들어 있을 때 특히 유용합니다.
1
2
3
const key = "job";
console.log(person[key]); // "Developer"
대괄호 표기법에서 주의할 점
아래 코드는 "name"이라는 문자열 key에 접근하는 것이 아닙니다.
1
person[name];
JavaScript는 name을 변수로 해석합니다.
문자열 key에 접근하고 싶다면 따옴표를 사용해야 합니다.
1
person["name"];
변수에 담긴 key를 사용하고 싶을 때만 따옴표 없이 작성합니다.
1
2
3
const nameKey = "name";
person[nameKey];
구조 분해 할당
객체에서 특정 속성을 꺼내 변수로 만들고 싶다면 구조 분해 할당을 사용할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
const person = {
name: "taewok",
age: 23,
job: "Developer",
};
const { name, age } = person;
console.log(name); // "taewok"
console.log(age); // 23
React에서 props를 받을 때도 자주 사용하는 문법입니다.
1
2
3
const Profile = ({ name, age }) => {
return <p>{name} - {age}</p>;
};
이름을 바꿔서 꺼내기
객체 속성 이름과 다른 변수명으로 받고 싶다면 아래처럼 작성합니다.
1
2
3
4
5
6
7
const person = {
name: "taewok",
};
const { name: userName } = person;
console.log(userName); // "taewok"
이 문법은 name 값을 꺼내서 userName이라는 변수에 담는다는 뜻입니다.
마무리
객체 속성에 접근하는 방법은 상황에 따라 다르게 선택하면 됩니다.
속성 이름이 고정되어 있다면 점 표기법이 가장 읽기 쉽습니다.
속성 이름이 변수로 결정된다면 대괄호 표기법을 사용합니다.
여러 값을 한 번에 꺼내고 싶다면 구조 분해 할당을 사용하면 코드가 훨씬 간결해집니다.