[Javascript] 9강 key 기반 컬렉션, 객체로 작업하기

 

1. Maps

ECMAScript 6 에선 값들을 매핑하기 위한 새로운 데이터 구조를 소개하고 있습니다. 그 중 하나인 Map 객체는 간단한 키와 값을 서로 연결(매핑)시켜 저장하며 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 합니다. Map 객체에 저장되어 있는 각 요소들을 [키, 값] 형태의 배열로 반복적으로 반환해주는 for...of를 사용할 수 있습니다.

var classic = new Map();
let n = ["Germany", "Austria", "England", "Poland"];
classic.set("Beethoven", n[0]);
classic.set("Mozart", n[1]);
classic.set("Haydn", n[1]);
classic.set("Elgar", n[2]);
classic.set("Chopin", n[3]);
classic.set("Liszt", n[1]);

classic.size; // 3
classic.get("Paganini"); // undefined
classic.get("Bach") // false


for (var [key,value] of classic) {
    console.log(key + " goes " + value);
    
}

 

Object와 Map 비교

 

전통적으로 objects는 문자열에 값에 매핑하는 데 사용되었고, Object는 키를 값으로 설정, 값을 검색하고, 키를 삭제하고, 키에 저장된 내용을 검색할 수 있게 만들어줍니다. 그러나 Map 객체는 더 나은 맵이 되도록 하는 몇가지 장점이 있습니다.

• Object의 키는 strings이며, Map의 키는 모든 값을 가질 수 있음
• Object는 크기를 수동으로 추적해야하나, Map은 크기를 쉽게 얻을 수 있음
• Map은 삽입된 순서대로 반복됨
• 객체(Object)에는 prototype이 있으며 Map에 기본 키들이 존재함(map = Object.create(null)로 우회 가능)

Object 혹은 Map중 어느 것을 사용할지 결정해야할때는 

• 실행 시까지 키를 알수 있으며 모든 키가 동일한 type이며 모든 값들이 동일한 type일 경우 objects 대시 map을 사용하는 것을 추천
• 각 개별 요소에 대해 적요해야 하는 로직이 있을 경우 objects 사용

WeakMap 객체

 

weakMap객체는 object만을 키로 허용하고 값은 임의의 값을 허용하는 키/값 형태의 요소 집합으로. 키가 가지고 있는 객체에 대한 참조는 객체에 대한 참조가 더이상 존재하지 않을 경우 garbage collection(GC)의 수거 대상이 되는 약한 참조를 의미합니다. weakMap API는 Map API와 동일합니다.

 

단 한가지 Map객체와 다른 점은 WeakMap의 키들은 열겨형이 아니라는 점이고 (즉, 키 목록을 제공해주는 메서드X) 만약에 키 목록을 제공한다면 garbage collection의 상태, 결과에 따라 키 목록이 변하게 될 것입니다. 이는 비 결정성을 야기합니다. 

 

Weakmap을 사용하는 한 가지 경우 객체의 사적인 정보를 저장하기 위해서 이거나 상세 구현 내용을 숨기기 위할때 사용합니다.  다음 예제는 Nick Fitzgerald의 블로그글 - "Hiding Implementation Details with ECMAScript 6 WeakMaps" 를 참조해서 Weakmap을 만들어 보겠습니다. 객체가 가지고 있는 그렇지만 외부에 공개되지 않는(private) 데이터와 메서드들은 WeakMap 객체인 privates에 저장됩니다.

 

인스턴스를 통해 접근 가능한 모든 것들과 prototype은 public이고 다른 것들은 외부에서 접근 불가능합니다. 그 이유는 privates 모듈로부터 내보내기(export)가 되지 않기 때문입니다.

const privates = new WeakMap();

function WeakPublic() {
    const prdata = {
          // Private data goes here
    };
    privates.set(this, me);
}

WeakPublic.prototype.method = function() {
    const prdata = privates.get(this);
    // Do stuff with private data in 'me'

    
}

 

Sets

 

set 객체는 값들의 집합으로, 입력된 순서에 따라 저장된 요소를 반복처리 할 수 있습니다. Set은 중복된 값을 허용하지 않고, 특정 값은 Set내에서 하나만 존재 합니다.

var burger = new Set();
burger.add(1);
burger.add("Cheeze Burger");
burger.add("Whopper Burger");

