[JAVASCRIPT.INFO] 객체: 기본

이 글은 [모던 JavaScript 튜토리얼]을 공부하며 정리한 글입니다.

 

 

👉 기본 환경

- Language: JavaScript

- IDE: VS code

---

객체(Object)

- 중괄호 {…} 선언

    - 중괄호 안에 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property)로 구성

    - 키(이름): 문자형, 값: 모든 자료형

        - 키 값에 예약어 사용 가능

        - 숫자 입력 시,

            - 자동으로 문자로 형변환

            - 자동으로 key가 오름차순 정렬(오름차순 정렬을 원하지 않을 경우에는 문자로 취급되도록 " " 등 추가)

 

* 객체 생성

let user = new Object(); // '객체 생성자' 
let user = {};  // '객체 리터럴' 
 

⭐ 객체 리터럴이 주로 사용됨

 

let user = {     
  name: "John",  
  age: 30,
  "likes birds": true, // 마지막 , 생략 가능
  // 띄어쓰기 시, "" 사용
};
 
 
// key값에 띄어쓰기가 없을 경우,
// set
user.isAdmin = true;
 
// get
user.isAdmin;
 
// delete
delete user.age;
 
 
// key값에 띄어쓰기가 있을 경우,
// set
user["likes birds"] = true;
 
// get
alert(user["likes birds"]); // true
 
// delete
delete user["likes birds"];
 

 

⭐ Const 상수는 수정하지 못하지만, Const 객체의 property는 수정 가능

 

* 점 표기법과 대괄호 표기법

// 점 표기법
user.likes birds = true // error
 
let user = {
  name: "John",
  age: 30
};
 
let key = "name";
alert( user.key ) // undefined
 
 
// 대괄호 표기법
user["likes birds"] = true;
 
let user = {
  name: "John",
  age: 30
};
 
let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");
 
// 변수로 접근
alert( user[key] ); // John
 

 

* 계산된 Property

- 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
 
let bag = {
  [fruit]: 5, // 변수 fruit에 프로퍼티 이름을 동적으로 할당
};
 
alert( bag.apple ); // fruit에 "apple" 할당 시, 5 출력
 

 

* 단축 Property

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

 

* 존재하는 Property인지 확인

// undefined
let user = {};
alert( user.noSuchProperty === undefined ); // '프로퍼티가 존재하지 않음'
 
let obj = {
  test: undefined
};
alert( obj.test === undefined ); // value: undefined와 존재하지 않는 undefined가 구분되지 않음
 
 
// in operator
let user = { name: "John", age: 30 };
alert( "age" in user ); // true
alert( "blabla" in user ); // false
 

 

* for .. in 반복문

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};
 
for (let key in user) {
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}
 

 

 

---

2. 참조에 의한 객체 복사

 

* Object.assgin

// Object.assign
let user = { name: "John" };
 
let permissions1 = { canView: true };
let permissions2 = { canEdit: true };
 
Object.assign(user, permissions1, permissions2);
 
// user = { name: "John", canView: true, canEdit: true }
// permissions1과 permissions2의 프로퍼티를 user로 복사
 
 
// 목표 객체(user)에 동일한 이름을 가진 프로퍼티가 있는 경우
let user = { name: "John" };
 
Object.assign(user, { name: "Pete" });
 
alert(user.name);
// user = { name: "Pete" }
// 기존 값이 덮어씌워짐
 

🚨 Object.assign()은 중첩 객체 복사를 하지 못함

 

+ 중첩 객체 복사 방법

let user = {
    name: "John",
    sizes: {
        height: 182,
        width: 50
    }
};
 
 
// 1. lodash library
let deep = _.cloneDeep(user);
console.log(user.sizes === deep.sizes); // false
 
 
// 2. for .. in
let clone = {};
 
for (let key in user) {
    if(typeof user[key] == 'object'){
        clone[key] = Object.assign({}, user.sizes);
        continue;
    }
    clone[key] = user[key];
}
 
console.log(user.sizes === clone.sizes); // false
 

 

 

---

3. 가비지 컬렉션

- 객체는 도달 가능한 상태일 때 메모리에 남음

 

* 참조 복사

let user = {
    name: "John"
};
 
let admin = user;
 
user = null;
console.log(admin.name);
 

🚨 user.name에 접근하여 직접 값을 변경하여 admin에도 반영이 되는 것과는 다른 개념

    - name: "John" 대신 null을입력한 것이 X

    - user의 화살표를 제거한 것

 

 

---

