자바스크립트에서 기본 자료형을 제외한 거의 모든 것이 객체로 구성됐다고 해도 과언이 아닐 정도로 객체는 정말 중요한 개념입니다. 객체는 리터럴 방식으로 직접 정의 하기도 하고, 자바스크립트나 웹 브라우저에서 제공하는 객체도 있습니다. 지금부터 다양한 객체의 종류와 개념을 하나씩 알아보도록 하겠습니다.
⭐️ 객체(Object)란❓
“키(key)와 값(value)으로 구성된 속성(Property)들의 집합”
자바스크립트에는 모두 8가지의 자료형이 있습니다. 그 중 7가지는 원시형(primitive type) 이라고 불리는 숫자, 문자열, 불리언, null, undefined, Symbol이고, 나머지 1가지는 바로 오늘 알아볼 “객체형(object type)”입니다. 이때 원시형을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체라고 할 수 있다.
객체는 기본적으로 중괄호 { } 를 이용하여 만들 수 있습니다. 중괄호 안에는 앞서는 Key와 value 의 쌍으로 구성된 property들이 여러개 들어있습니다.
그래서 객체는 는 key 와 value 의 쌍으로 이루어진 conatiner 라고 말하기도 합니다.
key와 value가 허용되는 범위는 다음과 같습니다.
key
- 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
- key는 property의 이름으로 사용됩니다.
value
- 모든 자료형 허용
// 객체 정의
var person = {
firstName: "길동", // firstName 프로퍼티
lastName: "홍", // lastName 프로퍼티
age: 30 // age 프로퍼티
};
// 객체의 프로퍼티에 접근
console.log(person.firstName); // "길동" 출력
console.log(person.lastName); // "홍" 출력
console.log(person.age); // 30 출력method
속성(property)의 값(value)이 함수일 경우가 있습니다. 이때는 함수라고 부르지 않고, Method라고 부릅니다.
메소드는 일반함수와 달리 객체 안에서 동작하는 함수를 의미합니다.
// 객체 정의
var person = {
firstName: "John",
lastName: "Doe",
fullName: function() { // fullName 프로퍼티에 함수 할당
console.log(`${this.firstName} + ${this.lastName}`)
}
};
// 객체의 메서드 호출
console.log(person.fullName()); // "길동 홍" 출력⭐️ 객체 생성 방법
1️⃣ 객체 리터럴
가장 직관적이고 일반적인 객체 생성 방식
중괄호{ } 를 사용해 객체를 만든다.
이때 중괄호{ }안에서 property를 정의 하고, 혹여나 중괄호{ } 내에 아무것도 기술하지 않으면 빈 객체가 생성된다.
const person = {
name: '홍길동',
age: 30,
greet: function() {
console.log('Hello, my name is ' + this.name + '!');
}
};
person.greet(); // 출력: Hello, my name is 홍길동!2️⃣ 생성자 함수
생성자 함수와 new 키워드 사용하여 생성
생성자 함수는 일반적인 함수랑 차이는 없습니다. 다만 생성자 함수는 아래 두가지 관례를 따릅니다.
-
함수 이름의 첫 글자는 대문자로 시작합니다.
-
반드시
new키워드를 붙여 실행합니다.
new 키워드를 사용하여 함수를 사용하면
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log('Hello, my name is ' + this.name + '!');
};
}
const person1 = new Person('홍길동', 30);
person1.greet(); // 출력: Hello, my name is 홍길동!3️⃣ 클래스 사용
ES6+ 클래스 기반 문법 사용
class 키워드 사용 정의 이후 new 키워드로 생성.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log('Hello, my name is ' + this.name + '!');
}
}
const person = new Person('John Doe', 30);
person.greet(); // 출력: Hello, my name is John Doe!리터럴 vs 생성자 vs 클래스 비교
객체 사용에 있어 Class가 꼭 필요한 것은 아님.
객체지향(OOP)적으로 코드를 작성할 때 Class 사용합니다. (독립된 영역을 구현)
⭐️객체 속성(Property)에 접근하기
1️⃣ 대괄호 표기법 ([ ]) 연산자
배열의 index 처럼 대괄호[ ]안에 객체의 key 값을 통해 value에 접근하는 방식이다.
const person = {
'name': '홍길동',
age: 30,
gender: 'male',
};
console.log(person['name']); // '홍길동' 출력
console.log(person[age]); // ReferenceError: age is not defined
console.log(person['age']); // 30 출력
console.log(person.name); // '홍길동' 출력
console.log(person.age); // 30 출력대괄호([]) 표기법을 사용하는 경우, 대괄호 내에 들어가는 Key프로퍼티 이름은 반드시 “문자열”이어야 합니다.
문자열이 들어가지 않으면 변수를 참조하는 것으로 취급하게 됩니다.
해당 이름의 변수가 없다면 위에서 예시와 같이 ReferenceError 를 반환하게 되지만, 해당 이름의 변수와 같은 변수가 존재한다면, 해당 변수를 참조하게 되어 오류를 발생시킬 수도 있습니다.
2️⃣ 마침표 표기법 ( . ) 연산자
객체에 접근하는 가장 기본적인 연산자!!
const person = {
'name': '홍길동',
age: 30,
gender: 'male',
};
console.log(person.name); // '홍길동' 출력
console.log(person.age); // 30 출력마침표 표기법은 아주 간단합니다. 객체(object)뒤에 . 연산자를 통해 key 프로퍼티를 명시하면, 해당하는 값을 불러올 수 있습니다.
이때, 예제와 같이 key 값이 문자열로 되어있더라도, 변수처럼 사용하면 정상적으로 동작합니다.
참고로 객체에 존재하지 않는 값을 참조한다면, undefined 을 반환합니다.
⭐️ 프로퍼티 값 갱신과 동적 생성
객체가 소유하고 있는 프로퍼티에 새로운 값을 할당하면 프로퍼티 값을 갱신할 수 있습니다.
즉, 객체가 가지고 있는 프로퍼티를 읽어 오는 것 뿐만아니라, 쓰는 것도 가능하다는 것입니다.
아래 예시를 통해 아주 간단하게 확인 해볼 수 있습니다.
const person = {
'name': '홍길동',
age: 30,
gender: 'male',
};
person.name = '배고파'
person['age'] = 40
console.log(person['name']) // '배고파' 출력
console.log(person.age) // 40 출력앞서 객체 표기법을 설명해 드리면서 마지막에 “객체에 존재하지 않는 값을 참조한다면, undefined 을 반환합니다.”라고 설명을 드렸습니다. 만약 존재 하지 않았다면 아무런 반환 없이 Error를 반환하였을 것입니다.
이 상황에 대해서 자세히 생각해보면, undefined 도 하나의 리터럴로써 초기화가 진행 되었다는 것을 추측할 수 있습니다.
즉, 자바스크립트 객체의 특징 중 한가지는 바로 “객체에 동적으로 프로퍼티를 생성하는 것이 가능”하다는 것입니다.
const person = {
'name': '홍길동',
age: 30,
};
person.gender = 'male';
console.log(person); // {name: '홍길동', age: 30, gender: 'male'} 출력참조
