No.12 객체를 생성하는 방법(class, function, new, this)

제코베 12번 문제인 class에 관한 내용을 스터디원들이랑 얘기하다가 생각난김에 정리해보려고 글을 쓴다 ! class는 react에서도 쓰면서 개념도 모르고 썼던 내 자신을 반성합니다 😥

📝 Classes

Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가집니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

한마디로 class는 객체를 여러개 생성하기 위한 하나의 템플릿이라고 생각하면 되고, es6 이전에는 function을 이용해 비슷하게 만들었다고한다.

function을 이용한 방법 🗣

function Dog(name){
	this.name = name;
}

let dog = new Dog('제톰');
console.log(dog.name);

class를 이용한 방법 🗣

class Jetom{
  constructor(age, blood){
  	this.age = age;
    this.blood = blood;
  }
}

const dog = new Jetom(5, '비숑');

console.log(dog.age, dog.blood);

쓰다보니 this와 new라는 단어들이 눈에 띄는데 이것들이 어떤 일을 하는지 알아보겠다!

this와 new 👀

여기서의 내용은 생활코딩을 참고했습니다 ✍️

📝 new

new 연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new

//obj
const person = {};

//객체 내의 변수를 프로퍼티(property, 속성)라고 부른다.
person.name = 'jetom';

//property에 담겨 있는 함수를 메서드(method, 방법)라고 부르다.
person.introduce = function(){
	return 'My name is' +this.name;
}

//메서드 안의 this.name은 person의 객체를 가리키며 
//person.name의 값을 'jetom'으로 담아줬으니 결국 'jetom'을 호출한다.
console.log(person.introduce);

위의 예제 코드는 'jetom'이라는 강아지의 정보를 하나만 담을 때 사용했다. 하지만 강아지가 여러 마리라면 어떻게 만들어야할까? 이 때가 생성자와 new를 사용할 순간이다.

생성자(constructor)

생성자(constructor)는 객체를 만드는 역할을 하는 함수다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다.

https://opentutorials.org/module/532/6571

function Dog(){}

//new는 생성자 함수라고 부르며 이 때 생성되는것은 비어있는 객체이다.
//let many = {}랑 같다고 생각하면 된다.
function Dog(name){
  
  	//객체가 생성될 때마다 만들어지는 코드
    this.name = name;
    this.introduce = function(){
        return 'My name is '+' '+this.name; 
    }   
}
let many = new Dog('jetom');
console.log(many.introduce())
 
let many2 = new Dog('rari');
console.log(many2.introduce())

위의 코드를 살펴보면 생성자 내에서 객체의 프로퍼티를 정의하고 있으며 이 작업은 초기화(initialize)라고한다.

📝 this

this는 함수 내에서 함수 호출 맥락(context)를 의미한다. 맥락이라는 것은 상황에 따라서 달라진다는 의미인데 즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

https://opentutorials.org/module/532/6571

• 함수와 this

어떤 객체에 속해 있지 않을 때의 this는 window를 가르키는데 이 window는 웹 브라우저의 전역 객체 이름이다. 따라서 아래의 예제의 경우 func의 this는 window이므로 window를 생략한 채로 func()를 출력 할 수 있다.(함수는 window라는 것이 암시적으로 사용된다.)

function func(){
	if(window === this){
    console.log('window === this');
   }
}

//window.func()를 해도 정상적으로 작동한다.
func()

• 메서드와 this
  (여기서는 모던자바스크립트를 참고했습니다.✍️)

메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있습니다. 모든 메서드가 그런 건 아니지만, 대부분의 메서드가 객체 프로퍼티의 값을 활용합니다.

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있습니다.

이때 '점 앞’의 this는 객체를 나타냅니다. 정확히는 메서드를 호출할 때 사용된 객체를 나타내죠.

https://ko.javascript.info/object-methods#ref-933

let dog = {
  name: "jetom",
  age: 5,
  //객체안의 함수는 function 생략 가능
  sayHi() {
    // 'this'는 '현재 객체'인 dog를 가르킨다.
    console.log((this.name));
  }
  
};

dog.sayHi();

• 생성자와 this

let funcThis = null;

function Func(){
    funcThis = this;
}

//new가 없으므로 일반 함수를 호출함
const o1 = Func();
if(funcThis === window){
    console.log(('window'));
}
 
//func()는 o2에서 new를 통해서 호출 했기 때문에 생성자를 호출함
const o2 = new Func();
if(funcThis === o2){
    console.log(('o2'));
}

o1을 출력했을 때 window가 찍히는 이유?
Func()는 일반 함수인데, 일반 함수는 위에서 언급했듯이 window가 생략되었기 때문에 o1에서의 Func()는 funcThis에서 window를 찍는다.

o2를 출력했을 때 o2가 찍히는 이유?
new를 생성자로 호출하면 자바스크립트 내부에서 빈 객체를 만드는데 비어있는 객체가 생성자 안에서 this가 된다. 따라서 this는 Func에 있는 this값이 funcThis가 되고, 이 funcThis는 조건문에 따라 o2가 출력되는것

따라서 생성자로 사용될 때는 this의 값이 생성될 객체를 가리키고, 일반 함수로 호출 했을 때는 window를 가리킨다.

쓰다보니 class로 쓴 내용보다 function으로 구현한 코드가 많지만.... 원리는 같으니까... 슬쩍 넘어가려한다....ㅎ🙄