04. 자바스크립트 함수 리터럴, 표현식, 선언, 함수 호이스팅

안녕하세요 좋아요요정입니다.

코딩을 하다보면 숨을 쉬듯 함수를 생성하고, 사용하게 됩니다. 너무 자연스럽게 같은 모양으로 생성하며 사용하고 있었죠.

그런데 함수의 선언에도 기본 선언문, 표현식, 익명 함수 등 종류가 다양하다는 사실 알고 계셨나요?

함수의 생성 시점과 메모리는 이를 어떻게 저장하는지, 매개변수와 인수, 반환,  즉시 실행함수, 재귀 함수, 화살표 함수가 무엇인지!

오늘은 자바스크립트에서 가장 중요한 핵심 개념인 함수에 대해 작성해보겠습니다! 

 

 

 

---

자바스크립트의 함수

함수란?

 

프로그래밍에서 함수란 실행 로직의 작업을 수행하기 위해 독립적으로 설계된 프로그램 코드의 집합으로 정의할 수 있습니다.

입력되는 값으로 특정 로직을 실행하고, 그에 대응하는 값, 결과물을 출력하는 코드 블록입니다.

위의 이미지를 코드로 표현하면 이와 같습니다.

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

add(2, 5) //7

1. add라는 이름을 가진 함수는  x, y의 매개변수를 받습니다. 그리고 x + y의 결과값을 반환해줍니다.
2. add함수를 호출하며 넣어준 인자값 (2, 5)은 => 각각 ( x, y)에 대입되어 2+5의 결과값인 7을 반환해줍니다.

 

 

함수 선언

조금 더 자세하게 알아보겠습니다. 먼저 함수를 사용하기 위해서는 함수를 선언해주어야 합니다. 

function 키워드를 작성하고, 함수 이름과 (매개변수 목록)을 작성한 후 { 코드블럭 }을 작성합니다. 

function 함수이름(매개변수 목록) {
	함수 실행부
}

function 키워드

function 키워드를 작성하면 함수를 정의한다고 선언해줍니다.

 

함수 이름

함수 이름은 function과 ()사이에 정의하고 이를 통해서 함수를 식별할 수 있습니다.

메모리상에서 함수가 저장된 위치를 찾는 식별자 역할을 합니다. 함수 이름을 정의하지 않은 익명함수도 존재합니다. 

 

매개변수 목록

함수 이름 옆에 () 소괄호 내부에 들어갑니다. 매개변수가 없는 함수도 존재합니다.

선언 시 매개변수 목록을 정의하면 함수를 호출할 때 인자값을 전달할 수 있고, 함수의 기능을 파악하는데 도움이 됩니다.

 

함수 실행부

함수가 호출되면 실행되는 몸통부 코드블럭을 작성해줍니다.

 

 

 

함수 호출

함수는 선언할 때 선언 후 함수가 바로 실행되지 않습니다. 함수를 사용하기 위해서는 함수를의 식별자를 이용해 호출해주어야 합니다.

함수이름(인자 목록)

이때 매개변수에 전달할 값을 인자 목록에 작성해줄 수 있습니다. 순차적으로 매개됩니다. 반복 사용하는 코드를 함수로 만들어 필요할 때마다 호출할 수 있습니다. 반복되는 코드블럭을 식별자 호출만으로 편하게 재사용이 가능합니다.

 

 

 

 

함수 리터럴

위에 함수 선언의 함수 이름 부분에서 언급했듯이 자바스크립트 함수는 식별자 없이 함수 그 자체를 객체 타입의 값으로 리터럴로 생성이 가능합니다. 식별자가 있는 함수를 문맥에 따라 값으로 보관할 수도 있고, 식별자가 없는 익명함수로도 사용이 가능합니다.

익명함수는 키워드와 매개변수 목록, 그리고 코드 실행부로 이루어져 있습니다.

function(매개변수 목록) {
	코드 실행부
}

위에 선언된 모양과 다르죠? 그렇다면 식별자가 없는 함수는 어떻게 호출할 수 있을까요? 

객체 타입의 값으로 생성된 함수 리터럴의 레퍼런스를 변수에 대입해줌으로써 , 변수명(인자목록) 의 방법으로도 호출이 가능하고, 한번만 호출하고 다시 호출할 수 없는 즉시 실행 함수 (함수 리터럴)으로도 호출할 수 있습니다.

 

 

 

 

함수의 선언문과 표현식

함수를 사용하기 위해서는 함수를 미리 정의해 선언해 두어야 합니다. 매개변수와 실행할 로직, 그리고 반환할 값을 미리 지정해둘 수 있습니다. 함수를 정의하는 방법으로는 아래 4가지 방법이 있습니다.

 

1. 함수 선언문

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

add(2, 5) //7

일반적으로 다른 개발 언어와 비슷하게 사용하는 함수 선언문입니다.

함수 선언문에서는 함수 이름을 생략할 수 없습니다. 자바스크립트에서는 함수 선언문이 변수에 할당될 수 있도록 하기도 합니다. 

 

함수 표현식으로 선언된 함수의 경우 함수이름으로 호출이 불가합니다.

