[JavaScript] JavaScript #4: 객체 (Object)

객체 생성

---

객체 생성 #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(person); // { name: 'Lee', gender: 'male', sayHello: [Function: sayHello] }
person.sayHello(); // Hi! My name is Lee

• 중괄호({})로 객체 생성한다.
• 중괄호({}) 안에 여러 프로퍼티(property)를 추가한다.
• 메소드(Method): 객체에 제한되어 있는 함수

 

객체 생성 #2 : Object 생성자 함수

var person2 = new Object(); // new 연산자, Object 생성자 함수 사용해서 empty object 생성 
//property 추가
person2.name = 'Yoon';
person2.gender = 'male';
person2.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
};

console.log(typeof person2); // object
console.log(person2); // { name: 'Yoon', gender: 'male', Hello: [Function] }
person2.sayHello(); // Hi! My name is Yoon

• 객체가 가지고 있지 않은 프로퍼티 키에 값을 할당할 경우: 해당 객체에 프로퍼티 키 추가 후 값 할당
• 이미 존재하는 프로퍼티 키에 값 할당하는 경우: 해당 프로퍼티 키의 값은 새로 할당된 값으로 바뀐다.

 

객체 생성 #3 : 생성자 함수

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 p1 = new Person('Lee', 'Male');
var p2 = new Person('Park', 'Female');
console.log('p1: ', typeof p1);
console.log('p2: ', typeof p2);
console.log('p1: ', p1);
console.log('p2: ', p2);
p1.sayHello();
p2.sayHello();
console.log(p1.married); // undefined

• 동일한 프로퍼치 갖는 여러 객체를 생성할 때 편하다.
• this에 연결된 프로퍼티와 메소드는 public, 생성자 함수 내 선언된 일반 프로퍼티는 private이다.
  • private한 프로퍼티에 접근할 경우 undefined로 출력된다.

 

Property 접근

---

1. Property 키

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10,
  function: 1 
};

• property 키는 문자열이므로 작은 따옴표('') 또는 큰따옴표("")를 사용한다. 예약어가 아닌 경우에는 따옴표를 생략하고 키를 사용할 수 있다.

 

2. property 값

2-1) property 값 접근

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10
};

console.log(person.first-name); // NaN: undefined-undefined
console.log(person[first-name]); // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'
console.log(person.gender);  // 'male'
console.log(person['gender']); // 'male'
console.log(person['1']); // 10

2-2) property 값 갱신

var person = {
  'first-name': 'Ung-mo',
};

person['first-name'] = 'Kim';
console.log(person['first-name'] ); // 'Kim'

 

 

property 동적 생성

---

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
};

person.age = 20; // property 동적 생성
console.log(person.age); // 20

• 객체가 갖고 있지 않은 property 키에 값을 할당함으로써 property를 동적으로 생성할 수 있다.
• 동적으로 생성한 키와 키에 대한 값은 객체에 추가된다.

 

Property 삭제

---

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
};

delete person.gender;
console.log(person.gender); // undefined

delete person;
console.log(person); // Object {first-name: 'Ung-mo', last-name: 'Lee'}

• delete object.key로 객체 내 해당 키를 삭제할 수 있다. 

 

for-in 문

---

var array = ['one', 'two'];
array.name = 'my array';

for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/* 
result

0: one
1: two
name: my array
*/

• 객체 내 모든 프로퍼티에 대해 루프를 수행한다.
• 배열도 객체이므로, 배열에 name이라는 키로 my array라는 값을 할당하여 프로퍼티를 추가하면, for-in문에서는 인덱스가 아닌 name에 대한 프로퍼티도 가져온다.

 

for-of 문

---

const array = [1, 2, 3];
array.name = 'my array';

for (const value of array) {
  console.log(value);
}

/*
result
1
2
3
*/

for (const [index, value] of array.entries()) {
  console.log(index, value);
}

/*
0 1
1 2
2 3
*/

• 배열의 요소를 순회할 때 사용한다.

 

Object.assign

---

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const merge1 = Object.assign(o1, o2, o3);

console.log(merge1); // { a: 1, b: 2, c: 3 }
console.log(o1);     // { a: 1, b: 2, c: 3 }


const user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

const user2 = Object.assign({}, user1);
console.log(user1 === user2); // false

user2.name = 'Kim';
console.log(user1.name); // Lee
console.log(user2.name); // Kim

console.log(user1.address === user2.address); // true

• 객체 내부의 객체(Nested Object)는 shallow copy된다.

 

Object.freeze

---

const user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

Object.freeze(user1);
user1.name = 'Kim'; // 불변객체로 만들었으므로 무시
console.log(user1); // { name: 'Lee', address: { city: 'Seoul' } }

console.log(Object.isFrozen(user1)); // true

user.address.city = 'Busan'; 
console.log(user); // { name: 'Lee', address: { city: 'Busan' } }

• 객체 내부 객체(Nested Object)는 객체에 freeze를 적용해도 적용되지 않고 변경이 가능하다.

 

Reference

---

 

poiemaweb.com

Immutability | PoiemaWeb