[TIL] Arrow function

알고리즘 문제를 풀다 화살표 함수를 사용하게 되어 화살표 함수에대해 궁금해져서 글을 작성하게 되었다. 글을 찾아 보니 ES6문법 이후부터 자바스크립트에서는 함수를 만들 수 있는 문법이 새롭게 등장했고, arrow function 이라는 문법으로 간결하게 표현 할 수 있다

function를 항상 대체할 수 있는 문법인지 => 를 사용했을때와 어떤 차이점이 있는지 알아보자

기존 함수 정의

	const arrow = function() {
      				...
    };

화살표 함수 정의

	const arrow = () =>{
       ... 
    };

기존 함수 표현식과 비교하면 간결한 표현으로 간단하게 사용가능하다.

혹시 프로그래밍 할떄 function 문법을 왜 사용하는지?
1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을때 (그리고 재사용 하기 위해서)
2. 입출력 기능을 만들때

이럴 때 함수를 사용하고 arrow fuction을 사용하면 함수 본연의 입출력기능을 직관적으로 표현이 가능하다!!

arrow function 장점

const product = (x) => {return x *2}
console.log(product(4) );
console.log(product(8) ):

숫자를 넣으면 2배를 해주는 함수를 만들었다, 이런식으로 하눈에 x가 x *2가 된다는걸 바로 파악 이 가능하다

const product = x =>  return x *2 
console.log(product(4) );
console.log(product(8) );

이렇게 소괄호도 생략이 가능하

내부에서 this 값을 쓸때 밖에 있던 this값을 그대로 사용 가능하다
함수가 쓰인 위치에 따라서 내부의 this 값이 변한지만 arrow function은 어디서 쓰든간에 this 값을 변견 시키지 않는다고 한다
바깥에 있던 this의 의미를 그대로 내부에서 사용하는 함수 라고하는데.. 이부분은 더 공부해보고 실습에서 적용시킬려면 직접 코드를 작성해봐야 겠다.

참고자료
https://codingapple.com/unit/es6-3-arrow-function-why