Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

객체
책 모던 자바스크립트의 스터디 장 준비하면서 정리한 글을 공유한다.
1장 정리글 — 모던 자바스크립트 1장 — 블록바인딩
2장 정리글 — 모던 자바스크립트 2장 — 문자열과 정규표현식
3장(1) 정리글 — 모던자바스크립트 스터디 3장(1) — 함수
3장(2) 정리글 — 모던자바스크립트 스터디 3장(2) — 함수
4.1 객체 카테고리
일반 객체(ordinary objects) : 자바스크립트 객체의 모든 기본 내부 동작을 가진다.
이형 객체(exotic objects) : 기본과 다른 내부 동작을 가진다. Array, Proxy, String, Arguments, Modules가 있다. Arguments 배열처럼 동작하지만 다른 이형객체이다.
표준 객체(standard objects) : ES6에 정의되었으며, Array, Date 등이 있다. 표준객체는 일반 객체이거나 이형 객체일 수 있다.
내장 객체(built-in objects) : 스크립트가 실행되는 자바스크립트 실행 환경에 존재한다. 모든 표준 객체는 내장 객체이다.
4.2 객체 리터럴의 문법 확장
자바스크립트 객체 리터럴은 키-값 쌍으로 구성된 데이터 구조를 만드는 간편한 방법이다.
객체 리터럴은 다음과 같은 특징을 가지고 있다.
중괄호 {} 로 둘러싸여 있다.
키와 값은 콜론(:) 으로 구분된다.
여러 키-값 쌍은 쉼표(,) 로 구분된다.
키는 문자열 또는 심볼**(**)로 구성될 수 있다.
값은 자바스크립트에서 사용 가능한 모든 값(숫자, 문자열, 불리언, 함수, 다른 객체 등)이 될 수 있다.
// person이라는 객체 리터럴 생성
const person = {
  name: "철수", // 키: name, 값: "철수"
  age: 30,      // 키: age, 값: 30
  hobby: "축구"   // 키: hobby, 값: "축구"
};
ES6에서는 개발자를 위해 몇 가지 문법을 확장하여 객체 리터럴을 좀 더 강력하고 간결하게 만들었다.
4.2.1 프로퍼티 초기자 축약
ES6에서는 프로퍼티 초기자(property initializer) 축약 문법을 이용하여 프로퍼티 이름과 지역변수의 중복을 제거할 수 있다. 다음과 같은 방식은 매우 흔한 일이기 때문에 이 확장은 매우 환영 받음.
function createPerson(name, age) {
 return {
  name, // name: name
  age   // age: age
 }
}
4.2.2 간결한 메서드(concise methods)
ES5 까지는 메서드 추가를 위해 아래와 같이 해야 했다.
const person = {
 name: "Nicholas",
 sayName: function() {
   console.log(this.name);
 }
}
ES6에서는 좀 더 간결하게 표현가능하다.
const person = {
 name: "Nicholas",
 sayName() {
   console.log(this.name);
 }
}
다른점은 간결한 메서드는 super 메서드를 사용할 수 있지만, 아닌 경우 사용할 수 없다.(super는 87쪽에서 다룬다)
4.2.3 계산된(computed) 프로퍼티 이름
공백문자가 포함된 이 예제의 두 프로퍼티 이름은 점 표기법을 사용하여 참조할 수없다.
const person = {},
 lastName = "last name";
 person["first name"] = "Nicholas";
