자바스크립트 객체 생성방식

자바스크립트의 다양한 객체 생성 방식들은 크게 4가지가 존재합니다.

1. Object()생성자 함수를 사용하는 방법
2. 객체 리터럴을 사용하는 방법
3. 생성자 함수를 통해 객체를 생성하는 방법
4. Class를 사용하는 방법

각각의 방법이 무엇이고, 어떤 것이 다른지 정리를 해보려고 합니다.

첫번째 방법, 자바스크립트의 Object()생성자 함수를 사용하는 방법입니다.

new 키워드를 이용해서, Object생성자 함수를 호출하면, 빈 객체를 얻습니다.

var person = new Object();
person.name = "victolee";

이렇게 프로퍼티를 추가해 줄 수 있습니다.
Object뿐만 아니라, String,Number등 내장 객체도 생성 가능합니다

객체 리터럴을 사용해서 객체 생성

중괄호{ } 를 사용하여 객체를 생성하는 방법입니다.

var person = {
   name: "victolee",
   email: "asdf@example.com",
   birth: "0225"
}

이런식으로 person객체를 만들고 프로퍼티 : 값을 넣어주고, 각 쌍은 쉼표로 구분합니다.

생성자 함수와 리터럴 방식의 차이

https://ui.toast.com/fe-guide/ko_ANTI-PATTERN
배열과 객체 생성시 , 리터럴 표기법을 권장하고 있습니다.
코드가 간결하고 속도 측면에서 좋다고 권장하고 있으며,

어느정도로 속도차이가 나는 거지? 가 궁금하였습니다

확실히 객체 리터럴 방식이 속도가 더 빠름을 알 수 있었습니다.

var kim = {
	name:'Kim',
    age:40,
}

console.log(kim);

function person(name,age){
	this.name = name;
    this.age = age;
}

var man = new person('lee',50);
console.log(man);

객체 리터럴로 생성한 kim과 생성자 함수로 생성한 man을 비교해 보겠습니다
리터럴 방식으로 생성한 kim은 Object객체와,
생성자 함수로 생성한 man은 person.prototype을 참조합니다

ES6에서의 클래스

먼저 객체 지향 프로그래밍은 크게 2가지로 구분할 수 있습니다.
1. 클래스(Class)기반의 형태
2. 프로토타입(prototype)기반의 형태

자바스크립트는 프로토타입 기반의 언어입니다. 프로토타입 기반으로, 클래스가 존재하지 않습니다.

Java,C++ 등의 클래스 기반의 형태가 익숙한 사람을 위해서 ES6부터 클래스가 도입되었습니다.

클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성합니다.
그러나 차이점이 존재합니다.

클래스가 생성자 함수보다 엄격하게 동작합니다

1 new 연산자

클래스에는 new 연산자가 존재하지 않습니다.
이는 클래스가 생성자 함수의 역할만 하겠다는 의미입니다.
기존의 생성자 함수는, 생성자 함수가 아닌 일반 함수로도 호출이 가능했습니다.
그러나 클래스는 아예 이런 가능성을 제외해서, 생성자 함수의 역할만 합니다

2 extends,super

클래스에는 extends와 super를 통해 상속을 지원합니다.
이는 클래스의 상속을 편하게 하기 위한 키워드입니다.

3 호이스팅

함수 선언문의 생성자 함수는, 함수 호이스팅이 발생하고,
함수 표현식의 생성자 함수는 , 변수 호이스팅이 발생하며
클래스는 let.const와 같이 호이스팅이 발생하지 않는 것처럼 동작하나
호이스팅이 발생하며 TDZ가 존재합니다

4 strict mode

클래스 내부의 모든 코드들은 strict mode가 적용됩니다.
이는 필연적이며, 임의로 해제가 불가능 합니다.