자바스크립트는 원시 타입을 제외하고 모든 값이 객체
객체는 JS에서 가장 중요한 데이터 타입
객체는 객체 리터럴과 생성자(함수)로 생성할 수 있다.
[1] 객체
객체
- 이름과 값을 한 쌍으로 묶은 데이터를 여러 개 모든 것
- 데이터 여러 개를 하나로 모은 복합 데이터로 연관 배열 또는 사전이라고도 부른다.
<트럼프 카드를 표현하는 객체>
| 이름 | 값 | |
|---|---|---|
| suit | “하트” | ← 프로퍼티 |
| rank | “A” | ← 프로퍼티 |
프로퍼티 : 객체에 포함된 데이터 하나(이름과 값의 쌍)를 가리켜 객체의 프로퍼티라고 함.
[2] 객체 리터럴로 객체 생성하기
var card = { suit: "하트", rank: "A" };
{…} 부분 → 객체 리터럴
위 코드는 객체 리터럴을 변수 card에 대입하고 있다.
프로퍼티 이름 : 프로퍼티 값
{ } 안에 프로퍼티는 쉼표(,)로 구분
- 프로퍼티 이름 – 모든 식별자와 문자열 리터럴(빈 문자열도 사용 가능)을 사용할 수 있다. 즉, 앞 코드에 있는 프로퍼티 이름은 문자열로 바꾸어 작성할 수 있다.
- 프로퍼티 값 – 모든 데이터 타입의 값과 표현식을 대입 가능
var card = { "suit": "하트", "rank": "A" };
변수에 대입된 객체 안의 프로퍼티 값을 읽거나 쓸 때는 마침표(.) 연산자 또는 대괄호([]) 연산자를 사용
card.suit // → 하트 card["rank"] // → A
마침표로 프로퍼티를 읽거나 쓸 때는 프로퍼티 이름 즉, 식별자만 사용할 수 있다.
대괄호로 프로퍼티를 읽거나 쓸 때는 프로퍼티 이름 또는 문자열을 반환하는 표현식을 사용할 수 있다.
객체에 없는 프로퍼티를 읽으려고 시도하면 undefined를 반환
(선언되지 않은 변수를 읽으려고 시도하면 참조 오류가 발생하는 것과 대조적)
card.color // → undefined
객체 리터럴 안에 어떠한 프로퍼티도 작성하지 않으면 빈 객체가 생성
var obj = {};
console.log(obj) // → Object{ }
[3] 프로퍼티의 추가와 삭제
프로퍼티 추가 : 없는 프로퍼티 이름에 값을 대입하면 새로운 프로퍼티가 추가된다.
var card = { suit: "하트", rank: "A" };
card.value = 14;
console.log(card); // → Object { suit: "하트", rank: "A", value: 14 }
프로퍼티 삭제 : delete 연산자 사용
var card = { suit: "하트", rank: "A", value: 14 };
delete card.rank;
console.log(card); // → Object { suit: "하트", value: 14 }
[4] in 연산자로 프로퍼티가 있는지 확인하기
in 연산자를 사용하면 객체에 특정 프로퍼티가 있는지 확인할 수 있다.
var card = { suit: "하트", rank: "A" };
console.log("suit" in card); // → true
console.log("color" in card); // → false
console.log("toString" in card); // → true
in 연산자가 조사하는 대상이 그 객체가 가진 프로퍼티와 그 객체가 상속받은 모든 프로퍼티라는점에 주의한다.
card 객체 안에 toString 프로퍼티는 없지만, 결과를 보면 toString 프로퍼티가 card에 있다고 나온다. 이는 card가 Object 객체를 상속받았기 때문이다.
[5] 객체 리터럴 예제
<좌표평면의 점을 표현하는 객체>
var p = { x: 1.0, y: 2.5};
<원을 표현하는 객체>
var circle = {
center: { x: 1.0, y: 2.0 }, // 원의 중심을 표현하는 객체
radius: 2.5 // 원의 반지름
}
객체의 프로퍼티 값으로 객체를 대입할 수 있다.
circle.center.x // → 1.0
<회원 정보를 표현하는 객체>
var person = {
name: "이정규", // 회원 이름
age: 18, // 나이
sex: "남", // 성별
married: false // 결혼 여부를 표현하는 논리값
}
[6] 메서드
프로퍼티에 저장된 값의 타입이 함수면 그 프로퍼티를 메서드(4.2 [13])라고 부른다.
[7] 객체는 참조 타입
객체 타입의 값을 변수에 대입하면 그 변수에는 객체의 참조(메모리에서의 위치 정보)가 저장된다.
이때의 변수 상태를 가리켜 그 객체는 ‘참조하고 있다‘ 라고 한다.
var card = { suit: "하트", rank: "A" };
변수 card에 트럼프 카드 객체의 참조가 저장되어 있다.
var card = { suit: "하트", rank: "A" };
var a = card;
console.log(a.suit); // → 하트
a.suit = "스페이드";
console.log(a.suit); // → 스페이드
console.log(card.suit); // → 스페이드
< 참고문헌 >
🔹주 참고문헌 : 모던 자바스크립트 입문 – 이소 히로시 지음, 서재원 옮김
🔹MDN Web Docs
