JavaScript_함수

함수의 기본형태

함수는 코드의 집합을 나타내는 자료형이다.

(1) 익명함수

function(){}

 

함수를 코드의 집합이라고 하는 이유는 { }안에 코드를 넣기 때문이다. 함수는 반복되는 코드를 한번만 정의해두고 호출할때마다 사용하거나 기능별로 나눠 작성하면 모듈화로 가독성이 좋아지고 유지보수가 쉬워지는 장점이 있다.

함수의 자료형은 function이며 함수를 출력하면 f () { } 라고 출력된다. 이름이 붙어 있지 않는 함수를 익명 함수라고 표현한다.

 

(2) 선언적 함수

이름이 있는 함수를 선언적 함수라고 한다.

function name(){

}

 

함수를 호출할때는 함수 이름을 불러 호출한다. 익명 함수와 큰 차이는 없지만, 함수를 출력했을때 f 함수이름 ( ) { } 형태로 노출된다는게 다른점이다.

 

(3) 매개변수와 리턴값

함수를 호출할때 괄호 안에 적는것을 매개변수라고 하는데 prompt() 함수를 사용할 때는 매개변수로 message를 넣어야 한다. 그러면 결과가 문자열로 나오는데 이런 최종결과를 리턴값이라고 한다.

모든 함수에 매개변수와 리턴값을 사용하는 것이 아니라 필요에 의해 사용한다.

위와 같은 예시처럼 매개변수 year을 이용해서 윤년인지 확인하는 함수를 만들 수 있다. 리턴값으로는 2022년 윤년이 아니므로 false값을 받게 된다.

그리고 매개변수로 항상 비슷한 값을 입력하는 경우에는 , 기본 매개변수를 사용할 수 있다. 예를 들어, 윤년인지 확인하는 함수에서 기본값을 올해를 기준으로 삼는다면 이렇게 변경 할 수 있다.

 

(4) 나머지 매개변수

함수를 호출할때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 한다. 자바스크립트에서는 이런 함수를 구현할때 나머지 매개변수라는 형태를 사용한다.

function name(...나머지 매개변수){ }

위와 같은 최소값 구하는 함수가 있다고 하면, items라는 나머지 매개변수를 이용해서 배열처럼 사용해 최소값을 구할 수 있다.

 

(5) 전개 연산자

자바스크립트에서는 배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자를 제공한다.

예시 코드를 보면 전개 연산자를 사용하지 않으면 배열이 매개변수로 들어오고, 전개 연산자를 사용한 경우에는 숫자 하나하나가 전개되어 매개변수로 들어온다. 

이처럼 배열에 있는 숫자를 읽어들일때는 전개 연산자를 사용한다.

 

함수고급

(1) 콜백함수

자바스크립트는 함수도 하나의 자료형으로 취급하므로, 매개변수로 함수를 전달할 수 있다. 이렇게 매개변수로 전달하는 함수를 콜백 함수라고 한다.

콜백 함수를 활용하는 함수로 forEach()와 map() ,filter()가 있다. forEach()는 배열이 갖고 있는 함수로써 단순하게 배열 내부의 요소를 사용해 콜백 함수를 호출한다. map()은 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만드는 함수이다. filter()는 콜백 함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수이다.

 

(2) 화살표 함수

map(), filter() 함수처럼 단순 형태의 함수를 쉽게 입력할때는 화살표 함수를 이용해 함수를 생성할 수 있다. 

이렇게 화살표 표시(=>)를 이용해서 함수를 사용가능하다. 그리고 해당 코드는 number에 filter를 사용해 홀수 값만 걸러내서 제곱한 숫자를 출력해주는 코드이다. 이렇게 메소드 리턴값을 기반으로 함수를 연이어서 사용하는 것을 메소드 체이닝이라고 한다.

 

(3) 타이머 함수

자바스크립트에는 특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있다.

함수이름	설명
setTimeout(함수, 시간)	특정 시간 후에 함수를 한 번 호출한다.
setInterval(함수, 시간)	특정 시간마다 함수를 호출한다.
clearTimeout(타이머_ID)	setTimeout() 설정타이머를 제거한다.
learInterval(타이머_ID)	setInterval() 설정 타이머를 제거한다.

 

(4) 즉시 호출 함수

웹 사이트에서 자바스크립트 코드를 보면 익명 함수를 생겅하고 즉시 호출을 사용하는 패턴이 쉽게 쓰인다. 일반적으로 자바스크립트는 html 페이지 내부에서 script 태그를 여러개 사용하고 코드를 입력한다. 이렇게 사용되다보면 변수 이름이 충동할 가능성이 생긴다. 변수가 같은 단계에 있을 경우 충돌이 있기 때문에 중괄호를 사용해서 블록을 만들거나 함수를 생겅해서 블록을 만든다. 

블록의 가장 위쪽에 'use strict' 을 입력하면 엄격모드를 사용할 수 있어서 문법오류같은 실수를 줄일 수 있기도 하다.