[자바스크립트] 객체

2020년 10월 26일, 23:15

자바스크립트에는 8가지의 자료형이 있음

  • 원시형(Primitive type)
    • 객체가 아니면서 메서드도 가지지 않는 데이터
    • 종류
      • Number
      • BigInt
      • String
      • Symbol
      • undefined
      • Boolean
      • null
  • Object 까지 해서 8가지.

객체형은 원시형과 달리 다양한 데이터를 담을 수 있음.

  • in 을 통해서 객체 안에 property 존재 여부를 확인 가능.
  • for ... in 을 통해 객체의 모든 키를 순회 할 수 있음.

객체의 정렬 방식

for ... in 을 사용하는 경우 순서 정렬은

  • 정수 프로퍼티는 자동 정렬
  • 그 외 프로퍼티는 객체에 추가한 순서
const code = {
    "4":"a",
    korea:"kimchi",
    "3":"b",
    "2":"c",
}

for(const key in code){
    console.log(key);
}

// 실행 결과
// 2
// 3
// 4
// korea

참조에 의한 복사

객체형은 변수에 저장될 때 원시형과는 다르다.

원시형은 값 그대로 저장, 할당, 복사가 이루어지지만,

객체형은 메모리 주소인 참조 값이 저장, 할당, 복사가 이루어진다.

const a = { korean:"안녕", english: "hi" };
const b = a;

console.log(a === b); // true

const c = Object.assign({}, a);

console.log(c === a); // false

따라서, 객체를 복사 하려면

  • for ... in 을 통해 새롭게 선언된 객체에 값을 저장해주는 방법
  • Object.assign(target, src1, src2 ...) 의 방식으로 해주는 방법이 있다.

❗ 객체 안에 객체가 있는 경우에는 어떻게 해야할까? → 안에 있는 객체도 Object.assign으로 풀어줘야한다 혹은 라이브러리를 통해 복사를 해야할 수 밖에 없다.

메소드와 this

객체 프로퍼티에 할당된 함수를 메소드라고 부른다.

메소드에서는 this를 이용해서 객체에 접근이 가능하다.

const user = {
	name:"jyp",
	getName(){
        console.log(this.name);
	}
}

user.getName();

this는 객체로 실행 시키는 경우에는 this가 객체 본인을 따라간다.(위의 예제의 경우)

하지만, 그렇지 않다면 this는 엄격모드인 경우 undefined, 엄격모드가 아닌 경우는 window 전역 객체를 참조한다.

'use strict'

function hi(){
    console.log(this);
}

hi(); // 엄격 모드인 경우 undefined

const user = {
    name:"jyp",
    getThis(){
        console.log(this)
    }
}

const a = user.getThis;

a(); // 객체의 함수를 받아서 변수에 할당해서 사용하는 경우도 this를 알 수 없음

이렇게 this는 런타임에 결정된다.

화살표 함수에서의 this

화살표 함수는 일반 함수와 달리 고유한 this를 가지지 않는다.

그래서 화살표 함수에서 this를 참조하면 화살표 함수가 아닌 외부 함수에서 this값을 가져온다.

new 연산자와 생성자 함수

function Person(name){
    this.name = name;
};

const b = new Person("jyp");

console.log(b.name);
  • 생성자 함수의 첫 글자는 대문자
  • new 키워드를 이용해 객체 생성
function Person(name){
    if(!new.target) return new Person(name);
    this.name = name;
};

const b = Person("jyp");

console.log(b.name);
  • new 키워드를 생략할 수 있는 방법이다. 하지만 정말 필요한 경우가 아니라면 굳이 생략할 필요는 없다.

옵셔널 체이닝

최근에 추가된 기능으로 객체의 프로퍼티가 undefiend 또는 null인 경우 평가를 멈추고 undefiend를 반환

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않음

하지만 이 기능은 es2020부터 지원되는 기능으로 아직 실험적인(?) 기능이다.

객체의 형변환

let user = {
  name: "John",
  money: 1000,

  [Symbol.toPrimitive](hint) {
    alert(`hint: ${hint}`);
    return hint == "string" ? `{name: "${this.name}"}` : this.money;
  }
};

// 데모:
alert(user); // hint: string -> {name: "John"}
alert(+user); // hint: number -> 1000
alert(user + 500); // hint: default -> 1500

자바스크립트는 형 변환이 필요할 때, 아래와 같은 알고리즘에 따라 원하는 메서드를 찾고 호출합니다.

  1. 객체에 obj[Symbol.toPrimitive](hint)메서드가 있는지 찾고, 있다면 메서드를 호출합니다. Symbol.toPrimitive는 시스템 심볼로, 심볼형 키로 사용됩니다.
  2. 1에 해당하지 않고 hint가 "string"이라면,
    • obj.toString()이나 obj.valueOf()를 호출합니다(존재하는 메서드만 실행됨).
  3. 1과 2에 해당하지 않고, hint가 "number"나 "default"라면

    • obj.valueOf()나 obj.toString()을 호출합니다(존재하는 메서드만 실행됨).

참고

https://ko.javascript.info/object-methods