burger.has(1) // true;
burger.delete("Whopper Burger");
burger.size; // 2

for (let item of burger) console.log(item);

// 1
// Cheeze Burger

 

배열과 Set의 상호 변환

 

Array.from 혹은 spread operator를 통해 Set 객체를 가지고 있는 Array를 생성할 수 있습니다. 또한 Set 생성자는 배열을 인자로 받고 해당 배열을 Set 객체의 요소로 저장합니다. Set 객체는 중복된 값을 저장하지 않기 때문에 주어진 배열내의 중복된 요소들을 제거하며 Set으로 변환합니다.

var burger2 = new Set();
Array.from(burger);
[...burger2];

burger2 = new Set([1,2,3,4]);
console.log(burger2);
// Set(4) { 1, 2, 3, 4 }

 

배열과 Set 비교

 

Javascript에선 배열에 특정 요소의 집합을 저장합니다. 그러나 Set 객체는 몇가지 이점을 제공합니다.

• indexOf 메서드를 사용해 배열내 특정 요소가 존재하는지 확인하는 것이 느림
• 배열에선 해당 요소를 배열에 잘라내야 하는 반면 Set 객체는 요소의 값으로 해당 요소를 삭제하는 기능을 제공함
• NaN은 배열에서 indexOf 메서드로 찾을 수 있음
• Set 객체는 값의 유일성을 보장하기 때문에 직접 요소의 중복성을 확인할 필요 X

 

WeakSet 객체

 

WeakSet 객체는 객체의 컬렉션으로, 객체는 한 번만 발생할 수 있습니다. 컬렉션에서 고유하며 개체는 열거할 수 없습니다. WeakSet 객체는 객체를 저장하는 일종의 집합입니다. WeakSet내 중복 객체는 없고 요소를 열거할 수 도 없습니다.

 

• Set과는 다르게 WeakSet은 객체의 집합이며 객체만 저장 가능, 특정 type의 값을 저장 X 
• WeakSet은 약한 참조를 가짐. 객체에 대한 참조는 약하게 연결되어 있음 WeakSet내에 저장되어 있는 객체에 대한 참조가 없다면 garbage collection 대상이되어 수거됨, 따라서 현재 저장되어 있는 객체에 대한 목록이 없고 WeakSet을 열거형이 X

WeakSet 객체의 사용 사례를 제한되 있으며. 메모리 누수가 발생되지 않아 안전하게 DOM요소를 키로 저장할 수 있고 예를 들어 추적을 위해 DOM 요소들을 WeakSet에 저장할 수 있음 

 

Map 과 Set의 키와 값의 동치성

 

Map 객체의 Key에 대한 동치성 비교는 Set 객체의 값에 대한 동치성 비교 모두 "same-value-zero algorithm" 근접합니다

• 동치성 비교는 === 비교 연산과 같이 작동
• -0과 +0은 같다고 간주함
• NaN은 자기 자신하고 같다고 간주함 (===와 반대)

---

2. 객체로 작업하기 

 

JavaScript는 간단한 객체 기반 패러다임 위에 만들어 졌고, 객체는 속성의 컬렉션이며, 속성은 이름('키')과 값 사이 연결 관계입니다. 속성의 값이 함수인 경우 메서드라고 부르고, 브라우저 안에 미리 정의된 객체 뿐만 아닌 직접 객체를 정의할 수 있습니다. 

 

객체 개요

 

Javascript의 객체는, 다른 프로그래밍 언어와 마찬가지로 현실 세계에서 객체(사물)라고 불리는 것과 비교할 수 있습니다. Javascript 객체의 개념은 현실에 인식 가능한 사물로 이해가 가능합니다. 객체는 속성과 타입을 가진 독립적인 개체(entity)로, 현실의 컵과 비교해본다면, 컵은 색, 디자인, 무게, 소재 등 속성을 가진 객체라 할 수 있습니다. 

 

마찬가지로 Javascript 객체 역시 특징을 결정짓는 속성을 가질 수 있습니다.

 

객체와 속성

 

객체는 자신과 연관된 속성들을 가지며, 객체의 속성은 객체에 붙은 변수라고 설명할 수 있습니다. 객체의 속성은 일반적인 Javascript 변수와 똑같으며, 다만 객체에 붙어있다는 점만 다릅니다. 속성에 접근 시 마침표 표기법을 사용합니다.

