1. 함수 선언문
funcion add(x, y) { // <= 함수 이름 정의 필수. x, y는 매개변수
return x + y;
}
console.log(add(10, 20)); // <= 함수 이름으로 호출. 10, 20은 인자2. 함수 표현식
- 변수는 값을 주고 받을 수 있다.
let a = 100;
let b = a;
console.log(a); // 100
console.log(b); // 100- 함수 표현식을 이용하면 함수를 변수처럼 사용할 수 있다.
- 익명 함수 표현식
let add = function(x, y) { return x+y; }; // ~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // | | //함수 변수 | // 익명 함수 표현식 let sum = add; console.log(add(10, 20)); // 30 console.log(sum(10, 20)); // 30- 기명 함수 표현식: 함수 외부에서는 함수 이름을 사용할 수 없으나 함수 내부에서 자기 호출 때 사용할 수 있다.
let sum1 = function add(x, y) { return x+y; }; // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // 기명 함수 표현식 let sum2 = sum1; console.log(sum1(10, 20)); // 30 console.log(sum2(10, 20)); // 30 console.log(add(10, 20)); // add is not defined// 기명 함수 표현식 사용 예시: 재귀 호출 let myFactorial = function factory(n) { if(n === 1) { return 1; } return n * factory(n-1); }; console.log(myFactorial(10)); - 함수 선언문으로 정의한 함수는 자바스크립트 내부에서 함수 이름과 함수 변수 이름이 동일한 함수 표현식으로 자동 변경된다.
function add(x, y) { return x + y; }; // 함수 선언문
// 🔽
let add = function add(x, y) { return x + y; }; // 함수 표현식3. 함수의 활용
- 함수를 다른 함수의 인자로 전달
- 함수의 내부 동작을 외부에서 던져줄 때 사용한다.
<script> let click = function(fname) { fname(); }; > let loginButtonClick = function() { console.log("로그인되었습니다."); }; let logoutButtonClick = function() { console.log("로그아웃되었습니다."); }; > click(loginButtonClick); click(logoutButtonClick); </script><script> let cal = function(f, x, y) { switch(f) { case "add": console.log(`x + y = ${x + y}`); break; case "sub": console.log(`x - y = ${x - y}`); break; case "mul": console.log(`x * y = ${x * y}`); break; case "div": console.log(`x / y = ${x / y}`); break; } }; let calurator = function(f, x, y) { f(x, y); }; let add = function(x, y) { console.log(`x + y = ${x + y}`); }; let sub = function(x, y) { console.log(`x - y = ${x - y}`); }; let mul = function(x, y) { console.log(`x * y = ${x * y}`); }; let div = function(x, y) { console.log(`x / y = ${x / y}`); }; calurator(add, 10, 20); calurator(sub, 10, 20); calurator(mul, 10, 20); calurator(div, 10, 20); </script> - 함수를 다른 함수의 리턴값으로 활용
- 일급 객체: 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체. 함수를 값으로 취급할 수 있다.
- 특정 함수가 어떻게 동작할 것인지 미리 규정해놓고 그것을 반환한다.
// 함수를 값으로 넘김 <script> let foo = function() { return function() { console.log("반환함수"); }; }; let bar = foo(); bar(); </script>// 함수를 리턴받아서 사용 <script> function twoTimes() { return function(number) { return number * 2; }; } const no3 = twoTimes(); console.log(no3(3)); const no4 = twoTimes(); console.log(no4(4)); > function multiflier(factor) { return function(number) { return number * factor; }; } const double = multiflier(2); console.log(double(3)); // 6 console.log(double(4)); // 8 const triple = multiflier(3); console.log(triple(3)); // 9 console.log(triple(4)); // 12 </script>
4. 함수의 종류
- 콜백 함수(callback function)
- 개발자가 코드를 이용해서 명시적으로 호출하는 함수가 아닌, 단지 함수를 등록만 하고 특정 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수
- 이벤트 핸들러: 특정 이벤트가 발생했을 때 실행되는 함수
<input type="button" />
- 즉시 실행 함수(자기 호출 함수)
- 함수 정의와 동시에 바로 실행하는 함수
- 익명 함수 표현식을 괄호로 둘러싼 후 바로 호출(실행)할 수 있도록 괄호 쌍 추가
( function(name) { console.log(`${name}는 즉시 실행됩니다.`); } ) ('이 함수');- name: 매개변수
- ('이 함수'): 함수 실행에 필요한 인자값 전달
- 화살표 함수
- function, {}을 생략하고 =>를 넣어서 표현
- 객체를 반환할 때는 ({})로 감싸줘야한다.
<script> // 익명 함수 표현식을 이용해서 함수를 정의 const add1 = function (x, y) { return x + y; }; console.log(add1(2, 3)); // 5 // 화살표 함수 // function 키워드를 제거하고, 함수 파라미터와 본문 사이에 화살표(=>)를 추가 const add2 = (x, y) => { return x + y; }; console.log(add2(2, 3)); // 5 // 화살표 함수 본문이 결과를 반환하는 구문으로 되어 있는 경우, 중괄호와 return 키워드를 생략할 수 있음 const add3 = (x, y) => x + y; console.log(add3(2, 3)); // 5 // 매개변수가 하나인 경우, 매개변수를 감싸고 있는 소괄호도 생략이 가능 const add4 = x => x + 4; console.log(add4(2)); // 6 // 객체를 반환하는 경우에는 반환 객체를 소괄호로 감싸야 함 const add5 = (x, y) => { return { result: x + y }; }; console.log(add5(2, 3)); // { result: 5 } const add6 = (x, y) => ({ result: x + y }); console.log(add6(2, 3)); // { result: 5 } </script>
