Chapter 15

15-1 함수 알아보기

여러 동작을 묶은 덩어리, 함수

함수는 동작해야 할 목적대로 묶은 명령이다. 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있다.

함수는 왜 사용할까?

함수 선언 및 호출

함수를 사용하는 가장 기본적인 방법은 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 사용해 실행하는 것

함수 선언 방법

/* 기본형 */
function 함수명() {
	/* 명령 */
}

함수 호출 방법

/* 기본형 */
함수명() 또는 함수명(변수)

15-2. var를 이용한 변수의 특징

변수의 적용 범위 스코프 알아보기

자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 스코프라고 한다. 지역 변수 / 전역 변수

함수 안에서만 쓸 수 있는 지역 변수

스크립트 안에서 자유롭게 쓸 수 있는 전역 변수

전역 변수로 사용하려면 함수 밖에서 선언하거나 함수 안에서는 var 예약어를 빼고 선언해야 한다. 함수 안에서 선언한 변수라 하더라도 var 예약어를 사용하지 않으면 전역변수가 된다.

var와 호이스팅

자바스크립트에서 변수를 사용할 때 조심해야 할 개념이 있다. 바로 호이스팅hoisting이다. 호이스팅이란 '끌어올린다'를 뜻한다. 상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것이다. 소스를 그런식으로 해석한다는 의미인데, 예제를 보며 이해해보자.

var x = 10;

function displayNumber() {
	console.log("x is " + x);
	console.log("y is " + y);
	var y = 20;
}

위의 예제를 실행하면 변수 y가 선언되지 않았다는 오류가 발생할 것 같지만 아니다. 오히려 "y is undefined"라고 출력된다. 이런 결과가 나타난 것은 바로 변수 호이스팅 때문이다. 자바스크립트 해석기는 함수 소스를 훑어보며 var를 사용한 변수는 따로 기억해둔다. 즉 변수를 실행하기 전이지만 이것을 기억해 두기 때문에 미리 선언한 것과 같은 효과가 있는 것이다. 이것이 바로 변수 호이스팅이다.

위의 코드를 해석기는 다음과 같이 인식한다.

var x = 10;

function displayNumber() {
	var y;
	console.log("x is " + x);
	console.log("y is " + y);
	y = 20;
}

변수의 재선언과 재할당

var를 사용한 변수는 호이스팅 외에도 재선언과 재할당을 할 수 있다. 재선언과 재할당이 무엇인지 예제를 통해 살펴보자.

function addNumber(num1, num2) {
	return num1 + num2;
}

var sum = addNumber(10, 20);           // 선언 및 할당
console.log(sum);
sum = 50;                              // 재할당
consol.log(sum);
var sum = 100;                         // 재선언
console.log(sum);

image

15-3. let과 const의 등장

let을 사용한 변수의 특징

var 예약어를 빠트리면 의도치 않게 전역 변수가 되기도 하고, 프로그램 길이가 길어지면 사용하는 변수를 재선언하거나 값을 재할당해 버리는 경우가 생기기도 한다. 변수를 선언하기 위한 예약어로 let과 const가 추가되었으며, 되도록이면 var예약어는 사용하지 않을 것을 권장한다. 예약어 var와 let, const의 가장 큰 차이는 스코프의 범위이다. var는 함수 영역(레벨)의 스코프를 가지지만 let과 const는 블록 영역의 스코프를 가진다.

블록 안에서만 쓸 수 있는 변수

let 예약어로 선언한 변수는 변수를 선언한 블록({ }로 묶은 부분)에서만 유효하고 블록을 벗어나면 사용할 수 없다.

재할당은 가능하지면 재선언은 할 수 없는 변수

let 예약어를 사용하여 선언한 변수는 값을 재할당할 수는 있지만 변수를 재선언할 수는 없다.

호이스팅이 없는 변수

var 예약어를 사용한 변수와 달리 let 예약어를 사용한 변수는 선언하기 전 사용할 경우 오류 메시지를 나타낸다.

그렇다면 let 예약어를 이용한 전역변수는 불가능한 것일까?

참조 링크 가능하다. 단, 임의의 블록 레벨로 생각하기 때문에 let을 이용한 전역 변수 a를 선언하더라도 다른 함수 내부에서 a에 대한 접근이 불가능하다.

let foo = 123; // 전역 변수 
{
  let foo = 456; // 지역 변수
  let bar = 456; // 지역 변수
}

console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

