객체(Object)
학습내용
- 배열과 객체의 특징을 구분
- 객체 속성(property)의 추가, 조회, 변경, 삭제
- 객체 속성 조회법 두 가지 차이
- 배열과 객체, 반복문을 다루기
객체란?
객체(Object)는 다양한 데이터를 담을 수 있는 자료형입니다. 중괄호 '{}'를 이용하여 생성할 수 있으며,키(key): 값(value)의 프로퍼티 쌍들로 이루어져 있습니다.
let obj = {
키(key): 값(value),
키(key): 값(value),
...
}객체의 생성
let obj = {} ; // 객체 리터럴
let obj2 = new Object(); // 객체 생성자
//생성과 동시에 할당하기
let objInit ={
name: "jung",
age: "31",
} 객체의 마지막 프로퍼티 끝에 쉼표를 붙여주는게 좋습니다. 이런 쉼표를 trailing(길게 늘어지는) 혹은 hanging(매달리는) 쉼표라고 부릅니다.
객체 프로퍼티 접근
객체의 프로퍼티 접근은 온점(.)을 사용하여 접근하는 Dot notation 방식과 대괄호 []을 사용하여 접근하는 Bracket notation 방식이 있습니다.
let user = {
firstName: "jungsu",
lastName: "jung",
}
// 프로퍼티 접근 방법 1 - Dot notation
console.log(user.firstName); // 'jungsu'
// 프로퍼티 접근 방법 2 - Bracket notation
console.log(user['firstName']); // 'jungsu'
// 없는 프로퍼티 접근시
console.log(user['phone']); // 'content is not defined'
Dot notation, Bracket notation 차이?
- 대부분 동일하게 사용가능하지만, key를 동적으로 지정하는 경우
Bracket notation사용해야합니다.
프로퍼티 삭제
delete 키워드를 통해 삭제할 수 있습니다.
let user = {
firstName: "jungsu",
lastName: "jung",
}
delete user.firstName;in 연산자
in연산자를 통해 key의 존재 여부 판단 가능합니다.
let user = {
firstName: "jungsu",
lastName: "jung",
}
if ('firstName' in user){
console.log("key is exist");
}반복문 사용
객체의 반복문은 for...in 구문을 통해 반복이 가능합니다.
let user = {
firstName: "jungsu",
lastName: "jung",
}
for (let key in user){
console.log(`key is ${key}, value is ${user[key]}`);
}참고로 객체의 반복 순서는 key가 숫자인 경우를 제외하고 작성 또는 추가한 순서대로 수행됩니다. 하지만, 정수 프로퍼티인 경우 자동절렬되어져 작성한 순서와 다르게 수행될 수 있습니다.
단축 프로퍼티
const name = 'jungsu';
const age = '31';
const person = {
name,
age,
}
console.log(person); // {name: jungsu, age: 31}
‘참조에 의해(by reference)’ ?
객체는 원시 타입과 다르게 변수에 값이 저장되는 것이 아니라 메모리 주소인 참조 값이 저장됩니다. 그렇기 때문에 객체 복사시 참조값이 복사되므로 주의해야 합니다.
let user1 = { name: 'jung'};
let user2 = user1;
user2.name = "su";
console.log(user1.name); // "su"
위에서 볼 수 있듯이 할당 연산자(=)를 통해 객체를 할당하면 동일한 객체의 참조값을 가지게 되므로 결국 같은 객체를 가르키게 됩니다.
객체 복사
객체를 복사할때 유용한 방법으로 2가지가 있습니다. 스프레드 문법과 Object.assign(dest, [src1,]) 메소드를 사용하여 복사할 수 있습니다. 이를 통해 위와 같은 참조로 인해 원본이 변경되는 문제를 피할 수 있습니다.
let user1 = { name: 'jung'};
// 방법 1: 스프레드 문법
let user2 = {...user1};
user2.name = "su";
console.log(user1.name); // "jung"
// 방법 2: Object.assign
let user3 = {}
Object.assign(user3, user1);
user2.name = "su";
console.log(user1.name); // "jung"위의 복사 방법들은 얕은 복사(shallow copy)이기 때문에 깉은 복사가 필요하다면 lodash 패키지의 cloneDeep 메소드 등을 사용하면 됩니다.
