[공부 필기] JavaScript 문법 공부 21일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/constructor-new

new 연산자와 생성자 함수

 

✅ new 연산자와 생성자 함수

- 객체 리터럴 : {...}

   » 객체를 쉽게 만들 수 있다.

- 객체 리터럴이 아니여도 객체를 생성할 수 있다.

   » new 연산자, 생성자 함수

 

✅ 생성자 함수(constructor function)

- 생성자 함수는 일반 함수와 기술적으로는 차이가 없다.

- 다만 생성자 함수는 아래의 관례를 따른다고 한다.

   » 함수 이름의 첫 글자는 대문자

   » 반드시 'new' 연산자를 붙여서 실행

"use strict";

function User(name, age) { // 생성자 함수 정의
	this.name = name;
	this.age = age;
}

let user = new User("soy", 1); // 생성자 함수 실행

/* 최종적으로 만들어진 객체
let user = {
	name: "soy",
	age: 1
}; */

 

 

- 생성자 함수 실행 순서(알고리즘)

   1) new 키워드를 만나면, 빈 객체를 만들어 this에 할당한다.

       » 빈 객체를 만들고, this라는 키워드(변수?)에 해당 객체의 참조값을 할당한다는 이야기인 듯 하다..

   2) 함수 본문을 실행한다. (function User ~~~)

   3) this에 새로운 프로퍼티를 추가해 this를 수정한다.

   4) this를 반환한다.

 

- 즉, 생성자 함수를 실행하는건 다음과 같은 코드를 실행하는 것과 동일하다고 한다.

"use strict";

function User(name, age) {
	this = {}; //실제로는 암시적

	this.name = name;
	this.age = age;

	return this; //실제로는 암시적
}

 

 

✅ 생성자를 사용하는 이유

- 객체 리터럴 문법으로 일일이 객체를 만드느 것보다 훨씬 간단하고 코드를 읽기 쉽다.

- 재사용할 수 있는 객체 생성 코드를 구현할 수 있다.

- 만약, 재사용할 필요가 없는 객체를 만든다고 해도 생성자를 사용하면 복잡한 객체를 만들 때 가독성을 높일 수 있다.

   재사용이 필요 없다면 익명 생성자 함수를 사용해도 된다.

"use strict";

let user = new function(name) { // 익명 생성자 함수
	this.name = name;
	this.message = prompt("개인 메시지를 입력해주세요.", "");
	// 그 외 복잡한 로직, 구문 등이 들어갈 수 있다.
};

user["name"] = "soy"
console.log(user);

※ 익명 함수는 어디에도 저장되지 않기 때문에 1회성이다.

    (본래 단 한번만 호출할 목적으로 만들어져서 재사용이 불가능하다)

    따라서 재사용을 막으면서 코드를 캡슐화할 때 사용하기 적절하다.

 

- (주의) 모든 함수는 생성자 함수가 될 수 있다.

   » 생성자 함수와 일반 함수의 기술적인 차이가 없기 때문

   » 따라서, 일반 함수 앞에 new를 붙이면 생성자 함수처럼 동작한다.

 

※ new.target 프로퍼티

https://ko.javascript.info/constructor-new

new 연산자와 생성자 함수

 

✅ 생성자 안에 return문

- 생성자 함수에는 보통 return문이 없다.

   » this가 자동으로 반환된다.

   » 따라서 명시적으로 써 줄 필요가 없다.

 

- 하지만 return문을 쓸 수도 있다. 이때 적용되는 규칙은 다음과 같다.

   » (this가 아닌) 객체를 return하면 this 대신 객체가 반환된다.

   » 원시형을 return 한다면 return문이 무시된다.

"use strict";

let user = new function() {
	this.name = "soy";
	this.message = prompt("개인 메지를 입력해주세요.", "");
	return (true); // 무시됨
};

console.log(user);

 

✅ 생성자 괄호 생략하기

- 인수가 없을 때 괄호를 생략할 수 있다.

"use strict";

let user = new User; // 괄호 생략

function User() {
	this.name = "soy";
	this.message = prompt("개인 메지를 입력해주세요.", "");
};

- 다만 좋은 스타일의 코드는 아니라고 한다.

 

✅ 생성자 내 메서드

- 생성자 안에서 메서드를 더해줄 수도 있다.

"use strict";

let user = new User;

function User() {
	this.name = "soy";
	this.message = "Hello World!";
	this.showMessage = function() { // 메서드 정의
		console.log(this.message);
	}
};

user.showMessage();


/* 만들어진 객체
user = {
	name: "soy",
	message: "Hello World!",
	showMessage: function() { console.log(this.message); }
 */

 

※ class 문법을 사용하면 생성자 함수를 사용하는 것과 마찬가지로 복잡한 객체를 만들 수 있다고 한다.