JavaScript의 OOP - 객체 생성 및 `this` 키워드 소개

This article as originally published here.

JavaScript는 유연한 객체 지향 언어입니다. 이는 개발자가 다양한 목적을 위해 다양한 종류의 개체를 만들 수 있음을 의미합니다. JavaScript의 거의 모든 것(기본 유형 제외)은 객체(부울, 문자열, 숫자, 날짜, 배열, 함수, 객체 등)입니다.

개체 만들기

JS에서 객체를 생성하는 다양한 방법을 살펴보겠습니다.

1. 객체 리터럴

이것은 개체를 만드는 가장 인기 있고 쉬운 방법입니다. 객체 리터럴은 변수/객체 이름(let, var 또는 const)의 유형, 객체 이름 및 그 안에 있는 속성 모음으로 구성됩니다. 다음은 더 잘 이해하기 위한 예입니다.

let obj = {}; // Object Literal

더 자세한 객체 리터럴 -

let userDetails = {
firstName: 'Arya',
lastName: 'Stark',
occupation: 'Girl With No Name',
};

2. 객체 생성자

생성자는 new 키워드로 객체를 만들 때 호출되는 특수 함수입니다. 아래 예를 살펴보십시오.

let person = new Object({ 
name: 'Jon',
family: 'Targaryen',
occupation: 'Dragon Rider',
});

여기서 키워드 new는 대소문자 구분 키워드 Object와 함께 사용되어 Object Constructor 방식을 통해 객체를 생성할 때 사용되는 특수 키워드임을 나타냅니다.

결과는 객체 리터럴을 통해 객체를 생성하는 것과 동일합니다.

3. 객체 생성

이것은 새 객체를 생성하는 또 다른 방법으로 객체 처리를 더 잘 제어할 수 있습니다. Object.create는 null 또는 개체(키-값 쌍)일 수 있는 매개 변수를 허용합니다.

let user = Object.create({
name: 'Vinoo',
designation: 'Developer',
});

null를 매개변수로 전달하면 여전히 빈 객체가 생성됩니다.

이 키워드

간단히 말해서 this는 모든 함수 선언에 있는 사전 정의된 특수 변수입니다. this 변수의 값은 정의된 함수를 호출하는 방식에 따라 변경됩니다.
this는 전역 및 함수 컨텍스트 모두에서 사용됩니다. 항상 개체를 가리킵니다. 보다 구체적으로 this는 현재 함수를 호출하는 개체를 참조합니다.

예시 -

const add5 = {
    a: 10;
    addition: function() {
    return this.a = this.a + 5;
    }
};

add5.addition();

여기서 addition()는 add5 객체의 속성인 함수이다(속성 내부의 함수는 메소드가 된다). 따라서 addition() 메서드 내에서 this는 add5 개체를 참조합니다.

객체(예: add5.addition())를 통해 함수를 호출할 때마다 this는 항상 해당 객체를 가리킵니다.

전역 컨텍스트에서 this는 웹 브라우저의 window 개체인 전역 개체를 나타냅니다.

다음 스니펫을 실행하면 this가 window 전역 개체를 가리키는 것을 볼 수 있습니다.

console.log(this === window); //true

기본적으로 속성이 this 에 할당되면 해당 속성이 전역 개체에 추가되고 window 개체에서 액세스할 수 있습니다.

예시 -

this.value = 21;
console.log(window.value);

출력은 21 입니다.

this 키워드에는 함수 컨텍스트에서 더 많은 사용 사례가 있으며, 이는 다음 게시물에서 확인할 수 있습니다.

계속 지켜봐! 🚀