✅ Achievement Goals
- 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.
- 함수 선언을 위해 필요한
keyword,name,parameter,body에 대해 이해할 수 있다.- 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다.
- 함수가 선언되어
함수 표현식이 변수에 담기는 과정을 설명할 수 있다.- 함수의 결과값이 변수에 할당되어 담기는 과정을 설명할 수 있다.
- 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
- 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
매개변수(parameter)와전달인자(argument)를 구분하여 사용할 수 있다.- 같은 기능을 하는 함수를
선언식,표현식,화살표 함수로 바꾸어 표현할 수 있다.
함수란?
수학에서의 함수는 입력을 받아 출력을 내보내는 일련의 과정을 정의한 것이다. 프로그래밍에서의 함수도 매개변수를 받아 출력값을 반환한다는 점에서 같다. 프로그래밍 언어에서의 함수는 일련의 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행단위로 정의한 것이다. 이 때, 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라고 한다. 함수는 값이며, 여러 함수가 존재할 수 있기 때문에 함수를 구별하기 위해서 식별자로써 함수 이름을 붙여 사용한다. 함수는 정의를 통해 생성되며, 호출함으로써 사용할 수 있다.
// 함수 선언문 function 함수 이름(매개변수) { return 매개변수 + 매개변수; } // function myFunc
함수의 장점
① 코드의 재사용성
② 코드의 유지보수 편의성
③ 코드의 신뢰성
④ 코드의 가독성
만약 동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적이다. 이런 특성은 코드의 재사용이라는 측면에서 매우 유용하다.
함수의 일반적 기능은 어떤 작업을 수행하는 문(statement)들의 집합을 정의하여 코드의 재사용에 목적이 있다. 이러한 일반적 기능 이외에 객체 생성, 객체의 행위 정의(메소드), 정보 은닉, 클로저, 모듈화 등의 기능을 수행할 수 있다.
자바스크립트의 함수는 객체(일급 객체, First-class object)이다. 다른 객체와 구분될 수 있는 특징은 호출할 수 있다는 점인데, 함수도 객체이므로 다른 값들처럼 사용할 수 있다. 즉, 이런 특징을 갖고 있다.
함수의 특징
자바스크립트의 함수는 일급객체의 특징을 갖고 있다.
- 변수나
object(객체),array(배열) 등에 저장할 수 있다.- 다른 함수에 전달되는
argument(인자)로도 사용할 수 있다.- 함수의
return value반환값이 될 수도 있다.
함수 정의 방식
함수를 정의하는 방식은 3가지가 있다.
1. 함수 선언문
2. 함수 표현식
3. Function 생성자(constructor) 함수
1) 함수 선언문
함수 선언문 방식으로 정의한 함수는 아래의 내용처럼 구성되어 있다.
함수 선언문의 형태
Keyword :
function
Name :myName
Parameter (매개변수) :number
Body : 코드를 감싼{ }중괄호 부분// 함수 선언문 function myName(number) { return number * number; }
Name(함수명)
함수 선언문의 경우, 함수명은 생략할 수 없다. 함수명은 함수 body(몸체)에서 스스로를 재귀적(recursive)으로 호출하거나 자바스크립트 debugger가 해당 함수를 구분할 수 있는 식별자이다.
Parameter(매개변수)
0개 이상의 목록(list)으로 괄호를 감싸고
,(콤마)로 분리한다. 다른 언어들과 달리 자바스크립트는 매개변수의 타입을 입력하지 않는다. 때문에 함수 body 안에서 매개변수 type 체크가 필요하다.
Body(몸체)
함수가 호출되었을 때 실행되는 코드들의 집합이다.
{}중괄호로 코드들을 감싸고return문으로 결과값을 반환할 수 있다. 이를 반환값(return value)라고 한다.
2) 함수 표현식
자바스크립트 함수는 일급 객체이기 때문에 아래 같은 특징을 갖고 있다.
일급객체 특징
- 무명의 리터럴로 표현이 가능하다.
(리터럴이란, 선언함과 동시에 값 또는 코드를 지정해주는 것을 말한다.)- 변수나 자료 구조(객체, 배열 등)에 저장할 수 있다.
- 함수의 parameter로 전달할 수 있다.
- 반환값(return value)으로 사용할 수 있다.
위와 같은 함수의 일급객체 특성 덕분에 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있다. 이러한 방식을 함수 표현식이라고 일컫는다.
위에서 사용했던
1) 함수 선언문을2) 함수 표현식으로 바꿔보자.
함수 표현식
var myName = function(number) { return number * number; };함수 표현식 방식으로 정의한 함수는 함수명을 생략할 수 있다. 이러한 함수를 익명 함수(anonymous function)이라 한다. 함수 표현식에서는 함수명을 생략하는 것이 일반적이다.
기명 함수 표현식(name function expression)
let calculator = function multiply(a, b) { return a / b; }; console.log(calculator(50, 10)) // 5 console.log(multiply(50, 10)) // ReferenceError: multiply is not defined
익명 함수 표현식(anonymous function expression)
let calculator = function(a, b) { return a / b; }; console.log(calculator(50, 10)) // 5 console.log(multiply(50, 10)) // ReferenceError: multiply is not defined함수는 일급객체이기 때문에 변수에 할당할 수 있다. 이때 변수는 함수의 이름이 함수를 할당한 변수의 이름을 참조한다. 그래서 호출할 때 함수명이 아닌 함수의 변수명을 사용해야 된다. 아래 코드로 예시를 들자면 변수명인
calculator를 호출해야 한다.let calculator = function multiply(a, b) let calculator = function(a, b)
3) 화살표 함수
화살표 함수는
function키워드 대신 화살표(=>)를 사용해서 보다 간편하게 함수를 선언할 수 있다. 하지만 몇 가지 제한점이 있고 모든 상황에서 사용되어질 순 없다. 일단 화살표 함수의 기본 문법을 살펴보자.
매개변수 지정 방법
(1) 매개변수가 없는 경우
() => {...}(2) 매개변수가 한 개인 경우 소괄호를 생략할 수 있다.
x => {...}(3) 매개변수가 여러 개인 경우 소괄호를 생략할 수 없다.
(x, y) => {...}
함수 body 지정 방법
single line block
x => {return x * x} // single line block x => x * x // 함수 body가 한 줄의 구문이라면 중괄호를 생략할 수 있고 // 암묵적 return이 된다. 위 표현식과 동일하다. () => {return { a: 1 };} () => ({ a: 1 }) // 위 표현과 동일하다. 객체 반환 시 소괄호를 사용한다.multi line block
() => { const x = 10; return x * x; };
화살표 함수 호출
화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는
2) 함수 표현식을 사용한다.const pow = x => x * x; console.log(pow(10)) // 100콜백 함수로도 사용할 수 있다. 이 경우 일반적인
2) 함수 표현식보다 표현이 간결하다.const arr = [1, 2, 3]; const pow = arr.map(x => x * x); console.log(pow); // [1, 4, 9]
