[FE Study] Javascript - (4)

1. 함수

함수란? 💡

• 일련의 과정을 문(statement)로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것을 의미한다.
• 함수는 함수 정의를 통해 생성한다.

*함수의 구성요소

• 매개 변수(parameter)
• 인수(argument)
• 반환(return value)

// 함수 정의
function add(x,y){
	return x+y;
}
// 함수 호출
var result = add(2,5);

// 함수 add에 인수(argument) 2,5를 전달하면서 호출하면 반환값 7을 반환한다.
console.log(result)

1.1. 함수를 사용하는 이유

Key point💡 코드의 재사용성

코드의 중복을 억제하고 재사용을 높이는 함수는 유지보수의 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있다.

1.2. 함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수 리터럴은 function 키워드, 함수이름, 매개변수 목록, 함수 몸체로 구성된다.

// 변수에 함수 리터럴을 할당
const f = function add(x,y){
	return x+y
}

1.3. 함수 정의

1) 함수 선언문

function add(x,y){
	return x+y
}

2) 함수 표현식

const add = function(x,y){
	return x+y
}

3) Function 생성자 함수

// 변수에 함수 리터럴을 할당
const add = new Function('x','y','return x+y')

4) 화살표 함수(ES6)

// 변수에 함수 리터럴을 할당
const add = (x,y) => {
	return x+y
}

1.4. 함수 선언문과 함수 표현식

1) 함수 선언문(Function Declarations)

• 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식이다.

function 함수명() {
  구현 로직
}

// 예시
function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'

• 함수 선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

Key point💡

• 함수 선언문은 표현식이 아닌 문(statement)이다.

2) 함수 표현식

• 유연한 자바스크립트 언어의 특징을 활용한 선언 방식
• JavaScript는 일급 객체 언어이기 때문에 변수에 함수를 할당할 수 있다.

var 함수명 = function () {
  구현 로직
};

// 예시
var funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

3) 함수 선언문과 표현식의 차이점

Key point💡

• 함수 선언문은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
• 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.

// 실행 전
logMessage();
sumNumbers();

// 함수 선언문
function logMessage() {
  return 'worked';
}

// 함수 표현식
var sumNumbers = function () {
  return 10 + 20;
};

• 호이스팅에 의해 자바스크립트 해석기는 코드를 아래와 같이 인식한다.

// 실행 시
function logMessage() {
  return 'worked';
}

var sumNumbers;

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

• 변수 선언 식별자 var에 의해 호이스팅이 적용되어 위치가 상단으로 끌어올려졌다.

var sumNumbers;

logMessage();
sumNumbers();

• 하지만 실제 sumNumbers 에 할당될 function 로직은 호출된 이후에 선언되므로, sumNumbers 는 함수로 인식하지 않고 변수로 인식한다.

• 변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리털럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

• 따라서 함수 표현식으로 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

1.5. 왜 함수 표현식을 사용할까?

1) 함수 표현식 장점

Key point💡

• ‘함수 표현식이 호이스팅에 영향을 받지 않는다’ 는 특징 이외에도 함수 선언식보다 유용하게 쓰이는 경우는 다음과 같다.
  - 클로져로 사용
  - 콜백으로 사용 (다른 함수의 인자로 넘길 수 있음)

*함수 표현식으로 클로져 생성하기

클로져💡

• 함수를 실행하기 전에 해당 함수에 변수를 넘기고 싶을 때 사용된다. 더 쉽게 이해하기 위해 아래 예제를 살펴보자.

1.6. 화살표 함수

• 화살표 함수는 기존 함수의 선언문 또는 함수 표현식을 완전히 대체하기 위해 디자인 된 것이 아니라, 화살표 함수는 기존의 함수보다 표현, 내부 동작이 간략화되어 있다.

화살표 함수💡

• 화살표 함수는 생성자 함수로 사용할 수 없으며 기존의 함수와 this 바인딩 방식이 다르고, prototype 프로퍼티가 없으며 arguments 객체를 생성하지 않는다.

2. 다양한 함수의 형태

2.1. 재귀 함수

재귀 함수💡

• 재귀 함수는 자기 자신을 호출하는 행위를 말한다. 재귀 함수는 탈출 조건이 없으면 함수가 무한 호출되어 스택 오버플로(stack overflow) 에러가 발생한다.

2.3. 콜백 함수

콜백 함수💡

• 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백함수라고 한다.

2.4. 고차함수

고차함수💡

• 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수(HOF)라고 한다.