ObjectName.propertyName;

 

다른 모든 자바스크립트 변수와 마찬가지로, 객체의 이름(요약하면 변수)과 속성의 이름 모두 대소문자를 구별합니다. 객체에 속성을 정의하려면 값을 할당해야 합니다.

const Samsung = new Object();
Samsung.make = "Lee Byung-chul";
Samsung.model = "MNC";
Samsung.year = 1938;

 

아래 코드는, 중괄호( {} ) 안에 쉼표로 구분한 속성 이름과 값의 목록으로 나타내는 객체 초기자로 나타낼 수 있습니다.

const Samsung = {
    make: "Lee Byung-chul",
    model: "MNC",
    year: 1938
}
console.log(Samsung);

 

객체의 할당되지 않는 속성은 undefined 입니다.( null X)

Samsung.key // undefined null X

 

객체 속성은 대괄호 표기법(속성 접근자)을 사용해 접근할 수도 있습니다. 객체는 때때로 '연관 배열'(associative array)이라고 부르기도 하는데, 속성은 자신에 접근할 수 있는 문자열 값과 연관되어 있기 때문입니다. 

Samsung["make"] = "Lee Byung-chul";
Samsung["model"] = "MNc";
Samsung["year"] = 1938;

 

객체 속성 이름은 유효한 Javascript 문자열 혹은 문자열로 변환 가능한 것이면 모두 가능하고, 빈 문자열도 여기 포함됩니다. 그러나 유효한 Javascript 식별자가 아닌 이름(공백 or 이름표, 숫자로 시작하는 이름)을 가진 속성은 대괄호 표기법으로만 접근할 수 있습니다. 대괄호 표기법은 속성 이름이 동적으로 정해지는 경우, 런타임 시점까지 알 수 없는 경우 유용합니다. 

const Tobj = new Object(),
     str = "myString",
     rand = Math.random(),
     obj = new Object();

     
Tobj.type = "마침표 구문";
Tobj["date created"] = "공백을 포함한 문자열";
Tobj[str] = "문자열 값";
Tobj[rand] = "무작위 수";
Tobj[obj] = "객체";
Tobj[""] = "빈 문자열"

console.log(Tobj);

 

모든 대괄호 표기법 안의 키는 심볼이 아닌 경우 문자열로 변환되는 점을 기억하고, 객체의 속성 이름(키)은 문자열이나 심볼이기 때문에 (클래스 필드 제안서로 인해 비공개 속성 이름도 추가되겠으나, 비속성 접근에는 [ ] 형식 사용X) 예를 들어 위 코드의 Tobj에 obj를 키로 추가하는 부분에 Javascript는 obj.toString(). 메서드를 호출한 결과 문자열을 새로운 키로 사용합니다.

 

속성 접근은 변수에 저장된 문자열 값으로도 사용 가능합니다.

let propertyName = "make";

MyCar[propertyName] = "Lamborghini"

propertyName = "model";
MyCar[propertyName] = "GT3";

 

대괄호 표기법은 for..in과 함께 객체의 열거 가능한 속성을 순회할 때 사용할 수 있습니다.

const MyCar = new Object();
let propertyName = "make";

MyCar[propertyName] = "Lamborghini";

propertyName = "model";
MyCar[propertyName] = "GT3";

propertyName = "year"
MyCar[propertyName] = 1969;

function showProps(obj, objName) {
    let result = "";
    for (let i in obj) {
        // obj.hasOwnProperty를 사용해 객체의 프로토타입 체인에 존재하지 않는 속성 제외
        if (obj.hasOwnProperty(i)) {
            result += `${objName}.${i} = ${obj[i]}\n}`;
        }
    }
    console.log(result);
    
}

showProps(MyCar, 'myCar')

 

// showProps(MyCar, 'myCar') 호출
myCar.make = Lamborghini
}myCar.model = GT3
}myCar.year = 1969
}

 

객체 속성 나열 하기

 

객체 속성을 나열하거나 순화하는 방법으로 세 가지 내장된 방법이 있습니다.

• for...in 반복문: 객체와 객체의 프로토타입 체인에 존재하는 모든 열거 가능한 속성을 순회
• object.keys(o): o 객체 자신만의(프로토타입 체인을 제외) 열거 가능한 속성이름("키")을 배열로 반환
• Object.getOwnPropertyNames(o): o 객체 자신만의 모든(열거 불가능 하더라도) 속성이름 ("키") 배열로 반환

