JavaScript Object

coolchaem·2021년 10월 7일

JavaScript

목록 보기

2/4

Object 정의

0개 이상의 property, method로 구성된 집합
- property: key, value로 구성
- method: property를 참조하고 조작할 수 있는 behavior

var person = {
  name: 'Cool', //property
  sayHello: function() {
    console.log(`Hello! My name is ${this.name}`);
  }
};

Object의 property는 hash table을 이용하여 저장된다.
- key를 이용해 value로 바로 반환할 수 있는 구조체이다.
- 내부적으로, hash function을 이용하므로 key와 value가 바로 매칭이 된다.

Object type 설명

비교 설명

Primitive type	Object type
원시 값은 변경 불가능한 값	객체는 변경 가능한 값
메모리 공간에 실제 값이 저장	메모리 공간에 참조 타입의 값이 저장
pass by value	pass by reference
number, bool, null, undefined, string, symbol	object

예시. Primitive type memory
- 변경 불가능한 값이라는 말이 어려울 수 있으나, 그림으로 보면 단순하다.
- 변수 값은 변경되는데 10, 1000, undefined 값은 원시 값이라 수정할 수 없다.

// code로 표현하면 다음과 같다.
var num;
num = 10;
num = 1000;

pass by value vs pass by reference

변수를 다른 변수에 할당할 때, 값에 의한 전달인지 참조 값이 전달되는지를 의미한다.

let a1 = 5;
let a2 = a1; // 값에 의한 전달
a2 = 10; // a2: 5 -> 10
console.log(a1); // 5
console.log(a2); // 10

let b1 = {
  name: "Cool"
};

let b2 = b1; // 참조 값 전달, shallow copy
b2.name = "Change";

console.log(b1 === b2); // true;
console.log(b1); // Change
console.log(b2); // Change

Object 생성 방법

Object literal

중괄호({...}) 내에 0개 이상의 property를 정의
JavaScript의 대표적인 특징으로, 유연성을 볼 수 있음

var person = {
  name: 'Cool',
  age: 20
};

console.log(typeof person); // object
console.log(person); // {name:"Cool", age:20}

Object() constructor

Ojbect constructor는 Object wrapper를 생성한다.
new keyword를 이용해 생성한다.
JavaScript는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date, RegExp 등의 빌트인 생성자 함수를 제공한다.

// 객체 생성
var person = new Object();
// property 추가 방법
person.name = 'Cool';
person.age = 20;

var person2 = new Object(person);

console.log(person); // {name: 'Cool', age: 20}
console.log(person2); // {name: 'Cool', age: 20}

Constructor function

함수 형태로 object를 생성하기 위한 템플릿(혹은 클래스)를 만들어 두는 방식이다.
- this keyword로 생성될 instance에 property를 추가한다.

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

// 객체 생성
var person1 = new Person('Cool', 20);
var person2 = new Person('hot', 30);

console.log(person1); // {name: 'Cool', age: 20}
console.log(person2); // {name: 'hot', age: 30}

Object.create() function

prototype object와 property를 갖는 새로운 object를 생성한다.
- prototype: JavaScript 언어는 prototype 기반의 프로그래밍 언어라는 특성이 있는데, object는 prototype 속성을 통해 parent object와 연결되어 있다.

var person = {
  name: 'Cool',
  age: 20
};
console.log(Object.getPrototypeOf(person) === Object.prototype); // true
var person2 = Object.create(person);
console.log(Object.getPrototypeOf(person2) === Object.prototype); // false
console.log(Object.getPrototypeOf(person2) === person); // true

Class (EcmaScript6 spec)

기존 객체지향 프로그래밍 언어에서 사용하던 Class 개념이다. (C++, Java, ...)
내부적으로 property, constructor, method를 구현할 수 있다.
- C++과 차이는 Garbage collecting이 되므로 destructor는 신경 안 쓴다는 것이다.
- Object와 큰 차이 없이 내부적으로 parent class를 prototype으로 갖는다고 한다.