Arrow Function & this | IIFE | Default Parameter

모든 포스팅은 인프런 ECMAScript6: 빠르게 배우는 ES6 스킬과 비동기 프로그램 의 내용을 담고 있으며

출처는 아래의 주소로 "김형태"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/es6-ecmascript-6

ECMAScript 6: 빠르게 배우는 ES6 스킬과 비동기 프로그래밍 - 인프런

---

1. Arrow Function

# 화살표 함수

익명 함수를 간략하게 표현할 수 있는 화살표 표현식

 

익명함수란 아래와 같다.

function () { 

}

위와 같이 function키워드가 들어가 있는 함수를

() => {
}

소괄호와 화살표를 사용하면, 이렇게 function키워드를 생략한 채로 선언할 수가 있다.
즉 function이 사라지고 => 화살표가 생겼다고 생각하면 된다.

 

다음과 같이 더 축약되며 표현력이 더 좋아졌다.

<script>
 const MyFunction = () => {
     console.log("ES6 arrow function");
 };
 MyFunction();
</script>

함수에 포함된 실행문이 하나라면 중괄호도 생략이 가능하다.

 

# 함수 실행에서의 this

콜백 함수를 정의할 때 쉽게 컨텍스트 활용

<script> 
     var name ="ES5";
 
     function Lang(){
         this.name = "ES6";
 
         setTimeout(function(){
                 console.log("Global name is " + this.name);
                },100);
        setTimeout(()=>{
                console.log("My name is " + this.name);
                },100);
    }
    var lang = new Lang();
</script>
                         

여기서 function 함수 내에  this는 window.name에 "ES5"에 접근하여 값을 출력한다.

 

ES5에서는 call(), apply()함수를 통해 this를 지정해주는 방법을 사용하곤 했다.

 

하지만 이러한 함수의 컨텍스트를 제대로 모른다면 실수가 발생할 수 있기 때문에 화살표 표현식은 다음과 같이 변경되었다.

 

화살표 표현식 함수안의 this.name은 기존과 다른 값을 가르킨다.

화살표 함수 표현식은 표현 방법만 달라진 것이 아니라 this도 다르므로 기존과 다른 결과가 나오는 것이다.

즉 ES6를 출력한다.

 

2. IIFE

 

# 즉시 실행함수(lmmediately-invoked function expression)

익명 function은 즉시 실행 함수를 사용할 때도 자주 있다.

 

<script> 
(function(lang){
 console.log(lang);
 }("ES5"));
 //----------------구분선
((lang)=>{
 console.log(lang);
  })("ES6"); 
 </script>

위의 예시는 function키워드를 사용해 만든 즉시 실행 함수이다.

 

이것을 화살표 함수로 바꾸면 아래와 같다.

즉시 실행 함수의 앞의 괄호 내부는 함수 객체로 바뀔 표현식이고 뒤의 괄호 내부는 함수에 전달될 인자들이다.

 

즉시 실행 함수는 한번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용된다.

 

아래의 방법에서 function키워드를 사용할 떄와 다른 중요한 점은 화살표 표현식을 사용할 때는 괄호로 먼저 묶고 함수를 호출해야한다는 점이다.

#ES5 vs ES6

 

# 정리하기

- ES6에서는 익명함수에서 function키워드를 생략하고 괄호와 화살표를 사용한다.

- 콜백함수로 실행될 때 기존의 익명 함수는 글로벌 컨텍스트에 접근하였으나, 화살표 함수는 콜백 함수를 할당한 당시의 컨텍스트를 활용한다.

- 즉시 실행함수를 사용할 때는 괄호를 먼저 묶고 함수를 호출해야 한다.

 

 

3. Default Parameter

 

# 기본 매개변수

함수의 매개변수는 기본 값이 undefined이다.

인자가 넘어오지 않을 때의 기본값 설정

 

기존의 방식과 ES6의 방식을 살펴보자.

<script>
function animal(name){
	
    var name = name || "dog";
    console.log(name);
}
animal();
animal(null);
animal(false);
</script>

먼저 위는 기존의 방식이다. ES6에서는 인자가 넘어오지 않을 때의 값을 설정할 수가 있다.

아래 예시는 ES6방식으로 코드를 짠 것이다.

 <script>
 const defaultColor = "red";
 function defaultValue(value, color = defaultColor, myArray =[]){
     myArray.push(value,color);
     return console.log(myArray);
 }
 defaultValue("strawberry");
 defaultValue("apple",undefined);
 defaultValue("banana","yellow");
 </script>

3번째 줄에 function defaultValue 부분을 보면 color 와 myArray에 기본값을 설정해 주었다.

 

호출을 할 때, 첫번째로 호출 하는 부분은 두번째 인자를 지정하지 않아서 자동으로 undefined가 들어갔고,

두번째 호출 부분은 undefined로 적어놓더라도 미리 정의된 색상이 설정 되는 것을 확인할 수 있다.

 

단 주의 해야할 점은, 기존의 방법은 undefined 뿐 아니라 null, false, 0, 공백에 대해서도 적용이 가능한 반면

ES6의 경우 default parameter는 undefined일 때만 적용이 되니 주의해야한다.

 

# 정리하기

함수 선언시 기본 매개변수를 정의하면 함수 호출 시 인자가 undefined일 때 기본 값으로 사용할 수 있다.