[모던 자바스크립트] 04-3 함수 표현식

• 함수 이름을 지정하지 않고 함수를 실행할 수도 있고, 프로그램에서 한 번만 사용할 함수라면 함수 선언과 동시에 실행하는 방법이 있음. 이런 함수는 식처럼 동작하므로 '함수 표현식'이라고 함.

 

• 익명 함수
  • 말 그대로 이름이 없는 함수
  • 익명 함수는 변수에 할당해서 사용할 수 있음.

let sum = function(a, b) {
	return a + b;
}
console.log(`함수 실행 결과: ${sum(10, 20)}`)

• 두 수를 더하는 함수를 sum이라는 변수에 할당한 예제
• 변수에 저장된 함수는 함수 이름 대신 변수를 이용해서 함수를 실행할 수 있음

 

• 자바스크립트에서는 함수를 하나의 값처럼 사용할 수 있기 때문에 함수를 변수에 할당할 수도 있고, 함수를 다른 함수의 매개 변수로 넘길 수도 있음

 

 

 

---

• 즉시 실행 함수
  • 한 번만 실행하는 함수일 경우 함수를 정의하면서 동시에 실행할 수 있음

// 즉시 실행 함수
// 기본형1
(function() {
	...
} ());


// 기본형2
(function(매개변수) {
	...
} (인수));

• 함수를 식 형태로 선언하기 때문에 마지막에 세미콜론(;)을 붙임

(function(a,b) {
	let sum = a + b;
   	console.log(`함수 실행 결과: ${sum}`)
} (100, 200));

 

 

---

• 화살표 함수 arrow function
  • => 표기법(화살표 표기법)을 사용해 함수를 좀 더 간단하게 선언할 수 있음

(매개변수) => {함수 내용}

 

① 매개변수가 없을 때

• 매개변수가 들어가는 소괄호 부분을 비워둠
• 함수에서 실행할 명령이 한 줄뿐이면 중괄호{}를 생략할 수 있음
• 명령이 한 줄뿐일 때 return문이 포함되어 있으면 return도 생략할 수 있음

let hi = function() {
	return `안녕하세요?`;
}
hi();

     ↓  ↓  ↓

 

let hi = () => `안녕하세요?`;
hi();

 

 

② 매개변수가 1개일 때

• 매개변수의 소괄호를 생략할 수 있음

let hi = function(user) {
	console.log(`${user}님, 안녕하세요?`);
}
hi("홍길동");

    ↓  ↓  ↓

let hi = user => console.log(`${user}님, 안녕하세요?`);
hi("홍길동");

 

 

③ 매개변수가 2개 이상일 때

• (매개변수) => {...}처럼 사용

let sum = function(a, b) {
	return a + b;
}
sum(10, 20);

    ↓  ↓  ↓

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

 

---

 

• 콜백 함수 callback function
  • 다른 함수의 인수로 사용하는 함수

const bttn = document.querySelector("button");

function display() {
	alert("클릭했습니다.");
}

bttn.addEventListener("click", display);

( 버튼을 클릭했을 때 알림 창을 표시하는 예제 )

• 웹 문서의 버튼을 가져와서 변수 bttn에 저장하고 bttn을 클릭했을 때 무엇을 할지 지정하기 위해 addEventListener() 함수를 사용
• addEventListener() 함수에서는 미리 선언한 display() 함수를 인수로 사용. 이렇게 다른 함수의 인수가 되는 함수를 '콜백 함수'라고 함
• addEventListener() 함수 안에 display() 함수를 넣을 때 함수 이름 display 다음에 소괄호가 없다는 것에 주의
• 함수 이름 뒤에 소괄호를 넣으면 함수를 실행하는 것임
• 함수를 즉시 실행하지 않고 어떤 조건이 되었을 때 실행하도록 하기 위해 앞 소스의 경우에는 버튼을 클릭했을 때 display() 함수를 실행함.

 

const bttn = document.querySelector("button");

bttn.addEventListener("click", () => {
	alert("클릭했습니다.");
});

• 딱 한 번만 함수를 실행한다면 따로 함수를 선언하지 않고 함수에 직접 콜백 함수를 작성할 수도 있음

 

---

• 1급 시민 fisrt-class citizen: 다음 조건을 만족하는 것을 말함

     ① 변수에 할당할 수 있어야 함

     ② 다른 함수의 인자로 사용할 수 있어야 함

     ③ 다른 함수에서 반환값으로 반환할 수 있어야 함

let init = () => {
	return function(a, b) {
    	return a - b > 0 ? a - b : b - a;
    }
}

console.log(`init(30, 20) : ${init(30, 20)}`);
// 반환값
// init(30 ,20) : function(a, b) {
//	return a - b > 0 ? a - b : b - a;
// }

console.log(`init()(30, 20) : ${init()(10, 20)}`);
// 반환값
// init()(30, 20) : 10

  ( 함수에서 다른 함수를 반환하는 예시 )

 

 

• 자바스크립트의 경우 함수가 1급 시민. 코틀린 같은 언어에서는 객체가 1급 시민임.
• 꼭 함수를 이런 식으로 작성해야 하는 것 X. 프로그래밍에 익숙해지면 함수를 더 유연하게 사용할 수 있다는 의미.