제어문

주어진 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.

블록문 (Block statement/Compound statement)

0개 이상의 문을 중괄호로 묶은 것으로 코드 블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다.

문의 끝에는 세미 콜론(;)을 붙이는 것이 일반적이지만 블록문의 끝에는 세미콜론을 붙이지 않는다.

1
2
3
4
5
6
7
8
9
10
11
12

// 블록문
{
  var foo = 10;
  console.log(foo); //10
}

//제어문
var x = 0;
while (x < 10) {
  x++;
}
console.log(x); // 10

조건문 (conditional statement)

주어진 조건식(conditional expression)의 평가 결과에 따라 코드 블럭(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.

if…else문

주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다. 조건식의 평가 결과가 참(true)일 경우, if 문 다음의 코드 블록이 실행되고 거짓(false)일 경우, else 문 다음의 코드 블록이 실행된다.

1
2
3
4
5

if (조건식) {
  // 조건식이 참이면 이 코드 블록이 실행된다.
} else {
  // 조건식이 거짓이면 이 코드 블록이 실행된다.
}

조건식을 추가하여 조건에 따라 실행될 코드 블록을 늘리고 싶으면 else if 문을 사용한다.

else if문

1
2
3
4
5
6
7

if (조건식1) {
  // 조건식1이 참이면 이 코드 블록이 실행된다.
} else if (조건식2) {
  // 조건식2이 참이면 이 코드 블록이 실행된다.
} else {
  // 조건식1과 조건식2가 모두 거짓이면 이 코드 블록이 실행된다.
}

else if 문과 else 문은 옵션이다. 즉, 사용할 수도 있고 사용하지 않을 수도 있다. if 문과 else 문은 2번 이상 사용할 수 없지만 else if 문은 여러 번 사용할 수 있다.

1
2
3
4
5
6
7
8
9
10
11

var num = 2;
var kind;

if (num > 0) {
  kind = "양수";
} else if (num < 0) {
  kind = "음수";
} else {
  kind = "영";
}
console.log(kind); // 양수

if…else문은 아래와 같이 삼항 조건 연산자로 바꿔 쓸 수 있다. 삼항 조건 연산자의 구조는 조건식 ? 조건식이 true일때 반환할 값 : 조건식이 false일때 반환할 값이다.

1
2
3
4
5
6

var num = 2;

// 0은 false로 취급된다.
var kind = num ? (num > 0 ? "양수" : "음수") : "영";

console.log(kind); // 양수

단, 삼항 조건 연산자는 값으로 평가되는 표현식을 만들기 때문에 변수에 할당이 가능하고, if…else문은 표현식이 아닌 문이기 때문에 변수에 할당이 불가하다.

switch문

먼저 주어진 해당 표현식을 평가하고, 입력한 표현식과 동일한 값으로 평가되는 표현식을 찾는다.(엄격비교가 이루어진다, ===) 그리고 일치하는 case 문으로 실행 순서를 이동시킨 후 해당 case의 문(statement)을 실행한다. case문은 값을 지정한 후 콜론으로 마치고, 그 후에는 실행될 문이 온다.

만약 switch문의 표현식과 일치하는 case를 찾지 못하면 실행 순서는 default문으로 이동하고 해당 문을 실행한다. default는 보통 가장 마지막에 위치하며, 옵션이므로 사용할 수도 있고 사용하지 않을 수도 있다. 만약 default문이 없다면 switch문이 종료될 때까지 계속 실행된다.

1
2
3
4
5
6
7
8
9
10
11
12
13

switch (표현식) {
  case 값1:
    switch 문의 표현식과 값1과 일치하면 실행될 문;
    break;
  case 값2:
    switch 문의 표현식과 값2와 일치하면 실행될 문;
    break;
    case 값N:
    switch 문의 표현식과 값N과 일치하면 실행될 문;
    break;
  default:
    switch 문의 표현식과 일치하는 표현식을 갖는 case 문이 없을 때 실행될 문;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const expr = "Papayas";

switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    // expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log("Sorry, we are out of " + expr + ".");
}

위 switch문은 먼저 주어진 표현식 const expr = "Papayas";를 평가하고, 동일한 값으로 평가되는 표현식을 찾는다. 따라서 값이 일치하는 case "Papayas":로 실행순서가 이동하며, 지정된 문을 실행한다. 따라서 "Mangoes and papayas are $2.79 a pound."라는 값을 실행하고, break가 있기 때문에 코드 블록을 탈출한다.

break를 쓰지 않으면 어떻게 될까?

폴스루(fall through)현상이 발생한다. 표현식과 동일한 case문을 실행한 후 switch문을 탈출하지 않고 switch문이 끝날 때까지 이후의 모든 case문과 default문을 실행하는 것을 말한다.

반복문 (Loop statement)

주어진 조건식의 평가 결과가 참인 경우 코드 블럭을 실행한 후 조건식을 다시 검사하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.

for문

조건식이 거짓으로 판별될 때까지 코드 블록을 반복 실행한다.

1
2
3
4
5
6
7

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  조건식이 참인 경우 반복 실행될 문;
}