4. 메서드와 this

 

* 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성

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

 

* 객체의 프로퍼티에 함수를 할당(= 메서드)해 객체에게 행동할 수 있는 능력을 부여

// 표현식 1
user.sayHi = function() {
  alert("안녕하세요!");
};
 
user.sayHi(); // 안녕하세요!
 
 
// 표현식 2
// 함수 선언
function sayHi() {
  alert("안녕하세요!");
};
 
// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;
 
user.sayHi(); // 안녕하세요!
 
 
// 표현식 3
user = {
  sayHi: function() {
    alert("Hello");
  }
};
 
user.sayHi(); // 안녕하세요!
 
 
// 표현식 4
user = {
  sayHi() { 
    alert("Hello");
  }
};
 

 

* this

- 현재 객체

- ‘점 앞의’ 객체가 무엇인가에 따라 ‘자유롭게’ 결정

let user = {
  name: "John",
  age: 30,
 
  sayHi() {
    alert( user.name ); // Error: Cannot read property 'name' of null
  }
 
};
 
 
let admin = user;
user = null;
 
admin.sayHi();
// sayHi()가 user의 name을 참조하면서 오류 발생
 

🚨 this.name으로 선언 시, admin의 name을 참조하게 되므로 오류가 발생하지 않음

 

* 화살표 함수

- 자신만의 this를 가지지 않음

- 화살표 함수 안에서 this를 사용하면, 외부에서 this 값을 가져옴

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};
 
user.sayHi(); // 보라
 

 

* 객체 리터럴에서 'this' 사용하기

// Case1
function makeUser() {
  return {
    name: "John",
    ref: this
  };
};

let user = makeUser();
 
alert( user.ref.name ); // Error: Cannot read property 'name' of undefined
 

⭐ Undefined Error 발생 이유

- 객체의 메서드로써 호출된 게 아니라 함수로써 호출되었기 때문

    - ref 속성은 함수 내에서 this로 설정되지 않고, 전역 객체를 참조

        - 일반적으로 브라우저 환경에서, 전역 객체는 window 객체
        - window.name은 브라우저 창의 이름을 나타내는 속성으로, 일반적으로 초기에는 빈 문자열로 설정

 

function makeUser() {
  return {
    name: "John",
    ref() {
      return this;
    }
  };
};
 
let user = makeUser();
 
alert( user.ref().name ); // John
 

- ref 속성은 메서드로 정의되었으며, 함수 내부에서 this는 해당 메서드를 호출한 객체

 

⭐ 1번에서는 메서드로 정의되지 않은 ref이므로 this가 해당 메서드를 호출한 객체를 가르키게 되는게 아니라, 전역 객체를 가리키게 되고

⭐ 2번에서는 메서드로 정의된 ref에서 this는 해당 메서드를 호출한 객체를 가르키게 되므로 user 객체가 가르키는 객체가 됨

 

let calculator = {
  sum() {
    return this.a + this.b;
  },
 
  mul() {
    return this.a * this.b;
  },
 
  read() {
    this.a = +prompt('첫 번째 값:', 0);
    this.b = +prompt('두 번째 값:', 0);
  }
};
 
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );
 

* this를 활용하여 변수를 선언하지 않고도 계산 수행 가능

* prompt에 + 선언

    - 사용자 입력 값을 숫자로 변환

 

⭐ 객체 리터럴 내에서 속성을 선언하고 값을 할당하지 않으면 JavaScript는 자동으로 해당 속성을 undefined로 초기화

 

// * 일반
let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // 사다리에서 몇 번째 단에 올라와 있는지 보여줌
    alert( this.step );
  }
};
 
ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1
 
 
// * Chaining
let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
}
 
ladder
  .up()
  .up()
  .down()
  .up()
  .down()
  .showStep(); // 1
 

⭐ 객체 반환을 통해서 메서드 체이닝

 

 

---

 

5. new 연산자와 생성자 함수

⭐ 유사한 객체를 여러 개 만들 때 유용

 

*함수 이름의 첫 글자는 대문자로 시작

    - 일반 함수와 동일한 형태이지만, 구분을 위해 첫 글자를 대문자로 작성

*반드시 new 연산자를 붙여 실행

    - new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환

function User(name) {
  this.name = name;
  this.isAdmin = false;
}
 
let user = new User("보라");
 
alert(user.name); // 보라
alert(user.isAdmin); // false
 

- 빈 객체를 만들어 this에 할당

- 함수 본문

- this에 새로운 프로퍼티를 추가해 this를 수정
- this를 반환

