3. JavaScript 제어문(if/else문, for문, switch/case문, while문)

I. 블록문과 스코프

 

1. 블록문

 - 0개 이상의 statement들을 묶은 단위

 - 일반적으로, 이후 게시물에서 설명할 제어문 함수 등에 사용

 - 새로운 스코프* 생성

 

*스코프 (scope)

 식별자들이 유효하게 사용될 수 있는 범위

오류 발생

다음과 같이 { } 로 묶여있는 부분을 스코프라고 한다.

스코프 내에서 정의된 변수들은 스코프 바깥에서 사용이 불가능하다.

 

하지만, 스코프 밖에서 정의된 변수는 스코프 안에서 사용이 가능하다.

예시를 들어보자.

x는 1 반환 / y는 오류 발생

 

스코프 밖에서 정의된 변수 x는 스코프 안에서도 사용될 수 있지만,

스코프 안에서 정의된 변수 y는 스코프 밖에서 사용될 수 없다.

 

이러한 구조를 사진으로 예를 들자면,

위와 같은 사진이 될 수 있다.

 

썬팅이 잘 된 자동차를 사이에 두고,

자동차 바깥에 있는 x는 y를 볼 수 없지만

자동차 안에 있는 y는 x와 자기 자신인 y도 볼 수 있다.

 

또한, 블록 안쪽에 변수나 상수가 새로 선언되면 바깥 것을 덮어쓴다.

위와 같은 코드에서, 결과값은

   0  Hello

   1  안녕하세요~

   0  Hello

가 된다.

 

이 때, 스코프 안에서 xx를 재할당하기 위해 const를 뺀다면,

상수로 선언된 값을 재할당하려고 하는 것과 마찬가지이므로 오류가 발생한다.

또, 스코프 안에서 yy를 재할당하기 위해 let를 뺀다면,

스코프 밖에서 선언된 변수 yy의 값을 덮어써버린다.

 

 

*스코프 체인 (scope chain)

 

 - 스택의 구조  :  LIFO 구조 (후입선출)

 

스택의 구조

 

사진처럼, stack의 구조는 LIFO구조로 되어있다.

먼저 들어가서 맨 아래에 위치한 갈색 원판은 가장 마지막에,

나중에 들어가서 맨 위에 위치한 빨간 원판은 가장 먼저

나오게 된다.

 

이 코드의 결과값은

   시점 1: 0 1 2

   시점 2: A B 2

   시점 3: 가 B 2

   시점 4: A B 2

   시점 5: 0 1 2

이 된다.

 

이처럼 블럭 안에 해당 변수/상수가 없으면 스코프 바깥쪽으로 찾아 나가는 것을

체이닝이라고 한다.

 

메모리에서의 관점으로 다시 뜯어보자.

전역 (global) 변수/상수

 - 데이터 영역에 위치

 - 블록 내에서 동명의 변수나 상수에 덮어씌워지지 않는다면, 코드 어느 곳에서든 접근 가능

 - 프로그램 종료 시, 소멸한다

       └전역변수 사용은 최소화!!! (전역변수를 많이 사용하면, 프로그램 내내 공간을 차지하는 메모리가 많기 때문)

 

지역 (local) 변수/상수

 - 스택 영역에 위치

 - 해당 블록 안에서만 접근 가능

 - 블록 실행 종료시 ( 중괄호{} 가 닫힐 때) 소멸

      └변수나 상수는 가능한 사용할 블록 내에서 선언 (메모리 절약을 위함)

 

 

II. if / else 문

 

1. if문

if () 에서 ()안에 불리언 값이 나오도록 작성하고, true라면 블록* 내에 있는 코드를 실행한다.

 

코드가 한줄이라면, 

영업중입니다. 반환

위처럼 블록문, 즉 {}를 생략해도 되지만,

코드가 여러줄이라면,

위처럼 블록문을 사용해야한다.

 

 

2. if ~ else 문

 if () 에서 ()안에 불리언 값이 false 라면, else 문을 실행한다.

 

💨 또한, 아래와 같이 중첩하여 다중 if / else 문을 사용할 수도 있다.

(아래 코드 내에서, if문 안에서의 true, false 여부가 헷갈린다면,

블로그 내 2번 게시글 참고)

짝수입니다. 반환

 

 

3. if ~ else if ~ 문

 if () 에서 () 안의 값이 false라면, else if () 문을 실행하고 여기서 () 안의 값도 false라면, else 문을 실행한다.

홀수입니다. 반환

 

 

4. return 문

return 이 나온다면, 함수 실행을 완전히 종료한다는 것을 의미한다.

홀수입니다. 반환 후 함수 종료

 

 

III. switch 문

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

주어진 것에 일치하는 case 로 실행위치가 이동한다.

 

①

가위 반환 후 switch문 종료

위 코드에서 break란?

 - 직접적인 해석으로는 브레이크, 멈춤 이라는 뜻

 - switch문을 종료 후 블록 빠져나가는 역할을 함

 - break를 제거하면 가위, 바위, 보, 무효 모두 반환

default란?

 - 일치하는 case가 없을 경우 실행

 

②

directionKor 객체 값을 '북' 으로 변경 후 switch문 종료

위 코드에서 break를 지운다면,

directionKor 객체를 '북', '남', '동', '서', '무효' 순서대로 한번씩 바꾸고

결론적으로 '무효' 를 반환하게 된다.

 

따라서, 원하는 값을 출력하고 혼란을 주지 않기 위해서는 break 가 필수!!

 

③

북 반환

위 코드는 객체를 사용한 방법이다.

