ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • ES6 2부 - Arrow function, 객체 리터럴 , 2진수, 8진수
    Javascript 2016. 8. 18. 00:47



    > Arrow function 


    ES6 부터 Arrow function 이 추가 되었다 . 백문이 불여일견 . 어떤놈인지 바로 코드를 보자.


    //ES5
    var Test1 = function(a,b) {
    	return a+b;
    }
    console.log(Test1(1,2));  //3 
    
    
    //ES6
    let Test2 = (a,b) => {
    	let result = a+b;
        return result;
    }
    console.log(Test2(1,2));  //3 
    
    
    //ES6
    let Test3 = (a,b) => (a+b);
    console.log(Test3(1,2));   //3
    
    
    

     

    코드를 보면 알 수 있듯이 함수를 간결하게 표현할 수 있도록 바뀌었다.

    함수의 return 문이 하나인 경우에 3번째 예제처럼 한줄로 만들 수도 있다. 


    Arrow function 의 가장 중요한 특징은 this 값의 scope 변경이다.  예제를 살펴보자. 


    var a = 1;
    console.log(this == window);  // true
    console.log(this.a);   // 1 
    
    function test1() {
      console.log(this == window);  // true
    }
    
    var object1 = {
      test : function() {
        console.log(this == object1);  // true 
        (function() {
           console.log(this == object1);  // false
           console.log(this.a);  // 1 
        }())    
      } ,
      test2 : function() {
          console.log(this == object1);  // true 
          var that = this;   
          (function() {
             console.log(that == object1);  // true
          })()
      }
    }
    
    
    test1();
    object1.test();
    object1.test2();
    


    위 코드는 es5 에서 this 의 scope 를 나타낸다. es5 에서는 this 의 scope 가 기본적으로 전역객체 (브라우저라면 window)

    를 가르키고 있으며 함수를 만들어도 this 값은 여전히 window 객체를 가리키고 있다. 

    하지만 object 를 만들게 되면 this 는 자신을 호출한 object 를 가리키게 되며 object1 의 test 를 보면 알 수 있다. 

    이런 부분은 callback 함수를 만들 었을 때 문제가 생긴다. 

    test 의 내부 함수를 보면 해당 함수의 this 는 object1 을 가리키지 않고 여전히 window 객체를 가리키고 있다.  

    왜 그런고 하니 내부함수는 객체의 멤버 메서드가 아닌 단지 호출된 함수 일 뿐이다.  

    그럼 function 이라는 놈을 가지고 있는 부모 객체는 누구인가? 바로 전지전능한 window 객체가 된다. 

    그렇기 때문에 내부 함수에서는 this 가 global 객체 를 가리키게 된다. 


    이를 해결하기 위해 object1 의 test2 함수처럼 함수 선언시에 this 를 임의의 변수에 넣어서 쓰는 방법을 사용한다. 

    ( 보통 that 또는 self , _this 등의 이름을 쓴다. ) 그리고 내부 함수에서는 이를 호출하여 사용하게 되는데 , arrow function

    에서는 이런 부분이 해결된다.  

    위 코드의 object1 을 arrow function 을 이용하여 만들어 보자. 


    let a = 1;
    let object1 = {
      test : function() { console.log(this == object1);  // true 
         (() => {
           console.log(this == object1);  // true
           console.log(this.a);  // undefined 
        })()  
      } ,
      test2 : function() {
          console.log(this == object1);  // true  
          (() => {
             console.log(this == object1);  // true
          })()
      }
    }
    
    
    
    object1.test();
    object1.test2();
    


    코드의 결과를 보면 내부 함수의 this 가 가리키는 곳이 window 가 아닌 object1 으로 바뀌었다. 

    이는 이전의 this 범위와 다르게 자신을 둘러싸는 문맥의 this 값을 가진다.  

    참고로 Arrow function 은 new 연산자를 사용할 수 없다.

    > 객체 리터럴


    ES6 에서 객체 리터럴로 프로퍼티를 생성하는 새로운 구문이 있다. 

    예제들을 보자. 


    let first = "one";
    let second = "two";
    
    let object = { first , second };
    console.log(object.first); // one
    console.log(object.second); // two 
    
    let third = "three";
    let object2 = { object , third};
    console.log(object2.object.first); // one
    console.log(object2.object.second); // two
    console.log(object2.third); // three
    


    코드를 보면 단번에 이해가 될 것 이다. (?)



    > 2진수 , 8진수 표현 방식


    ES6 에서의 2진수와 8진수 표현 방식을 보자. 예전에는 자바스크립트 만으로는 2진수를 나타낼 방법은 없었다. 

    하지만 ES6 에서는 숫자앞에 0b 를 붙이면 자바스크립트 엔진이 2진수로 처리하게 된다. 

    더불어 8진수를 표현할 때 숫자 앞에 0을 붙여서 표기를 하였다.  하지만 이는 초심자에게 헷갈릴 수 있다고 판단 , 

    0 이 아닌 0o 를 붙이는 것 으로 변경되었다. 


    //ES6   2진수 표현 
    
    let a = 0b00001111;
    let b = 15;
    
    console.log(a === b);  //true
    console.log(a);  //15
    
    
    //ES5  8진수 표현
    
    var aa = 017;
    var bb = 15;
    
    console.log(aa === bb);  //true
    console.log(aa);  //15
    
    
    
    //ES6 8진수 표현
    
    let aaa = 0o17;
    let bbb = 15;
    
    console.log(aaa === bbb);   //true
    console.log(bbb);   //15
    


    이 역시 예제를 보면 단번에 이해가 될 것이다.(?)


    이번 글에서 중요한 것은 arrow function 의 활용과 this 의 scope 를 제대로 이해 하는 것이 중요하다. 

    javascript 의 this 는 참으로 애매하고 짜증나는 방식이기에 this 에 관해서는 집중공략을 나중에 따로 적을 예정이다. 


    (2부 끝) 


    댓글