ES6 2부 - Arrow function, 객체 리터럴 , 2진수, 8진수

> 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부 끝)