north 일 때는 '북',

south 일 때는 '남',

.

.

으로 directionKor 객체의 값을 바꿔준다.

 

[direction] ?? '무효'

라는 코드는 2번 게시글에서 다뤘던  ??  연산자를 사용하여,

direction 객체의 값과 일치하는 값이 없다면

undefined 를 반환하게 될 테고  ??  연산자에 의해 '무효' 를 반환하게끔 한 코드이다.

 

④

1분기 반환 후 switch 문 탈출

위 코드처럼,

여러개의 case와 일치하는 값을 정의하고 싶다면

case 1:  case 2:  case 3:

   season = '1분기'; break;

처럼 순서대로 나열하면 된다.

 

 

IV. for 루프

⚠이번 단원은 굉장히 중요하고 많이 쓰이는 for 루프에 대해서 다뤄볼 것이다.

잠시 자리에서 일어나 스트레칭하고 앉아서 집중하는 것을 추천한다.

 

1. for 문 사용법

괄호 안의 3개의 식에 따른 반복수행

 - 변수의 선언 및 할당

 - 종료조건. 없을 시 항상 참

 - 참일 시 블록안의 코드 이후 실행문

 

①

i = 0 부터 시작하여 i = 5 가 되면 for문 종료 후 탈출

여기서 객체 i 를 선언할 때, let 을 const로 바꾸면 안된다.

const 는 값이 바뀌지 않는 상수라는 의미를 지니는데

실행문 i++ 가 i의 값을 1 증가한 값으로 계속 바꾸려고 하기 때문에 오류가 발생한다.

 

②

0 1 2 3 4 반환

위와 같이 실행문을 블록안에 작성해도 된다.

 

③ 다중 for 문

구구단처럼 1 * 1 = 1 . . . 반환

 

④ 둘 이상의 변수를 사용한 for 문

x는 0부터 1씩 증가, y는 10부터 1씩 감소하여 둘의 값이 같아질 때까지 for문 반복

 

💨 무한루프 - 실행 시, 브라우저가 멈출 수 있음 (주의)

for문 안에 아무런 값도, 실행문도 주지 않으면 무한루프

 

2. 객체와 배열의 for 문

 

 - 객체:    for (키 이름 in 객체명)  -  객체의 키들을 순서대로 반환

위 코드에서 for 문을 살펴보면,

const 로 정의된 key 라는 객체에 lunch에 있는 key 값을 넣는다.

따라서,

 key = name

 key = taste

 key = kilocalories

 key = cold

를 반환하게 되고,

lunch[key] 는 key에 맞는 value를 반환하므로,

 '라면'

 '매운맛'

 500

 false

를 반환한다.

 

 - 배열:    for (항목 of 배열명)  -  배열의 항목들을 순서대로 반환

둘 다   1, 가나다, false, null 반환

of 는 in과 달리 값(value)을 반환한다.

따라서 배열 객체인 list 를 item에 담고, item을 출력해보면

 1

 가나다

 false

 null

가 나온다.

 

이 때, of를 in으로 바꾸면 배열의 key값인 index를 반환한다 !!

 

for . . . of 의 장점은 위와 같은 코드를,

이렇게 바꿔주기 때문에 굉장히 편리하다고 볼 수 있다.

 

 

 

V. continue 와 break

 

1. continue  -  한 루프를 건너뜀

 

한 루프라고 함은 for문에서 한 바퀴를 의미한다.

여기서 continue 의 의미는

for문의 루프를 돌리다가 i % 3 의 값이 0 이 나오는 순간이 오면,

그 때의 i값은 그냥 넘겨라

라는 의미다.

 

따라서 결과값을 확인해보면 해당 i 값은 포함되어있지 않다.

 

 

2. break  -  블록을 종료하고 빠져나옴

 

break 는 continue와는 반대로, break 가 찍히기 직전까지 반환된 값들만 가지고 블록을 빠져나가라 라는 의미이다.

위 코드를 예로 들어보자.

코드를 보면 i 값이 5 일 때, break를 하라고 나와있다.

이 의미는 i 값이 1, 2, 3, 4 일 때 console.log를 실행하고,

i 값이 5일 때는 그 즉시 for 문을 빠져나와서 console.log를 실행하지 않는다.

따라서 결과값은

 1

 2

 3

 4

가 반환이 된다.

 

 

3. label  -  중첩된 반복문(다중 for문)에 이름을 붙여서 continue, break에 사용함

 

널리 쓰이지는 않는다.

i 객체를 가진 for문은 outer, j 를 가진 for 문은 inner 라는 이름을 갖게된다.

 

이처럼, break 와 continue는 for문, switch / case문과 같은 반복문에서 사용할 수 있고,

아래에서 설명할 또다른 반복문인 while문에서도 사용 가능하다.

 

 

 

 

 

VI.  while 과 do while

 

1. while문  -  조건이 참인 동안 반복수행

 

- for문과 마찬가지로, 조건이 참인 동안 while문 안에 있는 코드를 실행한다.

 

 

💨 while문 또한 항상 참인 값을 주면 무한루프에 빠진다. (주의)

 

- ①번 코드처럼 while 문에서도 반복문을 건너뛸지(continue), 그만할지(break) 정할 수 있다.

- 또한, ②번 코드처럼 각 상황에 맞는 객체를 생성하여 객체명을 지은 다음에 사용하면

코드의 의도를 잘 파악할 수 있어서 가독성이 올라간다.

 

①

 

②

 

 

2. do while문  -  일단 수행하고 조건을 평가