JavaScript 공부 5주차

sdtana·2021년 4월 4일

클래스 정의하는 방법
객체 만드는 방법 (new 키워드 이해하기)
메소드 정의하는 방법
생성자 정의하는 방법
this 키워드 이해하기

클래스 정의하는 방법

JavaScript에서 클래스가 생긴 이유

JavaScript는 프로토타입 기반 객체지향 언어다. 이는 클래스가 필요 없는 프로그래밍 언어라는 것을 의미한다.
그러므로 ES5까지는 클래스가 존재하지 않았고, 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있었다.
하지만 프로토타입은 클래스 기반 언어에 익숙한 개발자들이 JavaScript를 익히는 데 있어 하나의 장벽처럼 인식될 수 있었다.
이에 ES6에서 클래스가 추가되어, 클래스 기반 언어에 익숙한 개발자들이 더욱 편하게 사용할 수 있도록 기존 클래스 기반 언어들과 매우 흡사하게 사용 가능하게 되었다.

클래스 정의

클래스는 class키워드를 사용하여 정의한다.

class Person{} //클래스 선언문

일반적이지는 않지만 표현식을 사용하여 클래스를 정의할 수도 있다. 이는 클래스가 함수라는 것을 의미한다.
const Person = class{};

객체 만드는 방법(new 키워드 이해하기)

JavaScript에서 객체를 생성할 수 있는 방법에는 객체 리터럴, Object() 생성자 함수, 생성자 함수, Object.create 메소드, 클래스(ES6)가 있다.

객체 리터럴

객체 리터럴은 중괄호({ })를 사용한다. 중괄호 내에는 0개 이상의 프로퍼티가 정의되며, 변수에 할당될 때 엔진은 객체 리터럴을 해석해 객체를 생성한다.

var empty = {};
console.log(typeof empty); //object

Object() 생성자 함수

new 연산자와 함께 Object 생성자 함수를 이용하면 빈 객체를 생성하여 반환한다. 생성자 함수란 new 연산자와 함께 호출하여 객체를 생성하는 함수를 말하고, 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다.

const person = new Object();
console.log(typeof person); // object

생성자 함수

객체 리터럴로 객체를 생성하는 경우, 프로퍼티가 동일한 객체를 생성해도 매번 프로퍼티를 적어야만 하여 만약 객체가 수십 개를 넘어간다면 문제가 된다. 이 문제를 피하기 위해 생성자 함수를 이용하여 프로퍼티가 동일한 객체 여러 개를 간편히 생성할 수 있다.

function Circle(radius) {
	this.radius = radius;
    this.getDiameter = function () {
     	return 2* this.radius;
	};
};
const circle1 = new Circle(5);
console.log(circle1.getDiameter()) // 10

Object.create 메소드

Object.create 메소드는 프로토타입을 지정하여 객체를 생성한다.

Object.create(prototype[,propertiesObject])

클래스

클래스는 자바스크립트 공부 4주차에서 설명을 했으니 간단히 넘어가겠다.
ES6에서 추가된 클래스는, 클래스 기반 언어를 주로 사용하던 개발자들의 편의를 위해 추가되었다.

const person = class {};
console.log(typeof person); // function

클래스는 함수로 평가된다

메소드 정의하는 방법

메소드는 프로퍼티 내에 정의된 함수이다.

var circke = {
	radius = 5,                 //프로퍼티
    getdiameter = function() {  // 메소드
    	return 2* this.radius;
    }
};

단축 표현도 있는데,

var obj = {
  foo: function() {},
  bar: function() {}
};

를

var obj = {
  foo() {},
  bar() {}
};

와 같이 표현할 수도 있다.
메소드는 일반적으로 객체에 바인딩된 함수를 일컫는 의미였으나, ES6에서 명확한 정의가 규정되었다. 메소드는 메소드 단축 표현으로 정의된 함수이며, 인스턴스를 생성할 수 없는 함수(즉, 생성자 함수로서 호출될 수 없다)를 의미한다.

생성자 정의하는 방법

객체를 생성하는 함수를 생성자 함수라고 한다. 생성자 함수와 일반 함수에 차이는 몇 없으나 함수 이름이 반드시 대문자로 시작하고(관례상), new 연산자를 붙여 실행한다.

this 키워드 이해하기

메소드는 자기가 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자가 바로 this 식별자이다.
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)이다. this를 통해 자신이 속한 객체나 인스턴스의 프로퍼티나 메소드를 참조할 수 있다.

출처