JavaScript에서 객체 는 키-값 쌍의 집합으로, 속성이나 동작을 나타내는 데이터 구조입니다.
(파이썬의 딕셔너리와 키-값 쌍의 집합이라는 점이 유사합니다.)
객체는 중괄호 {}로 표현되며, 키와 값은 콜론(:)으로 구분됩니다.
객체는 동적으로 속성을 추가하고 삭제할 수 있습니다.
객체는 자바스크립트에서 핵심적인 데이터 구조 중 하나이며, 다양한 용도로 활용됩니다.
이번 포스트에서는 객체의 간단한 사용법에 대해서 정리해보겠습니다.
객체 선언하기
객체는 {}중괄호에 key:value 로 구분하여 정의합니다.
다음과 같이 객체를 선언할 수 있습니다.
undefined로 값을 지정하지 않을 수도 있습니다.
const profile = {
name:"홍길동",
age:100,
height:undefined,
gender:"male",
}키는 유일해야 합니다. 키가 유일하지 않을 경우 에러가 발생하지 않고 덮어쓰기가 되지만 데이터에 오류가 발생할 수 있으므로 키는 유일해야 함을 잊지 말아야 합니다.
const obj1 = {a:1, a:2};
console.log(obj1) //{ a: 2 } 키가 덮어쓰기가 됨객체의 값 가져오기
객체의 값을 가져오는 방법은 2가지가 있습니다.
1. 닷 노테이션, 2.브라켓 노테이션 방법입니다.
const profile = {
name:"홍길동",
age:100,
height:undefined,
gender:"male",
}
// 브라켓 노테이션 사용
console.log(profile['name']) //홍길동
// 닷 노테이션 사용
console.log(profile.age) //100객체에 없는 키 값에 접근하는 경우
객체에 없는 키 값에 접근하는 경우 undefined를 반환합니다.
const myObject = { a: 1, b: 2, c: 3 };
console.log(myObject.d); // undefined이는 파이썬 딕셔너리의 get() 매소드와 동일합니다.
get() 메소드는 딕셔너리에 키가 없을 때 None을 반환하는 메소드 입니다.
파이썬에서는 get() 메소드를 사용하지 않고 딕셔너리에 없는 키의 값을 가져오면 Error가 발생합니다.
객체에 없는 키 값에 접근하는 경우 특정 값 반환
논리연산자를 활용해서 객체에 접근하는 키값이 없는 경우, 해당 값을 반환하도록 할 수 있습니다.
const myObject = { a: 1, b: 2, c: 3 };
const value = myObject.d || 100; // 키가 존재하지 않으면 100을 반환
console.log(value); // 100이는 파이썬 딕셔너리의 setdefault() 메소드와 동일합니다.
setdefault() 메소드는 해당하는 키가 없으면 디폴트로 정한 값을 가져오고, 있으면 해당 키의 value 찾아서 반환합니다.
객체의 값 확인
Object.values() 함수를 사용하여 객체의 키를 배열로 반환할 수 있습니다.
const objExample = {
a : 1,
b : 2,
c : 3,
}
console.log(Object.values(objExample)) // [ 1, 2, 3 ]객체의 키 확인
Object.keys() 함수를 사용하여 객체의 키를 배열로 반환할 수 있습니다.
const objExample = {
a : 1,
b : 2,
c : 3,
}
console.log(Object.keys(objExample)) //[ 'a', 'b', 'c' ]객체의 키 검사
객체에 특정 속성이 존재하는지 확인할 때 hasOwnProperty() 메서드를 사용합니다.
const myObject = { a: 1, b: 2, c: 3 };
console.log(myObject.hasOwnProperty('b')); // true
console.log(myObject.hasOwnProperty('d')); // false객체의 새로운 속성 추가
새로운 속성을 객체에 추가할 때는 단순히 새로운 속성을 만들어 값을 할당합니다.
const myObject = { a: 1, b: 2 };
myObject.c = 3;
console.log(myObject); // { a: 1, b: 2, c: 3 }여러 객체 합침
여러 객체를 결합하여 하나의 객체로 만들 때 Object.assign()을 사용를 사용하거나 스프레드 연산자(...)를 사용할 수 있습니다.
Object.assign() 함수 사용하여 객체 합침
const obj1 = {a:1, b:2};
const obj2 = {c:2, d:3};
const obj3 = {e:4, f:5};
const mergedObject = Object.assign({}, obj1, obj2, obj3);
console.log(mergedObject) //{ a: 1, b: 2, c: 2, d: 3, e: 4, f: 5 }합치는 두 객체의 키가 동일하면 덮어쓰기가 되면서 합쳐짐에 유의해야 합니다.
const obj1 = {a:1, b:2};
const obj2 = {a:20};
const obj3 = {b:30};
const mergedObject = Object.assign({}, obj1, obj2, obj3);
console.log(mergedObject) //{ a: 20, b: 30 }
스프레드 연산자를 사용하여 객체 함침
const obj1 = {a:1};
const obj2 = {b:2};
const obj3 = {c:3};
const combinedObj = {...obj1, ...obj2, ...obj3}
console.log(combinedObj) //{ a: 1, b: 2, c: 3 }객체의 속성 삭제
delete 연산자를 사용하여 객체의 특정 속성을 삭제합니다.
const myObject = { a: 1, b: 2, c: 3 };
delete myObject.b;
console.log(myObject); // { a: 1, c: 3 }객체 속성에 함수를 할당
JavaScript에서 객체의 속성에 함수를 할당하여 해당 함수를 메서드로 사용하는 것이 가능하며 이는 매우 일반적인 패턴입니다.
이를 통해 객체는 데이터와 해당 데이터를 조작하는 메서드를 하나의 단위로 묶을 수 있습니다.
// 객체 생성
const car = {
brand: "Toyota",
model: "Camry",
year: 2022,
// 메서드 추가
start: function() {
console.log(this.brand + " " + this.model + " is starting...");
},
drive: function(distance) {
console.log("Driving " + distance + " miles.");
}
};
// 객체의 속성 및 메서드 사용
console.log(car.brand); // "Toyota"
car.start(); // "Toyota Camry is starting..."
car.drive(50); // "Driving 50 miles."위의 예제에서 car 객체는 start와 drive라는 메소드를 가지고 있습니다.
이 메소드들에서 this는 car 객체를 의미하므로 car의 속성들을 가져와 쓸 수 있습니다.
ES6부터는 메서드 축약 표현을 사용하여 메서드를 더 간결하게 정의할 수 있습니다
const car = {
brand: "Toyota",
model: "Camry",
year: 2022,
// 속성 : function() 형태가 아니라 "속성()"로 간결하게 메소드 정의
start() {
console.log(this.brand + " " + this.model + " is starting...");
}
};
car.start(); // Toyota Camry is starting...객체 내에 함수를 정의할 때는 화살표 함수를 사용하면 안됩니다.
메서드 축약 표현에서의 this 동작은 해당 메서드가 정의된 시점이 아니라, 호출될 때 동적으로 결정됩니다. 이는 함수가 어떻게 호출되느냐에 따라 this가 가리키는 값이 변할 수 있다는 의미입니다.
화살표 함수의 특성 상, this는 화살표 함수가 정의된 시점의 외부 스코프의 this를 가져옵니다. 그러나 객체 리터럴 내에서는 외부 스코프가 전역 스코프이므로 this가 전역 객체를 가리키게 됩니다.
화살표 함수를 객체 내에서 정의한 경우 예를 들면 아래와 같습니다.
호출 시, this가 undefined가 됨을 볼 수 있습니다.
const car = {
brand: "Toyota",
model: "Camry",
year: 2022,
// 축약된 메서드 표현에서는 this가 호출 시점에 동적으로 결정되므로 주의가 필요
start: () => {
console.log(this.brand + " " + this.model + " is starting...");
}
};
car.start(); // undefined undefined is starting...