for (var i = 0; i < 5; 1++) {
  console.log(i);
}

• 변수 선언문은 for문을 실행했을 때 처음 단 한번만 실행된다.
• 선언문 실행 후 조건식으로 순서가 이동한 후 값이 true라면 코드 블록으로 이동하여 코드를 실행한다. 증감문으로 바로 이동하는 것이 아니다. false라면 for문의 실행이 종료된다.
• 코드 블록으로 이동하여 실행한 후 실행이 종료되면 증감식으로 이동하여 i를 1 증가한다.
• 증감식 실행 후 다시 조건식으로 이동하여 값을 평가한다. 조건식이 false가 될 때까지 순서에 따라 실행을 반복한다.

while문

while 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다. 조건문의 평가 결과가 거짓이 되면 실행을 종료한다. 단, 조건식의 평가 결과가 언제나 참이면 무한루프가 된다.

1
2
3
4
5
6
7

var count = 0;

// count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
while (count < 3) {
  console.log(count);
  count++;
} // 0 1 2

do…while문

코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한번 이상 실행된다.

break문

이블 문, 반복문(for, for…in, for…of, while, do…while) 또는 switch 문의 코드 블록을 탈출한다. 레이블 문, 반복문, switch 문의 코드 블록 이외에 break 문을 사용하면 SyntaxError(문법 에러)가 발생한다.

1
2
3

if (true) {
  break; // Uncaught SyntaxError: Illegal break statement
}

continue문

반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 이동한다. break 문처럼 반복문을 탈출하지는 않는다.

References
Poiemaweb
MDN

변수란 무엇인가? 왜 필요한가?

변수: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

• 기억하고 싶은 값을 메모리에 저장하고, 재사용하기 위해 필요하다.
• 값의 위치를 가리키는 상징적인 이름

1
2
3
4
5

1 + 2;
// 3 재사용 불가

var result = 1 + 2;
result; //3 재사용 가능

위와 같이 연산이 이루어질 때 피연산자는 메모리에 피연산자의 값을 저장한다. 연산자는 cpu에서 연산되어 값을 출력한다.

• 변수명: 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름
• 변수 값: 변수에 저장된 값
• 할당: 변수에 값을 저장
• 참조: 변수에 저장된 값을 읽어들임.

1
2
3
4
5

변수 키워드 변수명 = 변수 값
변수이름; //참조

var result= 30;
result;

식별자

어떤 값을 구별하여 식별해낼 수 있는 고유한 이름, 변수명을 식별자라 하기도 한다.
var result= 30;이라고 하면 식별자 result는 값 30이 아닌 값 30이 저장된 메모리 주소를 기억하고 있다. 따라서 메모리 주소에 붙인 이름이라고 할 수도 있다.

변수 선언

변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보(할당)하고, 변수명과 확보된 메모리 공간의 주소를 연결하여 값을 저장할 수 있도록 준비하는 것. 변수를 선언할 때는 var, let, const 키워드를 사용하며, 처음 변수가 선언되어 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 사용할 수 없다.

단, ES6 이후로는 var 키워드가 가진 의도치 않은 전역변수 선언이라는 부작용 때문에 const나 let을 주로 사용한다.

1. 변수 선언: var result;라고 변수를 선언하면 메모리 공간에 result라는 식별자를 가진 메모리 공간이 확보된다. 이는 변수 이름을 등록하여 JS 엔진에게 변수의 존재를 알리는 것이다.
2. 초기화: 선언 후 아무런 값을 할당하지 않았다면, 메모리 공간은 비어있을 것 같지만, 그렇지 않고 undefined라는 값이 암묵적으로 할당된다. 이를 초기화라 한다.

초기화: 변수 선언 이후 최초로 값을 할당하는 것. 만약 초기화를 거치지 않으면 이전에 다른 어플리케이션이 사용했던 값(Garbage value)이 남아있을 수 있다.

변수 선언의 실행 시점과 변수 호이스팅

변수 호이스팅: 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징.

1
2

console.log(result); //undefined
var result;

위와 같이 var result;라고 선언하기 전에 변수를 먼저 참조하면 코드를 한 줄씩 순차적으로 실행하는 자바스크립트의 특성상 오류가 발생할 것 같지만, 그렇지 않고 undefined라는 값이 출력된다.

1. 자바스크립트 엔진은 코드를 한 줄씩 실행하기 이전(런타임 이전)에 변수 선언문(함수 선언문 등의 모든 선언문)을 찾아내어 먼저 실행한다. 따라서 변수 선언문의 위치와 상관없이 런타임 이전에 먼저 실행된다고 할 수 있다.

2. 선언문을 제외한 나머지 코드가 한줄씩 순차적으로 실행된다.

값의 할당

할당 연산자를 사용하여 우변의 값을 좌변에 할당한다.

1
2
3
4

var result; //변수 선언
result = 1; //값의 할당

var result = 1; //단축표현. 선언과 할당을 동시에.

값을 할당할 때는 이미 주어진 값을 지운 후 새로운 값을 할당한 것이 아니다. 위의 예시를 들자면 변수 선언시 초기화된 값 undefined를 지운 후 그 자리에 1을 할당하는 것이 아니라 새로운 메모리 공간을 확보한 후 그 곳에 값을 저장한다.

