배열과 달리 의미를 가짐
각기 다른 값을 가질 수 있지만, 입력해야하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다.
•
배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는 지 이해할 수 있다.
◦
배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
◦
배열과 객체의 특징에 따라 실생활에서 언제 쓰는지 이해할 수 있다.
객체 Object
순수 객체(plain object)는 프로퍼티(키와 값 쌍)로 이루어짐
프로퍼티 키는 문자열이나 심볼이어야 함
{} 를 이용해 만들 수 있음
키와 값 사이는 : 으로 구분
자바스크립트 객체의 관리방식
프로퍼티 키를 인덱스로 사용하는 해시 테이블
다른 언어와 달리 클래스 없이 객체를 생성 가능하다. 생성 이후에도 프로퍼티나 메서드를 추가할 수 있다.
사용은 편리하나, C++이나 Java 같은 클래스 기반 객체지향 프로그래밍 언어의 객체보다 성능면에서는 비효율적임
객체의 값에 접근하거나 추가, 삭제하는 법
•
Dot notation
user.name
•
Bracket notation
user['name']
키값이 동적으로 변할 때 사용
자주하는 실수 user[name] → name은 변수로 취급
키 존재하는지
'name' in user
키 삭제
delete user.name
delete user[name]
자바스크립트 객체의 중요한 특징 중 하나는 다른 언어와 달리 존재하지 않는 프로퍼티에 접근하려고 해도 에러가 발생하지 않고 undefined를 반환
in 연산자를 사용해 프로퍼티의 존재 여부를 확인할 수 있음
for.. in
객체의 모든 키를 순회
for (let key in object) {
}
JavaScript
복사
객체 정렬 방식
정수 프로퍼티는 자동으로 정렬되고 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬
객체 복사
객체는 참조에 의해 복사됨
즉, 객체가 저장되어 있는 '메모리 주소'인 객체에 대한 참조 값이 저장됨
객체와 똑같으면서 독립적인 객체를 만들고 싶을 때
1.
새로운 객체를 생성하고 기존 객체의 프로퍼티를 순회해 원시 수준까지 프로퍼티를 복사
2.
Object.assign을 사용
// return : 복사한 값을 담은 객체를 반환
Object.assign(복사한 값을 담을 객체, [복사하고자 하는 객체])
JavaScript
복사
중첩 객체 복사
프로퍼티가 다른 객체에 대한 참조 값이라면
프로퍼티의 값을 검사하면서 그 값이 객체인 경우 객체의 구조도 복사해주는 반복문을 사용
→ 깊은 복사
자바스크립트 라이브러리 lodash의 메서드인 _.cloneDeep(obj)를 사용하면 깊은 복사가 가능 → 중첩 객체도 되나?
객체 생성
let cat = new Object(); // '객체 생성자'
let cat = {}; // '객체 리터럴'
JavaScript
복사
프로퍼티
let cat = {
name: "Munji",
age: 2
}
JavaScript
복사
: (콜론)을 기준으로 왼쪽에는 key, 오른쪽에는 value가 위치
property key = property 이름, 식별자
프로퍼티 이름이 여러 단어를 조합해 만들어진 경우 프로퍼티 이름을 따옴표로 묶어줘야한다.
let cat = {
name: "Munji",
age: 2,
'cat loaf': true
}
JavaScript
복사
프로퍼티 값 생성
let cat[color] = 'yellow';
JavaScript
복사
객체의 프로퍼티 값 읽어오기
점 표기법을 이용해 프로퍼티의 값을 읽어올 수 있다.
alert(cat.name); // Munji
JavaScript
복사
대괄호 표기법
프로퍼티 이름이 여러 단어를 조합해 만들어진 경우 점 표기법을 사용할 수 없음
cat['cat loaf'] = true
alert(cat['cat loaf']); // true
JavaScript
복사
프로퍼티 삭제
delete cat.age;
delete cat['cat loaf'];
JavaScript
복사
const로 선언된 객체는 수정될 수 있을까?
→ ㅇㅇ 가능 전체적으로 설정할 때만 오류가 나고 객체 안의 내용은 수정가능
? const는 주소값을 받아온다? 찾아봐야함
계산된 프로퍼티
객체 생성 시 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러쌓여 있는 경우
let animal = cat;
let box = {
[animal]: 2,
};
alert(box.animal); // 2
JavaScript
복사
Method
hasOwnProperty()
특정 프로퍼티가 해당 객체에 존재하는지 확인
리턴값은 boolean
2. propertyIsEnumerable()
특정 프로퍼티가 해당 객체에 존재하고 열거할 수 있는 프로퍼티인지 확인
3. isPrototypeOf()
4. isExtensible()
5. toString()
6. valueOf()