Assignment
case 오른쪽에 설명해야 할 단어를 텍스트로 작성해놨습니다. description 변수에 해당 단어에 대한 설명을 딱 한 문장으로 작성해주세요.
강의 내용을 참고 하셔도 되고 인터넷에서 검색해도 됩니다. 이해하신대로 가볍게 작성해주세요.
그리고 처음보는 switch 문이 있습니다. switch 문이 무엇인지 궁금한 사람은 아래에서 읽고 사용법을 익혀주세요. 👉 JavaScript Switch Statement
결과
function whatIs(type) { // type을 입력받아서
let description;
switch (type) {
case 'scope':
description = '변수가 어디까지 쓰일 수 있는지의 범위';
break;
case 'block':
description = '중괄호({})로 감싸진 것';
break;
case 'global scope':
description = 'block밖의 범위';
break;
case 'global variable':
description = 'block밖의 범위에서 선언한 변수';
break;
case 'block scope':
description = 'block안의 범위';
break;
case 'local variable':
description = 'block안의 범위에서 선언한 변수';
break;
case 'global namespace':
description = '변수이름을 해당 프로그램의 어디에서나 사용할 수 있는 범위';
break;
case 'scope pollution':
description = 'global 변수가 계속 살아있어 변수값이 계속 변하는 것';
break;
default :
description = '(default)'
break;
}
return description;
}Today I Learn
1. Scope
JavaScript에서 scope이란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다.
Error: is not defined : 변수가 아직 선언되지 않았다
: 변수를 선언한 영역(block)에 접근할 수 없어 컴퓨터가 변수가 선언 되었다는 사실을 알지 못함
2. Block
block이란 function, if 문, for 문 처럼 중괄호({} , curly brace)로 감싸진 것입니다.
//함수 block
function name() {
}
//for문 block
for () {
}
//if문 block
if () {
}3. Local(지역) 변수
{} (block)내부에서 정의된 변수.
{} (block)내부에서만 사용할 수 있습니다.
function getResult() {
let result = 10;
return result;
}
/* getResult 내부의 scope에 접근할 수 없다 */
console.log(result); // 자바스크립트 에러!4. Global(전역) Scope
global variable(전역변수)는 block밖인 global scope에서 만든 변수입니다.
코드 어디서든 접근 가능해서 변수값을 확인할 수 있습니다.
- scope: 변수가 선언되고 사용할 수 있는 공간.
- scope 외부(block밖)에서는 특정 scope내의 변수에 접근할 수 없음.
- scope 내(block내)에서도 global scope내의 변수에 접근할 수 있음.
const color = 'red'; // global 변수color 선언
console.log(color); // "red"
function returnColor() {
console.log(color); // color는 global변수라서 접근 가능!
return color;
}
console.log(returnColor()); // "red"5. Scope의 오염
global 변수를 너무 남용하면 프로그램에 문제를 일으킬 수 있습니다.
global 변수를 선언하면, 해당프로그램의 어디에서나 사용할 수 있는 global namespace를 갖습니다.
namespace : 변수 이름을 사용할 수 있는 범위(= scope). 특히 변수이름을 얘기할 때 사용.
global 변수는 프로그램이 종료될때까지 계속 살아있습니다.
local 변수는 block이 끝나면 더 이상 변수를 쓸 수 없습니다.
global 변수가 계속 살아있어서 변수값이 계속 변한다면?
- 해당 변수를 트래킹하기도 어려움.
- 해당 변수가 어디에서 왜 필요한지 알려면 let, const로 선언한 위치를 찾아야 함.
5-1. local 변수가 global 변수를 오염시킨 사례:
const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star'; // global 변수stars
const callMyNightSky = () => {
stars = 'Sirius'; // 새로운 변수인데 let을 깜박함
return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};
console.log(callMyNightSky());
console.log(stars); // "North Star"여야 하는데 "Sirius"6. 좋은 Scoping 습관
global 변수는 쓰지 않도록 노력해야 하고,
최대한 {} 내에서 let, const 을 사용해 변수를 새로 만들어서 쓰자!
타이트한 scope(tightly scoping)의 변수를 써야 하는 이유?
- global 변수가 여기저기서 수정되면 안되기 때문에
- 코드가 기능별로 block 으로 명확히 구분되어 코드 가독성 향상
(이해하기 쉬움) - 오랜만에 본 코드도 수정 및 유지보수가 쉽다
- block이 끝나면 local 변수의 삶이 끝나므로 메모리 절약.
6-1. if 문의 {} 의 block scope
새로운 block에서 변수를 쓸 때, 항상 다른 이름으로 변수를 선언해야한다
나쁜 예(👇)
function logSkyColor() {
const dusk = true;
let myColor = 'blue'; // if문 block 밖: 'blue'
if (dusk) {
let myColor = 'pink'; // if문 block 안: 'pink'
console.log(myColor); // pink
}
console.log(myColor); // blue
}
console.log(myColor); // 에러!!
// block밖에서 local변수에 접근할 수 없음