다만 변수 내부에 생성되는 함수 이름은 식별자의 역할이 아니기 때문에 호출할 수 없습니다. 변수에 대입된 함수는 데이터 값 자체, 함수 리터럴로 보관되기 때문에 add2()로 호출이 가능합니다. 

함수 이름 유무뿐만 아니라 문맥에 따라 함수 선언문을 리터럴로 해석할 수도 있습니다. 문맥에 따라 함수가 내부 동작에 차이가 있습니다.

오 헷깔리죠? 네!

 

예제를 한번 보겠습니다. 

function log(text) { console.log(text); }
log('안녕하세요');
log('좋아요요정입니다.');
(function greet() { console.log('신난다 코드좋아')})
greet()

 

함수 선언문의 재사용

line 1~3의 함수선언문을 이용한 함수는 선언 이후 함수이름을 이용해 호출해서 재사용할 수 있습니다

 

즉시 실행함수의 사용

line 4번의 경우 () 그룹 연산자 내에서 선언된 함수는 즉시 실행됩니다. 함수의 값 자체를 출력하는 것을 볼 수 있죠.

 

외부에서 호출이 불가능

() 그룹 연산자 내에서 선언된 함수의 모양은 함수 선언문과 같지만, 함수 선언문처럼 외부에서 함수 이름으로 호출할 수 없습니다. 

greet()의 경우 연산자로 평가되었가 되었기 때문에 함수를 가리킬 수 있는 식별자가 존재하지 않습니다. 따라서 최초 평가단계에서 생성이 되지만, 이를 외부에서 호출할 수 있도록 가리키는 식별자가 없기 때문에 호출이 불가능 합니다.

 

 

하나의 예를 더 보겠습니다.

if(function ok(){return true;}) {
	console.log('ok')
}

if문의 조건식에서 함수를 사용하면 어떻게 될까요? 

 

 

조건문 내에 선언되어 있지만, 외부에서 호출은 불가능합니다.

 

조건문  if()내에서 함수를 선언할 경우 즉시 실행되어 ok값을 반환하는 것을 볼 수 있습니다.

그러나 함수의 이름이 있음에도 외부에서는 호출이 불가능한 것을 볼 수 있습니다. 결론은 함수 선언문의 모양이 동일해도 문맥에 따라 값으로 평가될 수 있으며, 선언된 함수 이름이 식별자의 역할을 하지 않는 경우도 있다는 것을 알게 되었습니다.

 

 

 

 

2. 함수 표현식

const 변수명 = function(매개변수 목록) {
	코드 실행부
}

변수명(인수 목록)

자바스크립트의 함수는 일급 객체임으로 변수에 할당이 가능합니다. 함수를 변수에 대입하며 선언하는 방식을 함수 표현식이라고 합니다. 함수 표현식에서 함수 호출은 선언된 변수명으로 할 수 있습니다. 

함수 표현식으로 활용하는 경우 함수의 이름을 생략해 익명함수로 사용하는 것이 일반적인 형태입니다. 위의 예제에서 보셨듯이 함수 표현식에 값 자체로 할당해줄 경우 함수 이름을 작성해도 함수 이름은 식별자의 역할을 하지 못하기 때문입니다.

 

 

 

 

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

console.log(add)
console.log(plus)

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

위의 코드를 보시면 함수가 선언되기 이전에 함수를 호출하고 있습니다.

결과는 어떻게 나올까요?

 

함수 선언문으로 정의한 경우, 선언 전 함수가 이미 생성되었습니다.

함수의 호출까지 가능합니다

함수 선언문으로 정의한 함수는 함수 선언 전에 호출할 수 있습니다. 그러나 함수 표현식으로 정의한 함수는 ReferenceError가 출력됩니다. 이유는 이 둘의 함수 생성 시점이 다르기 때문입니다.

함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 함수 객체가 먼저 생성이 됩니다. 코드가 실행될 시 이미 생성된 함수의 객체를 참조할 수 있으며 심지어 호출까지 가능합니다. 함수 선언문이 코드의 최상단으로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유 특징을 함수 호이스팅이라고 합니다.

 

 

 

 

 

---

함수 리터럴에 대해서 처음 이해하게 되었습니다. 스터디 강의를 들을 당시에는 표현식과 함수 리터럴의 차이점에 대해 헷깔렸습니다. 이전에는 리터럴을 선언하는 방식으로 이해했기 때문입니다. 스터디를 진행하는 hoon님에게 추가적으로 더 질문을 드렸고, 함수 표현식은 함수 리터럴과 식별자,  함수 리터럴은 그냥 함수 인스턴스 생성 그 자체라는 답변에 아하! 하게 되었습니다. 👍

 

함수를 늘 사용하고 있어서 잘 알고있다고 생각했는데.. 아이패드로 유튜브만 보던 기분이네요.  함수를 좀 더 자세히 알고, 적재적소에 사용할 수 있도록! :) 열심히 더 공부해야겠습니다. 

다음 게시글에서는 함수의 매개변수와 인자에 대해 좀 더 자세한 내용, 재귀 함수 등의 다양한 함수의 형태들을 작성해보겠습니다.

행복한 코딩라이프되세요 감사합니다! 

 

 

 

 

JavaScript 스터디 팀 러버덕과 함께 합니다.