[JavaScript] Object

 

 

 

 

 

let something = {
  a : 'A',
  b : 'B',
};

 

원시 타입의 값들은 변경할 수 없지만, 객체는 변경할 수 있다. 

객체는 위와 같이 프로퍼티 키와 프로퍼티 값들로 이루어져 있으며, 프로퍼티 값으로는 자바스크립트에서 사용하는 모든 값이 해당될 수 있다. (함수 포함)

 

자바와 C++같이 클래스를 중심으로 객체를 생성하고 인스턴스화하는 클래스 기반 언어들에 반해, 자바스크립트는 프로토타입 기반 객체지향 언어로서 자바와 C++과는 다른 방법으로 객체를 생성한다.

 

 

let something = {
  a : 'A',
  b : 'B',
};

console.log(something);
console.log(something.a);
console.log(something['a']);

 

위와 같이 객체 리터럴을 사용해 쉽게 객체를 생성하고 접근할 수 있다.

 

객체를 생성할 때 프로퍼티 키는 문자열 타입이며, 식별자 네이밍 규칙을 준수하지 않는 경우 따옴표를 붙여야 한다.

 

객체에서 생성되지 않은 프로퍼티에 접근하면 에러가 발생하지 않고 undefined를 반환한다.

 

let something = {
  a : 'A',
  b : 'B',
};

something.c = 'C';

 

프로퍼티를 동적으로 추가할 수 있다.

 

자바와 C++은 클래스에 프로퍼티와 메서드가 정의되어 있어 그대로 객체를 생성해서 사용하지만, 자바스크립트는 클래스 없이 객체를 생성할 수 있고 위와 같이 동적으로 프로퍼티와 메서드(객체 내의 함수)를 추가할 수 있다. 

 

이 부분 덕분에 사용하기는 매우 편리하지만, 클래스 기반 언어보다 객체의 생성과 프로퍼티의 접근에 더 많은 비용이 든다. 

 

이를 해결하기 위해 히든 클래스 방식을 사용해서 성능을 보완했다. 

 

 

 

원시 타입과 객체

 

원시 타입을 변수에 할당할 때, 변수는 메모리 주소를 통해서 메모리 공간에 접근 할 수 있고, 메모리 공간에는 원시 값이 존재한다.

반면에 객체를 변수에 할당할 시 변수는 메모리 주소를 통해서 메모리 공간에 접근할 때 참조 값이 존재한다.

 

여기서 참조 값은 메모리 공간의 주소 그 자체인데, 참조 값을 통해 실제 객체에 접근할 수 있다.

참조 값을 통해서 접근하는 객체는 원시 타입과는 달리 값을 변경할 수 있다. 

 

원시 타입처럼 이전 값을 복사해서 새롭게 생성하는 방식으로 객체를 다루면 정보의 신뢰성이 확보되겠지만, 객체의 크기를 확정할 수 없고 객체마다 크기가 다를 뿐더러 프로퍼티 값으로 객체가 들어올 수도 있어 복사하고 생성하는 과정에서 많은 비용을 사용하게 돼 메모리를 효과적으로 사용할 수 없다.

 

즉, 메모리의 효과적인 사용을 위해서 객체를 변경 가능한 값으로 다룬다.

 

객체는 변경 가능한 값이기 때문에, 여러 개의 변수들이 하나의 객체를 공유하는 현상도 발생할 수 있다. 

 

 

 

---

 

 

 

const 키워드로 선언한 값이 객체 또는 배열인 경우 수정이 가능하다.

 

 

 

 

 

객체 생성 방식에 대해 알아보자.

 

 

1. Literal

 

위에서 보인 예시와 같다.

인스턴스를 여러 개 만들 수 없지만 데이터를 묶어서 값을 보관하거나 매개변수로 값을 전달할 때 사용한다.

 

 

2. new 

 

 

 

php에서 객체를 다룰 때와 비슷하다.

 

객체를 변수에 저장 시 변수는 주소 값을 참조한다.

따라서 변수 값을 조작하면 객체의 값도 함께 변경된다.

 

객체 내부에 객체가 nested 된 경우도 기존 객체에 접근할 때와 동일하게 접근하면 된다.

 

 

3. Constructor

 

 

 

 

생성자를 정의해 객체를 만드는 예시이다.

같은 방식으로 프로퍼티 와 값 쌍을 추가할 수 있다.

 

인스턴스 말고 클래스 자체에 값을 추가하려면 생성자 내부를 조작해야 한다.

 

실무에서는 잘 사용하지 않는 방식이다.

 

 

4. Prototype

 

 

자바스크립트의 모든 객체들은 prototype으로부터 상속받는다.

 

 

 

생성자로 객체를 정의할 때 prototype을 사용하면 생성자 밖에서도 객체에 property와 값 쌍을 추가할 수 있다.

 

가장 많이 사용하는 방식이고, 제이쿼리도 이 방식으로 만들어졌다.

 

 

 

---

 

 

 

 

 

Property 값에 해당하는 Value가 funcition 인 경우 그 Property는 메서드라고 부른다.

aaa.fullName() 로 함수를 호출한다.

 

 

 

객체를 다루는 방법에는 여러 가지가 있다.

 

 

그 중 Object 를 사용하는 예시이다.

John,30,New York 을 출력한다.

 

 

 

 

 

 Getter와 Setter를 사용하는 예시이다.

그냥 함수로 정의해도 괜찮긴 하지만, 간단한 문법으로 사용할 수 있어 함수 대신 사용하기도 한다.

 

 

 

 

 

Object.defineProperty 함수로 객체의 프로퍼티를 정의할 수 있다.

 

 

 

자바스크립트는 iterator 를 제공해 객체를 반복할 때 특정 작업을 추가 할 수 있다.

 

 

 

10 20 30 ... 90 이 출력된다.

 

 

 

이 외에도 자바스크립트는 Set / Map 객체를 제공하는데..

자바에서의 Set / Map과 유사하니 쉽게 이해할 수 있다.

 

필요할 때 찾아서 활용하도록 하자.