값의 재할당

이미 값이 할당되어 있는 변수에 새로운 값을 할당하는 것. 단, var, let과 달리 const는 재할당이 금지되어 있다.

1
2
3
4

var result = 1; //단축표현. 선언과 할당을 동시에.
result = 2;

console.log(result); //2

위와 같이 result라는 변수에 값을 재할당하면 1에서 2로 값이 변경된다. 이때도 역시 1이 있던 공간의 값을 지우고 2를 저장하는 것이 아니라 새로운 메모리 공간을 확보하여 그 곳에 2라는 값을 저장한다.

가비지 컬렉터: 애플리케이션이 할당(allocate)한 메모리 공간을 주기적으로 검사하여 더 이상 사용되고 있지 않는 메모리를 해제(release)하는 기능.

위와 같이 재할당이 이루어지면 result가 가지고 있던 이전의 값인 undefined와 1은 어떤 변수도 가지고 있지 않기 때문에 불필요한 값들이므로 가비지 컬렉터가 메모리에서 자동해제 시킨다. 단 언제 해제되는지는 예측할 수 없다.

두 변수의 값을 교환하는 코드

1
2
3
4
5
6
7
8
9
10
11

var x = 1;
var y = 2;

x = 2;
y = 1;

//혹은 아래와 같이
x = y;
y = 1;

console.log(x, y); // 2 1

식별자 네이밍 규칙

• 특수문자를 제외한 문자, 숫자, underscore(_), 달러기호($)는 포함가능
• 숫자로 시작해서는 안됨. ex) var 1num;
• 예약어(프로그래밍 언어에서 사용되거 있거나 사용될 예정인 단어) 사용금지 (ex. var var;)

자바스크립트는 대소문자를 구별한다. 따라서 var abc;와 var ABC는 별개의 변수이다.

• 변수나 함수의 이름: 카멜 케이스를 사용. (ex. var firstName;)
• 생성자 함수, 클래스의 이름: 파스칼 케이스를 사용 (ex. var FirstName;)

References

Poiemaweb

원시타입: string, number, boolean, null, undefined, symbol
객체: object, array, function…

원시타입의 값은 변경불가의 값이다. 따라서 원래 할당되어 있던 값을 변경하는 것이 아니라 재할당이 이루어진다.

1
2
3

let a = 5; // a = 5
let b = a; // b = 5;
a = 6; // a = 6;

처음 5라는 값을 a라는 변수에 할당하고, 다음으로 5라는 값을 담고 있는 a의 값을 b에 할당하였을 때,
b의 값 5는 a의 값 5가 들어있는 메모리 공간을 차지하는 것이 아니라 새로운 공간을 차지하여 값을 할당한다. 그리고 a를 6이라고 재할당하면 이 역시 새로운 공간을 차지한다.

객체의 경우는 어떨까?

객체는 변경가능한 값이기 때문에 새로운 공간에 값을 재할당하는 것이 아니라 원래 할당된 공간의 값을 변경한다.

1
2
3
4
5
6
7
8

let a = {
  word: "hello"
};
//a  -> {word:"hello"}
let b = a;
//b  -> {word:"hello"}
a.word = "world";
//a  -> {word:"world"}

{word: "hello"}라는 객체를 a라는 변수에 할당하였고, 그 다음 b에 a의 값을 할당하였을 때,
b는 새로운 메모리 공간을 차지하는 대신 처음 a가 만들어 둔 {word: "hello"}라는 값이 든 공간을 바라보게 된다. 즉, a와 b라는 서로 다른 식별자가 {word: "hello"}라는 값이 들어 있는 하나의 공간을 공유하는 것이다.
따라서 a의 word라는 프로퍼티를 world로 변경하면 새로운 공간에 {word: "world"}라는 값을 담는 것이 아니라 원래 {word: "hello"}가 있던 공간의 프로퍼티를 {word: "world"}로 변경한다. b.word를 해도 같은 결과가 나온다.

그렇다면 변수를 할당할 때 재할당이 불가능한 키워드 const를 사용한다면 어떻게 될까?

const a = 5;라고 할당한 후, a = 6;이라고 재할당하면 const는 재할당이 되지 않기 때문에 오류가 발생한다. 하지만 객체의 경우라면 어떻게 될까?

1
2
3
4
5
6

const a = {
  num: 3
};
//a = {num: 3}
a.num = 5;
//a = {num: 5}

const는 재할당을 할 수 없지만 다음과 같이 객체가 할당되면 객체의 프로퍼티는 변경할 수 있다.
처음 const a라는 변수에 {num : 3}를 할당한다. 그러면 이 값은 하나의 메모리 공간을 차지하게 된다.
이때 a의 num라는 프로퍼티에 접근하여 a.num = 5;라고 값을 할당한 후 a를 참조하면 값이 5로 바뀌어 있다.

하지만 다음과 같이 코드를 사용하면 const는 재할당을 할 수 없기 때문에 오류가 발생한다.

1
2
3
4
5
6

const a = {
  num: 3
};
a = {
  num: 5
};