'숨은' 속성(프로토타입 체인 상 속성 중, 같은 이름의 속성이 체인에서 앞서 존재해 가려진 속성)을 나열하는 내장 방법은 없습니다. 그러나 밑의 함수를 사용하면 가능합니다.

function listAllProperties(o) {
    let objectToInspect = o;

    let result = [];


    while(objectToInspect !== null) {
        result = result.concat(Object.getOwnPropertyNames(objectToInspect));
        objectToInspect = Object.getPrototypeOf(objectToInspect)
    }

    return result;
}

 

객체 생성하기

 

자바스크립트에 미리 정의된 객체가 여럿 존재합니다. 여기에 더해 자신만의 객체도 만들 수 있습니다. 객체 생성에는 객체 초기자를 사용할 수 있고, 생성자 함수를 정의한 후 new 연산자와 함께 호출해 객체 인스턴스를 생성할 수 있습니다.

 

객체 초기자 사용은 종종 "리터럴 표기에 의한 객체 생성"이라 불리고, "객체 초기자"(Object initializer)라는 단어는 C++에서 사용하는 용어와 동일합니다. 객체 초기자를 사용한 객체 생성 구문은 다음과 같습니다.

const obj = {
    property: value_1, // 속성의 값은 식별 자일 수 있고
    3: value_3, // 수자일 경우도 있고 
    // ... ,
    "property n": value_n, // 문자열 일 수 도 있다 
}

 

위 코드에서 obj는 새로운 객체의 이름이며, 콜론 앞에 위치한 속성 이름은 식별자(이름,숫자,스트링,리터럴), 각각의 value_i 속성 이름에 할당한 표현식입니다. obj와 할당 구문은 선택 사항으로, 이 객체를 다른 곳에서 참조하지 않아도 되면 변수에 할당할 필요는 없습니다. 

 

객체 초기자는 표현식으로 자신이 속한 선언문이 실행될 때마다 새로운 객체를 생성합니다. 같은 초기자가 생성한 객체끼리라도 구별 가능하고 서로 비교할때 거짓을 반환합니다. 초기자는 생성하는 객체는 new Object()를 호출한 것과 같이 생성되며, 즉 객체 초기자 표현식의 결과 객체들은 Object의 인스턴스입니다.

 

다음 선언문은 cond 가 참일 때만 객체를 생성해 변수 x에 할당합니다.

let g; 

if (cond) {
    x = { gretting: "hi" };
}

 

다음은 객체 안에 세 개의 속성과 함께 생성합니다.

let g; 

if (cond) {
    x = { gretting: "hi" };
}

 

객체 초기자로 배열 리터럴을 생성할 수도 있습니다. 

 

생성자 함수 사용하기

 

객체 타입을 정의하려면 타입 이름, 속성, 메서드를 지정하는 함수를 생성해야 합니다.

function myCar(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year; 
}

 

함수에 전달한 값을 객체 속성으로 할당하기 위해 this 연산자를 사용합니다. 

var myCar = new Car("Audi", "Lamborghini", 1963);

 

이 선언문은  myCar을 생성 후 매개변수로 지정한 값을 속성에 할당합니다. 이후 myCar.make는 문자열 "Audi", myCar.year은 정수 1963을 가지게 됩니다. new를 사용한 호출로 몇 개의 myCar 객체라도 만들 수 있습니다.

const perCar = new Car("Ferrari", "GT3" ,1939);
const MaseratiCar = new Car("Maserati", "GT1", 1914);

 

객체는 다른 객체도 속성으로 가질 수 있습니다.

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

 

두 개의 새로운 Person 객체도 인스턴스화 했다고 가정하고 

function myCar(make, model, year,owner) {
    this.make = make;
    this.model = model;
    this.year = year; 
    this.owner = owner;
}

 

그 후에, 새로운 객체 인스턴스를 생성할 땐 아래 처럼 할 수 있습니다.

const nissan = new Car("Nissan", "300ZX", 1992, ken);
const Eagle = new Car("Eagle", "Talon Tsi", 1993, rand);

 

문자열 리터럴이나 정수 값이 아닌 객체 rand와 ken을 소유자 매개변수로 정했음을 볼 수 있습니다.

