자바스크립트
- 객체 기반의 프로그래밍 언어
- 구성 요소 대부분이 객체
- 원시 값 제외한 나머지 값 = 모두 객체
- 함수, 배열, 정규 표현식
원시 타입 vs 객체 타입
- 원시 타입
- 단 하나의 값만 나타냄
- 객체 타입 (object/reference type)
- 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
- 원시 값 또는 다른 객체
- 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조
- 원시 값 (원시 타입의 값)
- 변경 불가능한 값
- 객체 타입의 값 (객체)
- 변경 가능한 값
객체
- 0개 이상의 프로퍼티로 구성된 집합
- 프로퍼티 구성 요소
- 키(key)
- 값(value)
- 자바스크립트에서 사용할 수 있는 모든 값이 들어갈 수 있음
- 함수는 일급 객체이므로 가능
- 프로퍼티 값이 함수일 경우 메서드라 부름
- 함수는 일급 객체이므로 가능
- 자바스크립트에서 사용할 수 있는 모든 값이 들어갈 수 있음
- 객체는 프로퍼티와 메서드로 구성된 집합체
- 프로퍼티: 객체의 상태를 나타내는 값
- 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작
- 객체는 상태와 동작을 하나의 단위로 구조화할 수 있어 유용함
객체 리터럴에 의한 객체 생성
C++ / 자바
- 클래스 기반 객체지향 언어
- 클래스 사전 정의 후 필요시 new 연산자와 함께 생성자 호출하여 인스턴스 생성
- 클래스: 인스턴스를 생성하기 위한 템플릿의 역할
- 인스턴스
- 클래스에 의해 생성되어 메모리에 저장된 실체
- 객체가 메모리에 저장되어 실제로 존재하는 것
자바스크립트
- 프로토타입 기반 객체지향 언어
- 다양한 객체 생성 방법 지원
- 객체 리터럴 : 가장 일반적이고 간단한 방법
- 객체를 생성하기 위한 표기법
- 중괄호 내에 0개 이상의 프로퍼티를 정의
{ … }
- 변수에 할당되는 시점에 JS엔진은 객체 리터럴을 해석하여 객체 생성
- 중괄호 내에 프로퍼티 정의 X → 빈 객체 생성
- JS의 유연함과 강력함을 대표하는 객체 생성 방식
- 객체 리터럴 외의 객체 생성 방식은 모두 함수를 사용하여 객체 생성
- Object 생성자 함수
- 생성자 함수
- Object.create 메서드
- 클래스 (ES6)
- 객체 리터럴 : 가장 일반적이고 간단한 방법
프로퍼티
💡
객체 = 프로퍼티의 집합
프로퍼티 = 키와 값으로 구성
- 프로퍼티 키
- 프로퍼티 값에 접근할 수 있는 이름 ⇒ 식별자 역할
- 프로퍼티 키 동적 생성
- 프로퍼티 키로 사용할 표현식을 대괄호로 묶으면 됨
var obj = {}; var key = 'hello'; obj[key] = 'world'; console.log(obj); // {hello: "world"}
메서드
- 객체에 묶여 있는 함수
- this 키워드
var circle = { radiu: 5, getDiameter: function() { return 2 * this.radius; } }; console.log(circle.getDiameter());
- 메서드 내부에서 사용한
this
키워드- 객체 자신을 가리키는 참조 변수
- 메서드 내부에서 사용한
프로퍼티 접근
- 마침표 표기법
.
- 대괄호 표기법
[ … ]
- 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 함 ⇒ person[’name’]
- 객체에 존재하지 않는 프로퍼티 접근 → undefined 반환
프로퍼티 삭제
delete
연산자 통하 객체의 프로퍼티 삭제 ⇒ delete person.age;
ES6에서 추가된 객체 리터럴의 확장 기능
프로퍼티 축약 표현
var x = 1, y = 2
const obj = { x, y };
console.log(obj) // {x: 1, y: 2}
계산된 프로퍼티 이름
const prefix = 'prop';
let i = 0;
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
}
console.log(obj) // {prop-1: 1, prop-2: 2, prop-3: 3}
메서드 축약 표현
const obj = {
name: 'Lee',
// 기존
sayBye: function(){
console.log('Bye ' + this.name;
}
// 축약
sayHi() {
console.log('Hi ' + this.name);
}
}
obj.sayHi(); // Hi Lee