[모던자바스크립트]04 프로그래밍 한발 더 나가기, 함수와 스코프

04-1. 프로그래밍의 꽃, 함수

함수: 동작해야 할 목적대로 여러 개의 명령을 묶는 것

 

함수를 사용하는 이유

• 처리해야할 기능이 많지만, 함수 없이 작성한다면 사용자가 입력할 때마다 같은 명령을 계속 반복해야함
• 하지만, 기능별로 함수를 따로 만들어 둔다면 필요할 때마다 적절한 함수를 사용해서 함수별로 실행할 수 있음

 

함수 선언하고 호출하기

• 자바스크립트에는 다양한 함수들이 미리 만들어져 있으므로 개발자는 해당 함수를 가져와서 사용만 하면 됨
• 함수를 선언할 때는 function이라는 예약어를 사용하고, 함수 이름을 적은 후 중괄호 안에 실행할 여러 개의 명령을 묶음
• 함수 이름을 적는 이유: 나중에 이름을 사용해 함수를 실행하기 위해서

function 함수명(){
	명령(들)
}

• 선언한 함수를 실행할 땐 함수 이름을 사용하여 호출함
• 호출할 때는 함수 이름 뒤에 꼭 소괄호(( ))를 붙여야 함
• 함수 선언 소스는 어디에 넣어도 상관 없음. 하지만 웹 브라우저에서 자바스크립트 소스를 해석할 때 변수 선언이나 함수 선언 부분을 가장 먼저 해석하므로 보통 함수를 선언하는 소스를 실행 소스보다 앞에 적음

 

매개변수와 인수, return 문

매개변수

• 매개변수: 함수를 선언할 때 외부에서 값을 받는 변수
• 함수 이름 옆 소괄호 안에 매개변수 이름을 넣음
• 매개변수는 선언된 함수에서만 사용하고, 함수에 여러 개의 매개변수가 필요할 때는 매개변수 사이에 쉼표(,)를 넣으면서 나열

 

인수

인수: 매개변수가 있는 함수를 호출할 때 실제로 값을 넘겨주는 것
(매개변수의 인수를 통틀어서 '인자'라고도 함)

function sum(a, b){		// a, b: 매개변수
	let result = a + b;
    alert(`두 수의 합: ${result}`)
}

sum(10, 20);	// 10, 20: 인수

 

return 문

• 함수에서 실행한 후 결과까지 처리할 수 있지만, 함수의 실행 결과를 받아 또 다시 처리해야 할 경우도 있음. 이때 함수의 실행 결과를 함수를 실행한 시점으로 넘겨줘야함 → '함수값을 반환한다'

 

기본 매개변수

• 에크마스크립트 2015부터 매개변수가 있는 함수를 선언할 때 매개변수의 기본값을 지정하는 기능도 생김
  → 함수를 실행할 때 인수가 부족하면 기본값을 사용함

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

console.log(multiple(5, 10, 20));	// a = 5, b = 10, c = 20
console.log(multiple(10, 20));		// a = 10, b = 20, c = 10(default)
console.log(multiple(10));			// a = 10, b = 5(default), c = 10(default)

 

 

04-2. 변수의 유효 범위, 스코프

스코프: 선언한 변수가 어느 범위까지 영향을 미치는지를 나타내는 것

 

스코프

• 스코프: 선언한 변수의 적용 범위를 가리킴 → 어느 위치에서 변수를 접근할 수 있는지를 가리킴
• 프로그램에서 변수를 선언하면 자바스크립트 해석기에서 소스를 읽어내려가면서 변수에 대한 스코프를 만듦
• var(변수 선언하는 예약어)로 선언한 변수는 크게 '지역 스코프'와 '전역 스코프'를 가짐

 

지역 스코프

• 변수의 특정 영역에서만 사용할 수 있을 때 '지역 스코프를 가지고 있다'고 말함 → '지역 변수'
• 함수 스코프: 변수를 선언한 함수에서만 해당 변수를 사용할 수 있다는 의미
  → 함수 안에서만 사용할 수 있는 지역 스코프가 됨

fuction sum(a, b){
	var result = a + b;
}
console.log(result);	// ReferenceError

• result 변수가 sum 함수 안에 선언되었으므로, result 변수는 함수 스코프를 가지고, 함수를 벗어나는 순간 result 변수의 스코프는 사라짐

 

