[JavaScript] 화살표 함수

codeing999·2022년 7월 18일
0

JavaScript

목록 보기
4/24

mdn에 있는 예제

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// 이 문장은 배열을 반환함: [8, 6, 7, 9]
elements.map(function(element) {
  return element.length;
});

// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
// 중괄호({})를 생략할 수 있다.
elements.map(element => element.length); // [8, 6, 7, 9]

// 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다.
// 'length'는 우리가 얻고자 하는 속성에 해당하는 반면,
// lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로
// 원하는 유효한 변수명으로 변경할 수 있다.
elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

// destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다.
// 이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 대신, "length" 변수의
// 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다.
elements.map(({ length }) => length); // [8, 6, 7, 9] 
 return answer.reduce((ac, v) => {return ac.includes(v)? ac : [...ac, v]}, []).sort

이게 내가 실제로 써본 건데 실제 쓸 때 조심해야될 부분.
@ 화살표 왼쪽은 ()을 써야되지만 매개변수가 1개면 안써도 된다.
@ 오른쪽은 {return ~~}가 전부일 때는 {}와 return을 전부 생략하고 ~~만 써도 된다. 이 때 생략할 거면 둘다 생략하고, 둘 중 하나만 생략하면 안된다.
@ 즉, 다른 코드를 볼 때도 화살표 오른쪽에 {}가 없다면 그게 리턴값이라는 것이다.

화살표 함수가 this라는 부분에 대해서 취약?하다던데
이 부분은 다음에 찾아보고 업데이트해야겠다.

그냥 함수랑 비교

elements.map(function(element) {
  return element.length;
});

@ 화살표함수가 항상 써지는 건 아니므로 그냥 함수 작성법도 익혀둬야 한다. 이름을 안쓰고 function에 바로 괄호가 붙는구나.

profile
코딩 공부 ing..

0개의 댓글