모던 자바스크립트 Deep Dive 12장-함수

HustleKang·2022년 5월 28일

모던 자바스크립트 Deep Dive

목록 보기

31/33

함수란?

일련의 과정을 문으로 구현하고 코드 블록으로 감싼 하나의 실행 단위
매개변수 : 함수 내부로 입력을 전달받는 변수
인수 : 입력
반환값 : 출력
함수 정의를 통해 생성
함수 호출을 통해 명시적으로 함수의 실행을 지시

함수를 사용하는 이유

동일한 코드의 중복을 억제 -> 재사용 가능, 코드의 신뢰성 증가 (실수 감소)
유지보수의 편의성
함수의 역할을 잘 설명하는 함수 이름을 통해 코드의 가독성 향상

함수 리터럴

함수 리터럴 : function 키워드, 함수 이름, 매개변수 목록, 함수 몸체

함수 이름 : 함수 몸체 안에서만 참조할 수 있는 식별자
매개변수 목록 : 호출할 때 전달한 인수가 순서대로 할당됨
함수 몸체 : 함수가 호출되면 실행할 문들이 작성된 코드 블록

// 함수 리터럴= 함수 값을 생성해주기 때문에 변수에 할당 가능 
const sumf = function sum(a,b){
	return a+b;
}

함수 정의

정의된 함수는 자바스크립트 엔진에 의해 평가되어 함수 객체가 된다
총 4가지 : 함수 선언문, 함수 표현식, 화살표 함수, Function 생성자 함수

함수 선언문

함수 리터럴과 형태가 같지만 함수 이름을 생략할 수 없다
함수 선언문은 표현식이 아니다 -> 변수에 할당 불가능
함수 이름과 동일한 식별자를 암묵적으로 생성하고 함수 객체를 할당함
함수는 함수 이름으로 호출하는 것이 아니고 함수 객체를 가르키는 식별자로 호출

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

함수 리터럴과 형태가 같은데 함수 리터럴은 변수에 할당이 되는 이유 ?
자바스크립트 엔진이 코드 문맥에 따라 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석하고 피연산자로 사용하면 함수 리터럴 표현식으로 해석하기 때문

함수 표현식

함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식
함수는 일급 객체이기 때문에 값으로 취급이 가능 -> 변수에 할당 가능

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

함수 생성 시점과 함수 호이스팅

함수 선언문과 함수 표현식의 차이점 : 함수의 생성 시점이 다르다

함수 선언문은 런타임 이전에 함수 객체가 생성이 완료 되지만
함수 표현식은 변수에 함수 리터럴을 할당했기 때문에 변수가 먼저 호이스팅되고 런타임 때 함수 리터럴이 평가되어 함수 객체가 생성되어 할당됨

함수 선언문을 사용하면 함수 호이스팅 때문에 선언 이전에 호출이 가능한데
이는 이상한 것이기 때문에 함수 표현식을 사용하는 것을 권장

Function 생성자 함수

클로저를 생성하지 않아 함수 선언문, 함수 표현식과는 다르게 동작함

const add = (function(){
    const x = 10;
    return new Function('a','b','return x+a+b;');
}());

add(1,2); // Uncaught ReferenceError: x is not defined

화살표 함수

표현도 간략, 내부 동작도 간략
생성자 함수로 사용 불가
this가 가르키는 것이 없음
prototype 프로퍼티가 없음
arguments 객체 생성 X

함수 호출

함수 호출 연산자로 호출 : ( )
호출 시 현재 실행 흐름을 중단하고 함수 내부로 실행 흐름을 옮김

매개변수와 인수

매개변수는 함수 내부에서 변수와 동일하게 취급
함수 호출 시 매개변수가 생성되고 undefined로 초기화 된 후 인수가 할당됨
인수들은 arguments 객체의 프로퍼티로 보관됨

인수 확인

함수를 정의할 때 생각한대로 인수가 전달이 안되면 에러 발생
단축평가나 매개변수 기본값을 설정하여 에러를 피한다

// 숫자 + undefined = NaN 피하기
function sum(a,b){
	a = a || 0;
    b = b || 0;
    return a+b;
}

function sum(a=0,b=0){
	return a+b;
}

매개변수의 최대 개수

이상적인 매개변수의 개수는 0개
함수는 한가지 일만 하도록 가장 적게 정의해야함

반환문

함수 호출은 표현식이다
반환문 생략시 return undefined

참조에 의한 전달과 외부 상태의 변경

인수로 원시 타입을 전달하면 원본이 변경되지 않지만
인수로 객체를 전달해서 함수 내부에서 조작하면 원본이 변경됨

다양한 함수의 형태

즉시 실행 함수

함수 정의와 동시에 즉시 단 한번만 호출되는 함수
반드시 () 그룹 연산자로 감싸야함

(function(){
	...
}());

재귀 함수

스택 오버플로 에러를 발생시킬 수 있으므로 주의

중첩 함수

함수 내부에 정의된 함수, = 내부함수
중첩 함수는 자신이 정의된 외부 함수 내부에서만 호출 가능

콜백 함수

함수의 매개변수를 통해 다른 함수 내부로 전달되는 함수
콜백 함수를 전달받는 함수 : 고차 함수

콜백 함수가 고차 함수 내부에서만 호출된다면 익명 함수 리터럴로 정의하는게 일반적인 방법
but 고차 함수가 호출될 때마다 콜백 함수로 전달한 리터럴이 평가되어 함수 객체를 생성하기 때문에 고차 함수가 반복적으로 호출되면 콜백 함수를 따로 정의해서 식별자를 인수로 전달하는 것이 효율적

순수 함수와 비순수 함수

순수 함수 : 외부의 상태에 의존하지 않고, 외부의 상태를 변경하지도 않는 함수
비순수 함수 : 외부 상태에 의존하고, 외부 상태를 변경시키는 함수

함수형 프로그래밍

순수 함수를 통해 외부 상태를 변경하는 부수 효과를 최소화해서 불변성을 지향하는 프로그래밍 패러다임
조건문, 반복문을 제거해서 복잡성 해결
변수 사용 억제, 생명주기를 최소화하여 상태 변경을 피해 오류 최소화

이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스(2021)

HustleKang

grindin'

이전 포스트

모던 자바스크립트 Deep Dive 45장-프로미스

다음 포스트

모던 자바스크립트 Deep Dive 12장-함수