JavaScript (화살표 함수)

1.📌 화살표 함수

화살표 함수(arrow function)는 ES6에서 도입된 자바스크립트의 새로운 함수 선언 방식이다.

기존의 함수 선언 방식과 비교하여 간결하고 편리한 문법을 제공한다.

<script>
	let sum1 = function(a, b){
		return a + b;
	};
	document.write("<br>", sum1(1,2));
</script>

'sum1'이라는 변수에 익명 함수를 할당하는 함수 표현식이다.

흔히 JavaScript에서 많이 사용되는 함수 표현식이지만 더 편리한

화살표 함수 표현식을 사용해보자.

<script>
    // 화살표 함수를 사용하여 'sum2'라는 변수에 함수를 할당하는 부분
	let sum2 = (a, b) => a + b;
	document.write("<br>", sum2(1,2));
</script>

(a, b) => a + b 는 두 개의 매개변수 'a'와 'b'를 받아들이고, 덧셈 연산을 수행한 결과를 반환한다.

이번엔 화살표 함수에 백틱을 이용해서 출력해보자

화살표 함수 적용 전

<script>
  	let double1 = function(n){
		return n * 2;
	};
	document.write("<br>", `double1 : ${double1(3)}`);
</script>

화살표 함수 적용 후

<script>
    //  화살표 함수를 사용하여 'double2'라는 변수에 함수를 할당
	let double2 = (n) => n * 2;
    // 'double2' 함수를 호출하면서 매개변수로 숫자 3을 전달
	document.write("<br>", `double2 : ${double1(3)}`);
</script>

2.📌 매개변수가 없는 함수

매개변수가 없는 함수 표현식에도 화살표 함수로 변환이 가능하다.

<script>
    // 화살표 함수 sayHi2를 정의한다. 또한, 이 함수는 매개변수가 없다.
  	let sayHi2 = () => {
		document.write("<br> 안녕하세요1");
		document.write("<br> 안녕하세요2");
		return "잘가";
	}
	let result = sayHi2();
	document.write("<br>", result);
</script>

let result = sayHi2(); 에서는 sayHi2 함수를 호출하고 그 결과를 result 변수에 할당.

sayHi2 함수 내부에서 "잘가"가 반환되므로, result 변수에는 "잘가"가 저장된다.