const를 사용한 변수의 특징

const 역시 let과 마찬가지로 변수를 선언할 때 사용하는 예약어이다. 이름에서 예상할 수 있듯이 const로 선언한 변수는 상수 변수이다. 프로그램 안에서 특정한 상숫값을 자주 사용한다면 변수에 담아서 사용하는 것이 편리하다. const로 할당한 변수는 재선언하거나 재할당할 수 없으며, let 예약어를 사용한 변수처럼 블록 레벨의 스코프를 가진다.

자바스크립트 변수, 이렇게 사용하세요

자바스크립트는 유연성이 많아 편리한 언어이다. 다만 이런 편의성은 가독성이 떨어지거나 디버깅을 하기 어렵게 만든다. 자바스크립트 문법은 벗어나지 않으면서 가독성과 디버깅을 하기 쉽도록 변수 사용 방법을 정리해 보자.

전역 변수는 최소한으로 사용한다.

전역 변수는 프로그램 어디서든 접근할 수 있으므로 편리하게 사용할 수 있다. 그러나 예상하지 못한 곳에서 값이 달라질 수 있다. 따라서 오류가 발생할 확률이 높아지므로 젼역 변수는 되도록 적게 사용하는 것이 좋다.

var 변수는 함수의 시작 부분에서 선언한다.

var를 사용한 변수는 어디에서 선언하든 상관없지만 내부에서 호이스팅이 생기므로 오류가 발생할 수 있다. 따라서 var 변수는 함수 시작 부분에 선언하는 것이 변수를 확인하기도 쉽고 오류를 줄이는 방법이다.

for 문에서 카운터 변수를 사용할 때는 var 예약어를 사용하지 않는다.

for 문 안에서만 사용할 카운터 변수는 그 블록 안에서만 사용할 것이므로 가끔 var를 사용해서 선언하기도 한다. 하지만 이렇게 선언한다고 해서 블록 변수가 되는 것은 아니다. var 변수는 함수 레벨의 스코프이다.

/* 잘못된 예시 */
for (var i = 1; i <= n; i++) {    // i는 전역 변수가 된다.
	(...생략...)
}

ES6을 사용한다면 예약어 var보다 let을 사용하는 것이 좋다.

var를 사용한 변수는 재선언할 수 있으므로 실수로 변수를 다시 선언하더라도 오류가 발생하지 않는다. 이때 변수 중복의 문제가 있으므로, let을 사용하는 것이 좀 더 안전하다.

15-4 재사용할 수 있는 함수 만들기

매개변수, 인수, return 알아보기

매개 변수

함수 선언할 때 매개변수 지정하기

매개변수를 사용한 함수 선언하기

/* example */
function addNumber(num1, num2) {
	var sum = num1 + num2;
	return sum;
}

var result = addNumber(2, 3);
document.write("두 수를 더한 값 : " + result);
(...)

앞의 예제에서 함수를 선언하고 실행하는 과정은 다음과 같이 정리할 수 있다.

1. 자바스크립트 해석기가 function이라는 예약어를 만나면 함수를 선언하는 부분이라는 걸 인식하고 함수 블록({ })을 해석한다. 아직 실행하지는 않는다.

2. addNumber(2, 3)을 만나면 해석해 두었던 addNumber() 함수를 실행한다.

3. addNumber() 함수에서 2는 num1로, 3은 num2로 넘기고 더한 값을 sum 변수에 저장한다.

4. 함수 실행이 모두 끝나면 결괏값 sum을 함수 호출 위치, 즉 var result로 넘긴다.

5. 넘겨받은 결괏값을 result라는 변수에 저장한다.

6. result 변수에 있는 값을 화면에 표시한다.

매개변수 기본값 지정하기

ES6부터는 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생겼다. 예를 들어 다음과 같이 multiple() 함수에서 매개변수 b와 c의 변숫값을 넘겨받지 못했을 때 기본값을 사용한다.

function multiple(a, b = 5, c = 10) {
	return a * b + c;
}

이렇게 매개변수의 기본값을 지정한 multiple() 함수를 다음과 같이 호출할 수 있다. 이때 넘겨받는 인수에 따라 기본값을 사용한다.

multiple(5, 10, 20);	// a = 5, b = 10, c = 20
multiple(5, 10);		// a = 5, b = 10, c = 10(기본값)
multiple(5);			// a = 5, b = 5(기본값), c = 10(기본값)

15-5 함수 표현식

