자바스크립트 이모저모

 1. Javascript Prototype

자 아래의 코드를 보고 이상한 점을 찾아보자.

function Human( name ) {
  this.name = name

  this.sayHello = function() {
    console.log( `안녕하세요. ${this.name}입니다.` )
  }
}

const sejiwork = new Human( 'sejiwork' )
const sejinjja = new Human( 'sejinjja' )
sejiwork.sayHello() //output: 안녕하세요. sejiwork입니다.
sejinjja.sayHello() //output: 안녕하세요. sejinjja입니다.
console.log( sejiwork.sayHello === sejinjja.sayHello ) // output: false

Human으로 만들어지 sejiwork, sejinjja객체에는 같은 동작을 하는 sayHello 함수가 각각 자신의 객체에서 정의가 되었다. 결과적으로 똑같은 일을 하는 함수임에도 불구하고, 불필요한 일을 하게 된 것이다. 위의 코드를 prototype을 이용하여 수정해보자.

function Human( name ) {
  this.name = name
}

Human.prototype.sayHello = function() {
  console.log( `안녕하세요. ${this.name}입니다.` )
}

const sejiwork = new Human( 'sejiwork' )
const sejinjja = new Human( 'sejinjja' )
sejiwork.sayHello() //output: 안녕하세요. sejiwork입니다.
sejinjja.sayHello() //output: 안녕하세요. sejinjja입니다.
console.log( sejiwork.sayHello === sejinjja.sayHello ) // output: true

위처럼 sejiwork.sayHello, sejinjja.sayHello 둘 다 같은 일을 하고, 완전 같은 함수인 것을 볼 수가 있다.

2. class

아래 코드를 보자.

class Human {
  constructor(name) {
    this.name = name
  }
  sayHello() {
    console.log( `안녕하세요. ${this.name}입니다.` )
  }
}

const sejiwork = new Human( 'sejiwork' )
const sejinjja = new Human( 'sejinjja' )
sejiwork.sayHello() //output: 안녕하세요. sejiwork입니다.
sejinjja.sayHello() //output: 안녕하세요. sejinjja입니다.
console.log( sejiwork.sayHello === sejinjja.sayHello ) // output: true

C++혹은 Java를 해보신 분이라면, class라는 단어를 써본 적이 있을 것이다. 그런분들이라면 1번에 작성된 코드보다 2번에 작성된 코드가 더 나아보이지 않은가? 아니라면 어쩔수 없고...  역할을 똑같지만, class 키워드로 인하여 클래스라는 것이 더 명확해졌고, new 키워드가 없다면, Human을 실행 할 수가 없게된다.

3. IIFE(즉시실행함수)

(function() {
  console.log( 'Hello, world' )
})()

처음에 볼 때에는 조금 혼동이 오는 표현법이다. 함수가 정의 되는 순간 실행이 되게 되며, 일반적으로 외부에서의 접근을 막고자 하는 이유로 많이 사용하거나, 해석할 수 있는 때가 되면 실행하기위해 사용 하게된다.