DevYoon

[JS] 객체 리터럴 본문

언어/Javascript

[JS] 객체 리터럴

gimewn 2022. 6. 15. 21:42

[JS] 객체와 리터럴 ✏️

1️⃣ 자바스크립트에서 객체란?

  • 자바스크립트는 객체 기반 프로그래밍 언어 ➡️ 자바스크립트를 구성하는 거의 모든 것이 객체 ⭐
  • 원시 값을 제외한 나머지 값이 모두 객체
    • 원시 값
      • 더 이상 단순화할 수 없는 값
      • 단 하나의 값을 나타냄
      • 숫자, 문자, Boolean, null, undefined
    • 객체
      • 다양한 값을 하나의 단위로 구성한 복합적 자료구조
      • 함수, 배열, 정규표현식 등

2️⃣ 함수와 메서드의 차이점

  • 객체로부터
    • 독립적 ➡️ 함수
    • 종속적 ➡️ 메서드
  • 함수는 그 자체로 기능을 하고, 메서드는 객체 내에 존재하는 함수를 의미
  • 함수 ⊇ 메서드

3️⃣ 자바스크립트의 객체 생성 방법

1️⃣ 리터럴 표기

const 객체이름 = { 프로퍼티 명 : 프로퍼티 값 };

2️⃣ 생성자

  • new 연산자 사용
  • // 빈 객체 생성
    const 변수명 = new Object();
    
    // 프로퍼티 할당
    변수명.프로퍼티명 = 프로퍼티 값;

3️⃣ 생성자 함수

  • 생성자 함수를 만들어 객체 생성
  • function Obj(one, two, three) {
        this.one = 'hi';
        this.two = 2;
        this.three = 'world';
    }
    
    const newObj = new Obj("하나", "둘", "셋");

4️⃣ Object.create() 메서드 사용

  • 지정된 프로토타입 객체와 프로퍼티로 새로운 객체를 만들어 줌
  • const Animal = {
        type : '강아지',
        displayType: function(){console.log(this.type)}
    };
    
    const 변수명 = Object.create(프로토타입 객체, [새로운 객체의 프로퍼티1, 프로퍼티2, ...])
    
    const cat = Object.create(Animal);
    cat.type = '고양이';
    cat.displayType() // 고양이