자바스크립트 생성자함수, 인스턴스, 함수와 일급객체, 프로퍼티

p.234

생성자 함수에 의한 객체 생성  : new 연산자로 생성된 객체를 인스턴스 라고 한다.

Object 생성자 함수

// 객체리터럴 방식
var obj = {};

// Object 객체 생성자 함수 방식
const newPerson = new Object();
newPerson.name = "woony"
newPerson.age = 26
newPerson.sayHello = function () {
    console.log(`Hi, I'm ${this.name} ${this.age}.`)
}

newPerson.sayHello() // Hi, I'm woony 26.

📌 new String 과 문자 리터럴(일반선언)은 뭐가 다를까?

//이외에도 String Number Boolean Function Array Date RegExp Promise 제공

// 궁금증 아래 두개는 뭐가 다를까?
const str = new String('lee') // Object
const str2 = 'lee' // String

//1.str은 객체 str2는 문자열이다.
//따라서 str == str2 는 허용되지만 str === str2 는 혀용되지 않는다.

str2.length // 3
//2.문자열임에도 불구하고 length메서드를 사용할 수 있는 이유는...
//메소드를 사용할 때 String 레퍼객체로 임시적으로 감싼 후 실행했기 때문이다.

🔥생성자함수를 쓰는이유

//이렇게 되면 거의 비슷한 프로퍼티를 가진 객체를 두번 생성해야하기 때문에 비효율적이다.

const circle1 = {
  radius: 5,
  getDiameter: function () {
    return 2 * this.radius;
  }
};

console.log(circle1.getDiameter()); // 10

const circle2 = {
  radius: 10,
  getDiameter: function () {
    return 2 * this.radius;
  }
};

console.log(circle1.getDiameter()); // 20

아래와 같이 객체 생성자 함수를 통해서 리팩토링 할 수 있다!

//생성자 함수
function Circle (radius) {
// 1. 암묵적으로 빈 객체가 생성되고 this에 바인딩된다.

// 2. this에 바인딩되어 있는 인스턴스를 초기화한다.
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius
  }
  
// 3. 완성된 인스턴스가 바인딩된 this를 암묵적으로 반환된다.
// return 값을 주게 되면 생성자 함수의 기본 동작을 회손하기 때문에
// return 문을 반드시 생략한다.
}

const circle1 = new Circle(5)
const circle2 = new Circle(10)

console.log(circle1.getDiameter()); //10
console.log(circle2.getDiameter()); //20

 

내부 메서드 [[call]] [[Construct]]

 

모든 함수 객체는 내부 메서드 [[Call]] (일반함수로서 호출가능하다는 의미) 을 갖고 있으므로 호출 할 수 있다.

그러나 [[Construct]] (일반함수 또는 생성자 함수로서 호출 가능) 는 가질 수도 있고 아닐 수 도 있다.

 

constructor : 함수선언문, 함수표현식, 클래스

non-constructor : 메서드(ES6 메서드 축약 표현), 화살표함수

 

🐣 참고자료

https://velog.io/@dev-redo/Javascript-ES6-%EB%A9%94%EC%84%9C%EB%93%9C-%EC%B6%95%EC%95%BD-%ED%91%9C%ED%98%84

Javascript ES6 메서드 축약 표현

p.249

함수와 일급객체

다음과 같은 조건을 만족하는 객체를 일급 객체 라 한다.

1. 무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다.

2. 변수나 자료구조(객체,배열) 등 에 저장할 수 있다.

3. 함수의 매개변수에 전달할 수 있다.

4. 함수의 반환값으로 사용할 수 있다.

 

함수는 객체다. 따라서 함수도 프로퍼티를 가질 수 있다.

function square(num){
  return num*num
}

console.dir(square) //ƒ square(num)
console.log(Object.getOwnPropertyDescriptors(square))
//{length: {…}, name: {…}, arguments: {…}, caller: {…}, prototype: {…}}

arguments 프로퍼티 : 유사배열객체(length 프로퍼티를 가진 객체)이며 이터러블이다.

🐣 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.

- 따라서 함수 호출 시 매개변수 개수만큼 인수를 전달하지 않아도 에러가 발생하지 않는다.

- 초과된 변수를 모두 버리는 것은 아니며 arguments 객체의 프로퍼티로 보관된다.

이러한 특성으로 인해 "가변인자함수" 를 구현할 때 유용하다.

function sum () {
  let res = 0;
  
  for(let i = 0; i <arguments.length; i++) {
      res += arguments[i]
  }
  
  return res;
}

console.log(sum())      // 0
console.log(sum(1,2))   // 3
console.log(sum(1,2,3)) // 6

length 프로퍼티 : 함수를 정의할 때 선언한 매개변수의 개수를 가리킨다.

name 프로퍼티 : 함수이름을 나타낸다. ( 함수의 이름과 식별자는 다르다는 것을 주의하자! )