[TIL]JavaScript_객체

Sohee Yeo·2023년 6월 2일

객체(Object)

객체란 키(key)와 값(value)으로 구성된 프로퍼티의 집합이다. 여러 속성(property)을 하나의 변수에 담는 데이터 구조이다. 자바스크립트에서는 함수, 배열 등 대부분의 것들이 객체이다.

let member = {
	name: 'Kim',
  	age: 20
};

member라는 변수 안에 { }를 사용하여 객체를 표현하였다.

프로퍼티

위의 코드에서 객체 member의 프로퍼티는 name: 'Kim' 과 age: 20이다. 객체의 상태를 나타내는 값을 프로퍼티라 하며, 콤마(,)로 구분한다.

키와 값

콜론(:)을 기준으로 왼쪽은 키(key), 오른쪽은 값(value)이다.
위의 코드에서 name과 age는 키(key)이고, 'Kim'과 20은 값(value)이다.

프로퍼티 키

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 프로퍼티 키에는 빈 문자열을 포함한 모든 문자열 또는 심벌 값을 사용할 수 있다.

키는 식별자 네이밍 규칙을 따르지 않는다면 반드시 따옴표('')를 사용해야 한다.

let member = {
	firstName: 'Jenny',
  	'last-name': 'Kim'
};

따옴표를 생략한다면 자바스크립트 엔진은 last-name을 - 연산자가 있는 표현식으로 해석한다.

let member = {
	firstName: 'Jenny',
  	last-name: 'Kim'  // Uncaught SyntaxError: Unexpected token '-'
};

프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. 예를 들어, 숫자 리터럴을 사용하면 문자열로 반환된다.

let number = {
	0: 10,
  	1: 20,
  	2: 30
};

console.log(number)  // {0: 10, 1: 20, 2: 30}

이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

let member = {
	name: 'Kim',
  	name: 'Lee'
};

console.log(member)  // {name: 'Lee'}

📢 var, function과 같은 예약어를 프로퍼티 키로 사용해도 되지만, 예상치 못한 에러가 발생할 수 있으므로 권장하지 않는다.

프로퍼티 값

프로퍼티 값은 문자열, 숫자, 함수 등 자바스크립트에서 사용할 수 있는 모든 값이 들어올 수 있다. 이 중 프로퍼티 값이 함수일 경우 메서드라 부른다.

let member = {
	name: 'Kim',
  	message: function(){  // 여기서 message가 메서드
    	console.log('안녕하세요');
    }
};

객체 생성

자바스크립트에서의 객체 생성 방법은 여러가지가 있다.

객체 리터럴
Object 생성자 함수
생성자 함수
Object.create 메서드
클래스

let member = {};  // 객체 리터럴
let member = new Object();  // Object 생성자 함수

이 방법 중 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다.

프로퍼티 접근

프로퍼티에 접근하는 방법은 .를 사용하는 마침표 표기법(dot notation)과
[]를 사용하는 대괄호 표기법(bracket notation)이 있다.

마침표 표기법(dot notation)

let member = {
	name: 'Kim'
};

console.log(member.name); // Kim

대괄호 표기법(dot notation)
대괄호 표기법에서 대괄호 내부에 지정하는 프로퍼티 키는 반드시 따옴표('')로 감싼 문자열이어야 한다. 따옴표로 감싸지 않으면 식별자로 해석하기 때문이다.

let member = {
	name: 'Kim'
};

console.log(member['name']); // Kim

console.log(member[name]); // undefined

프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름이라면, 프로퍼티 접근 시 반드시 대괄호 표기법을 사용해야 한다.

let member = {
	'last-name': 'Kim'
};

console.log(member.'last-name'); // Uncaught SyntaxError: Unexpected string
console.log(member.last-name); // NaN

console.log(member[last-name]); // Uncaught ReferenceError: last is not defined
console.log(member['last-name']; // Kim

📍 member.last-name을 실행하면 자바스크립트 엔진은 먼저 member.last를 평가한다. member 객체에는 프로퍼티 키가 last인 프로퍼티가 없기 때문에 member.last는 undefined로 평가된다. 다음으로 자바스크립트 엔진은 name이라는 식별자를 찾는데, 어디에도 name이라는 식별자 선언이 없으므로 ReferenceError가 발생한다. 그런데 브라우저 환경에는 name이라는 전역 변수가 암묵적으로 존재하는데, 전역변수 name의 기본값은 빈 문자열이다. 따라서 member.last-name은 undefinded-''와 같으므로 NaN을 출력한다.

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

let member = {
	name: 'Kim'
};

member.name = 'Lee';

console.log(member); // {name: 'Lee'}

프로퍼티 값 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성된다.

let member = {
	name: 'Kim'
};

member.age = 20;

console.log(member); // {name: 'Kim', age: 20}

프로퍼티 값 삭제

delete 연산자를 사용하여 프로퍼티 값을 삭제한다. 이 때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다. 존재하지 않는 프로퍼티를 삭제해도 에러가 나지 않는다.

let member = {
	name: 'Kim'
};

member.age = 20;

delete member.age;

delete member.number; // 에러 X

console.log(member); // {name: 'Kim'}

정리

객체란 키(key)와 값(value)으로 구성된 프로퍼티의 집합이다.
프로퍼티 키에는 빈 문자열을 포함한 모든 문자열 또는 심벌 값을 사용할 수 있다.
프로퍼티 값은 문자열, 숫자, 함수 등 자바스크립트에서 사용할 수 있는 모든 값이 들어올 수 있다.
프로퍼티 값이 함수일 경우 메서드라 부른다.
마침표 표기법 obj.property
대괄호 표기법 obj['property']. 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름이라면, 프로퍼티 접근 시 반드시 대괄호 표기법을 사용해야 한다.
이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.
존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성된다.
delete 연산자를 사용하여 프로퍼티 값을 삭제한다.