항해중인 개발자

자바스크립트 필수문법 본문

React

자바스크립트 필수문법

바다를바라보다 2021. 3. 28. 22:13

sum이라는 함수는 a와 b를 인자로 받으며 a + b를 리턴해준다

let sum = (a, b) => a + b;

/* 위 화살표 함수는 아래 함수의 축약 버전입니다.

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

 

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있습니다. 괄호를 생략하면 코드 길이를 더 줄일 수 있습니다.

예시:

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

 

화살표 함수는 함수 표현식과 같은 방법으로 사용할 수 있습니다.

아래 예시와 같이 함수를 동적으로 만들 수 있습니다.

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

 

함수 표현식을 사용해 만든 아래 함수를 화살표 함수로 바꿔보세요.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);


/////////////////////////

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  () => alert("동의하셨습니다."),
  () => alert("취소 버튼을 누르셨습니다.")
);

 

짧아진 코드

 

var materials = [
    "Hydrogen",
    "Helium",
    "Lithium",
    "Beryllium"
];

var materialsLength1 = materials.map(function(material){ 
   return material.length 
});

var materialsLength2 = materials.map((material)=>{
   return material.length
});

var materialsLength3 = materials.map(material=> material.length);
화살표 함수를 사용하면 함수를 정의 할 때, 코드랑을 줄일 수 있습니다.


'React' 카테고리의 다른 글

컴포넌트 쪼개기 + defaultProps  (0) 2021.03.29
무한스크롤  (0) 2021.03.29
자바스크립트 필수문법  (0) 2021.03.28
리덕스 0327  (0) 2021.03.28
라우트 0327  (0) 2021.03.27
액션과 리듀서를 편하게 만들어주는 모듈  (0) 2021.03.26
0 Comments
댓글쓰기 폼