JavaScript - 함수

uk·2022년 9월 12일

목록 보기

3/19

함수(Function)란?

함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미하고 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

함수를 선언하기 위해서는 keyword, name, parameter, body가 필요하다

함수는 하나의 작은 기능 단위로 묶여있으며 항상 출력값을 반환(return)한다.

함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

함수도 하나의 타입이므로 변수에 대입하거나 property를 지정하는 것도 가능하다.

함수는 다른 함수 내에 중첩되어 정의될 수도 있다.

함수의 문법

function 함수이름(매개변수1, 매개변수2,...) {
    // 함수가 호출되었을 때 실행하고자 하는 실행문;
    // return;
}

자바스크립트에서 함수의 정의는 function 키워드로 시작된다.
함수 이름은 함수를 구분하는 식별자이다.
매개변수(parameter)란 함수를 호출할 때 전달 인자(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.
반환문(return)을 통해 함수의 실행을 중단하고 실행문(body)의 값을 반환한다.

함수의 호출

정의된 함수는 프로그램 내에서 호출되어야 실행이된다.

// 함수의 정의
function sum(a, b) { 
	return a + b;
}

// 함수의 호출
sum(10, 5);  // 15

함수 Num()을 호출하면서 전달 인자로 3과 5를 전달한다.
함수에서 정의된 매개변수 a와 b에 각각 대입된다.
함수 내부의 실행문이 실행되고 return을 통해 값을 반환한다.

함수 선언식(Function Declaration)

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

함수 선언문은 반드시 함수 이름이 명시되어 있어야 한다.
함수 이름으로 함수를 호출한다. // ex) sum();
함수 선언식으로 선언된 함수는 호이스팅이 된다.

함수 표현식(Function Expression)

const sum1 = function (a, b) {
	return a + b;
}

유연한 자바스크립트 언어의 특징을 활용한 선언 방식으로 함수를 변수에 할당하는 방법을 함수 표현식이라고 한다. 함수의 참조값이 sum1 변수에 저장된다.
변수에 익명 함수를 할당하고 따로 함수명이 필요하지 않다. 함수가 할당된 변수 sum1을 통해 호출할 수 있다.
함수 표현식으로 선언된 함수는 호이스팅이 되지 않는다.
함수 선언식보다 깔끔하고 가독성이 높으며 클로저로 사용될 수 있다.

화살표 함수(Arrow Function)

const sum2 = (x, y) => { return x + y; };

ES6 부터 추가된 화살표 함수는 함수 표현식(익명 함수)의 단축 표현이다.
그러나 함수 표현식과 완전히 같은 건 아니므로 주의해야 한다.
기존의 함수 표현식에서 function 키워드를 삭제하고 인자를 받는 매개변수의 괄호( )와 코드 블록{ } 사이에 화살표 =>를 넣어 사용한다.
함수의 body에 return만 있는 경우 return과 { }를 생략할 수 있다. 단, 반드시 둘 다 생략해야하고 표현식이 2줄 이상인 경우 생략할 수 없다.

const sum3 = (x, y) => x + y;

함수의 인자를 하나만 받는다면 소괄호()도 생략 가능하고 인자가 아예 없는 경우는 생략할 수 없다.

const num = x => x;

호이스팅(Hoisting)이란?

호이스팅은 '끌어 올리다' 라는 뜻으로 변수나 함수의 선언을 유효 범위(Scope)의 최상단으로 끌어올려지는 것과 같이 동작하는 것이다. 코드가 실제로 이동하진 않으며 변수나 함수를 하단에 선언해도 상단에서 호출할 수 있는 JavaScript만의 특징이다.

코드가 실행되기 전에 자바스크립트 엔진이 파일을 읽으면서 선언된 변수와 함수들을 메모리에 저장한다. 이후 코드가 실행되면 필요한 변수들을 메모리에서 꺼내서 전달한다. 하지만 변수의 값은 코드가 실행되어야 알 수 있기 때문에 메모리에 값이 저장되지 않고 undefined가 할당된다.

변수와 함수 상관없이 호이스팅이 발생하는데 함수가 변수이기 때문이다.

var

console.log(a);  // undefined
var a = 10;

// 실제 동작
var a;
console.log(a);
a = 10;

변수를 선언하기 전에 사용할 수 있으며 할당은 호이스팅되지 않고 선언만 호이스팅되기 때문에 때문에 undefined로 초기화된다.

함수 선언식

// 함수 선언 전에 호출되어도 정상적으로 동작
test();  // true 

function test() { 
	return true; 
}

함수 표현식

test1();  // TypeError: test1 is not a function

var test1 = function () {
	return true;
}

함수 선언문으로 선언된 함수는 런타임 이전에 함수 객체가 생성이 되므로 함수 호이스팅이 발생해 함수가 정의되기 전에 함수를 호출할 수 있다.
함수 표현식으로 선언된 함수는 변수 호이스팅이 발생하고 undefined로 초기화 되므로 함수로 인식하지 않기 때문에 TypeError: test1 is not a function 에러가 출력된다.

var가 아닌 let, const로 선언 시

test2();  // ReferenceError: test2 is not defined

const test2 = function () {
	return true;
}


const a = 5;

function test1() {
  console.log(a);  // 5
}

function test2() {
  console.log(a);  // Uncaught ReferenceError: Cannot access 'a' before initialization (TDZ)
  
  const a = 10;
}

let, const는 호이스팅 대상이 아니기 때문에 에러가 발생한다.
하지만 엄밀히 말하면 let이나 const로 선언할 경우 호이스팅을 지원하지 않는 것이 아닌 코드를 선언하는 구문에 도달하기 전에는 변수를 사용하지 못하도록 하는 기능(TDZ, Temporal Dead Zone)이 추가된 것이다.

호이스팅 대상

var, 함수 선언문은 호이스팅 대상이다.
let, const, 함수 표현식, 화살표 함수는 해당되지 않는다.