자바스크립트 - 객체/프로퍼티/객체 생성방법

1. 객체(Object)란?

자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

 

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

 

이와 같이 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다.

 

2. 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

var person = {
  // 프로퍼티 키는 name, 프로퍼티 값은 'Lee'
  name : 'Lee',
  // 프로퍼티 키는 age, 프로퍼티 값은 20
  age : 20
};

프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값은 다음과 같다.

 

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값

프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

 

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다.

심벌 값도 프로퍼티 키로 사용할 수 있지만 일반적으로 문자열을 사용한다.

 

프로퍼티 키는 문자열 이므로 따옴표로 묶어야 하지만 자바스크립트에서 사용 가능한 유효한 이름인 경우 따옴표를 생략할수 있다.

반대로 말하면 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

 

3. 객체 생성방법

    3.1  객체 리터럴

    가장 일반적인 자바스크립트 객체 생성방식이다. 

    중괄호 ({})를 사용하여 객체를 생성하는데 {} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체를 생성할수 있다.

    {} 내에 아무것도 선언하지 않으면 빈 객체가 생성된다.   

var emptyObject = {};
console.log(typeof emptyObject); // object

var person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}

person.sayHello(); // Hi! My name is Lee

    3.2  생성자 함수

    객체 리터럴 방식은 프로퍼티값만 아니라 다른 객체를 생성할 때 불편하다.

    동일한 프로퍼티를 갖는 객체임에도 불구하고 매번 같은 프로퍼티를 기술해야 한다.

var person1 = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

var person2 = {
  name: 'Kim',
  gender: 'female',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

위는 객체 리터럴 방식으로 객체를 생성한 것이고 아래는 생성자 함수를 통해 객체를 생성한 방식이다.

// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}

// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.log('person1: ', typeof person1);
console.log('person2: ', typeof person2);
console.log('person1: ', person1);
console.log('person2: ', person2);

person1.sayHello();
person2.sayHello();

 

• 생성자 함수 이름은 일반적으로 대문자로 시작한다. 이것은 생성자 함수임을 인식하도록 도움을 준다.
• 프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킨다.
• this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.
• 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

function Person(name, gender) {
  var married = true;         // private
  this.name = name;           // public
  this.gender = gender;       // public
  this.sayHello = function(){ // public
    console.log('Hi! My name is ' + this.name);
  };
}

var person = new Person('Lee', 'male');

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

console.log(person.gender);  // 'male'
console.log(person.married); // undefined

 

자바스크립트 생성자 함수는 말그대로 객체를 생성하는 함수이다. 

자바스크립트는 자바와 같은 클래스 기반 객체지향 생성자와는 다르게 그 형식이 정해져 있지 않고

기존 함수와 동일한 방법으로 생성자 함수를 선언하고 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다.

 

즉 일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작할수 있다는 것을 의미한다.

따라서 일반적으로 생성자 함수명은 첫문자를 대문자로 기술하여 혼란을 방지하려고 한다.