전역 스코프

• 프로그램 시작 부분에서 변수를 선언하면 프로그램 전체에서 사용할 수 있는 스코프
• 전역 변수: 전역 스코프를 가지지는 변수

var hi = "hello";	// 전역 변수

function greeting(){
	console.log(hi);
}

greeting()

• 전역 변수는 함수의 어디에서나 값을 변경할 수 있음
• 하지만 공동 작업하는 프로그램의 경우 다른 함수에서 전역 변수를 수정하면 예상하지 못한 결과가 나올 수 있으므로 주의해야함
• 변수 이름 앞에 var 예약어를 붙이지 않으면 자바스크립트는 전역 변수로 인식함
• 이러한 문제로 전역 변수를 사용하지 않는 것이 가장 좋음
• let이나 const를 사용한 변수도 프로그램의 맨 앞에 선언하면 프로그램 전체에서 사용할 수 있음
  → '스크립트 스코프를 가진다' ('전역 스코프를 가진다'라고 하지 않음)

 

블록 스코프

• 자바스크립트의 블록: 중괄호({ })로 둘러싸인 영역을 가리킴
  블록 스코프: 블록별로 변수의 유효 범위가 결정되는 것
• let이나 const를 사용해 만든 변수는 기본적으로 변수가 선언된 블록에서만 유효함 → '블록 스코프를 가진다'
• 블록 변수: 블록 스코프를 가진 변수

const factor = 5;	// factor: 모든 블록에 사용 가능

function calc(){		// 첫번째 블록
	return num * factor;	// num 변수에 접근할 수 없음
}
{// 두번째 블록
    const num = 10;
    let result = calc();
    document.write(`result : ${result}`);
}

// 결과: ReferenceError

// 위의 코드 수정
const factor = 5;

function calc(num){
	return num * factor;
}
{
    let result = calc(10);
    document.write(`result : ${result}`);
}

 

 

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

자바스크립트

• 장점: 유연한 언어여서 다양하게 사용할 수 있는 부분이 많음
• 단점: 프로그램이 커질수록 가독성이나 디버깅이 어려워짐

→ 자바스크립트 문법을 벗어나지 않으면서 가독성을 높이고 디버깅이 쉽도록 변수를 사요하는 방법을 정리해 보자

 

① var 변수보다 let, const 변수를 사용한다

• var 변수는 다시 선언할 수 있어서 실수로 같은 변수를 다시 선언해도 오류가 발생하지 않음. 심지어 변수를 먼저 실행한 후 나중에 선언해도 오류가 발생하지 않음
• 공동 프로젝트라면 변수를 재선언할 수 없으므로 호이스팅 없는 let이나 const 변수를 사용하는 것이 안전함

 

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

• 전역 변수는 프로그램의 모든 곳에서 접근할 수 있어서 편리하게 사용할 수 있음
• 하지만 어디서든 값을 변경할 수 있으므로 예상하지 못한 곳에서 값이 달라질 수 있으므로 그만큼 오류가 발생할 확률이 높아짐
• 그러므로 전역 변수 사용을 줄이고, 프로그램에서 값이 변하지 않는다면 const로 선언하는 것이 좋음

 

③ 객체 선언은 const를 사용한다

• 객체를 선언할 때 프로그래밍 도중 객체 자체가 바뀌지 않도록 const를 사용해 선언함
• 객체를 const로 선언해도 객체 안에 있는 프로퍼티는 얼마든 수정 가능함

 

var 예약어를 사용할 경우, '전역 변수'와 '지역 변수'로만 나뉘고, 전역 변수는 자바스크립트의 최상위 객체인 window 객체에 저장됨 const나 let 예약어를 사용한 경우, 변수는 전역으로 사용할 때 스크립트에서 사용하는 스크립트 스코프를 가짐. 블록 안에서 선언한 변수는 블록안에서만 사용할 수 있음

 

 

04-3. 이름 없이 사용하는 함수 표현식

익명 함수

변수에 할당해서 사용하는 익명 함수

• 이름이 없는 함수의 경우, 함수를 변수에 할당해서 사용할 수 있음

let sum = function(a, b){
	return a + b;
}
console.log(`함수 실행 결과 : ${sum(10, 20)}`)

 

즉시 실행 함수

