자바스크립트 - Function etc

참고자료: 인프런- 자바스크립트초급(es6)

Javascript ES6+ 제대로 알아보기 - 초급 - 인프런 | 강의

 

 

 

 

참고사항 

const e = {
  om1: function () {},
  om2 () {},
  om3: () => {}
}

이거 다 같은 것 

참고하고, 

 

name property

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

  function G(){};
  G.method1=function(){};
  G.prototype.method2=function(){};

  const g= new G();
  console.log(G.method1.name, g.method2.name);

이 두가지 방식에서 첫번째는 method들의 이름이 지정되어 있다.

 

F function은 아직 배우진 않았지만  class와 static이라는 함수를 사용해 메소드 이름 지정 가능. (상위 메소드 이름, 하위메소드 이름 같은거)

하지만, G function에서는 정확한 이름이 지정되어 있지 않음.

왜냐면, 이름을 지정하는 구간이 애매. 

G.method1까지 이름을 지정할거냐 G의 method1로 이름 지정할것이냐

G.property.method2까지 이름으로 지정할거냐 G의 프로퍼티를 method2로 지정할 것이냐 이름 짓는 구간이 너무 애매

 

 

 

2) bind

2-1. apply, call 사용 방법

 a.call({}, 1,2,3)
  a.apply({}, [1,2,3]);

참고로 argument를 적용시킬 때, call, apply, bind를 사용하는 식을 알아놓고 가자. 

 

 

2-2.bind

  function a(x,y,z){console.log(this, x,y,z);}
  const b = a.bind({}, 1,2);
  b(3);
  
  //result
  {} 1 2 3

참고로 bind는 새로운 변수를 만들 때 주로 사용

{}라는 빈객체에 argument들 넣어주고 b 괄호 안에 넣어줄 객체를 적어주면 결과에 넣은 객체까지 같이 결과로 출력

 

 

2.  new.target

function Person (name) {
  if (this instanceof Person) {
    this.name = name
  } else {
    throw new Error('new 연산자를 사용하세요.')
  }
}

//console.log
var p1 = new Person('재남')
console.log(p1)

var p2 = Person('성훈')
console.log(p2)

var p3 = Person.call({}, '곰')
console.log(p3)

이 person이라는 함수는 ,

instanceOf 연산자는 자식객체가 부모객체를 상속해서 만들어진 것이 맞는지 확인하는 연산자다. 

즉, Person 함수는 new 연산자를 통해 객체를 만들라는 뜻

 

그렇다면 

p1은 new 연산자 사용했기 때문에 error 발생 X,

p2, p3 error 발생

참고로 p3는 빈객체({}) 안에 인자를 넣으라는 말이니까 결국은 new가 아니지? 그니까 error

 

다른 예시

function Person (name) {
  console.dir(new.target)
  if (new.target !== undefined) {
    this.name = name
  } else {
    throw new Error('new 연산자를 사용하세요.')
  }
}

const p1 = new Person('재남')
console.log(p1)

const p2 = Person('성훈')
console.log(p2)

const p3 = Person.call({}, '곰')
console.log(p3)

const p4 = Person.call(p1, '곰')
console.log(p4)

이 Person 함수도 똑같은 말이다. 

new.target이 하나의 값이다. new연산자의taget이라는 하나의 값이 연결되어있는 것이 아니라 그냥 하나의 객체다

신기하지?

그래서, new.target이 undefined가 아니면 즉, new.target이 정의되면 this에 name을 넣어라이다.

다시 말해, new 연산자로 함수를 새로 정의 될 수 있으면 넣어도 된다라는 뜻.

 

그래서 p1은 new 연산자를 사용해 출력 가능

p2 안돼

p3안돼

p4 안돼. new.target이라는 값이 없으니까

 

코드를 더 나아가,

function Person (name) {
  console.log(new.target)
  if (new.target === Person) {
    this.name = name
  } else {
    throw new Error('Person 생성자함수를 new로 호출해야 해요!')
  }
}
function Android (name) {
  Person.call(this, name)
}
const p2 = new Android('재남봇')
```

코드전체 이해)

Person이라는 함수가 new.target이 Person이라면 name으로 생성가능하다라는 의미고,

Android  생성자 함수는 Person의 call을 받아 name을 출력할 것이고 

p2라는 객체를 선언하는 new Android로 인해 재남봇이라는 네임이 들어가진다.

 

p2 인자 넣었을 때)

Android라는 함수에 재남봇이라는 Android 함수의 name으로 올라가서 this가 Person이 되어 

Person에 name이 호출될 것이고 재남봇이라는 name이 new.target으로 가능해 Person함수 name이 들어가진다.

 

 

3. 함수선언문과 스코프

//1
if (true) {
  a()
  function a () { console.log(true) }
}
a()

//2
a()
if (true) {
  a()
  function a () { console.log(true) }
}

 

1번 코드는 결과가 true, true가 나온다.

2번은 false -> error

근데 사실 2번 코드는 브라우저마다 결과값이 다르게 나온다. 

왜 error가 나오냐면 저 if안에 있는 function이 함수스코프에 의해 a의 값이 제한이 되는지, 아님 블록스코프 때문에 제한이 되는지 그 경계가 모호하기 때문에.

 

그래서

'use strict'를 사용한다.

 

'use strict'
if (true) {
  a() //1
  function a () { console.log(true) }
}
a() //2

이렇게 사용하면 브라우저마다 다른 결과값이 통합될 수 있다. (es6 이후)

이러면 차례로 a()의 값이 true, error가 나옴 

a의 값은 나올 수 있지만 이후 a 함수는 함수 스코프가 블록스코프에 갇혀 ((블록스코프 >> 함수스코프))

a의 값이 정상적으로 나올 수 없어 error가 발생한다.

 

결론, ES6에서는 함수선언문 쓰지 말자.. ㅎㅎ 더 헷갈림 

그냥 이런게 있었다 정도로 알아놓자