함수
함수란 일련의 과정을 문으로 구현하고 그 것들을 코드 블록으로 감싸 하나의 실행 단위로 정의 한 것을 말한다. 함수의 사용 목적은 코드의 신뢰성과 편의성을 높이는 효과가 있기 때문이다. 중요한 기능을 가진 코드를 여러 번 반복해서 작성하면 사람은 실수를 할 수 있다. 그러한 실수를 방지하기 위해서 그 코드를 함수로 만들어서 코드의 가독성도 높이고 나중에 수정할 상황이 발생할 때 유지 보수하기에 용이하다.
함수 구성
// 함수 리터널
function 함수이름(매개변수) {
return 실행할 코드;
}
함수이름(인수) // 함수 호출
// 분홍색으로 칠한 부분이 함수몸체이다.
위의 코드는 함수의 기본 구성을 보여준다. 함수에는 매개변수, 함수 이름, 반환값(return 값), 인수가 있다.
| 정의 | 설명 |
| 함수 이름 | 함수 이름은 식별자이다. 함수 이름은 함수 몸체 내부에서만 참조 가능하다. 만약 몸체 외부에서 참조를 하려면 에러가 발생한다. 함수 이름은 생략이 가능하다. 함수 이름이 없으면 무명/익명 함수라고 하고, 이름이 있으면 가명 함수라고 한다. |
| 매개변수 | 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분한다. 각 매개변수는 함수 호출할 때 지정한 인수를 순서대로 할당한다.(매개변수는 순서에 의미가 있다.) 함수 몸체 내에서 변수와 동일하게 취급 받고, 외부에서 매개변수를 참조하려고 하면 에러가 발생한다. |
| 함수 몸체 | 함수가 호출 되면 일괄적으로 실행될 문 |
함수는 여러 개 정의 할 수 있고, 함수마다 함수 이름을 사용할 수 있다. 함수를 생성하기 위해서는 함수 정의를 통해 생성 가능하다. 함수를 정의 했다고 실행 되는 것이 아니라 함수 호출을 통해 함수가 실행된다.
함수 정의
// 1️⃣함수 선언문
function 함수이름(){
실행할 문;
}
함수이름(); //함수 호출
// 2️⃣함수 표현식
const 식별자 = function() {
실행할 문;
}
식별자(); // 함수 호출
// 3️⃣Function 생성자 함수
const 식별자 = new Function();
식별자(); // 함수 호출
// 4️⃣화살표 함수
const 식별자 = () => 실행할 문;
식별자(); // 함수 호출
1️⃣ 함수 선언문
함수 선언문은 값으로 평가되는 표현식이 아닌 문이다. 그런 이유로 함수 선언문은 변수에 할당할 수 없다. 또한 함수 이름을 생략할 수도 없다.
위에 표에서는 함수 이름은 함수 몸체 내에서만 참조할 수 있다고 했는데 함수 선언문은 함수 이름으로 함수를 호출하고 있다. 그 이유는 함수 선언문을 정의할 때 JS엔진이 런타임 이전 정의된 함수 선언문을 생성하고 임의로 함수 이름과 같은 식별자를 만들어 할당 했기 때문이다. 이러한 이유로 에러가 발생하지 않고 함수를 호출할 수 있는 것이다.
2️⃣ 함수 표현식
함수 표현식은 함수 리터널로 생성한 함수 객체를 변수에 할당한 것을 말한다. 함수 표현식은 일반적으로 함수 이름을 생략한다.(함수 이름을 가질 수는 있다.)
- 함수 호이스팅
함수 선언문과 함수 표현식으로 정의 된 함수의 생성 시점이 다르다. 먼저 함수 선언문은 다른 선언문들과 같이 런타임 이전에 실행 돼서 함수 이름과 같은 식별자에 함수 객체를 할당한다. 즉 런타임 이전에 함수가 생성되는 것이다. 그래서 함수 호출을 함수 선언문 보다 먼저 작성해도 에러 없이 실행 된다.
함수 표현식도 런타임 이전에 실행 되는 것은 같다. 하지만 차이점은 함수 표현식은 변수에 함수 객체를 할당한다는 것이다. 그러면 런타임 이전에 변수를 undefined로 초기화를 해주고 런타임이 실행 될 때 할당이 실행 되는 시점에 함수 객체가 할당 된다. 그래서 함수 표현식보다 함수 호출을 먼저 작성하면 에러가 발생한다.
3️⃣ Function 생성자 함수
JS에서 기본 제공하는 빌트인 함수인 Function 생성자 함수에 new 연산자와 함께 호출하는 방법이다.
4️⃣ 화살표 함수
function 키워드 대신 화살표(⇒)를 사용하는 함수이다. 화살표 함수는 항상 익명함수로 정의한다. 화살표 함수는 생성자 함수 new 연산자로 사용할 수 없다.
매개변수와 인수
함수 실행을 위해 필요한 값을 함수 외부에서 내부로 전달할 필요가 있을 때 매개변수를 통해 인수를 전달 받는다. 인수는 값으로 평가 할 수 있는 표현식이어야 한다. 매개변수는 함수 정의할 때 소괄호 안에 선언하고 함수 몸체 내에서 변수와 동일하게 취급할 수 있다. 매개변수 또한 함수 외부에서는 참조할 수 없다.
함수는 매개변수 개수와 인수 개수가 일치하는지 체크하지 않는다. 매개변수보다 인수가 작으면 인수가 할당 되지 않은 매개변수의 값은 undefined로 처리된다. 만약 인수가 매개변수보다 많으면 초과된 인수는 무시한다.
- 매개변수의 최대 개수
ECMAScript에서는 매개변수의 최대 개수에 대해 명시적으로 제한하지 않는다. 매개변수는 순서에 의미가 있다는 것이 중요하다.
- 나머지 매개변수
매개변수 개수를 확정할 수 없는 함수를 가변 인자 함수라고 부른다. 가변 인자 함수를 정의하기 위해서 나머지 매개변수라는 특이한 형태의 문법을 사용한다.
function 함수이름(...나머지 매개변수) { } /* 마침표 3개(...)를 입력하면 매개변수들이
배열로 들어온다. */- 나머지 매개변수와 일반 매개변수 조합
function 함수이름(매개변수, 매개변수, ...나머지 매개변수){
console.log(매개변수, 매개변수, 나머지 매개변수);
}
함수이름(1, 2, 3, 4, 5); // 1, 2, [3, 4, 5]
위의 코드처럼 1, 2는 숫자 타입으로 그냥 나오지만, 3, 4, 5는 배열로 감싸져서 나온다.
- 전개 연산자
배열을 전개해서 함수의 매개변수로 전달해준다. 아래 코드처럼 함수 호출할 때 인수에 마침표 3개(…)작성하고 값을 넣어주면 된다.
함수이름(...배열)
- 기본 매개변수
매개변수에 기본 값을 미리 할당한다. 아래 코드처럼 매개변수에 기본 값을 할당하면 함수 호출할 때 인수가 하나만 처음 매개변수에 할당 돼도 나머지 매개변수들은 기본 값으로 나오게 된다. 만약 인수를 2개 전달 하면 기본 값 a는 사라지고 인수를 재할당한다.
function 함수이름(매개변수, 매개변수 = a, 매개변수 = b) {}
반환문
return 키워드와 표현식으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환한다. 반환문의 역활은 return 키워드를 만나면 키워드 뒤에 있는 표현식을 평가 후 함수 실행을 중단하고 값을 가지고 함수 몸체를 빠져나간다.
다양한 함수의 형태
- 즉시 실행 함수
함수 정의와 동시에 즉시 호출되는 함수를 말한다. 즉시 실행 함수는 단 한 번만 호출되고 다시 호출할 수 없다. 즉시 실행 함수 기본 모형은 아래와 같이 그룹 연산자 안에 함수를 정의하고 호출까지 작성한다.
(function () {
실행문;
}())
- 재귀 함수
함수가 자기 자신을 호출하는 것을 재귀 호출이라 한다. 재귀 함수는 재귀 호출을 하는 함수이다. 재귀 함수는 자신을 무한 재귀 호출할 수 있어서 탈출 조건을 반드시 만들어야 한다.
function 함수이름() {
if() {} // 무한 호출을 막기 위한 조건문
함수이름();
}
- 중첩 함수
함수 내부에 다른 함수가 있는 것을 말한다.(중첩 for문 같은 형태라고 생각하면 된다.) 중첩 함수는 외부 함수 몸체 안에서만 함수 호출을 할 수 있다.
function 함수이름1() {
function 함수이름2() {
실행할 문;
}
함수이름2()
}
- 콜백함수
함수의 매개변수를 통해 다른 함수가 내부로 전달 되는 함수를 콜백 함수라고 한다. 매개변수를 통해 함수 외부에서 콜백 함수를 전달 받는 함수를 고차 함수라고 한다. 고차 함수를 호출할 때 콜백함수를 인수로 받는다. 콜백 함수를 사용할 때 주의 점은 인수로 사용할 때 식별자만 작성하고 호출 연산자는 사용하면 안 된다.
function 함수이름1() {
실행할 문;
}
const 함수이름2 = function () {
실행할 문;
}
함수이름1(함수이름2)
몇 가지 고차 함수를 소개 하겠다.
forEach()
콜백 함수 활용하는 가장 기본적 함수는 forEach() 메서드이다. forEach()는 배열이 갖고 있는 함수로써 단순히 배열의 내부 요소들 하나 하나 호출하다.
map()
콜백 함수에서 반환한 값을 기반으로 새로운 배열을 만든다.
타이머 함수
특정 시간 마다 또는 특정 시간 이후에 콜백 함수를 호출한다.
| 함수 | 설명 |
| setTimeou(함수, 시간) | 특정 시간 후에 함수를 한 번 실행한다. |
| setInterval(함수, 시간) | 특정 시간 마다 함수를 실행한다. |
타이머를 종료하고 싶으면 아래 함수를 사용하면 된다.
clearTimeout(타이머_ID): setTimeout() 함수로 설정한 타이머 제거
clearInterval(타이머_ID): setInterval() 함수로 설정한 타이머 제거
*타이머_ID는 set 함수를 변수에 할당할 때 사용한 식별자(변수명)을 말한다.
filter()
콜백 함수에서 반환한 값이 true인 것들을 모아서 새로운 배열을 만든다.
숙제
추가 숙제
filter() 메서드는 true 값을 모아 출력하는 함수이다. 1번의 홀수만 출력하기 위해서 x % 2를 사용했다. 짝수인 수는 나머지가 0이다. 컴퓨터에서 0은 false이므로 나머지가 있는 홀수들을 추출할 수 있다. 2번은 100 이하의 수를 찾는 거기 때문에 비교 연산자를 이용해 쉽게 할 수 있다. 3번은 5로 나눈 나머지가 0인 수를 추출하는 것이다. 앞에서 말했듯 0은 false이기 때문에 앞에 not 연산자를 붙여서 true 만들어 주면 쉽게 결과를 출력할 수 있다.