[JS] Object의 생성과 접근 & Constructor Function

Object는 JavaScript 데이터 타입 중 하나이다.

Object는 key와 value의 집합체이다. object = { key : value };

하나의 property는 key: value로 구성되어 있다.

Object는 reperence type으로 변수에 저장할 때, object가 아닌 object가 저장된 메모리 주소가 저장된다.

 

---

1. Object 생성

Object literal syntax

변수처럼 객체를 생성하는 방법

중괄호{} 안에 key: value를 쉼표로 구분하여 생성한다.

 

const obj1 = { key: value, key2: value2, ... };  

 

Object constructor syntax

키워드 new를 이용하여 Object 생성자 함수를 호출하고 property를 추가한다.

 

const obj2 = new Object(); 
obj2.key = value;
obj2.key2 = value2;

 

Dynamically typed language

JavaScript는 동적 프로그래밍 언어라서 뒤늦게 property를 추가하고 삭제하는 것이 가능하다.

 

function print(person) {
  console.log(person.name);
  console.log(person.age);
}

const eunji = { name: 'eunji', age: 4 };
print(eunji);  //eunji, 4

// with JavaScript magic (dynamically typed language)

// can add properties later
eunji.hasJob = true;
console.log(eunji.hasJob);  // true

// can delete properties later
delete eunji.hasJob;
console.log(eunji.hasJob);  // undefined

 

 

---

2. Object 접근

점(.) 또는 대괄호([]) 표기법으로 객체의 속성에 접근할 수 있다.

 

obj.key
obj['key']

 

대괄호([]) 표기법에서 property name(key)는 항상 string type이어야 한다.

기본적으로 점(.) 표기법을 많이 사용하고, property name에 특수문자나 공백이 있으면 대괄호([]) 표기법을 사용한다.

그리고 동적으로 key의 value를 받아올 때도 대괄호([]) 표기법을 사용한다.

 

const eunji = { name: 'eunji', age: 4 };

// 점(.) 표기법
console.log(eunji.name);  // eunji

// 대괄호([]) 표기법
console.log(eunji['name']);  // eunji
eunji['hasJob'] = true;
console.log(eunji.hasJob);  // true

// 동적으로 key의 value를 받아와야 할 때 
function printValue(obj, key) {
  console.log(obj[key]);
}

printValue(eunji, 'name');  // eunji
printValue(eunji, 'age');  // 4

 

 

---

3. Property value shorthand

property의 key와 value의 값이 같다면 생략해서 간단하게 정의할 수 있다.

 

function makePerson(name, age) {
  return {
    name : name,
    age : age,
  }
} 

// key 와 value의 값이 동일하다면, 아래와 같이 생략 가능
function makePerson(name, age) {
  return {
    name,
    age,
  }
}

const person = makePerson('eunji', 20);
console.log(person);  // {name: "eunji", age: 20}

 

 

---

4. Constructor Function

object를 필요할 때마다 만들게 되면 동일한 key와 value를 반복해서 작성해야 한다.

그래서 함수를 이용해서 object를 만들어 반복을 줄여준다.

이것은 class와 같은 object의 template과 같은 역할을 한다.

실제로 class가 없었을 때는 Constructor Function을 많이 사용했다.

어떠한 기능을 수행하지 않고 object만을 만들기 위한 함수들은 함수 명의 첫 글자를 대문자 작성한다.

Constructor Function을 이용해서 object를 만들 때, 키워드 new를 사용한다.

 

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

const person = new Person('eunji', 20);
console.log(person);  // Person {name: "eunji", age: 20}

 

 

---

5. in operator : property existence check (key in obj)

해당하는 object안에 key가 있는지 확인할 수 있다.

 

const eunji = { name: 'eunji', age: 4 };

console.log('name' in eunji);  // true
console.log('age' in eunji);  // true
console.log('hobby' in eunji);  // false