함수

yeonhwan619·2022년 8월 22일

기록) JS 기초

목록 보기

2/10

함수란 일련의 과정을 코드 블록으로 나타내어 실행하는 단위를 말한다.

프로그래밍에서의 함수는 수학적인 의미의 함수 (변수들 간의 상관관계) 와 사뭇 비슷하지만 그 느낌이 다르다. 프로그래밍적인 의미의 함수는 변화와 변수들의 관계에 집중하기 보다는 그 기능적인 부분에 초점을 둔다. 즉, 데이터를 사용해서 어떠한 결과물을 도출해낼 것인가 하는 것이다. 여기서 함수는 하나의 목적을 가지도록 하는 코드 들의 기능적인 단위라고 할 수 있다.

• 자바스크립트에서의 함수

기본적으로 자바스크립트에서 함수는 다음과 같은 형식을 띄고 있다.

// 두 수를 받아 그 결과값을 출력하는 함수
function mySum(params,params2) {
	let sum = params + params2;
  	return sum;
}

함수는 다양한 방식으로 생성할 수 있으나, 가장 기본적으로 'function' 키워드를 통해서 생성할 수 있다. 이때, 함수의 이름(식별자)과 목적에 맞는 매개변수(parameter)들을 선언하고, { }안에 함수가 의도된 기능을 하도록 하는 코드 문들을 입력하게 된다.

• 함수의 호출과 함수의 실행

function mySum(params,params2) {
	let sum = params + params2;
  	return sum;
}

console.log(mySum(3,4)); // 7

함수를 선언하여, 자바스크립트에 함수의 존재를 알렸다면, 이제 함수를 기능에 맞게 사용할 때다. 함수의 호출은 함수의 식별자(이름)을 호출함과 동시에'( )'안에 필요한 전달인자(arguments)들을 전달함으로써 호출할 수 있다. 함수가 호출되면, 함수는 함수 내부에서 매개 변수들에게 전달인자들을 순서대로 할당하고 블록내의 모든 코드들의 동작을 수행한뒤 return 키워드를 만나면 해당되는 값을 평가한 후 외부로 반환하고 함수를 종료시킨다.

즉, 함수의 동작 순서는 다음과 같다.

let numA = 10;
let numB = 20;
console.log('before function!');

function mySum(num1, num2) {
  console.log('inside of function');
  return num1 + num2;
}

let sumNum = mySum(numA, numB);
console.log(sumNum);
console.log('after function!');

// before function!
// inside of function
// 30
// after function!

함수 호출 이전의 코드 (함수의 선언을 포함)
....
❶ 함수 호출
❷ 함수 내부로 실행 순서의 이동
❸ 함수 내부의 변수들과 매개변수들을 선언
❹ 매개변수의 할당
❺ 함수내부의 코드를 순서대로 실행
❻ 함수식의 결과값을 반환
....
함수 호출 이후의 코드로 복귀

함수의 선언과 함수 표현식

자바스크립트에서 함수를 선언하고 활용하는 방식은 크게 세가지로 나눌 수 있다.

1. 함수 선언문을 통해 함수를 선언하여 사용
2. 함수 표현식을 통해 함수를 변수에 할당하여 사용
3. 화살표함수

각각의 경우들을 살펴보며 어떠한 차이점이 있는지 살펴보자.

1) 함수 선언문

function myFunc(message) {
    let myMessage = 'hi!' + message;
    return myMessage;
}

앞서 함수를 설명하면서 사용된 방식이 바로 함수 선언문 방식으로 'function'키워드와 식별자를 통해 함수를 선언한다. 이때, 함수 선언문 방식은 반드시 식별자를 선언해주어야 한다. 함수 선언문방식으로 함수를 선언할 경우, 선언한 식별자의 이름으로 암묵적으로 자바스크립트가 변수를 생성한다. 그리고 생성된 변수에 정의한 함수 리터럴(표현식)을 할당한다. 따라서 함수 선언문은 변수나 상수에 할당할 수 없다.

2) 함수 표현식

let myFunc = function (message) {
  let myMessage = 'hi!' + message;
  return myMessage;
}

다음과 같은 함수 선언방식을 함수 표현식이라고 말한다. 함수 또한 데이터, 즉 객체타입의 값이기 때문에 값으로 평가될 수 있으며 변수와 상수에 할당될 수 있다. 함수 선언문 방식에서 암묵적으로 생성되던 식별자를 명시적으로 함수 외부에서 선언하고 이에 정의한 함수를 할당한다. 따라서, 함수 표현식에서는 선언문에서와는 달리 함수의 식별자를 선언하지 않는다. (함수의 이름은 함수 내부에서만 자체적으로 참조할 수 있기 때문에, 표현식에서 함수의 이름을 선언하더라도 해당 이름으로 함수를 호출할 수 없다.)

3) 화살표 함수

let myFunc = (message) => {
	let myMessage = 'hi' + message;
  	return myMessage;
}

let myFunc2 = (message) => 'hi' + message;

화살표 함수는 ES6에서 새롭게 추가된 문법으로, 고차함수의 콜백함수로써 보다 사용이 용이하도록 화살표를 통해 함수를 단순히 표현한 것이다.

화살표 함수는 다음과 같은 특징을 지닌다.

화살표 함수는 'function' 키워드 대신 '=>'를 통해 함수임을 나타낸다.
화살표 함수는 다른 함수들과는 다르게 함수 선언문의 방식으로는 선언할 수 없고 반드시 함수 표현식을 통해 함수를 선언해야 한다.

화살표 함수의 매개변수는 여러 개일 경우 '( )'안에 나열하고, 하나일 경우 '( )'를 생략할 수 있다.
함수 몸체의 문이 하나일 경우, '{ }' 를 생략하며, 표현식일 경우 결과 값을 평가하여 암묵적으로 반환한다. 표현식이 아닐경우, '{ }'를 생략할 수 없다.
화살표 함수는 인스턴스를 생성할 수 없는 non-constructor 이다.
화살표 함수는 자체적인 this, arguments, super, new.target 바인딩을 가지지 않는다.

참조) Javascript DeepDive

함수