• 한 번만 실행하는 함수일 경우 함수를 정의하면서 동시에 실행할 수 있음

(function(a, b){
	let sum = a + b;
    console.log(`함수 실행 결과 : ${sum}`)
}(100, 200));	// 마지막 세미콜론(;) 붙이기

 

화살표 함수

• 에크마스크립트 2015 버전부터 => 표기법(화살표 표기법)을 사용해 함수를 좀 더 간단히 선언할 수 있게 됨
• '화살표 함수' 또는 '애로 펑션(arrow function)' 이라 부름

(매개변수) => {함수 내용}

 

매개변수가 없을 때

• 매개변수가 없을 때는 매개변수가 들어가는 소괄호 부분을 비워둠
• 함수에서 실행할 명령이 한 줄뿐이라면 중괄호({ })를 생략할 수 있음
• 한 줄 명령에 return 문이 포함되어 있다면 return도 생략 가능함

let hi = function(){
	return `안녕하세요?`;
}
hi()

// ↓

let hi = () => {return `안녕하세요?`};
hi();

// ↓

let hi() = () => `안녕하세요?`;
hi();

 

매개변수가 1개일 때

• 매개변수가 1개인 경우 매개변수와 소괄호를 생략해서 사용 가능함

let hi = function(user){
	console.log(`${user}님, 안녕하세요?`);
}
hi("홍길동");

// ↓

let hi = user => console.log(`${user}님, 안녕하세요?`);
hi("홍길동");

 

매개변수가 2개 이상일 때

• 매개변수가 2개 이상이면 (매개변수) => { ... }처럼 사용함

let sum = function(a, b){
	return a + b;
}
sum(10, 20);

// ↓

let sum = (a, b) => a + b;
sum(10, 20);

 

콜백 함수

• 콜백 함수: 다른 함수의 인수로 사용하는 함수

 

함수 이름 사용해 콜백 함수 실행하기

const bttn = document.querySelector("button");	// 버튼 요소를 가져옴

function display(){
	alert("클릭했습니다.");
}

bttn.addEventListener("click", display);	// 버튼을 클릭하면 display 함수를 실행함

• addEventListener() 함수에서 미리 선언한 display() 함수를 인수로 사용함
  → 이렇게 다른 함수의 인수가 되는 함수를 '콜백 함수' 라고 함
• addEventListener() 함수 안에 display() 함수를 넣을 때 함수 이름 다음 소괄호가 없음

 

함수에 직접 작성해서 콜백 함수 실행하기

• 함수 이름은 필요할 때마다 여러 번 사용해 실행하거나 콜백 함수로 사용할 수 있음
  하지만 딱 한 번만 함수를 실행한다면 따로 함수를 선언하지 않고 함수에 직접 콜백 함수를 작성할 수 있음 

const bttn = document.querySelector("button");	// 버튼 요소를 가져옴

bttn.addEventListener("click", () => {	// 버튼을 클릭하여 alert를 실행
	alert("클릭했습니다.");
});

 

자바스크립트 함수는 1급 시민

1. 변수에 할당할 수 있어야 한다
2. 다른 함수의 인자로 사용할 수 있어야 한다
3. 다른 함수에서 반환값으로 반환할 수 있어야 한다

 

변수에 함수 할당하기

let sum = (a, b) => a + b;
sum(2, 10);

// ↓

function add(a, b){
	return a + b;
}
let sum = add;	// add 뒤에 () 붙이지 X. 붙이면 함수를 실행한다는 뜻
sum(2, 10);

 

함수를 다른 함수로 전달하기

function hello(){
	return "안녕하세요?";
}
function bye(){
	return "안녕히 가세요.";
}

function userCheck(name, fn){	// fn 함수를 전달받아 실행
	console.log(`${name}님`, fn());
}

userCheck("홍길동", hello);	// 홍길동, 안녕하세요?
userCheck("도레미", bye);		// 도레미, 안녕히 가세요.

• hello() 함수를 미리 정의해 놓고 login() 함수를 실행할 때 fn 매개변수에 hello() 함수를 인수로 넘겨줄 수 있음

 

함수에서 다른 함수 반환하기

// init() 함수에서 다른 함수 반환하기
let ini = () => {
	return function(a, b){
    	return a - b > 0 ? a - b : b - a;
    }
}

