[자바스크립트] 객체의 생성과 사용

객체 (Object)

자바스크립트는 객체(object) 기반의 언어이며, 자바스크립트를 이루고 있는 대부분이 객체이다. 그렇기 때문에 자바스크립트에서의 객체는 무엇이며, 어떻게 생성하고 사용하는 지는 매우 중요하다.

 

객체란, 키(key)와 값(value)으로 구성된 프로퍼티(Property, 속성)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.

 

또한, 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

 

이와 같이 객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드(method)로 구성된 집합이다. 그렇기 때문에 객체로 데이터와 동작을 하나의 단위로 구조화하는 것이 용이하다.

 

프로퍼티(property)

프로퍼티는 key와 value로 구성된다. 프로퍼티는 key로 유일하게 식별할 수 있다. 즉, key는 프로퍼티를 식별하기 위한 식별자(identifier)다. key와 value로 사용할 수 있는 값은 아래와 같다.

 

• key : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
• value : 모든 값

 

key에 문자열이나 symbol 값 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열이 된다. 이미 존재하는 key를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.

 

메소드(Method)

프로퍼티 값이 함수일 경우, 해당 프로퍼티를 메소드라 부른다. 즉 메소드는 객체에 내제되어 있는 함수를 의미한다.

 

 

 

 

객체의 생성

자바스크립트는 프로토타입 기반의 객체 지향 언어로, 클래스를 정의한 후 new 연산자를 통해 객체의 생성 방법이 아닌 별도의 생성 방법이 존재한다. (클래스 개념이 없어도, 프로토타입 체인과 클러저 등으로 객체 지향 언어의 개념 구현 가능)

 

하지만, ES6부터 클래스의 개념이 도입되어 기존의 클래스 기반 언어에 익숙한 프로그래머가 보다 빠르게 학습할 수 있는 단순하고 깨끗한 새로운 문법을 제시하여 클래스를 사용하여 객체를 생성하는 것이 가능해졌다. (클래스는 새로운 객체지향 모델을 제공하는 것이 아닌 기존 프르토 타입 기반 패턴의 문법적 설탕이다)

 

객체 리터럴

일반적인 자바스크립트의 객체 생성 방식으로 중괄호({})를 사용하여 객체를 생성한다. 객체 안의 key : value를 선언하여 주어지는 것이다. 

 

이 때 value는 원하는 타입의 값을 집어넣으면 되지만 key는 일반적으로 문자열로 지정한다. 만약, 문자열이나 심볼 이외의 값을 지정하면 암묵적으로 타입이 변환되어 문자열로 변환된다.

 

하지만, 무조건 문자열로서 지정해줘야 하는 경우(따옴표로 감싸야 하는 경우)가 있는데, 바로 띄어쓰기 등이 포함된 자바스크립트에서 사용 가능한 유효한 이름이 아닌 경우이다. 이 때에는 반드시 따옴표를 사용하여야 한다. 또한, 예약어(const, function등)을 key로 사용하면 안된다.

//객체 리터럴
//empty object
const obj = {};

//property => key : value
//property끼리는 콤마(,)로 구분
const personObj = {
    //데이터
    'name' : "HongGilDon",
    gender : 'male'
    //first name, first-name => error => "first name", first_name
    //function : 1 error는 발생하지 않지만 사용X
    
    //메소드
    //this를 이용하여 동일 객체내 프로퍼티 접근
    //빼면 에러 발생
    printInfo : function () {
        console.log(`저는 ${this.name}입니다.`);
    }
}

console.log(typeof personObj); //Object

 

Object 생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다. 빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다. 객체가 소유하고 있지 않은 프로퍼티 키에 값을 할당하면 해당 객체에 프로퍼티를 추가하고 값을 할당한다. 이미 존재하는 프로퍼티 키에 새로운 값을 할당하면 프로퍼티 값은 할당한 값으로 변경된다.

//Object 생성자 : new Object() 
//empty object
const personObj = new Object();

//property 추가
personObj.name = 'HongGilDong';
personObj.gender = 'male';
personObj.printInfo = function () { };

console.log(typeof personObj); //Object

 

생성자 함수

객체 리터럴 방식과 Object 생성자 함수 방식으로 객체를 생성하는 것은 프로퍼티 값만 다른 여러 개의 객체를 생성할 때 불편하다. 동일한 프로퍼티를 갖는 객체임에도 불구하고 매번 같은 프로퍼티를 기술해야 한다. 생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

// 생성자 함수
// 생성자 함수 이름은 일반적으로 대문자로 시작
// 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스
// this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)
// 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 
// 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다
function Person(name, gender) {
    let age = 20;  //private 
    this.name = name;  //public
    this.gender = gender; //public
    this.printInfo = function(){};  //public
    this.getAge() = function() { return this.age; };
}

// 인스턴스의 생성
const person = new Person('Lee', 'male');

console.log(typeof person); //Object
console.log(person); // Person { name: 'Lee', gender: 'male', printInfo: [Function], getAge : [Function] }

console.log(person.age);  //undefined
console.log(person.getAge()); //20

 

자바스크립트의 생성자 함수는 이름 그대로 객체를 생성하는 함수이다. 하지만 자바와 같은 클래스 기반 객체지향 언어의 생성자와는 다르게 그 형식이 정해져 있는 것이 아니라 기존 함수와 동일한 방법으로 생성자 함수를 선언하고 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

 

이는 생성자 함수가 아닌 일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작할 수 있다는 것을 의미한다. 따라서 일반적으로 생성자 함수명은 첫문자를 대문자로 기술하여 구분하는 것이다. new 연산자와 함께 함수를 호출하면 this 바인딩이 다르게 동작한다.

 

 

 

객체의 프러퍼티 사용하기

객체의 프로퍼티 값에 접근하는 방법은 마침표(.) 표기법과 대괄호([]) 표기법이 있다.

//마침표(점 .) 표기법
//key의 따옴표를 없앴을 때, 
//유효한 자바스크립트 이름이고 예약어가 아닌 경우
const person = {
    'first-name' : 'Hong',
    age : 10,
    'lastname' : 'GilDong',
    '1' : 1
}

console.log(person.first-name); //NaN : undefined-undefined
console.log(person.age); //10
console.log(person.lastname); //GilDong
console.log(person.1); //SyntaxError


//대괄호([]) 표기법
//마침표 표기법에 해당 안되는 경우는 무조건 대괄호 표기법으로 접근
//대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열
console.log(person['first-name']); //Hong
console.log(person['age']); //10
console.log(person['lastname']); //GilDong
console.log(person['1']); //1

//존재하지 않는 프로퍼티를 참조하면 undefined 반환
console.log(person['gender']); //undefined

 

 

 

객체의 프로퍼티 값 갱신/추가/삭제

// 프로퍼티값 갱신
// 소유하고 있는 프로퍼티에 새로운 값을 할당
const personObj = {
    'name' : "HongGilDon",
    gender : 'male'

    printInfo : function () {}
}

personObj.name = 'LeeSoonSin';
console.log(personObj['name']); //LeeSoonSin


// 프로퍼티값 추가
// 소유하고 있지 않는 프로퍼티에 값을 할당
console.log(personObj); // { name : 'LeeSoonSin', gender : 'male' }

personObj.printInfo = function () {};

console.log(personObj); // { name : 'LeeSoonSin', gender : 'male', printInfo : [function] }


// 프로퍼티값 삭제
// delete 연산자를 사용
delete personObj.printInfo;
console.log(personObj); // { name : 'LeeSoonSin', gender : 'male' }