자바스크립트 object 객체

자바스크립트 object 객체

자바스크립트는 객체 기반의 스크립트 언어이며 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식)은 모두 객체이다.

자바스크립트 객체는 key와 value로 구성된 프로퍼티들의 집합이다.

정적인 객체 정의와 동적인 객체 정의

C++, C#, Java와 같은 객체지향 언어는 Object라는 개념을 가지고 class로 객체의 형식과 타입을 정의하고 실체화 하여 객체를 사용한다.

하지만 자바스크립트는 객체를 만들고 객체를 정의한다.

그래서 자바스크립트는 동적인 객체정의라고 하고 기존의 언어에서는 정적으로 객체를 정의한다.

객체 생성 방법

객체 리터럴

var person = {
  name : "Gildong",
  age : 20,
};

Object 생성자 함수

var person = new Object();

person.name = "name";
person.age = 20;

var person = new Object();

person["name"] = "Gildong";
person.["age"] = 20;

객체에 있는 값을 접근할 때 키로 변수를 사용한다면 아래와 같은 방법을 사용한다.

var person = new Object();
var key = "name";
person[key] = "Gildong";

객체 리터럴 방식으로 생성된 객체는 내부적으로 자바스크립트 엔진이 object 생성자 함수를 사용하여 객체를 생성한다.

생성자 함수

객체 리터럴 방식과 Object 생성자 함수 방식으로 객체를 생성하는 것은 동일한 프로퍼티를 가지는 객체임에도 매번 같은 프로퍼티를 정의해야하기 때문에 번거롭다.

이럴 때 생성자 함수를 사용하여 객체를 생성하기 위한 클래스처럼 사용할 수 있다.

function Person(name, age) {
  this.name = name;
  this.age = age;
};

var Person1 = new Person("Gildong", 20);
var Person2 = new Person("Minsu",30);

생성자 함수 이름은 일반적으로 대문자로 시작한다.

this에 바인딩 되어있는 프로퍼티와 메소드는 public하고 생성자 함수 내에서 선언된 일반 변수는 private 하다.

function Person(name, age) {
  var gender = "male";
  this.name = name;
  this.age = age;
};

var Person = new Person("Gildong", 20);

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

Pass-by-reference

원시 타입은 값이 한번 정해지면 변경할 수 없지만(immutable) 객체는 프로퍼티의 추가, 변경, 삭제가 가능한 변경 가능한(mutable) 값이다.

따라서 객체 타입은 동적으로 관리 되어야하기때문에 런타임에 메모리 공간을 확보하고 메모리의 힙 영역에 저장된다.

var obj1 = {val : 1};
var obj2 = {val : 1};
console.log(obj1.val === obj2.val); //true
console.log(obj1 === obj2);  //false

객체의 분류

• Built-in Object
  • Standard Buiilt-in Object
  • BOM(Browser Object Model)
  • DOM(Document Object Model)
• Host Object