// console.log(`init(30, 20) : ${init(30, 20)}`);	// (1)
console.log(`init()(30, 20) : ${init()(10, 20)}`);	// (2)

(1)의 결과

(2)의 결과

 

 

04-4. 전개 구문

전개 구문: 배열처럼 값이 다양한 자료를 한꺼번에 인수로 넘겨주거나 배열과 배열을 합할 때처럼 배열을 하나의 덩어리로 처리해야할 때 유용

 

전개 구문의 작성 방법

• 전개 구문이란, 말 그대로 '값은 펼쳐 주는' 구문

fruits = ["apple", "banana", "grape"]
console.log(fruits)
console.log(...fruits)

• '...' 기호를 사용
  → 문자열이나 배열, 객체처럼 여러 개의 값을 담고 있는 자료형에서 다른 정보는 필요 없고 그 안의 값만 꺼내 사용하려고 할 때 전개 구문 유용

 

나머지 매개변수

• 전개 구문은 함수를 선언할 때도 사용 가능
• 함수를 선언하면서 나중에 몇 개의 인수를 받게 될지 알 수 없는 경우 → 전개 구문을 사용해 매개변수 만듦 → '나머지 매개변수' 라고 함

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

addNum(1, 3);		// 4
addNum(1, 3, 5, 7);	// 4

• addNum(1, 3, 5, 7): 앞에서 2개의 인수만 사용하고 나머지 인수는 버림

function addNum(...numbers){
	let sum = 0;
    
    for(let number of numbers)
    	sum += number;
    
    return sum;
}

console.log(addNum(1, 3));		// 4
console.log(addNum(1, 3, 5, 7));	// 16

• 전개 구문을 사용해 매개변수를 하나의 이름으로 선언
  이렇게 하면 매개변수로 넘어온 값을 모두 펼쳐서 사용하게 됨

 

// 인수의 일부분만 나머지 매개변수로 받기
function displayFavorites(first, ...fav){
	let str = `가장 좋아하는 과일은 "${first}"군요`;
    return str;
}
console.log(displayFavorites("사과", "포도", "바나나"));

 

 

04-5. 시간을 고려하는 타이머 함수

• 자바스크립트에는 특정 시간이 되었을 때 함수를 실행하거나 특정 시간 동안 함수를 반복하기 위해 시간을 재는 함수가 있음 → 타이머 함수
• 타이머 함수: 실행할 함수와 시간을 지정하는 함수
  → 타이머 함수에 실행할 함수를 인수로 받기 때문에 콜백 함수를 매개변수로 사용함

 

일정 시간마다 반복하기 - setInterval()

• setInterval() : 일정한 시간마다 함수를 반복해서 실행하는 함수 (시간은 밀리초 단위 사용)
• 한 번 실행하면 웹 브라우저를 종료하기 전까지는 문서를 새로고침 하거나 다른 페이지로 이동해도 계속 실행됨

setInterval(콜백 함수, 시간)

 

function greeting(){
	console.log("안녕하세요?");
}
setInterval(greeting, 2000);	// 2초마다 greeting() 함수 호출

// ↓

setInterval(() => {
	console.log("안녕하세요?")
}, 2000);

 

반복 실행 멈추기 - clearInterval()

• 함수를 계속 반복하는 것이 아니라 특정 조건이 되었을 경우 반복 실행을 멈추려면 setInterval() 함수와 함께 clearInterval() 함수를 사용해야 함
• clearInterval() : 시작한 타이머를 종료하는 함수

clearInterval(타이머)

 

let counter = 0;

let timer = setInterval(() => {	// 타이머 시작
	console.log("안녕하세요?");
    counter++;	// 인사말 표시 횟수가 1 증가
    if(counter === 5)
    	clearInterval(tiemr);	// counter = 5이면 타이머를 종료
}, 2000);

 

특정 시간 이후에 실행하기 - setTimerout()

• setInterval() 함수는 일정한 시간마다 콜백 함수를 반복하지만, setTimerout() 함수는 지정한 시간이 지난 후 콜백 함수를 실행

setTimerout(콜백 함수, 시간)

 

setTimeout(() => {
	console.log("안녕하세요?")
}, 3000);	// 3초 후 인사말 표시됨

 

 

 

 

교재: Do it! 모던 자바스크립트 프로그래밍의 정석