[Do it! 모던 자바스크립트 프로그래밍의 정석] 04. 함수와 스코프

04. 함수와 스코프

함수 선언 & 실행

• 함수 선언할 때는 `function` 예약어 사용
• 함수 이름을 적은 후 안에 실행할 여러 명령어 묶음
• 함수를 실행(호출)할 때는 함수 이름 뒤에 중괄호 () 붙임

// 함수 선언
fucntion 함수명() {
	명령(들)
}

// 함수 실행
함수명()

 

---

매개변수와 인수

• 매개변수
  • 함수를 선언할 때 외부에서 값을 받는 변수
  • 함수 이름 옆의 괄호 안에 매개변수 이름을 넣어줌
  • 매개변수에 이름을 붙이는 방법 = 일반적인 변수 이름 붙이는 방법
  • 매개변수는 선언된 함수에서만 사용
  • 함수에 여러 개의 매개변수가 필요할 때에는 매개변수 사이에 쉼표(,)를 찍으면서 나열
• 인수
  • 매개변수가 있는 함수를 실행할 때, 매개변수로 값을 넘겨주는 함수

=> 매개변수와 인수 통틀어서 '인자'라고도 함 

---

return문

• 함수 안에서 실행하고 그 결과를 함수 밖에서 받아 처리해야 할 경우
• 결괏값을 반환한다(return): 함수의 실행 결과를 함수를 실행한 시점으로 넘겨주는 것
• 함수를 실행한 후 결과를 반환할 때는 예약어 `return` 다음에 넘겨줄 값 or 변수 지정

---

기본 매개변수

ES6에는 기본 매개변수가 있어서 함수를 정의할 때 매개변수의 기본값을 지정할 수 있음

-> 함수를 실행할 때 인수가 부족하면 기본값을 사용

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

multiple(5, 10, 20)
multiple(10, 20)
multiple(10);

---

변수의 유효 범위, 스코프

스코프(scope)

• 선언한 변수의 적용 범위를 가리킴
• `var` 키워드 사용한 변수: 함수 레벨 스코프
• `let`, `const` 키워드 사용한 변수: 블록 레벨 스코프

---

var 변수의 스코프 - 함수 스코프

• 변수를 선언한 함수에서만 해당 변수를 사용할 수 있음
  • -> 이런 변수는 지역 스코프 가짐 (지역 변수)
• 프로그램 시작 부분에서 변수 선언하면 프로그램 전체에서 사용할 수 있음
  • -> 이런 변수는 전역 스코프 가짐 (전역 변수)
  • `var` 예약어 붙이지 않으면 전역 변수로 인식
  • 여러 사람이 공동으로 사용하는 프로그램일 경우 다른 함수에서 전역 변수 수정 -> 예상치 못한 결과 
    => 큰 규모 프로젝트에서 전역 변수 사용하는 게 위험할 수 있음 

// 지역 스코프
function sum(a, b) {
	var result = a + b;
}
console.log(result);

// 전역 스코프
var hi = "Hello";
function greeting() {
	console.log(hi);
}
greeting();

호이스팅

• 소스 상에서는 나중에 선언하더라도 내부적으로는 먼저 선언한 것처럼 인식
  • 해석기가 함수 소스 훑어보면서 변수를 따로 기억해 두기 때문 
• 오류도 발생하지 않으면서 예상 못한 결과 만듦
  • -> `var` 변수 사용할 때는 호이스팅 생기지 않도록 주의

var x = 10;
var sum = x + y; // y 선언하기 전에 사용
var y = 20;
console.log(`x : ${x}, y : ${y}, sum : ${sum}`);

---

let, const 변수의 스코프 - 블록 스코프

• 블록: {와 }로 둘러싸인 영역
• 블록별로 변수의 유효 범위가 결정되는 것
• `let`이나 `const`를 사용해 만든 변수는 변수가 선언된 블록 안에서만 유효 (블록 변수)

const factor = 5;

function calc() {
	return num * factor; // num is not defined
}
{
	const num = 10;
    let result = calc();
    console.log(`result : ${result} `);
}

---

자바스크립트 변수 사용법

• `var` 변수보다 `let`, `const` 변수 사용
  • 여러 사람이 함께 진행한 프로젝트 → 변수 재선언 X 호이스팅 X `let`, `const` 사용
• 전역 변수 최소한으로 사용
  • 가능한 전역 변수의 사용 ↓ 프로그램에서 값이 변하지 X `const`로 선언하는 것이 좋음
• 객체 선언은 `const` 사용
  • 객체를 선언할 때는 프로그램 중 객체 자체가 바뀌지 않도록 `const` 사용해서 선언
  • 객체를 `const` 선언해도 객체 안에 있는 프로퍼티는 얼마든지 수정 O