console.log(Eagle.owner.age); // 34

 

Object.create 메서드 사용하기

 

Object.create(). 메서드로 객체를 생성할 수 있습니다. 이 메서드는 생성자 함수 정의 없이 생성 가능하며 객체의 프로토타입을 지정할 수 있습니다.

// 동물 속성 메서드 캡슐화
const Animal = {
    type: "양서류", // 속성 기본값
    displayType: function() {
        // 동물 종류 출력 메서드
        console.log(this.type);
    }
}

// animal1 이라는 이름의 동물 타입 객체 생성
const animal1 = Object.create(Animal);
animal1.displayType(); // 출력: 무척추동물


// fish 라는 이름의 동물 타입 객체 생성
const fish = Object.create(Animal);
fish.type = "물고기";
fish.displayType(); // 출력: 물고기

 

상속

 

자바스크립트의 모든 객체는 적어도 하나의 다른 객체를 상속합니다. 상속 대상 객체를 프로토타입이라고 부르고, 상속한 속성은 생성자의 property 객체에서 찾을 수 있습니다. 자세한 내용은 상속과 프로토타입 체인에서 알수 있습니다.

 

객체 속성 인덱싱

 

객체의 속성에 접근 시 속성 이름이나 인덱스로 접근할 수 있습니다. 처음에 속성을 이름으로 정의했으면 그 속성은 항상 이름으로만 참조해야 하고, 처음에 인덱스로 정의했으면 항상 인덱스로만 참조해야 합니다.

 

객체 속성 정의하기

 

prototype 속성을 사용하면 이전에 정의된 객체 타입에도 속성을 추가할 수 있습니다. 이렇게 정의된 속성은 해당 타입의 모든 인스턴스가 공유합니다. 아래 코드는 모든 Car 타입 객체에 color 속성을 추가한 후, car1 객체에 그 속성의 값을 할당합니다.

Car.prototype.color = null;
car1.color = "black";

상속과 프로토타입 - JavaScript | MDN

 

메서드 정의

 

메서드(method)는 객체와 연관된 함수, 다른 말로 하자면 객체 속성 중 함수인 것을 말합니다. 메서드는 다른 함수와 똑같이 정의하나, 객체 속성에 할당한다는 점이 다릅니다. 메서드 정의에서 더 자세한 정보를 알 수 있습니다.

메서드 정의 - JavaScript | MDN

 

objectName.methodName = functionName;

const myObj = {
    myMethod: function(params) {
        console.log("...")
    },

    myOtherMethod(params) {
        console.log("..");
        
    }
}

 

ObjectName은 이미 존재하는 객체, methodName은 할당하려는 메서드, functionname은 함수의 이름입니다. 객체의 맥락으로 메서드를 호출하려면 다음과 같습니다.

object.methodName(params);

 

객체 생성자 함수에도 메서드 정의를 포함하려면 메서드 타입에 메서드를 정의할 수 있습니다 .앞에 정의 했던 Car 객체의 속성을 정리해 출력하는 함수를 정의해 보면

function displayCar() {
    const result = `good${this.year}, ${this.make}, ${this.model}`;
    prettyPrint(result);
}

 

prettyPrint는 가로 구분선을 그리고 문자열을 출력하는 함수라 가정하고, this를 사용해 메서드가 속한 객체를 참조할 수 있습니다. 이제 이 함수가 Car메서드가 되려면  객체 정의에 아래 코드를 추가합니다.

function myCar(make, model, year,owner) {
    this.make = make;
    this.model = model;
    this.year = year; 
    this.owner = owner;
    this.displayCar = displayCar
}

function prettyPrint(obj) {
    console.log(JSON.stringify(obj, null, 4));
    
}

console.log(Eagle.displayCar());

 

this 로 객체 참조하기

 

자바스크립트에는 this라는 특별한 키워드가 있습니다. 메서드 내에서 현재 객체를 참조 할 수 있습니다.

const Manager = {
    name: "Jose Mourinho",
    age: 62,
    job: "Football Manager",
    team: "Fenerbahce S.K."
}


const Sing = {
    name: "I.U",
    age: 31,
    job: "singer-songwriter",
    birth: "seoul"
}

function sayHi() {
    console.log(`he is name ${this.name}`);
}

