[ECMA Script] ES6 의 Arrow Functions 에 대해서

필자는 ES5 와 ES6 을 잘 모른다. 오늘 처음 보고 있다. (새벽 5시에 보고 있는 중...)

잘 모르는데, 대부분을 이미 쓰고 있었다. (...)

stackoverflow 사이트를 자주 이용하는데, 해결책으로 알려줬던 것들이 ES5, ES6 등 이었나보다... 

오늘은 이것저것 보는 와중에 Arrow Functions 에 대한 설명을 보고 있었다. 

얼핏보면 오해할 수도 있는 내용인 것 같은데, 자세한 설명이 부족해서 이에 관해서 적어보려고 한다.

참고할 주소는 https://www.w3schools.com/js/js_es6.asp 이다.

// ES5
var x = function(x, y) {
   return x * y;
}
// ES6
const x = (x, y) => x * y;

이렇게 설명이 들어있는데, 쉽게 지나치면 이해하기 어려운 부분일 수 있다.

먼저, C 언어 수업 등에서 배웠던 '레퍼런스' 개념을 대충 알아두어야 하는데, 간단히 말해서, '위치값' 을 메모리 등에 저장하는 개념이다. 

c 언어 를 기반으로 파생하는 언어들은 기본적으로 method 나 function 같은 것들의 이름 앞에 '주소값' 을 가지게 된다. (아마도, 정적인 영역이 될 수 밖에 없는 그런 값들)

여기서 아이디어를 얻어서 생각해보자면,

var x = function ~~~ 라는 구문은 function 의 내용을 x 라는 곳에 위치만 담아둔다. 라는 개념으로 생각해볼 수 있다. 조금 더 들어가면 function 의 이름이 x 가 되는 것과 같은 의미가 된다. 

위의 저 구문은 옛날식으로 말하면, function x(a,b) { return a*b } 와 같은 의미이다. 

(정말로 같은 말이다. 레퍼런스를 이해하면, 그냥 같은 말이다)

여기서, ES6 에서는 var 로 하던 것을 const 로 변경했다. 

이것도 옳은 말이다. var 는 변수를 지칭하는 말이고, const 는 상수를 지칭하는 약어인데, 

function 의 기능이 담기는 명칭은, 향후에 다른 것으로 요리조리 바뀌는 것보다 명확하게 상수로 고정되는 것이 낫기 때문이다. 

안 좋은 예시를 들자면, 

var x = function (x,y) { return x + y; } // x(2,5) 를 하면 7 이 나와야 하는데...
x = function (z,y) { return z * y; } // x(2,5) 를 하면 10 이 나오게...
console.log(x(2,5)); // 정말로 10이 나온다...

와 같이, 이렇게 바꾸고 저렇게 바꾸다 보면... 나중에 생각하기 힘든 일이 발생할 수도 있기 때문이다. (var 라는 지시어는 '앞으로도 가능할 수도 있는' 의미를 담고 있기 때문에, const 로 변경하려고 하는 것으로 보여진다)