JavaScript Drill #3

javascript.info 코어자바스크립트 4.1 ~

1. 객체의 기본

객체에서 프로퍼티란?

키 (key) 와 값 (value) 가 쌍을 이루어 구성된 것이 프로퍼티이다.

프로퍼티 이름

let person = {
	"is person": true
};

key 의 이름을 여러 단어를 조합해서 만드는 경우 따옴표로 묶어서 만들어주어야 한다.

const 로 선언된 객체

const person = {
	name: "Sam",
    age: 30
};

person.name = "Smith";

const 로 변수를 선언하면 그 변수의 값을 수정할 수 없었는데, 객체는 const로 선언해도 프로퍼티의 값을 변경할 수 있다. 하지만 그 객체 자체를 다른 값으로 수정하는 것은 허용되지 않는다.

계산된 프로퍼티 (Computed property)

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

과거에 학교 과제 (자바) 를 했을 때 위처럼 객체의 프로퍼티 이름을 동적으로 설정해야 했던 적이 있었다. 자바스크립트 역시 위처럼 동적으로 프로퍼티 이름을 설정할 수 있다.

실무에 유용한 단축 프로퍼티

function makeUser(name, age) {
  return {
    name: name,
    age: age,
    // ...등등
  };
}

실무에서는 위처럼 프로퍼티의 이름과 값이 같은 경우 아래와 같이 프로퍼티를 쉽고 빠르게 설정한다고 한다.

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age,  // age: age 와 같음
    // ...
  };
}

객체 프로퍼티 이름의 제약사항

객체 프로퍼티에서는 예약어를 프로퍼티의 이름으로 설정해도 문제가 없다.

문자형이나 심볼형에 해당하지 않는 이름은 자동으로 문자형으로 형변환된다.

in 연산자

let user = { name: "John", age: 30 };

alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.
alert( "blabla" in user ); // user.blabla는 존재하지 않기 때문에 false가 출력됩니다.

in 연산자를 활용하여 프로퍼티의 존재 여부를 쉽게 확인할 수 있다.

참조에 의한 객체 복사

객체와 원시 타입의 근본적인 차이 중 하나는, 객체는 참조에 의해 저장되고 복사된다는 것이다.

변수에는 객체가 그대로 저장되지 않고, 그 객체에 대한 메모리 주소, 즉 객체의 참조값이 저장된다.

때문에 객체가 할당된 변수를 다른 변수로 복사하게 되면, 객체 그 자체가 아닌 객체의 참조값을 복사하는 것이다.

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨

alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함

위처럼 admin의 name 프로퍼티 값을 변경하면 user의 name 값 또한 변경된다.

객체의 복사와 병합

let user = {
  name: "John",
  age: 30
};

let clone = {}; // 새로운 빈 객체

// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
  clone[key] = user[key];
}

결국 객체를 복사하려면 귀찮은 작업이긴 하지만, 원래 객체의 프로퍼티들을 iterate 하여 새로운 객체에 일일이 집어넣는 작업이 필요하다.

Object.assign(dest, [src1, src2, src3...])

객체를 병합하려면 Object.assign() 메소드를 이용하면 된다고 한다.

let user = { name: "John" };

Object.assign(user, { name: "Pete" });

alert(user.name); // user = { name: "Pete" }

위와 같이 겹치는 프로퍼티가 있다면, 복사하고자 하는 객체 (src1, src2, src3 ...) 의 프로퍼티 값이 덮어쓰기되어 저장된다.

let user = {
  name: "John",
  sizes: {
    height: 182,
    width: 50
  }
};

alert( user.sizes.height ); // 182

위처럼 중첩 객체를 복사하고자 한다면, deep cloning (깊은 복사) 를 통하여 객체를 복사해야한다.

깊은 복사는 자바스크립트에서 지원하는 _.cloneDeep(obj) 매소드를 사용하도록 하자.

2. this

객체에 할당된 함수

자바스크립트는 객체의 프로퍼티에 함수를 할당하여 객체에게 특정 행동을 부여할 수 있다고 한다.

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("안녕하세요!");
};

user.sayHi(); // 안녕하세요!

위의 user 객체는 sayHi 라는 함수가 할당된 것을 볼 수 있다.

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

위처럼 객체 리터럴 안에 함수를 보다 간략하게 선언할 수도 있다고 한다.

this 키워드의 역할

method 내부에서 this 키워드를 사용한다면 객체에 접근할 수 있다.

자바스크립트의 this 는 다른 언어의 this 보다 비교적 자유롭다. 동일한 함수여도 다른 객체에서 호출했다면 this 가 참조하는 값이 달라진다.