[공부 필기] JavaScript 문법 공부 16일차 (1)

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/function-expressions

함수 표현식

 

✅ 함수 표현식

- 자바스크립트는 함수를 특별한 종류의 값으로 취급한다.

   » 다른 언어에서는 '특별한 동작을 하는 구조'로 취급하지만, 자바스크립트에서는 아니다.

 

- 이전에서 배운 함수 선언문 방식 (예시)

function pow(base, factor) {
	let result = 1;

	for (let i = 0; i < factor; i++) {
		result *= base;
	}
	return (result);
}

 

- 함수 선언 방식 외에 함수 표현식을 사용해서 함수를 만들 수 있다.

- 함수 표현식 예시

let pow = function(base, factor) {
	let result = 1;

	for (let i = 0; i < factor; i++) {
		result *= base;
	}
	return (result);
};

- 위의 코드는 함수가 변수에 할당된 것

 

- 함수가 어떤 방식으로 만들어졌는지 관계없이 함수는 값(특별한 종류의 값)이고, 변수에 할당할 수 있다.

- 참고로 자바스크립트는 "괄호"가 있어야만 함수가 호출된다. 매개변수가 없어도(=void) 괄호는 있어야 한다.

 

# 만약 괄호 없는 함수를 화면에 출력해보면 다음과 같은 모습이 나온다.

let pow = function(base, factor) {
	let result = 1;

	for (let i = 0; i < factor; i++) {
		result *= base;
	}
	return (result);
};

console.log(pow);

 

 

- 함수는 결국 값이기 때문에, 값에 할 수 있는 일을 함수에도 할 수 있다.

- 예를 들면, 함수 복사!

let pow = function(base, factor) {
	let result = 1;

	for (let i = 0; i < factor; i++) {
		result *= base;
	}
	return (result);
};

let copyPow = pow; // 함수 복사

console.log(copyPow(3, 2)); // 9

console.log(pow(3, 2)); // 9

   » 위의 코드 과정

   » 처음에 pow라는 함수를 생성하고 pow라는 변수에 저장된다.

   » pow를 새로운 변수 copyPow에 복사한다. (이때, pow 뒤에 소괄호가 없다는 것을 유의해야한다)

      만약 소괄호를 붙여버리면 함수 그 자체가 아니라, 함수 호출 결과가 copyPow에 저장되어버린다.

 

 

# 함수 표현식에는 끝에 세미 콜론이 붙는다.

let pow = function(base, factor) {
	let result = 1;

	for (let i = 0; i < factor; i++) {
		result *= base;
	}
	return (result);
}; // 세미콜론 붙임

- 왜 붙이냐면 함수 표현식은 코드 블록이 아니고, 값처럼 취급되어 변수에 할당되는 것이기 때문이다.

- if { ... } , for { ... } 등은 코드 블록이며 끝에 세미콜론이 없어도 된다.

 

 

✅ 콜백 함수

- 매개변수가 3개 있는 함수 ask가 있다.

   » 여기에서 ask의 매개변수 3개 중 두번째, 세번째는 함수(function)라고 가정한다.

function ask(question, yes, no) {
	if (confirm(question)) yes();
	else no();
}
...

ask("동의하십니까?", showOk, showCancel);

// 출처 : 모던 자바스크립트 https://ko.javascript.info/arrow-functions-basics

 

- ask 함수의 두번째 인자인 showOk와 세번째 인자인 showCancel를 콜백 함수(또는 콜백)이라고 부른다.

 

- 콜백함수는

   » 함수를 함수의 인자로 전달

   » 필요하다면 인자로 전달한 함수를 '나중에 호출(called back)' 하는 것이다.

- 위의 코드는 사용자가 "yes"를 대답하면, showOk라는 함수가 콜백되고,

   "no"라고 대답하면, showCancel이라는 함수가 콜백된다.

 

- 아래와 같이 짧게 작성할 수도 있다.

  » 이때, 두번째와 세번째 인자(함수)는 익명함수라고 한다.

 

function ask(question, yes, no) {
	if (confirm(question)) yes();
	else no();
}

ask("동의하십니까?", function() { alert("동의하셨습니다."); }, function() { alert("취소 버튼을 누르셨습니다."); });

// 출처 : 모던 자바스크립트 (https://ko.javascript.info/function-expressions)

 

- (익명함수이자) ask의 두번째, 세번째 인자는 ask 바깥에선 접근할 수 없다.

- 위의 코드는 그렇게 의도를 가지고 구현했기 때문에 바깥에서 접근할 수 없어도 문제가 없는 코드라고 한다.

 

 

※ 함수는 동작을 나타내는 값

- 문자열, 숫자가 일반적인 값("Hello", 1, 0, true 등)을 나타내는 데이터라면

- 함수는 하나의 "동작"을 나타내는 값이다.

 

✅ 함수 표현식 vs 함수 선언문

- 두 표현 방법의 차이는 아래와 같다.

 

- 첫번째 : 문법

   » 함수 선언문 : 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.

   » 함수 표현식 : 표현식이나 구문 구성(syntax construct) 내부에 생성된다.

 

- 두번째 : 자바스크립트 엔진이 언제 함수를 생성하는가

  » 함수 선언문 : 함수 선언문이 정의되기 전에 호출될 수도 있다.

      (즉, 함수 표현식과 다르게 함수 선언문이 스크립트 어디에 있어도 상관없이 사용할 수 있다.)

  » 함수 표현식 : 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다.

      (let pow = function { ... }가 있다면, 우측에 도달했을 때, 함수가 생성된다.

       그 이후부터 해당 함수를 사용할 수 있다.)

 

- 세번째 : 스코프

   » 엄격 모드(use strict)에서 함수 선언문 :

       코드 블록 내에 위치하면, 해당 함수는 블록 내 어디서든 접근할 수 있다.

       하지만 블록 밖에서는 함수에 접근하지 못한다.

   » 아래의 코드는 if { ... } else { ... } 코드 블록 안에서 함수 선언문을 통해 조건에 따라 다르게 함수를 정의했으며

       해당 코드 블록 안에서만 유효하다.

   » 만약 아래의 코드를 실행하면, prompt가 실행되며 if의 코드 혹은 else의 코드 중 하나가 실행된다.

       하지만, isLimit();는 동작하지 않는다.

"use strict";

if (prompt("나이를 입력하세요", "1") < 20) {
	function isLimit() {
		alert("최대 한도가 제한됩니다.");
	}
}
else {
	function isLimit() {
		alert("제한 없이 사용할 수 있습니다.");
	}
}

console.log(isLimit); // isLimit is not defined (Error)

 

   » 엄격 모드(use strict)에서의 함수 표현식 :

       변수에 함수를 할당하기 때문에, 전역 변수(외부 변수)에 함수를 할당하게 되면 코드 블록 밖에서도 접근할 수 있다.

"use strict";

let isLimit;

if (prompt("나이를 입력하세요", "1") < 20) {
	isLimit = function() {
		alert("최대 한도가 제한됩니다.");
	}
}
else {
	isLimit = function() {
		alert("제한 없이 사용할 수 있습니다.");
	}
}

console.log(isLimit);

 

 

※ 두번째와 같은 현상이 발생하는 이유는 자바스크립트의 내부 알고리즘 때문이라고 한다.

자바스크립트는 스크립트를 실행하기 전,

- 준비단계에서 전역에 선언된 함수 선언문을 찾고

- 해당 함수를 생성한다.

(스크립트가 진짜 실행되기 전, 초기화 단계를 수행하는데, 이때 함수 선언 방식으로 정의한 함수를 생성한다.)

- 그 다음에 스크립트가 진짜로 실행된다.