[JAVASCRIPT] Function : 함수

 

Function

• 함수
• 코드의 집합
• 어떠한 일처리를 하는 동작을 함
• 특정 코드를 하나의 명령어로 실행할 수 있게 해주는 기능
• 매개변수(parameter, 파라미터)가 주어졌을 때, 이 매개변수를 처리해서 결과(리턴값)를 만들어내 주는 기능
• 사용의 주 목적은 코드 중복 피하기. 재사용성
  • 반복되는 코드를 한 번만 정의해 놓고 필요할 때마다 호출함으로써 반복 작업을 피한다.
  • 긴 프로그램을 기능별로 나눠 모듈화함으로써 가독성이 오르고 유지보수가 쉽다.

 

 

 

자바스크립트의 함수

JavaScript 에서의 함수가 다른 프로그래밍 언어에서의 함수와 다른 부분은

함수도 하나의 자료라는 개념을 갖고 있다는 점.

그로 인해, 다른 프로그래밍 언어는 함수를 지정된 위치에서 만들어야 하지만

자바스크립트에서는 코드 중간에 만들 수 있다는 큰 차이를 만들고, 이 차이가 비동기 프로그래밍을 이끌게 된다.

 

 

 

함수의 선언과 호출

// 함수 선언
funcution 함수 이름(매개변수1, 매개변수2){ // 매개변수: parameters
	동작;
	return 리턴값;
}

// 함수 호출
함수 이름();

여기에서 함수는 매개변수와 리턴값을 무조건 사용하는 것이 아니며, 필요한 경우에만 사용한다.

 

 

 

화살표 함수

함수를 선언하는 또 다른 방식으로 => 화살표 기호를 사용한다.

const 함수 이름 = (매개변수) => {
	동작
	return 리턴값;
}

별도의 동작이 없고 리턴값만 가지는 경우,

실행 코드를 감싸는 대괄호 {} 와 return 을 생략해서 작성할 수 있다.

const 함수 이름 = (매개변수) => 리턴값;

 

 

 

---

익명 함수와 선언적 함수

함수의 이름도 경우에 따라 존재하거나 존재하지 않는다.

이름이 없는 함수를 익명 함수, 이름이 있는 함수를 선언적 함수라고 칭한다.

 

// 선언적 함수
function 함수 이름(){
	실행 코드
}
함수 이름();

// 익명 함수
var 변수 이름 = function(){
	실행 코드
}
변수 이름();

 

둘 다 함수를 선언하는 방식으로 동작에서는 차이점을 갖는데

앞에서 함수를 코드 중간에 선언해도 된다고 언급했던 부분이다.

 

기본적으로 웹 브라우저는 코드를 위에서부터 한 줄씩 순차적으로 읽는데,

선언적 함수가 코드에 존재한다면 다른 코드보다 우선적으로 읽는다.

때문에 함수를 호출한 이후에 선언해도 문제없었던 것.

 

반면에 익명 함수는 선언 -> 호출의 순서를 지켜야만 한다.

// 실행 성공 : 선언적 함수는 호출 이후 선언을 해도 문제가 없다.
success();
function success(){
	console.log("hello");
}
// ? hello


// 실행 실패 : 익명 함수는 선언 이후 호출해야 한다.
fail();
var fail = function(){
	console.log("hello");
}

 

 

 

---

나머지 매개변수와 전개 연산자

나머지 매개변수

호출할 때 매개변수의 개수가 고정적이지 않은 함수를 가변 매개변수 함수라고 부른다.

이런 함수를 구현할 때는 나머지 매개변수(rest parameter) 라는 문법을 사용한다.

function 함수 이름(...나머지 매개변수) { }

매개변수 앞에 마침표 3개 ... 를 입력하면 매개변수들이 배열로 들어온다.

 

예시로 아래와 같이 작성해서 동작을 확인할 수 있다.

function practice(...items) {
	console.log(items);
}

practice();           // ? []
practice(1, 2);       // ? [1, 2]
practice(1, 2, 3, 4); // ? [1, 2, 3, 4]

 

이 나머지 매개변수는 일반 매개변수와 조합도 가능하다.

function practice(a, b, ...c) {
	console.log(a, b, c);
}

practice(1, 2);       // ? 1 2 []
practice(1, 2, 3, 4); // ? 1 2 [3, 4]

 

나머지 매개변수를 활용한 최솟값 찾는 예제를 함께 확인해 보자.

function findMin(...items) {
	let min = items[0];
	for(const item of items) {
		if(min > item) {
			min = item;
		}
	}
	return min;
}

console.log(findMin(3, 4, 6, 2, 1, 8)); // ? 1

• 나머지 매개변수인 ...items 의 사용으로, items = [3, 4, 6, 2, 1, 8] 로 배열이 됐다.

 

 

전개 연산자

매개변수로 숫자를 받는 어떠한 함수가 있는데, 가지고 있는 값은 배열인 경우?

우리는 이 배열 요소를 하나하나 입력하는 방법밖에 생각할 수 없다.

const array = [1, 2, 3, 4];
매개변수로 숫자만 받는 함수(array[0], array[1], array[2], array[3]);

위 상황을 대비해

배열을 전개해서 함수의 매개변수로 전달해 주기 위한 문법을 전개 연산자(spread operator) 라고 한다.

배열 앞에 마침표 3개 ... 를 입력하면 배열 요소 하나하나를 제공한다.

함수 이름(...배열)

 

예시로 아래와 같이 작성해서 동작을 확인할 수 있다.

function practice(a, b, c) {
	console.log(a, b, c);
}

const array = [1, 2, 3, 4];

practice(array[0], array[1], array[2]); // ? 1 2 3
practice(...array);                     // ? 1 2 3

 

전개 연산자를 활용한 최솟값 찾는 예제를 함께 확인해 보자.

function findMin(a, b, c) {
	let min = a;
	if(min > b) { min = b; }
	if(min > c) { min = c; }
	return min;
}

const nums = [4, 8, 3];
console.log(findMin(...nums)); // ? 3

• 함수 findMin()은 숫자 3개를 매개변수로 받고 nums는 배열이지만
• 전개 연산자를 활용한 ...nums 를 매개변수로 넣음으로써 findMin(4, 8, 3) 형태가 됐다.

 

차이점

나머지 매개변수(rest parameter)와 전개 연산자(spread operator)는

마침표 3개 ... 를 앞에 붙인다는 점에서 생김새가 동일하다.

 

둘의 차이점은 의미에서 드러나지만 사용되는 상황으로도 구분된다.

나머지 매개변수는 함수를 선언할 때 사용하고, 전개 연산자는 함수를 호출할 때 사용한다.

// 나머지 매개변수는 함수를 선언할 때 사용
function practice(...restParameter) { ... }

// 전개 연산자는 함수를 호출할 때 사용
practice(...spreadOperator);

 

 

 

---

참고

• 모던 JavaScript 튜토리얼: 함수
• 벨로퍼트와 함께하는 모던 자바스크립트
• [책] 혼자 공부하는 자바스크립트