fucntion sum(num1, num2) {
return num1 + num2;
}
기존의 함수 선언을 할 때
const sum = fucntion sum(num1, num2) {
return num1 + num2;
}
함수를 변수에 할당할 때
보통은 이렇게 작성하는데, ES6부터 화살표 선언를 이용하여 좀 더 간결하게 쓸 수 있는 방법이 나왔다고 하여 정리해보았다
처음에는 조금 헷갈리지만 쓰다보면 적응이 될 거 같다
많은 개발자들은 이미 쓰고 있다고 하니 사용을 원하는 사람은 여러 번 따라해보면서 익히면 좋을 듯 하다
화살표 선언 쓰는 방법
기존의 함수 키워드와 함수명을 빼고 소괄호와 중괄호 사이에 '=>' 를 넣어주면 된다
function sum(num1, num2){
return num1 + num2;
}
일반적으로 쓰는 함수 선언 방법이다
이를 화살표 선언으로 바꾸어 보겠다
(num1, num2) => {
return num1 + num2;
}
단, 화살표 선언을 할 때는 함수명이 없으므로 호출하려면 아래와 같이 변수에 할당하면 된다
const sum = (num1, num2) => {
return num1 + num2;
}
화살표 뒤에 바로 return이 어떤 값을 반환하고 있으면 또 생략이 가능하다
바깥 중괄호를 삭제하고 return도 삭제한다
const sum = (num1, num2) => num1 + num2;
위와 같이 깔끔하게 바뀐 걸 볼 수 있다
const pie = () => 3.14;
const result = pie();
console.log(result);
전달하고자 하는 매개변수가 없다면 ()만 하면 됨
함수가 객체를 반환하는 경우에는 어떻게 사용할 수 있을까?
const getObject = () => {
return {
name:'레이',
age:4
}
}
const obj = getObject();
console.log(obj.name);
이걸 아래와 같이 바꾸어 보았다
const getObject = () =>({
name:'레이',
age:4
});
const obj = getObject();
console.log(obj.name);
return을 지우고 가장 바깥 중괄호를 지운 후, 안에 있는 중괄호에 소괄호를 씌워준다(안쪽 중괄호가 제일 바깥쪽 중괄호로 인식될 수 있기에 이런 작업을 함)
타자를 덜 치고 간단하게 사용할 수 있는 게 장점이나, 화살표 선언 방식은 this, prototype, arguments 정보를 생성하지 않는다. 따라서 사용에 주의가 필요하다
이에 따른 문제점은 차후 업데이트 하겠다
(아직 자바스크립트에 대한 이해가 얕기 때문이다.. 레벨업해서 다시 추가하러 오겠다)