---

함수 표현식

함수를 변수에 할당해서 사용하기

익명함수 사용하는 것 -> 하나의 값처럼 사용하기 위해서

=> 함수를 변수에 할당할 수도 있고, 다른 함수의 인자로 사용할 수도 있음

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

---

즉시 실행 함수

한 번만 사용하는 함수라면 -> 선언과 동시에 실행할 수 있음

(function() {
	...
})();

(function(매개변수) {
	...
})(인수);

// 인자 없을 때
(function() {
	let username = prompt('이름 입력');
    alert(`${username}님, 안녕하세요?`);
})();

// 인자 있을 때
(function() {
	let sum = a + b;
    console.log(`함수 실행 결과: ${sum}`);
})(100, 200);

---

화살표 함수(애로우 펑션)

ES6 버전부터는 => 사용해 함수를 좀 더 간단하게 선언

함수 표현식을 사용한 경우에만 사용할 수 있음

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

// 매개변수 없을 때
// ver1
let hi = function() {
	return `안녕하세요?`;
}
// ver2
let hi = () => {return `안녕하세요?`;}
// ver3
// 실행할 명령 한 줄 -> 중괄호 생략/ 한 줄 명령어에 return문 포함 -> return 생략
let hi = () => `안녕하세요?`;
hi();

// 매개변수 있을 때
// ver1
let sum = function(a, b) {
	return a + b;
}
// ver2
let sum = (a, b) => a + b;
sum(10, 20);

---

콜백 함수

다른 함수의 인자로 사용하는 함수

• 함수 이름을 사용해 콜백 함수 실행
• 함수 안에 직접 콜백 함수 작성해서 실행
  • 함수 안에서 한번만 실행하는 경우

const bttn = document.qeurySelector("butoton"); // 버튼 요소 가져옴

// 함수 이름 사용해 콜백 함수 실행
function display() {
	alert("클릭");
}
bttn.addEventListener("click", display); // 버튼 클릭 -> display 함수 실행

// 함수 안에 직접 콜백 함수 작성해서 실행
bttn.addEventListener("click", () => { // 버튼 클릭 -> alert 실행
	alert("클릭");
});

---

전개 구문

• 값만 꺼내서 펼쳐주는 구문
• 마침표 3개(...)를 사용해서 표현
• 문바열이나 배열, 객체처럼 여러 개의 값을 담고 있는 값만 꺼내 사용하려고 할 때 유용

fruits = ["apple", "banana", "grape"]
console.log(fruits) // ['apple', 'banana', 'grape']
console.log(...fruits) // apple banana grape -> 배열에서 값만 꺼내서 보여줌

---

나머지 매개변수

• 마침표 3개 사용하는 전개 구문은 함수를 선언할 때도 사용
• 함수를 선언하면서 나중에 몇 개의 인수를 받게 될지 알 수 없는 경우 -> 매개변수 자리에 마침표 3개 사용
• 일부만 변수로 받고 나머지는 한꺼번에 묶어서 받을 수도 있음

// 1.
function addNum(...numbers) {
	let sum = 0;
    
    for (let number of numbers)
    	sum += number;
    
    return sum;
}
console.log(addNum(1, 3));

// 2.
function displayFavorites(first, ...favs) {
	let str = `가장 좋아하는 과일 "${first}"군요`;
    return str;
}
console.log(displayFavorites("사과", "포도", "토마토"));

---

타이머 함수

• 특정 시간이 되었을 때 함수를 실행하거나
• 특정 시간 동안 함수를 반복하기 위해서 시간을 재는 함수
• 실행할 함수와 시간 필요
  -> 실행할 함수를 인수로 받음 (콜백 함수)
• 시간은 밀리초 단위 1s = 1000ms
  • ex. 1초를 지정하려면 1000으로 사용

---

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

웹 브라우저를 종료하기 전까지 계속 실행

• 타이머: `setInterval()`을 사용해서 반복 중인 함수
• 타이머 변수: 반복 중인 함수를 변수에 저장

setInterval(콜백 함수, 시간)

// ex. 2초마다 콘솔 창에 인삿말 표시
setInterval(() => {
	console.log("안녕")
}, 2000);

---

clearInterval() - 반복 실행 멈추기

• 특정 조건이 되었을 때 반복 실행 멈춤

clearInterval(타이머)

// ex. 인삿말 5번 표시 -> 반복 멈춤
let counter = 0;

let timer = setInterval(() => {
	console.log("안녕");
    counter++;
    if (counter === 5)
    	clearInterval(timer);
}, 2000);

---

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

지정한 시간이 흐른 후에 괄호 안에 있는 함수(콜백 함수) 실행

setTimeout(콜백 함수, 시간)

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

---

출처

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