person[lastName] = "Zakas";
그러나 대괄호 표기법에서는 어떤 문자열이든 프로퍼티 이름으로 사용할 수 있으므로 가능하다.
ES5에서는 위 lastName 처럼 계산되어야 한다면 객체 리터럴을 사용하여 정의하는 방법은 없다.
하지만 ES6에서는 가능하다.
const lastName = "last name";
const person = {
 "first name" = "Nicholas",
 [lastName]: "Zakas"
}
표현식을 포함할 수 도 있다.
const suffix = " name";
const person = {
 ["first" + suffix]: "Nicholas",
 ["last" + suffix]: "Zakas",
}
4.3 새로운 메서드
ES5부터 ECMAScript 설계의 목표중 하나는 가능한 한 전역 함수와 Object.prototype 메소드를 추가하지 않는 것이었다.
그 대신 개발자가 표준에 새로운 메서드를 추가하려고 할 때, 그 메서드를 적절한 기존 객체에서 이용할 . 수있도록 했다.
그 결과 적절한 객체가 없을 때마다 전역 Object의 메서드 수가 증가했다.
ES6에서는 더 쉽게 작업할 수 있도록 두 개의 새로운 메서드를 전역 Object에 도입했다.
4.3.1 Object.is() 메서드
동등 연산자(==)나 일치 연산자(===) 는 완벽하진 않다. 이를 보완하기 위해 ES6에서 Object.is() 메서드가 도입되었다.
console.log(+0 == -0);           // true
console.log(+0 === -0);          // true
console.log(Object.is(+0, -0));  // false
console.log(NaN == NaN);           // false
console.log(NaN === NaN);          // false
console.log(Object.is(NaN, NaN));  // true
// 참조가 동일한지
let obj1 = { name: 'John" }
let obj2 = obj1;
console.log(Object.is(obj1, obj2)); // true
0와 +0에 대해서. via gemini
자바스크립트 엔진에서 +0과 -0은 값은 같지만, 객체로서 다르게 인식됩니다. 이는 다음과 같은 몇 가지 이유 때문입니다.
자바스크립트는 IEEE 754 부동소수점 표준을 사용하여 숫자를 표현합니다. 이 표준에서는 양의 0과 음의 0을 구별하기 위해 서로 다른 비트 패턴을 사용합니다.
+0은 맨 앞 비트가 0이고 나머지 비트가 모두 0인 값으로 표현됩니다.
-0은 맨 앞 비트가 1이고 나머지 비트가 모두 0인 값으로 표현됩니다.
대부분 수학 연산은 동일하지만 일부는 다르게 처리될 수 있다.
console.log(1 + 0); // 1
console.log(1 - 0); // 1
console.log(1 / 0); // Infinity
console.log(1 / -0); // -Infinity
4.3.2 Object.assign() 메서드
믹스인은 자바스크립트에서 객체를 합성할 때 가장 인기 있는 패턴이다.
function mixin(receiver, supplier){
 Object.keys(supplier).forEach(function(key) {
  receiver[key] = supplier[key];
 });
  return receiver;
}
mixin 함수는 supplier를 순회하여 receiver로 얕은 복사를 한다. (프로퍼티 값이 객체이면 그 객체의 참조값만 복사)
믹스인 함수를 통해 객체의 상속을 구현할 수 있다.
function EventTarget() {}
EventTarget.prototype = {
 constructor: EventTarget,
 emit: function(){},
 on: function(){}
}
let myObject = {};
mixin(myObject, EventTarget.prototype);
// 이제 myObject는 emit, on 메서드를 갖는다.
ES6에서는 같은 기능의 메서드 Object.assign() 를 추가했다.
mixin 함수가 사용된 곳은 어디든지 Object.assign()를 사용할 수 있다.
Object.assign()는 다수의 공급자를 받고, 순차적으로 적용한다.
let receiver = {};
let supplier1 = { type: "js", name: "file.js" }
let supplier2 = { type: "css", name: "file.js" }
const returnedReceiver = Object.assign(receiver, supplier1, supplier2);
console.log(receiver.type); // css 두 번째 공급자가 덮어썼다.
console.log(receiver.name); // file.js
console.log(returnedReceiver === receiver); // true
접근자 프로퍼티(get)의 동작
함수 mixin은 할당 연산자(=)를 사용하기 때문에, 접근자 프로퍼티(get)를 수신자의 접근자 프로퍼티로 복사할 수 없다. 이 차이를 반영하여 Object.assign()이라고 이름 붙였다.
⇒ assign() 메서드도 마찬가지 아닌가?
let receiver = {}, 
  supplier = { 
     get name(){ return this.first_name + this.last_name},
     first_name: '정우',
     last_name: '안'
  }
Object.assign(receiver, supplier);
supplier.last_name = '김';
console.log(supplier.name); // 정우김
receiver.last_name = '김';
console.log(receiver.name); // 정우안
mdn의 assign 의 할당로직 설명
Object.assign() 메서드는 출처 객체의 '열거 가능한 자체 속성'만 목표 객체로 복사합니다. 출처 객체에서 속성 값을 가져올 땐 [[Get]], 목표 객체에 속성 값을 지정할 땐 [[Set]]을 사용하므로 각각 접근자와 설정자를 호출합니다. 그러므로 Object.assign()은 속성을 단순히 복사하거나 새로 정의하는 것이 아니라, 할당(assign)하는 것입니다. 따라서 출처 객체가 접근자를 포함하는 경우, 프로토타입에 새로운 속성을 추가하는 용도로는 적합하지 않을 수도 있습니다. via Object.Assign()
접근자를 복사하고 싶을때 => Object.defineProperties(receiver, Object.getOwnPropertyDescriptors(supplier))
4.4 객체 리터럴 프로퍼티의 중복
ES5 strict 모드에서는 프로퍼티 중복이 발견되면 에러를 발생시킨다.
그러나 ES6에서는 중복검사 기능이 제거되었다. 마지막 프로퍼티가 프로퍼티의 실제 값이 된다.
let person = {
 name: "Nicholas",
 name: "Greg"
}
console.log(person.name); // Greg
4.5 객체 내 프로퍼티 열거 순서
ES5에서는 객체 프로퍼티의 열거 순서가 엔진 벤더사에 따라 달랐다. ES6에서는 엄격하게 정의한다. 다음과 같다.
모든 숫자 키는 오름 차순
모든 문자열 키는 객체에 추가된 순서
모든 심벌 키는 객체에 추가된 순서
let obj = {
 a: 1, 
 0: 1,
 c: 1,
 2: 1,
 b: 1,
 1: 1
};
obj.d = 1;
console.log(Object.getOwnPropertyNames(obj).join(""); // 012acbd
숫자키가 먼저 정렬되어 보이고 문자열 키는 그 뒤에 순서대로 보인다.
모든 자바스크립트 엔진이 for-in 반복문을 같은 방식으로 구현하지 않았기 때문에 여전히 for-in 반복문은 열거 순서가 명시되어 있지 않다.(맥에서 크롬, 사파리, 파폭 을 위 예제로 테스트 해보았을때는 동일했다)
4.6 프로토타입 개선
자바스크립트 초기에는 프로토타입으로 할 수 있는 것을 엄격하게 제한했다. 언어가 발전하면서 프로토타입을 더 잘 관리하고 더 쉽게 작업하길 원했다.
프로토타입이 왜 중요하지 via Gemini
1. 코드 재사용성 향상:
프로토타입을 사용하면 코드를 재사용하여 개발 효율성을 높일 수 있습니다. 객체 간에 공통적인 속성과 메서드를 프로토타입에 정의하고, 인스턴스 객체는 이 프로토타입을 상속받아 사용하게 됩니다.
이 방식으로 중복된 코드를 줄이고 코드 관리를 용이하게 하며, 유지 보수성을 높일 수 있습니다.
2. 객체 간 상속 구현:
프로토타입 체인을 통해 객체 간 상속 관계를 구현할 수 있습니다. 하위 객체는 상위 객체의 프로토타입을 상속받아 속성과 메서드를 공유하게 됩니다.
이를 통해 코드 간의 모듈성을 높이고 코드 재사용성을 더욱 향상시킬 수 있습니다.
3. 다형성 구현:
프로토타입을 사용하면 동일한 인터페이스를 가진 다양한 객체를 정의하고 다형성을 구현할 수 있습니다.
예를 들어, Animal이라는 프로토타입을 정의하고, Dog과 Cat과 같은 하위 객체를 만들 수 있습니다. 각 하위 객체는 Animal 프로토타입의 속성과 메서드를 상속받으면서, 자체적인 속성과 메서드를 추가 정의할 수 있습니다.
이러한 방식으로 코드를 더욱 유연하고 확장 가능하게 만들 수 있습니다.
4. 메모리 효율 향상:
프로토타입을 사용하면 여러 객체가 동일한 속성과 메서드를 공유하게 되므로 메모리 사용량을 줄일 수 있습니다.
각 인스턴스 객체에 중복된 데이터를 저장할 필요가 없어 메모리 효율이 향상됩니다.
5. 자연스러운 객체 모델링:
프로토타입 기반 객체 모델은 현실 세계의 객체 모델링 방식과 유사합니다. 실제 객체들도 서로 유사한 특징을 가지고 있으며, 상속과 다형성을 통해 관련성을 나타냅니다.
따라서 자바스크립트의 프로토타입 시스템은 객체를 자연스럽고 직관적으로 모델링하는 데 도움이 됩니다.
이처럼 자바스크립트에서 프로토타입은 코드 재사용성, 상속, 다형성, 메모리 효율, 객체 모델링 등 다양한 측면에서 중요한 역할을 합니다. 프로토타입을 이해하고 활용하는 것은 자바스크립트 프로그래밍 능력을 향상시키는 데 필수적입니다.
4.6.1 객체의 프로토타입 변경하기
ES5에서는 객체의 프로토타입이 인스턴스화 된 후 변하지 않는다는것이 주요한 가정이었다. 프로토타입 변경을 위한 표준이 부족했다.
ES6에서는 Object.setPrototypeOf()메서드를 추가하여 그 가정을 변경했다.
let person = {
 getGreeting() { return "Hello"; }
}
let dog = {
 getGreeting() { return "Woof"; }
}
let friend = Object.create(person);
console.log(friend.getGreeting());                     // "Hello"
console.log(Object.getPrototypeOf(friend) === person); // true
Object.setPrototypeOf(friend, dog);
console.log(friend.getGreeting());                     // "Woof"
console.log(Object.getPrototypeOf(friend) === dog); // true
4.6.2 Super 참조를 통한 쉬운 프로토타입 접근
객체 인스턴스의 메서드를 오버라이드 하는 예제를 보자
let person = {
 getGreeting() { return "Hello"; }
}
let friend = {
 getGreeting() {
  return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!";
 }
}
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting());                     // "Hello, hi!"
console.log(Object.getPrototypeOf(friend) === person); // true
좀더 쉽게 프로토타입 메서드를 호출하기 위해 ES6에서는 super를 도입했다.
간단하게 말해, super는 현재 객체의 프로토타입을 가리키는 포인터이며, 사실상 Object.getPrototypeOf(this) 이다.
다시 friend의 getGreeting을 구현하면,
let friend = {
 getGreeting() {
  return super.getGreeting() + ", hi!";
 }
}
super 참조를 사용하여 프로토타입의 어떤 메서드도 호출할 수 있다.
다만 간결한 메서드 바깥에서 사용하면 에러가 발생한다.
let friend = {
 getGreeting: function() {
  // 에러발생
  return super.getGreeting() + ", hi!";
 }
}
여러단계에 걸쳐 상속하는 경우 Object.getPrototypeOf() 가 모든 상황에서 정확히 동작하지 않는다.
let friend = {
 getGreeting() {
  return Object.getPrototypeOf(this).getGreeting.call(this) + ", hi!";
 }
}let relative = Object.create(friend);
console.log(relative.getGreeting()); // 에러
에러가 발생하는 이유는 relative.getGreeting()의 this가 relative 이고 relative의 프로토타입은 friend객체이다. this가 relative인 상태로 friend.getGreeting.call(this) 이 호출되면 재귀호출이 반복되어 스택 오버플로를 발생시킨다.
super를 사용하면 쉽게 해결된다. super 참조는 동적이지 않기 때문에 항상 올바른 객체를 참조한다.
4.7 공식적인 메서드 정의
ES6에서는 메서드가 속한 객체를 내부 [[HomeObject]] 프로퍼티로 가진 함수가 메서드라고 정의한다.
super를 참조할때 이 사실이 중요하다.
어디서든 super를 참조할 때는 언제나 [[HomeObject]]를 사용하여 동작을 결정한다.
[[HomeObject]]의 Object.getPrototypeOf() 를 호출한다.
그 프로토타입에서 같은 이름의 함수를 검색한다.
this를 바인딩하고 그 메서드를 호출한다.
[[HomeObject]]를 가지지 않거나 기대하는 것과 다른 [[HomeObject]]를 가지면 에러가 발생한다.
let person = {
 getGreeting() { return "Hello"; }
}
let friend = {
 getGreeting() {
  return super.getGreeting() + ", hi!";
 }
}
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting());                     // "Hello, hi!"
friend.getGreeting()의 [[HomeObject]]는 friend 이고 friend의 프로토타입은 person 이므로 super.getGreeting()은 person.getGreeting.call(this) 와 같다.
1장 정리글 — 모던 자바스크립트 1장 — 블록바인딩
2장 정리글 — 모던 자바스크립트 2장 — 문자열과 정규표현식
3장(1) 정리글 — 모던자바스크립트 스터디 3장(1) — 함수
3장(2) 정리글 — 모던자바스크립트 스터디 3장(2) — 함수

모던자바스크립트 스터디 4장

댓글