자바스크립트에서 객체는 값들을 여러 개 묶어 관리할 수 있는 강력한 데이터 구조다.
객체를 다루려면 먼저 변수에 객체를 할당하여 접근할 수 있는 이름을 만들어야 한다. 예를 들어, userProfile이라는 객체가 사용자 프로필 정보를 담고 있다고 가정하고, 이를 변수에 할당하여 사용하게 된다.
객체의 프로퍼티 접근 방법
객체 내부의 프로퍼티에 접근하는 방법은 점 표기법(dot notation)과 대괄호 표기법(bracket notation) 두 가지가 있다. 상황에 따라 적절한 방식을 선택해서 사용할 수 있다.
1. 점 표기법(dot notation)
가장 많이 사용되는 방법으로, 객체 이름 뒤에 점(.)을 찍고 프로퍼티 이름을 적는 방식이다. 점 표기법은 간단하고 직관적이지만, 프로퍼티 이름에 특수문자나 공백이 없어야 사용할 수 있다.
const userProfile = {
name: "Alex",
age: 25,
"favorite language": "JavaScript" // 띄어쓰기가 포함된 프로퍼티 이름
};
// 점 표기법 (objectName.propertyName)
console.log(userProfile.name); // Alex 출력
console.log(userProfile.age); // 25 출력
점 표기법을 사용하면 userProfile.name처럼 객체 이름 뒤에 점을 붙여 프로퍼티에 접근할 수 있다. 그러나 프로퍼티 이름이 공백을 포함하거나 숫자로 시작하면 점 표기법을 사용할 수 없다.
2. 대괄호 표기법(bracket notation)
점 표기법으로 접근할 수 없는 프로퍼티에는 대괄호 표기법을 사용한다. 객체 이름 뒤에 대괄호([])를 사용하고, 프로퍼티 이름을 문자열로 감싸서 대괄호 안에 적는다.
console.log(userProfile["favorite language"]); // JavaScript 출력
대괄호 표기법은 프로퍼티 이름에 띄어쓰기, 숫자, 특수문자가 포함된 경우에도 사용할 수 있다는 장점이 있다. 또한, 대괄호 표기법에서는 문자열 변수도 활용할 수 있다.
const propName = "name";
console.log(userProfile[propName]); // Alex 출력
위 예시처럼, 변수에 담긴 문자열로도 프로퍼티 이름을 동적으로 설정할 수 있다. 동적으로 프로퍼티 이름을 설정해야 할 때는 대괄호 표기법을 사용한다.
중첩 객체의 프로퍼티 접근
객체 내부에 또 다른 객체가 중첩된 구조일 수도 있다. 이런 경우, 점 표기법 또는 대괄호 표기법을 계속 연결해 나가면서 접근할 수 있다.
const userProfile = {
name: "Alex",
details: {
bestCourse: {
title: "JavaScript Basics",
level: "Beginner"
}
}
};
// 점 표기법을 사용한 중첩 객체 접근
console.log(userProfile.details.bestCourse.title); // JavaScript Basics 출력
// 대괄호 표기법을 사용한 중첩 객체 접근
console.log(userProfile["details"]["bestCourse"]["level"]); // Beginner 출력
중첩된 객체의 프로퍼티 이름이 점 표기법으로 접근할 수 없는 경우에는 대괄호 표기법을 활용해 연속적으로 대괄호를 연결하여 접근하면 된다.
존재하지 않는 프로퍼티에 접근하려고 할 때
객체에 존재하지 않는 프로퍼티에 접근하려고 하면, 에러가 발생하지 않고 undefined가 반환된다. 이는 존재하지 않는 값에 대한 접근을 시도했음을 나타내는 결과로, 자바스크립트에서는 특정 프로퍼티가 객체에 존재하는지 확인하는 데 유용하다.
console.log(userProfile.hobby); // undefined 출력
객체 다루기
1. 객체의 프로퍼티 수정
객체의 프로퍼티 값을 수정하려면 해당 프로퍼티에 접근해 새로운 값을 할당하면 된다. 변수에 값을 재할당하는 방식과 비슷하다.
const user = {
name: "홍길동",
age: 30
};
// name 프로퍼티 수정
user.name = "김철수";
console.log(user.name); // 김철수
위 코드에서는 user 객체의 name 프로퍼티 값을 "홍길동"에서 "김철수"로 바꾼다. 객체의 프로퍼티는 이렇게 간단히 수정할 수 있다.
2. 객체의 프로퍼티 추가
객체에 없는 프로퍼티에 값을 할당하면, 그 프로퍼티가 객체에 새로 추가된다.
// user 객체에 job 프로퍼티 추가
user.job = "개발자";
console.log(user.job); // 개발자
여기서는 job이라는 새로운 프로퍼티를 추가하고 "개발자"라는 값을 할당했다.
3. 객체의 프로퍼티 삭제
프로퍼티를 삭제하려면 delete 연산자를 사용한다. delete를 사용해 객체에서 해당 프로퍼티를 제거할 수 있다.
// job 프로퍼티 삭제
delete user.job;
console.log(user.job); // undefined
여기서는 user 객체의 job 프로퍼티를 delete 연산자를 사용해 삭제했다. 삭제 후 해당 프로퍼티에 접근하면 undefined가 나온다.
4. 객체에 특정 프로퍼티가 있는지 확인하기: undefined와 in 연산자의 차이
객체에 없는 프로퍼티에 접근하면 기본적으로 undefined가 반환된다. 따라서 undefined와 비교하여 프로퍼티의 존재 여부를 확인할 수 있다. 하지만 undefined 값을 직접 프로퍼티에 할당한 경우라면, 이 방법은 불확실할 수 있다. 이때 in 연산자를 활용하는 것이 더 정확하다.
const user = {
name: "홍길동",
job: undefined
};
// undefined 비교를 통해 존재 여부 확인
console.log(user.age === undefined); // true
console.log(user.job === undefined); // true
// in 연산자를 통한 존재 여부 확인
console.log("age" in user); // false
console.log("job" in user); // true
위 코드에서 user.age는 정의되지 않았으므로 undefined가 반환된다. 반면, user.job은 값이 undefined일 뿐 실제로 객체 내에 존재하는 프로퍼티이다.
undefined비교: 프로퍼티가 없는 경우와 값이undefined인 경우 모두true를 반환한다.in연산자: 해당 프로퍼티가 객체에 실제로 존재하는지 여부만 확인하며, 값과는 관계없이true또는false를 반환한다.
따라서 객체 내 특정 프로퍼티의 실제 존재 여부를 확인할 때는 in 연산자를 사용하는 것이 안전하다.
in 연산자를 활용한 조건문 예제
in 연산자는 조건문에서도 유용하게 사용할 수 있다. 객체에 특정 프로퍼티가 있는지 확인하고, 없으면 다른 동작을 하도록 코드를 작성할 수 있다.
if ("name" in user) {
console.log(`이름: ${user.name}`);
} else {
console.log("이름이 없습니다.");
}
여기서는 user 객체에 name 프로퍼티가 있을 경우 해당 값을 출력하고, 없을 경우 "이름이 없습니다."라는 메시지를 출력하도록 했다. 이처럼 in 연산자는 조건문에서 활용하기 좋다.
요약
- 점 표기법: 객체의 프로퍼티 이름에 공백이나 특수문자가 없을 때 사용. 간단하고 직관적.
- 대괄호 표기법: 프로퍼티 이름에 공백이나 특수문자가 있을 때 사용. 대괄호 안에 문자열 또는 변수를 사용할 수 있다.
- 중첩 객체: 객체 안에 또 다른 객체가 있는 경우, 점 표기법 또는 대괄호 표기법을 연속으로 연결하여 접근 가능.
- 존재하지 않는 프로퍼티 접근: 존재하지 않는 프로퍼티에 접근하면
undefined가 반환됨.- 로퍼티 수정: 객체의 특정 프로퍼티에 새로운 값을 할당해 수정할 수 있다.
- 프로퍼티 추가: 객체에 없는 프로퍼티에 값을 할당하면 추가된다.
- 프로퍼티 삭제:
delete연산자를 사용해 프로퍼티를 삭제할 수 있다.in연산자: 객체에 특정 프로퍼티가 존재하는지 확인할 때 사용한다.undefined와 비교할 때보다 안전하게 존재 여부를 확인할 수 있다.
