화살표 함수 arrow function 1

ES6에서 가장크게 활용되는 JS문법은 화살표 함수일것이다. 화살표함수의 경우 잘 활용만하면

코드가 훨씬 깔끔하고 보기 좋다.

 

떄문에 앞으로 javascript를 사용할때는 될수있으면 let이나 화살표함수를 사용하면서 개발해야겠다.

 

일단 기존문법과 화살표문법의 차이이다.

 

// 기존
function sum(a, b) {
  return a + b;
}

// 화살표 함수 1
let sum2 = (a, b) => {
  return a + b;
};

// 화살표 함수 2
let sum3 = (a, b) => a + b;

 

위의 보이는게 가장 기본적인 화살표 함수이다. 

 

function으로 시작하는것이 let을 통해 변수를 선언하는것처럼 사용된다. 추가적으로 return값을 삭제하므로

코드를 한줄로도 작성이 가능하다.

 

두번째도 비슷한 느낌

// 기존
function isPositive(number) {
  return number >= 0;
}

// 화살표 함수 1
let isPositive2 = (number) => {
  number >= 0;
};

// 화살표 함수 2
let isPositive3 = (number) => number >= 0;

마찬가지로 가독성이 높아지는 효과가 있다.

 

세번째는 랜덤값을 받아오는 내용이다.

// 기존
function randomNumber() {
  return Math.random;
}

// 화살표 함수 1
let randomNumber2 = () => {
  return Math.random;
}

// 화살표 함수 2
let randomNumber3 = () => Math.random;

 

마지막으로 click 이벤트시에 변경점이다.

 

// 기존
document.addEventListener("click", function () {
  console.log("Click");
});

// 화살표 함수
document.addEventListener("click", () => console.log("Click"));

 

확실히 코드가 깔끔해진다 ... 하지만 화살표함수의 경우 주의해야할 사항들이 있는데 그 부분은 따로 정리해야겠다.

 

아무튼 최신문법에 따라서 개발하는것이 나에게도 좋을거같으니 .. 활용해야겠다.

 

근데 ie에서는 지원을 안한다고 한다..