익명 함수

익명 함수는 이름이 없는 함수를 말한다. 즉, 익명 함수를 선언할 때는 이름을 붙이지 않는다.

/* 익명 함수 선언하기 */
function(a, b) {
	return a + b;
}

익명 함수는 이름이 없는데 어떻게 실행해야 할까? 익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 다른 함수의 매개변수로 사용할 수도 있다.

즉시 실행 함수

함수는 선언하고 필요할 때마다 호출해서 실행하는 방법을 많이 사용한다. 하지만 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행할 수 있다. 바로 즉시 실행 함수이다. 즉시 실행 함수는 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다.

즉시 실행 함수의 기본 형식은 다음과 같다. 함수를 식 형태로 선언하므로 마지막에 세미콜론(;)을 붙인다.

/* 기본형 */
(function() {
	명령
}());

또는

(function(매개변수) {
	명령
}(인수));

/* example */
(function() {
	var userName = prompt("이름을 입력하세요.");
	document.write("안녕하세요? <span class='accent'>" + userName + "</span>님!");
}());

만약 매개변수를 사용하는 함수라면 선언 부분 끝에 함수 실행을 위한 인수를 넣어 준다. 예를 들어 두 수를 더하는 함수는 다음과 같이 작성할 수 있다.

/* example */
(function(a, b) {
	sum = a + b;
}(100, 200));
document.write("함수 실행 결과: " + sum);

화살표 함수

ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있다. 이 방법은 간단히 화살표 함수라고 하는데, 익명 함수에서만 사용할 수 있다. 화살표 함수의 기본 형식은 다음과 같이 매개변수와 함수 내용으로 구성된다.

/* 기본형 */
(매개변수) => { 함수 내용 }

지금부터 매개변수의 개수에 따라 함수를 작성하는 방법과 화살표 함수의 표기법을 간단히 살펴보자.

매개변수가 없을 경우

매개변수가 없는 경우 매개변수를 넣는 괄호 안은 비워 둔다. 예를 들어 매개변수 없이 간단한 인사말을 화면에 표시하는 함수는 다음과 같이 작성할 수 있다.

/* example */
const hi = function() {
	return "안녕하세요?";
}

이 함수를 화살표 함수로 작성하면 다음과 같다.

/* example */
const hi = () => { return "안녕하세요?" };

그리고 중괄호 안에 함수 내용이 한 줄뿐이라면 중괄호를 생략해서 다음과 같이 작성할 수도 있다. 이때 return 문은 생략된 것으로 간주한다.

/* example */
const hi = () => "안녕하세요?";

매개변수가 1개인 경우

먼저 예제를 보자.

/* example */
let hi = function(user) {
	document.write(user + "님, 안녕하세요?");
}

매개변수가 하나인 경우 매개변수의 괄호는 생략할 수 있다. 위 함수를 화살표 함수로 작성하면 다음과 같다.

/* example */
let hi = user => { document.write(user + "님, 안녕하세요?"); }

매개변수가 2개 이상인 경우

매개변수가 둘 이상인 경우 화살표 함수는 (매개변수) => { ... }처럼 사용한다. 다음은 매개 변수가 2개인 경우에 사용하는 함수이다. 매개변수를 추가하려면 괄호 안에 쉼표(,)로 구분한다.

/* example - 매개변수가 2개인 함수 */
let sum = function(a, b) {
	return a + b;
}

/* example - 매개변수가 2개인 화살표 함수*/
let sum = (a, b) => a + b;

15-6 이벤트와 이벤트 처리기

대부분의 함수는 이벤트가 발생했을 때 실행된다. 이때 실행하는 함수를 '이벤트 처리기'라고 한다.

이벤트 알아보기

이벤트는 웹 브라우저나 사용자가 행하는 어던 동작을 말한다. 하지만 웹 브라우저 안에서 이루어지는 모든 동작이 이벤트는 아니다. 이벤트는 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 따라서 사용자가 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다.

자바스크립트의 이벤트는 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. 이제부터 자바스크립트의 주요 이벤트를 하나씩 살펴보자.

마우스 이벤트

마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생한다.

table_mouse

키보드 이벤트

키보드 이벤트는 키보드에서 특정 키를 조작할 때 발생한다.

table_keyboard

문서 로딩 이벤트

서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여 주는 것과 관련된 이벤트이다.

table_webpage

폼 이벤트

폼은 로그인, 검색 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소를 가리킨다.

table_form