Front-end/JavaScript

[이론] JS에서 객체란? 두가지 객체 생성 방법(리터럴, 생성자함수)

Coding Kitsune 2022. 2. 6. 23:00

 

JS는 객체기반의 프로그래밍 언어이고, 원시값을 뺀 모든것이 객체라 볼 수 있다.

 

객체는 프로퍼티와 메서드로 구성된 집합체이다.

  • 프로퍼티 : 객체 상태를 나타내는 값(data)
  • 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작(behavior)

 

프로퍼티

=> 키와 값으로 구성되며, 키 는 빈 문자열을 포함하는 모든 문자열이고,

값 은 JS에서 사용될 수 있는 모든 값이다.

 

var thing = {
    
    name = 'red-box'
    price = 5000
    
    #키 => name, price
    #값 => 'red-box', 5000
}

 

프로퍼티를 접흔하는 방법은 두가지가 있으며, 마침표 표기법, 대괄호 표기법 이다.

 

대괄표 표기법을 사용하는 경우에는 키는 반드시 따옴표로 감싼 문자열이어야한다.

console.log(thing.name)
console.log(thing['price']

 

이런 프로퍼티들의 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 한다.

 

메서드는 객체에 묶여있는 함수를 의미한다.

 

이런 객체를 생성하는 방법은 여러가지가 존재하는데, 크게

  • 객체 리터럴에 의한 생성,
  • 생성자 함수에 의한 객체 생성

로 나눌 수 있다. 

 

가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다. 리터럴이란 사람이 이해할 수 있는

 

문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 말한다.

 

우리가 아는 가장 대표적인 방법이며 아래의 방법과 같다.

 

var animal = {
    name : "simba",
    greeting : function () {
        console.log(`Hello my name is ${this.name}`)
    }
}
console.log(typeof animal)
console.log(animal)

 

 

객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하지만 단 하나의 객체만 생성한다.

 

즉 객체를 여러개 생성해야 할 경우 비효율적인 문제점이 있다.

 

 

 

 

생성자 함수란, new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 뜻한다.

 

생성자 함수에 의해 생성된 객체를 인스턴스라 한다. 즉 구조가 동일한 객체 여러 개를

 

 

간편하게 생성할 수 있다.

 

function Rect(width, height) {
    this.width = width;
    this.height = height;
    this.getarea = function (){
    return this.width * this.height;
    };
    }
const rect1 = new Rect(3,4);
const rect2 = new Rect(5,6);
console.log(rect1.getarea())
console.log(rect2.getarea())

 

여기서 this는 객체 자신의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수다.

 

this가 가리키는 값(this 바인딩)은 함수 호출방식에 따라 동적으로 결정된다.

'Front-end > JavaScript' 카테고리의 다른 글

[이론] JS - 문서 객체 모델(DOM)  (0) 2022.03.01