arrow function, hoisting

이번주 공부 과제

1. this

2. bind

3. apply

4. call

5. es6 arrow function VS es5 function
6. hoisting(let, var, const)

es6 arrow function VS es5 function

es6 에서 arrow function (화살표 함수) 에는 이름, this, arguments 가 없다 ?

• 화살표 함수에는 없는 것 : 함수이름, this, arguments

1. 이름이 없다 ?

        //기존함수
        function myfunc(){
            console.log('hello')
        }

        //화살표 함수
        ()=>{
            console.log('hello')
        }

이름이 들어가질 않는다. 하지만 해결방법이 있으니, 바로 변수에 담아 넣어놓는 것.
~~사실 이름이 없다고 해서 큰 차이점을 모르겠다.~~

        //기존함수
        const myfunc =function(){
            console.log('hello')
        }

        //화살표 함수
        const myfunc = () => {
            console.log('hello')
        }

이렇게 줄곧 사용해와서 이름이 없는 것조차 몰랐다.

결론 : 다루기 위해선 변수에 담아야 한다.

2. this가 없다?

함수는 실행 될 때, 자기자신의 scope 안에 this 라는게 존재하는데, arrow function 에는 본인만의 this가 존재하지 않는다. 할 수 없는것이 존재한다!!! 바로 call, apply를 사용할 수가 없다

arrow function 에서 this는 그 arrow function이 선언 된 위치 상의 this를 가리키게 된다.

선언된 곳에서의 this를 바로 사용하기 때문에, bind를 쓸 필요가 없다.

그래서 생긴 단점이라면 call, apply를 통해 다른 객체를 가로채기 하는 것이 불가능해 졌다고 생각하면 될까 …

3. arguments가 없다 ?

이 부분역시 중요하지만 아직 다룰 필요성을 못느껴서 와닿지가 않는다 …

다음에 알아보자 …

hoisting

• hoisting 이란 ? 코드에 선언 된 변수 및 함수 를 코드 상단으로 끌어올리는 것을 말한다.

• 변수

  • 함수 내에서 선언된 변수 : 해당 scope의 최상위로 올라간다.
  • 함수 밖(전역)에서 선언된 변수 : 스크립트의 최상위로 끌어올려진다.
• 함수 : 함수 hoisting은 선언 방식이 함수 선언식(function declarations) 인 경우에만 적용된다.

이게 무슨말인가 ??

    //함수 선언식(function declarations)
    function Test(){
        console.log('Hello World')
    }

    //함수 표현식(function expressions)
    let Test2 = function(){
        console.log('Hello World2')
    }

선언식은 함수이름을 사용하는 것이고, 표현식은 변수에 함수를 담는 것이다.

• 그래서 hoisting 을 공부하는가 ?? 바로 오류를 막기 위해서다.

  • ex) 함수 안에서 변수를 사용한 다음에 선언을 하면 오류가 난다.

변수의 호이스팅 오류 예제를 살펴보자.

예제 1
1 name = global;          //전역변수
2 function func(){
3     console.log(name)   //얘는 뭐가 나올까요?
4     let name = 'local';
5     console.log(name)   //얘는 local 이라고 나올것 같은데 ...
6 }
7 func();

예상으로는 3번째 줄에서 global 이라고 나올 것 같네요. 그리고 5번째줄에서는 local 이라고 나올 것같구요,

하지만 3번째줄은 undefined 가 나옵니다.

그 이유는 , name이 func함수 내에서 지역 변수로 선언되었다고 간주하기 때문입니다. 선언문 자체(let name = 'local')가 그 다음에 있더라도 말입니다.

예제1을 JS가 읽을 때는 이렇게 보인다.

1 name = global;
2 function func(){
3     let name;             //이렇게 선언하면 let name=undefined; 와 동일
4     console.log(name)     //'undefined'
5     let name = 'local';
6     console.log(name)     //'local'
7 }
8 func();

실제 구현단계에서는 좀 더 복잡하다.

let, const, var 차이

• var vs let, const : var은 변수 재선언 가능이지만 let 과 const는 변수 재선언 불가능하다. let, const는 hoisting이 안된다고 생각하는게 좋다. 위 예제와 같이 선언만 위로 올라가서 결국 undefined를 유발하니깐 !!

• let vs const : let은 변수에 재할당이 가능하지만, const는 변주 재선언, 재할당 모두 불가능하다.

  //let
  let a = 'test'
  let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
  a = 'test3'     // 가능
  
  
  // const
  const b = 'test'
  const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
  b = 'test3'    // Uncaught TypeError:Assignment to constant variable.

이것으로 포스팅 마무리.