[공부 필기] JavaScript 문법 공부 16일차 (2)

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/arrow-functions-basics

화살표 함수 기본

 

✅ 화살표 함수 기본

- 함수 표현식보다 간결한 문법으로 함수를 만들 수 있다.

- 예시

/*let add = function(n1, n2) {
	return (n1 + n2);
}; */

// 화살표 함수로 표현할 땐
let add = (n1, n2) => (n1 + n2);

- 매개변수가 없을 때는 괄호를 비워놓으면 된다. (괄호 생략 X)

/* function getTrue() {
 	return (true);
 } */

// 화살표 함수로 변환
let getTrue = () => true;


console.log(getTrue());

 

- 주의해야할 점은 마지막의 세미 콜론(;)이 함수 표현식으로 인해서 붙었다는 것이다.

  (세미콜론은 여러 구문을 사용할 때 각 구문을 구분하기 위해 사용한다)

   » 화살표 함수 때문에 붙은게 아니다.

   » 사실 함수 선언문 뒤에도 세미콜론이 붙지 않는다.

   » 어쨌든 결론은 아래와 같은 코드를 주의해야한다.

let ask = (question, yes, no) => (confirm(question) ? yes() : no());

ask("동의하십니까?", () =>  alert("동의하셨습니다."), () => alert("취소 버튼을 누르셨습니다."));
// 두번째, 세번째 인자이자 익명함수는 화살표 함수로 표현되었다.
// 이때, alert 뒤에 세미콜론이 붙지 않았다.

 

✅ 본문이 여러 줄일 때, 화살표 함수

- 본문이 여러줄이면 다음과 같이 중괄호 안에 평가해야할 코드를 넣어준다.

"use strict";

/* function divide(n1, n2) {
	while (n2 === 0)
		n2 = +prompt("다시 입력해주세요", "");
	return n1 / n2;
}*/

let divide = (n1, n2) => {
	while (n2 === 0)
		n2 = +prompt("다시 입력해주세요", "");
	return n1 / n2;
};

console.log(divide(3, 0));

- 다만 중괄호를 사용했다면, return 지시자로 결과를 리턴해주어야 한다.

 

- 화살표 함수는 더 재미있는 특징이 있는데,

   그걸 이해하려면 자바스크립트의 다른 내용을 이해해야 한다고 한다.

   자바스크립트에 대해서 잘 이해한 후, 아래의 내용을 배우는 것도 좋다고 한다.

https://ko.javascript.info/arrow-functions

화살표 함수 다시 살펴보기

 

 

---