쫌만알자! (14) - 객체란 무엇일까?
Yeony (Nayeon Kim) · 2022-10-26
자바스크립트는 객체 없이 존재하지 않는다! 라는 말이 있을 정도로 자바스크립트를 구성하는 대부분이 객체(object)입니다.
자바스크립트는 원시 타입의 값을 제외한 모든 것이 객체입니다.
원시 타입이 기억나지 않는다면 자바스크립트 자료형 글을 다시 읽어봐주세요.
객체 구성
객체는 프로퍼티의 집합이며, 프로퍼티는 key - value 쌍으로 이루어져 있습니다.
프로퍼티에는 무엇이든 할당 가능합니다. 자바스크립트에서 사용할 수 있는 값이라면요. 문장, 숫자, 함수까지 프로퍼티에 작성할 수 있습니다. 다만 함수를 객체의 프로퍼티로 넣는 경우는 메소드라고 부릅니다.
- 프로퍼티 : 객체 상태의 값
- 메소드 : 프로퍼티를 참조하고 컨트롤할 수 있다.
객체 생성 방법
객체 생성 방법에는 여러가지가 있습니다.
가장 간단한 방법인 객체 리터럴부터 알아보겠습니다.
객체 리터럴
객체 리터럴은 중괄호({}) 안에 프로퍼티를 정의하는 방식입니다.
let obj = {
name: 'Yeony',
age: 24,
sayHi: function() {
console.log(`Hi, I am ${this.name}!`);
}
};
코드블록을 설명할 때 코드블록은 {} 로 감싸져 있는 하나의 실행 단위를 의미한다고 했는데요. 객체 리터럴을 정의할 때 사용하는 중괄호는 코드 블록이 아닙니다.
생성자 함수(Constructor) 이용
함수는 뒤에서 좀더 알아볼 예정이지만, 여기서 간단하게 언급하고 가겠습니다.
생성자 함수는 인스턴스를 만들고 초기화하는 특수한 함수입니다.
생성자 함수가 호출되면
- 새로운 빈 객체가 생성됩니다.
this키워드는 새로 생성된 객체를 참조하기 시작하고, (this가) 현재 인스턴스가 됩니다.- 새 객체가 생성자의 반환 값으로 반환됩니다.
// 생성자
function User() {
this.name = 'Yeony';
}
var user = new User();
Object() 객체 생성자 함수 사용하기
자바스크립트의 내장 함수인 Object() 생성자 함수입니다.
let scores = new Object();
scores.korean = 100;
scores.math = 70;
scores.english = 88;
scores.getAverage = function() {
console.log(`${(this.korean + this.math + this.english)/3}`)
}
이런 형태로 만들고 호출할 수 있습니다.
생성자 함수들은 이후 함수와 함께 알아보도록 합시다. 여기서는 객체 리터럴 형태로만 작성해봅니다.
객체 살펴보기
객체는 프로퍼티의 집합입니다. 프로퍼티란 뭘까요?
프로퍼티
프로퍼티(property)란, 속성이라는 뜻입니다. 객체 내부의 속성이라는 것이죠.
이런 프로퍼티를 객체 안에 나열할 때에는 쉼표(,)로 구분합니다.
let obj = {
name: 'Yeony',
age: 24
};
obj 객체에서 key는 name과 age입니다. 그리고 이 key로 접근할 수 있는 것이 'Yeony'와 24입니다.
- 프로퍼티 key : string(문자열) 혹은 Symbol 값
- 프로퍼티 value : JS에서 사용할 수 있는 모든 값
key에는 빈 문자열도 사용 가능합니다.
let obj = {
"": 'Hi'
}
console.log(obj) // {"": 'hi'}
변수 명명 규칙 에서 살펴봤듯, 자바스크립트에서는 식별자 네이밍 규칙이 있습니다.
객체의 프로퍼티 key도 이를 지키지 않으면 작성할 수 없습니다.
let obj = {
unvalid-key : 'err'
}
// Uncaught SyntaxError: Unexpected token '-'
하지만, 자바스크립트의 프로퍼티 key는 문자열이 사용 가능합니다.
따라서 아래와 같이 작성할 수 있습니다.
let obj = {
'valid-key' : 'success'
}
프로퍼티 접근
프로퍼티에 접근할 수 있는 방식은 2가지가 있습니다.
- 마침표로 접근
- 대괄호로 접근
let obj = {
name: 'Yeony',
'2022': 'working',
'2021': 'studied',
'last-name': 'Kim'
}
위와 같은 객체를 생성한 후 name에 접근하려면 이렇게 할 수 있습니다.
obj.name // 'Yeony'
하지만 다른 프로퍼티들은 마침표로 접근하게 되면 에러가 나죠.
obj.2022 // Uncaught SyntaxError: Unexpected number
이런 에러가 나는 이유는, 식별자 네이밍 규칙에 위배되기 때문입니다. 변수를 선언할 때는 숫자로 시작하거나, 숫자만으로 작성할 수 없기 때문이죠.
따라서 식별자 명명 규격에서 벗어나는 프로퍼티 키에 접근하기 위해서는 대괄호를 이용해 접근합니다.
obj[2022] // 'working'
obj['2022'] // 'working'
obj['last-name'] // 'Kim'
대괄호로 접근할 때에 대괄호 속에 들어가는 키는 무조건 문자열이어야 합니다. (숫자의 경우는 생략 가능)
name을 대괄호로 접근하면 어떻게 될까요?
obj[name]; // ReferenceError: name is not defined
여기서 name은 string이 아니라 하나의 변수처럼 받아들여진 겁니다. 따라서 프로퍼티 키인 name에 접근하려면 아래와 같이 작성합니다.
obj['name']
let name = 'name' // 변수 선언 및 할당
obj[name]
변수를 통해 객체의 프로퍼티 값에 접근하는 방법을 알아두면 유용하게 사용할 수 있습니다.
프로퍼티 업데이트
이미 존재하고 있는 프로퍼티에 값을 재할당 할 수 있습니다.
let obj = {
name: 'Yeony',
'2022': 'working',
'2021': 'studied',
'last-name': 'Kim'
}
obj.name = 'Nayeon';
console.log(obj.name); // 'Nayeon'
프로퍼티 생성
프로퍼티는 꼭 객체 리터럴 생성 시 명시한 것만 읽거나 수정할 수 있는 것은 아닙니다. 프로퍼티를 동적으로 생성하는 것도 가능합니다.
존재하지 않는 프로퍼티에 값을 할당하면 됩니다.
let obj = {
name: 'Yeony',
'2022': 'working',
'2021': 'studied',
'last-name': 'Kim'
}
obj.location = 'Seoul';
console.log(obj)
// {2021: 'studied', 2022: 'working', name: 'Yeony', last-name: 'Kim', location: 'Seoul'}
ES6에서 추가된 기능도 사용해 볼까요?
스프레드 연산자(...)와 프로퍼티 축약 표현을 통해 아래와 같이 작성할 수 있습니다.
let obj = {
name: 'Yeony',
'2022': 'working',
'2021': 'studied',
'last-name': 'Kim'
}
let a = 10, b = 20;
// 스프레드 연산자로 obj 객체 복사
// 프로퍼티 축약표현으로 a, b 프로퍼티 추가
obj = {...obj, a, b}
console.log(obj); // {2021: 'studied', 2022: 'working', name: 'Yeony', last-name: 'Kim', a: 10, b: 20}
프로퍼티 삭제
자바스크립트 예약어 모음 에서 delete 연산자를 언급한 적이 있는데요.
delete 연산자는 객체의 프로퍼티를 삭제합니다.
delete obj['2022']
delete obj.location
console.log(obj) // {2021: 'studied', name: 'Yeony', last-name: 'Kim'}
메소드 (Method)
함수도 객체의 프로퍼티가 될 수 있습니다. 아직 함수를 알아보진 않았지만 간략히 보고 넘어갑시다.
프로퍼티 값이 함수일 경우에 우리는 메소드라고 부릅니다. 일반 함수와 구분하기 위함입니다.
let obj = {
name : 'Yeony',
sayHi: function () {
return `Hi, I am ${this.name}`;
}
}
console.log(obj.sayHi()); // Hi, I am Yeony
메소드에서 사용한 this 키워드는 객체 자기 자신(obj)을 가리킵니다. this 키워드는 자바스크립트에서 아주 복잡하게 움직입니다. 이 후 좀더 자세히 살펴보도록 합시다.
◾ 자바스크립트의 타입 변환 👈 이전 글 보기