let user = {
  name: "보라",
  isAdmin: false
};
 

 

* 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없음

    - return 객체: this 대신 객체 반환

    - return 원시형: return문 무시

function BigUser() {
  this.name = "원숭이";
  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체 반환
}
 
alert( new BigUser().name ); // 고릴라
 
 
function SmallUser() {
  this.name = "원숭이";
  return 2; // <-- this 반환
}
 
alert( new SmallUser().name ); // 원숭이
 

 

⭐ return문이 있는 생성자 함수는 거의 없음

 

function Calculator(){
    this.read = function(){
        this.a = +prompt('Enter a number.', '0');
        this.b = +prompt('Enter a number.', '0');
    },
    this.sum = function (){
        return this.a + this.b;
    },
    this.mul = function (){                
        return this.a * this.b;
    }
}
 
let calculator = new Calculator();
calculator.read();
 
alert("Sum=" + calculator.sum());
alert("Mul=" + calculator.mul());
 

* 생성자 함수 내부에서 this를 사용 시, 그 this는 새로 생성되는 객체 인스턴스를 가리킴

* 생성자 함수에서 메서드를 정의할 때 this.read = function() {}와 같이 작성하는 이유

- 생성된 각 객체 인스턴스가 자신만의 'read' 메서드를 가지게 됨

- 즉, 'read' 메서드는 해당 객체에 속한 프로퍼티가 되어 해당 객체의 컨텍스트(this)에서 접근하고 호출할 수 있습니다.

- 반대로, 만약 this 없이 그냥 function read() {}와 같이 작성한다면, 'read' 함수는 생성자 함수의 로컬 함수가 되어 외부에서 접근할 수 없음

* 따라서, 각각의 Calculator 인스턴스가 자신만의 'read', 'sum', 'mul' 메서드를 가지고 이들 메서드가 해당 인스턴스에 속한 데이터('a', 'b')에 접근할 수 있도록 하기 위해, 메서드 정의에 this.methodName = function() {} 형태로 작성해야 함

 

function Accumulator(startNum){
    this.number = startNum;
    this.read = function(){
        this.number += +prompt('Enter a number');
    }
    this.value = this.number;
}
 

* value가 startNum으로 고정된 이유

    - this.value = number는 객체 생성 시, 1번만 실행되므로 이미 설정된 value의 값은 변경되지 않음

function Accumulator(startNum) {
    this.number = startNum;
    this.read = function () {
        this.number += +prompt('Enter a number');
    };
    this.value = function () {
        return this.number;
    };
}
 
let accumulator = new Accumulator(1); // 최초값: 1
 
accumulator.read(); // 사용자가 입력한 값을 더해줌
accumulator.read(); // 사용자가 입력한 값을 더해줌
 
alert(accumulator.value()); // 최초값과 사용자가 입력한 모든 값을 더해 출력함
 

* value를 메서드로 만들어 현재까지 누적된 값을 반환하게 할 수 있도록 함

 

function Accumulator(startNum) {
    this.value = startNum;
    this.read = function () {
        this.value += +prompt('Enter a number');
    };
}
 
let accumulator = new Accumulator(1); // 최초값: 1
 
accumulator.read(); // 사용자가 입력한 값을 더해줌
accumulator.read(); // 사용자가 입력한 값을 더해줌
 
alert(accumulator.value); // 최초값과 사용자가 입력한 모든 값을 더해 출력함
 

* value 변수를 직접 변경

 

 

---

6. 옵셔널 체이닝 '?.'

 

* Optional Chaining

- ?.은 ?.의 왼쪽 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환

⭐ ?.는 존재하지 않아도 괜찮은 대상에만 사용

    - 논리상 user는 반드시 있어야 하는데 address는 필수값이 아닐 경우, user.address?.street를 사용하는 것이 바람직

    - 꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 유의

 

// key: 값
let user = null;
alert( user?.address ); // undefined
 
 
// key: 함수
let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}
 
let user2 = {};
 
user1.admin?.(); // 관리자 계정입니다.
user2.admin?.(); // 평가가 멈춤
 

 

🚨 ?.은 읽기나 삭제하기에는 사용할 수 있지만 쓰기에는 사용할 수 없음

// 검색
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined,
 
 
// 삭제
delete user?.name; // user가 존재하면 user.name을 삭제
 
 
// 삽입
user?.name = "Violet"; // undefined = "Violet"으로 SyntaxError 발생
 

 

 

---

7. 심볼형

