화살표 함수 (#5)

화살표 함수(arrow function)는 ES6 문법에서 함수를 표한하는 새로운 방식이다. ( 모던 자바스크립트 프로그래밍에서 많이 사용하는 방식)

function, return 등의 키워드는 생략하고 화살표(=>)를 사용해 매우 직관적이고 간결하게 표기 가능.

-전통적인 함수 선언 방식-

const fnPlusNumbers = function (pNum1, pNum2) {
return pNum1 + pNum2 ;
}

- 화살표 함수로 구현-

const fnPlusNumbers = (pNum1, pNum2) => {
return pNum1 + pNum2;
}

- 화살표 함수로 return 키워드 생략 가능-

const fnPlusNumbers = (num1, num2) => num1 + num2;

화살표 함수는 return 키워드를 생략해도 자동으로 값을 반환 가능.(암묵적 반환 이라고 함.)

화살표 함수의 특징은 매개변수가 1개일 때 소괄호()를 생략할 수 있다는 점이 있음.

-매개변수가 1개일때 소괄호 생략 가능-

const fnPlusNumbers4 = pNum => pNum + 1;

-매개변수가 없을때는 반듯이 소괄호 사용-

const fnSayHello = () => '안녕하세요';

-배웠던 화살표 함수 실습하기-

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<button onclick="console.log(fnSayHello());

console.log('1+2 =',fnPlusNumbers1(1,2));

console.log('2+3 =',fnPlusNumbers2(2,3));

console.log('3+4 =',fnPlusNumbers3(3,4));

console.log('4+1 =',fnPlusNumbers4(4));"

id="clickme">화살표 함수 실행!</button> //onclick 화살표 함수 실행! 버튼을 만들고 이번트 핸들러에 각 함수 호출문을 넣음.

const fnPlusNumbers1 = function(pNum1, pNum2){

return pNum1 + pNum2;

}

const fnPlusNumbers2 = (pNum1, pNum2)=>{

return pNum1 + pNum2; //function 키워드를 생략한 화살표 함수 선언.

} //일반적인 매개변수를 입력받아 덧셈 수 반환

const fnPlusNumbers3 = (pNum1, pNum2)=> pNum1+pNum2; //화살표 함수에서 return 키워드 생략

const fnPlusNumbers4 = pNum => pNum+1;

const fnSayHello = () => '안녕하세요!';

</script>

</body>

</html>

초보 신입 개발자와 함께하는 정숙블로그