Kamwoo/tech
Github
Postsjs자바스크립트 객체

자바스크립트 객체

A set of two-state buttons that can be toggled on or off

객체란

다양한 타입의 값을 key와 value로써 하나의 단위로 구성한 자료구조

자바스크립트는 객체 기반의 언어이고, 원시형 값을 제외한 나머지 모든 것은 모두 객체이다.

자바스크립트에서 사용할 수 있는 모든 값들은 프로퍼티의 값으로 사용될 수 있다.

객체는 프로퍼티와 프로퍼티를 조작할 수 있는 메서드를 하나의 단위로 구조화할 수 있어서 유용하다.

자바스크립트는 프로토타입 객체지향 언어로 다양한 객체 생성 방법을 지원한다.

  • 객체 리터럴
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메서드
  • (ES6) Class

객체 리터럴

리터럴이란 사람이 이해할 수 있는 문자나 기호를 통해서 값을 생성하는 표기법을 말한다.

객체 리터럴은 중괄호안에 0개 이상의 프로퍼티를 정의해서 사용하는 것을 말한다.

객체 리터럴의 중괄호는 코드 블럭을 의미하지 않는다. 일반적으로 코드 블럭의 닫는 중괄호 뒤에는 세미콜론을 붙이지만 객체 리터럴은 값으로 평가되기 때문에 뒤에 세미콜론을 붙이지 않는다.

프로퍼티 네이밍 규칙: 빈 문자열을 포함하는 문자열 또는 심볼 값

프로퍼티는 동적으로 생성될 수 있다.

계산된 키값을 사용하기 위해서는 대괄호안에서 정의해야한다.

프로퍼티의 값으로 미리 정의된 식별자를 사용할 수 있고, 리터럴 문에서는 키값을 따로 명시해주지 않아도 식별자를 키값으로 사용할 수 있다.

메서드를 정의할 때 function을 생략해서 사용할 수 있다.

1const obj = {
2	a: 1,
3	sayHi: function () {},
4}
5
6---
7
8const obj = {
9	a: 1;
10	sayHi(){
11	}
12}

축약해서 정의한 메서드는 프로퍼티에 할당한 메서드와 다르게 동작한다.

built-in, wrapper object

자바스크립는 크게 3가지의 객체로 분류할 수 있다.

  • 표준 빌트인 객체
  • 호스트 객체
  • 사용자 정의 객체

표준 빌트인 객체

ECMAScript spec에 정의된 객체를 말하며 전역에 공통 기능으로 제공된다. 자바스크립트 실행 환경에 관계없이 사용할 수 있고, 전역 객체의 프로퍼티로서 제공된다.

Object, String, Number, Date, Array, Function 등으로 약 40개 정도의 표준 빌트인 객체가 있다.

대부분의 빌트인 객체는 인스턴스를 생성할 수 있는 생성자 함수 객체로 프로토타입 메서드와 정적 메서드를 제공한다.

1const strObj = new String('kam'); // String {"kam"}
2const numObj = new Number(123); // Number {123}

빌트인 객체가 생성한 인스턴스의 프로토타입은 빌트인 객체의 프로토타입에 바인딩된다.

호스트 객체

ECMAScript spec에 정의되어 있지 않지만 자바스크립트 환경에서 제공하는 객체를 말한다. 브라우저 환경에서 DOM, fetch, RequestAnimationFrame, WebStorage 등이 해당된다.

사용자 정의 객체

사용자가 직접 정의한 객체를 말한다.


primitive data인데 어떻게 내장 함수를 사용할 수 있는걸까?

원시값인 문자열, 숫자 등과 같은 경우 객체처럼 . 을 통해서 접근하게 되면 자바스트립트 엔진이 일시적으로 원시값을 연관된 객체로 변환해주기 때문이다.

원시값을 객체처럼 사용하면 자바스크립트 엔진이 암묵적으로 연관된 객체를 생성하여 생성된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌린다.

이처럼 잠시 생성되는 임시 객체를 Wrapper Object라고 한다.

예를 들어서 string 원시값을 객체처럼 접근하게 되면

1const str = 'hello'; // 1
2const str.name = 'kam'; // 2
3											 //3
4console.log(str.name); // 4
5console.log(typeof str, str); // 5

  1. str 변수는 ‘hello’ 문자열을 값으로 가진다.

  2. 원시값인 문자열에 객체처럼 접근해서 ‘name’프로터티에 ‘kam’을 저장하려고한다.

    1. 이때 str 변수는 임시로 생성된 String 래퍼 객체를 가리킨다.
    2. ‘hello’는 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된다.
    3. 래퍼 객체의 ‘name’ 프로퍼티가 동적으로 추가된다.
    4. ‘name’프로퍼티에 ‘kam’이 저장된다.

  3. 변수 str은 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된 원시값을 다시 가진다.

    래퍼 객체는 참조되지 않으므로 GC에 대상이된다.

  4. str에 ‘name’프로퍼티에 접근하려고 한다.

    1. 이때 다시 새로운 String 래퍼객체를 임시로 생성한다.
    2. ‘hello’는 래퍼 객체의 [[StringData]] 내부 슬롯에 할당된다.
    3. 새로운 래퍼객체에는 ‘name’ 프로퍼티가 없으므로 ‘undefined’가 로그가 적힌다.

  5. 3번 반복

  6. 로그에 String hello 가 적힌다.

모든 원시값이 해당하는 것은 아니고 number, string, boolean이 래퍼객체를 생성하고 null, undefined는 래퍼객체를 생성하지 않는다.

이렇게 사용하는 이유는 편리함 때문이라고 생각한다. 이처럼 래퍼객체로 인해서 원시값을 마치 객체처럼 사용해서 빌트인 객체의 프로토타입 메소드 또는 프로퍼티를 참조할 수 있기 때문에 new 연사자와 함께 생성자 함수를 호출해서 인스턴스를 생성할 필요가 없기 때문이다.

PreviousPrototype
NextEvery Some