* 유일한 식별자(unique identifier)를 만들고 싶을 때 사용

- 심볼형 값은 다른 자료형으로 암시적 형 변환(자동 형 변환)되지 않음

 

* 심볼 설명

// 심볼 id에는 "id"라는 설명 추가
let id = Symbol("id");
 

 

* 숨김 프로퍼티

    - 외부 코드에서 접근이 불가능하고 값도 덮어쓸 수 없는 프로퍼티

// 서드파티 코드에서 가져온 객체
let user = { name: "John" };
 
user.id = "스크립트 id 값";
// 문자열 "id"를 사용해 식별자 생성
user.id = "제3 스크립트 id 값"
// 덮어쓰기되어 id 식별자가 무의미해짐
 
 
let id1 = Symbol("id");
// 심볼을 사용하면 서드파티 코드가 모르게 user에 식별자를 부여할 수 있음
user[id1] = "스크립트 id 값";
// 심볼은 유일성이 보장되므로 우리가 만든 식별자와 제3의 스크립트에서 만든 식별자의 이름이 동일하더라도 충돌하지 않음
let id2 = Symbol("id");
user[id2] = "제3 스크립트 id 값";
 
alert(id1 == id2); // false
 

 

*  심볼 배제와 포함

- for...in 반복문

- Object.keys()

- Object.assign()

let id = Symbol("id");
let user = {
  name: "John",
  age: 30,
  [id]: 123
};
 
 
// for...in 반복문
for (let key in user) alert(key);
// name과 age만 출력되고, 심볼은 출력되지 않음
alert( "직접 접근한 값: " + user[id] );
// 심볼로 직접 접근하면 작동
 
 
// Object.keys(user)
alert(Object.keys(user));
// name과 age만 출력되고, 심볼은 출력되지 않음
 
 
// Object.assign(user)
let clone = Object.assign({}, user);
 
alert( clone[id] ); // 123
// 키가 심볼인 프로퍼티를 배제하지 않고 객체 내 모든 프로퍼티를 복사
 

 

* 전역 심볼

- 전역 심볼 레지스트리 안에 있는 심볼은 전역 심볼

- 전역 심볼 레지스트리 안에 심볼을 만들고 해당 심볼에 접근하면, 이름이 같은 경우 항상 동일한 심볼을 반환

    - 조건에 맞는 심볼이 레지스트리 안에 없으면 새로운 심볼 Symbol(key)을 만들고 레지스트리 안에 저장

- 이름이 같은 심볼이 같은 개체를 가리키길 원하는 경우 사용

- 애플리케이션에서 광범위하게 사용해야 하는 심볼이라면 전역 심볼을 사용

// 전역 레지스트리에서 심볼을 검색
let id = Symbol.for("id");
// 심볼이 존재하지 않으면 새로운 심볼 생성
 
let idAgain = Symbol.for("id");
// 동일한 이름을 이용해 심볼을 다시 검색
 
alert( id === idAgain ); // true
 

 

* Symbol.for() && Symbol.keyFor()

// 이름을 이용해 심볼을 찾음
let sym = Symbol.for("name");
let sym2 = Symbol.for("id");
 
// 심볼을 이용해 이름을 얻음
alert( Symbol.keyFor(sym) ); // name
alert( Symbol.keyFor(sym2) ); // id
 

🚨 검색 범위가 전역 심볼 레지스트리이기 때문에 전역 심볼이 아닌 심볼에는 사용할 수 없음

전역 심볼이 아닌 인자가 넘어오면 Symbol.keyFor는 undefined를 반환

 

⭐ 전역 심볼이 아닌 모든 심볼은 description 프로퍼티 사용

일반 심볼에서 이름을 얻고 싶으면 description 프로퍼티 사용

let globalSymbol = Symbol.for("gloName");
let localSymbol = Symbol("locName");
 
alert(Symbol.keyFor(globalSymbol)); // gloName, 전역 심볼
alert(Symbol.keyFor(localSymbol)); // undefined, 전역 심볼이 아님
 
alert(localSymbol.description); // locName
alert(globalSymbol.description); // gloName
 

 

cf. 심볼 조회 메서드

내장 메서드 Object.getOwnPropertySymbols(obj)를 사용하면 모든 심볼을 볼 수 있고, 

메서드 Reflect.ownKeys(obj)는 심볼형 키를 포함한 객체의 모든 키를 반환

* 그러나, 대부분의 라이브러리, 내장 함수 등은 이런 메서드를 사용하지 않음