화살표 함수(arrow function)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN

화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안이다.
하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에서 사용할 수는 없다.

- this나 super에 대한 바인딩이 없고, Methods로 사용될 수 없다.
- new.target 키워드가 없다.
- 일반적인 스코프를 지정할 때 사용하는 call, apply, bind method를 사용할 수 없다.
- 생성자(Constructor)로 사용할 수 없다.
- yieId를 화살표 함수 내부에서 사용할 수 없다.

var elements = [
      '강동원',
      '원빈',
      '김우빈',
      '박보검'
];

//map 사용 전 방법
for(var i = 0; i < elements.length; i++){
    console.log(elements[i]);
}

//map 사용
elements.map(function(el) {
  console.log(el);
});

//화살표 함수로 표현, function을 생략하고 파라미터만 표시
elements.map((el) => {
  console.log(el);
});

//파라미터가 하나만 있을때는 괄호를 생략할 수 있음.
elements.map(el => {
  console.log(el);
});

//return이 있을 시 : 화살표 함수의 유일한 문장이 return일 때 return과 중괄호{}를 생략할 수 있다.
elements.map(el => console.log(el));

//length 조회 시 
//elSize는 원하는 유효한 변수명으로 변경해서 사용하면 됨.
elements.map(({length: elSize}) => elSize);

//아래와 같이 작성해서 length를 조회할 수 있음.
elements.map(({length}) => length);
elements.map(({length}) => length);

 

기존 함수 사용 방법

//사용방법1
function func1(val) {
	return val;
}

console.log(func1("func1")); //결과 : func1

//사용방법2
const func1 = function(val) {
	return val;
}

console.log(func1("func1")); //결과 : func1

 

화살표 함수

const func = (val) => {
	return val;
}

console.log(func("func")); //결과: func

화살표 함수에서는 function을 선언하지 않는다.

화살표 함수 주의점

1. 인수가 1개인 경우 소괄호 생략이 가능하다.

const func = val => {
	return val;
}

console.log(func("func"));//결과 : func

 

2.인수가 2개 이상인 경우 소괄호 생략이 불가능하다.

//인수가 2개 이상인 경우 아래와 같이 괄호를 생략하면 에러
const func = val1, val2 => {
	return val1 + val2;
}

//인수가 2개 이상인 경우 아래와 같이 괄호를 감싼다.
const func = (val1, val2) => {
	return val1 + val2;
}

 

3. 처리를 한 행으로 반환하는 경우 중괄호와 return을 생략할 수 있다.

//{}와 return 생략 가능
const func = (num1, num2) => num1 + num2;

//{}로 감싼 뒤에는 return을 생략하면 안 된다.
const func = (num1, num2) => {
	num1 + num2;
}

console.log(func(10, 20)); //undefined

 

4. 반환값이 여러행일 경우 ()로 감싼 뒤 단일 행과 같이 모아서 반환할 수 있다.

const func = (val1, val2) => (
	{
    name: val1,
    age: val2
    }
)

console.log(func("개발하는고양이", 6)); // {name : "개발하는 고양이", age : 6}