[자바스크립트] function name property

함수를 생성했을 때 name이 자동적으로 생성된다. 그렇다면? 다양한 함수 선언식, 표현식에서는 어떻게 나타날까?'

function a () { }
console.log(a.name)			// 결과 a

const b = function () { }
console.log(b.name)			// 결과 b

const c = function cc () { }
console.log(c.name)			// 결과 cc

const d = () => {}
console.log(d.name)			// 결과 d

const e = {		
  om1: function () {},
  om2 () {},
  om3: () => {}
}
console.log(e.om1.name, e.om2.name, e.om3.name)			// 결과 om1, om2, om3 

class F {
  static method1 () {}
  method2 () {}
}
const f = new F()
console.log(F.method1.name, f.method2.name)	// 결과 method1, method2

ES6에 넘어와서 class가 생겼다. 그래서 위와 같이 class를 생성했을 때 자동으로 name이 할당된다. 이전에 있던 방식을 해서 한 번 해보겠다.

fucntion G () {}
G.method1 = function() {}
G.prototype.method = function () {}

const g = new G()
console.log(G.method1.name, g.method2.name)
// Cannot read property 'name' of undefined

다음과 같이 직접적으로 넣어봤다 결괏값이 어떻게 나올까? name이 없다고 나온다. 정확히 정의를 할 수 없어서 그렇다.

또 다른 방법

function a () { }
const b = function () { }
const h = a.bind(b)
console.log(a.name)
console.log(b.name)
console.log(h.name)

위에서 봤듯이 function에 이름이 있어서 a가 나오고, 익명 함수일 경우 변수명으로 간다. 그렇다면 bind는? bound a로 나온다. 

getter와 setter로 제대로 나오는걸 확인이 가능하다.

const person = {
  _name: '재남',
  get name () {
    return this._name
  },
  set name (v) {
    this._name = v
  }
}
const descriptor = Object.getOwnPropertyDescriptor(person, 'name')
console.log(descriptor.get.name)	// "get name"
console.log(descriptor.set.name)	// "set name"

 

그럼 왜 name을 알아야 할까? 디버깅할 때 사용한다.