[Javascript] 블록문, 스코프, scope, if,else,switch,지역변수,전역변수,local,global

블록문

👉 MDN 문서 보기

• 0개 이상의 문statement들을 묶은 단위
• 일반적으로, 이후 배울 제어문, 함수 등에 사용
• 새로운 스코프 생성

 

스코프 scope

블록 안에 선언된 변수와 상수를 밖에서 사용 불가

{

const x = 'Hello';

let y = 'world!';

console.log(x, y);

}

​

console.log(x);

console.log(y);

 

블록 안쪽에서는 바깥의 것 사용 가능

let x = 1;

​

{

let y = 2;

console.log(x, y);

}

console.log(x);

console.log(y);

 

블록 안쪽에 변수나 상수가 새로 선언되면 바깥 것을 덮어씀

const xx = 0;

let yy = 'Hello!';

console.log(xx, yy);

​

{

const xx = 1; // 💡 블록 안에서는 바깥의 const 재선언 가능

let yy = '안녕하세요~';

​

console.log(xx, yy);

// ⚠️ const, let을 빼먹으면 재선언이 아니라 바깥것의 값을(변수면) 바꿈!

}

​

console.log(xx, yy);

스코프 체인 scope chain

🥞 스택 stack

• 후입선출 - 나중에 온 것이 먼저 나감

let a = 0;

let b = 1;

let c = 2;

console.log('시점 1:', a, b, c);

​

{

let a = 'A';

let b = 'B'

console.log('시점 2:', a, b, c);

​

{

let a = '가'

console.log('시점 3:', a, b, c);

}

​

console.log('시점 4:', a, b, c);

}

​

console.log('시점 5:', a, b, c);

• 블럭 안에 해당 변수/상수가 없으면 바깥쪽으로 찾아 나감 - 체이닝

 

⭐ 메모리에서의 관점

전역 global 변수/상수

• 데이터 data 영역에 위치
• 코드 어느 곳에서든 접근 가능 - 블록 내 동명의 변수나 상수에 덮어씌워지지 않는 이상
• 프로그램 종료시 소멸
• ⭐️ 전역변수 사용은 최소화할 것

지역 local 변수/상수

• 스택 영역에 위치
• 해당 블록 안에서만 접근 가능
• 블록 실행 종료시 소멸
• ⭐ 변수나 상수는 가능한 사용할 블록 내에서 선언 - 메모리 절약

if문

const open = true;

​

// 한줄 코드

if (open) console.log('영업중입니다.');

 

// 여러줄 코드 - 블록문 사용

if (open) {

console.log('환영합니다.');

console.log('즐거운 쇼핑하세요!');

}

 

if ~ else문

const x = 20;

​

if (x % 2) {

console.log('홀수입니다.');

} else {

console.log('짝수입니다.');

}

중첩 사용

const x = 22;

​

if (x % 4) {

if (x % 2) {

console.log('홀수입니다.');

} else {

console.log('짝수입니다.');

}

} else {

console.log('4의 배수입니다.');

}

 

if ~ else if ~문

const x = 21;

​

if (x % 2) {

console.log('홀수입니다.');

} else if (x % 4) {

console.log('짝수입니다.');

} else {

console.log('4의 배수입니다.');

}

💡 보다 권장되는 방식

• return문: 함수 실행을 완전히 종료

function evalNum () {

const x = 21;

​

if (x % 2) {

console.log('홀수입니다.');

return;

}

​

if (x % 4) {

console.log('짝수입니다.');

return;

}

​

console.log('4의 배수입니다.');

}

​

evalNum();

console.log('블록문 바깥');

 

특정 값에 대한 다수의 옵션이 있을 때 사용

• 👉 MDN 문서 보기

 

주어진 평가에 일치하는 case로 실행위치 이동

const fingersOut = 2;

​

switch (fingersOut) {

// 순서 상관없음

case 2:

console.log('가위');

break;

case 0:

console.log('바위');

break;

case 5:

console.log('보');

break;

default:

console.log('무효');

}

• break;들을 제거하고 실행해볼 것
• default: 맨 아래 작성, break되지 않은 이상 무조건 실행

 

const direction = 'north'

let directionKor;

​

switch (direction) {

case 'north':

directionKor = '북';

break;

case 'south':

directionKor = '남';

break;

case 'east':

directionKor = '동';

break;

case 'west':

directionKor = '서';

break;

default:

directionKor = '무효';

}

​

console.log(directionKor);

• break;들을 제거하고 실행해볼 것

// 💡 참고: 객체를 사용한 방법

const direction = 'north'

​

const directionKor = {

north: '북',

south: '남',

east: '동',

west: '서'

}[direction] ?? '무효'

​

console.log(directionKor);

const month = 1;

let season = '';

​

switch (month) {

case 1: case 2: case 3:

season = '1분기'; break;

​

case 4: case 5: case 6:

season = '2분기'; break;

​

case 7: case 8: case 9:

season = '3분기'; break;

​

case 10: case 11: case 12:

season = '4분기'; break;

​

default:

season = '잘못된 월입니다.';

}

​

console.log(season);

 

const startMonth = 1;

let holidays = '분기 내 휴일:';

​

switch (startMonth) {

case 1:

holidays += ' 설날';

case 2:

case 3:

holidays += ' 3•1절';

break;

​

case 4:

case 5:

holidays += ' 어린이날';

case 6:

holidays += ' 현충일';

break;

​

case 7:

case 8:

holidays += ' 광복절';

case 9:

holidays += ' 추석';

break;

​

case 10:

holidays += ' 한글날';

case 11:

case 12:

holidays += ' 크리스마스';

break;

​

default:

holidays = '잘못된 월입니다.';

}

​

console.log(holidays);