function call() {
    console.log(`she is name ${this.name}`);
}


Manager.sayHi = sayHi;
Sing.call = call;

Manager.sayHi(); // he is name Jose Mourinho
Sing.call(); // she is name I.U

 

위 this는 자신이 속한 객체를 참조하고, 이제 나이를 알려주는 문장을 콘솔에 기록하는 함수 howOldAmI()를 생성할 수 있습니다.

Manager.sayHi(); // he is name Jose Mourinho
Sing.call(); // she is name I.U

function howOldAMI() {
    console.log(`i am ${this.age}`);
    
}

Sing.howOldAMI = howOldAMI;
Sing.howOldAMI(); // i am 31

 

접근자와 설정자 정의하기

 

접근자는 특정 속성의 값을 반환하는 메서드로, 설정자는 특정 속성의 값을 설정하는 메서드입니다. 접근자와 설정자는 속성 추가를 지원하는 객체라면, 사전정의된 코어 객체와 사용자 정의 객체 모두에 추가할 수 있습니다.

 

• 객체 초기자를 사용해 정의하거나
• 나중에 필요한 시점에 아무 객체에나 접근자/설정자 추가 메서드로 추가 가능

객체 초기자를 사용해 접근자와 설정자를 정의하는 경우 필요한 것은, 접근자 메서드 이름 앞에 get, 설정자 메서드 이름 앞에 set을 붙이는 것 뿐 입니다. 모든 접근자 메서드는 아무 매개변수도 받지 않고, 설정자 메서드는 정확히 하나의 매개변수 (설정한 값)만 받는다는 제한이 있습니다.

const o = {
    a: 7,
    get b() {
        return this.a + 1;
    },
    set c(x) {
        this.a = x /2;
    },
}


console.log(o.a); // 7
console.log(o.b); // 8
o.c = 50; // <-- set c(x) method 
console.log(o.a); // 25

• o.a --- 숫자
• o.b --- o.a에 1을 더한 값을 반환하는 접근자
• o.c --- o.c 에 설정한 값의 반을 o.a에 설정하는 접근자

 

접근자와 설정자는 또한 객체 생성 이후에 Object.defineProperties(). 메서드로 추가할 수 있습니다. 이 메서드의 첫 번째 매개변수는 접근자와 설정자를 추가할 객체고, 두 번째 매개변수는 속성 이름이 추가할 접근자/설정자 이름, 속성 값은 접근자/설정자를 정의하는 객체입니다. 

const o = { a : 0 };

Object.defineProperties(o, {
    b: {
        get: function() {
            return this.a + 1;
        },
    },
    c: {
        set:function(x) {
            this.a = x / 2;
        },
    },
});


o.c = 10; // 설정자 실행, a 속성 10 / 2 = 5 할당
console.log(o.b); // 접근자 실행

 

속성 삭제 

 

상속한 속성이 아닌 경우 delete 연산자로 속성을 삭제할 수 있습니다.

// a와 b 두 속성의 새로운 객체 생성
const myObj = new Object();
myObj.a = 10;
myObj.b = 25;



// b속성을 제거해 a속성만 남기기
delete myObj.b;
console.log("b" in myObj); // false

 

객체 비교

 

JavaScript의 객체는 참조 타입으로 두 개의 객체는 서로 같은 속성을 갖더라도, 자신들끼리는 절대 같지 않으며 오직 자기 자신과의 비교만 참을 반환합니다.

// 두 개의 변수, 두 개는 같은 속성이나 서로 다른 객체다.
const dog = { name: "말티즈" };
const dogMall = { name: "말티즈" };

console.log(dog == dogMall); // false 반환

// 두 개의 변수, 두 개는 같은 속성이나 서로 다른 객체다.
const dog = { name: "말티즈" };
const dogMall = { name: "말티즈" };

console.log(dog == dogMall); // false 반환


// 두 개의 변수, 하나의 객체 
const soccer = { name: "축구" };
const football = soccer; // soccer 객체 참조를 football 에 할당


// football 과 soccer 가 같은 객체를 가리킨다
football == soccer; // true 
football == soccer;

soccer.name = "농구";
console.log(soccer); // 출력: { name: "축구" } not { name: "농구" }

 

 

참고 자료

객체로 작업하기 - JavaScript | MDN

 

GitHub - javascript-only/javascript-bloging