07 함수의 실행 흐름과 스코프
# 함수의 실행 흐름과 스코프
## 미션
다양한 함수의 실행 흐름 분석과 변수의 활동영역 스코프의 개념을 익히시오.
<img src="http://drive.google.com/uc?export=view&id=1hvPOjP3A1gmqsUGjpE5RqccYwdFAKpFz" alt="홍팍-자바스크립트-함수의-실행흐름과-스코프">
## 02:29 기본 파일 생성
#### functions.html
```
<!-- HTML 관련 구글링 -->
<!-- 👉 site:developer.mozilla.org {연관_키워드} -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 파일 연결 -->
<link rel="stylesheet" href="functions.css">
<Script defer src="functions.js"></Script>
</head>
<body>
<h1>함수, 일련의 코드 묶음!</h1>
<h2>함수, 무엇?</h2>
<ul>
<li>일련의 코드 묶음 ➡ 코드 재사용성 증가 🔺</li>
<li>입력에 따른 결과 반환! (like a 자판기)</li>
<li>함수 호출 시, 실행 흐름을 함수 내부로 이동</li>
<li>함수 종료 시, 실행 흐름은 이전 위치로 되돌아감</li>
</ul>
<h2>파라미터, 입력값을 저장하는 변수!</h2>
<ul>
<li>필요에 따라 개수 조절 가능</li>
<li>다음 코드가 동작하도록, 함수를 만들어보자!</li>
</ul>
<pre>
const ramen = createRamen();
console.log(ramen);
const mandoo = createMandoo("고기");
console.log(mandoo);
const kimbob = createKimbob("참치", "김치");
console.log(kimbob);
</pre>
<h2>return, 함수 종료와 동시에 값을 반환!</h2>
<pre>
function NAME(PARAMETERS) {
..
// return undefined;
}
</pre>
<h2>함수 실행 시, 변수의 활동 범위를 주의!</h2>
<ul>
<li>프로그램은 실행 흐름에 따라 변수 관리함</li>
<li>함수 호출 👉 파라미터와 지역변수를 만듦</li>
<li>함수 종료 👉 파라미터와 지역변수를 제거</li>
<li>지역변수란, 함수 또는 블럭(중괄호) 속에 선언된 변수</li>
</ul>
</body>
</html>
```
#### functions.css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
font-family: Arial, Helvetica, sans-serif;
}
```
#### functions.js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
## 03:04 함수의 개념과 실행 흐름
#### sayHi() 함수의 선언과 호출
```
// 1. 함수, 리뷰!
// ① 일련의 코드 묶음(코드 재사용성 증가 🔺)
// ② 입력에 따른 결과 반환(like a 자판기)
// ③ 함수 호출 시, 실행 흐름은 함수 내부로 이동
// ④ 함수 종료 시, 실행 흐름은 이전 위치로 되돌아감
// 선언부(function declation): 함수를 정의한 영역
function sayHi(username) {
console.log(`안녕하세요, ${username}입니다.`);
return undefined;
}
// 호출부(fucntion call): 함수를 사용(실행)하는 영역
sayHi("홍팍"); // 안녕하세요, 홍팍입니다.
sayHi("호크"); // 안녕하세요, 호크입니다.
sayHi("쿠마"); // 안녕하세요, 쿠마입니다.
```
#### cube() 함수의 선언과 실행
```
// 선언부: 입력값 세제곱을 반환하도록 함수를 정의
function cube(num) {
return num * num * num;
}
// 호출부
const a = cube(2); // 2 * 2 * 2 => 8
const b = cube(3); // 3 * 3 * 3 => 27
console.log(`a = ${a}, b = ${b}`); // a = 8, b = 27
```
## 07:57 파라미터가 없는 함수
#### createRamen() 함수
```
// 2. 파라미터, 입력값을 저장하는 변수!
// 👉 필요에 따라 개수 조절 가능
// 라면 생성 자판기(함수): 선택 불가(파라미터: 0개)
function createRamen() {
return "🍜 라면";
}
// 함수 실행 및 결과 출력
const ramen = createRamen();
console.log(ramen); // 🍜 라면
```
## 09:40 파라미터가 1개인 함수
#### createMandoo() 함수
```
// 만두 생성 자판기(함수): 재료 1개 선택 가능(파라미터: 1개)
function createMandoo(ingredient) {
return `🥟 ${ingredient} 만두`;
}
// 함수 호출 및 결과 출력
const mandoo1 = createMandoo("고기");
const mandoo2 = createMandoo("김치");
console.log(mandoo1); // 🥟 고기 만두
console.log(mandoo2); // 🥟 김치 만두
```
## 11:22 파라미터가 2개인 함수
#### createKimbob() 함수
```
// 김밥 생성 자판기(함수): 재료 2개 선택 가능(파라미터: 2개)
function createKimbob(a, b) {
return `🍙 ${a} ${b} 김밥`;
}
// 함수 호출 및 결과 출력
const kimbob1 = createKimbob("참치", "김치");
console.log(kimbob1); // 🍙 참치 김치 김밥
```
## 12:41 return, 함수 종료 및 값을 반환하는 키워드
#### 반환값이 없는 test() 함수
```
// 3. return, 함수 종료와 동시에 값을 반환!
// ① return => 우측 값을 반환
// ② return 생략하면? => undefined를 자동 반환
function test() {
console.log("나는 값을 반환하지 않아..!");
//return undefined; // 생략 가능
}
const result = test();
console.log(result); // undefined
```
## 14:23 파라미터의 스코프
#### 다음 코드의 실행 결과는?
```
// 4. 스코프(scope), 변수의 활동 범위
// ① 프로그램은 실행 흐름에 따라 변수를 관리함
// > 함수 호출 => 파라미터와 지역변수를 만듦
// > 함수 종료 => 파라미터와 지역변수를 제거
function changeParameterX(x) {
x = x + 3;
console.log(`x = ${x}`);
}
changeParameterX(30); // x = 33
console.log(x); // ERROR! 변수 x를 찾을 수 없음
```
## 17:35 지역변수의 스코프
#### 다음 코드의 실행 결과는?
```
// ② 지역변수란, 함수 또는 블럭(중괄호) 내부에 선언된 변수
function changeLocalVariableY(n) {
let y = n + 1; // 지역변수 y
console.log(`y = ${y}`);
}
changeLocalVariableY(20);
console.log(y); // ERROR: y를 찾을 수 없음
```
## 19:41 중복된 스코프
#### 다음 코드의 실행 결과는?
```
// ③ 이름이 같지만 스코프가 다른 경우,
function changeLocalVariableZ(n) {
let z = n;
console.log(`local z = ${z}`); // 3
}
let z = 7;
console.log(`global z = ${z}`); // 7
changeLocalVariableZ(3);
console.log(`global z = ${z}`); // 7
```
## 퀴즈 👻
#### A. 함수의 설명으로 옳은 것을 모두 고르시오
- 일련의 코드 묶음이다
- 일반적으로 입력에 따른 결과를 반환한다
- 코드 묶음을 호출하여, 재사용 가능하게 한다
#### B. 설명에 따른 함수의 구성요소를 적으시오
- __________ : 코드 묶음을 사용하기 위한 이름
- __________ : 함수 호출 시, 전달값을 저장하는 변수
- __________ : 함수 종료와 함께 반환될 최종값
#### C. 다음 중 옳은 것을 모두 고르시오.
- 함수를 사용하려면, 먼저 정의돼있어야 한다
- 함수가 호출되면, 실행 흐름은 함수의 선언부로 넘어간다
- 함수 호출 시 전달값은, 함수의 파라미터로 대입된다
- 함수의 중괄호 내부에 선언된 변수는 지역변수다
- 반환값은 이전 함수가 호출된 위치로 전달된다
## 구글링 훈련 🔥
- 자바스크립트 스코프란
- 자바스크립트 지역변수 vs 전역변수
- 자바스크립트
- 자바스크립트 함수 만들기 site:developer.mozilla.org
- 자바스크립트 arguments site:developer.mozilla.org
- 자바스크립트 함수 반환 값 site:developer.mozilla.org
- 자바스크립트 return site:developer.mozilla.org