[Let's get it 자바스크립트 프로그래밍] - 2.3 ~ 2.5 변수, 반복문, 조건문

신혜린·2024년 12월 16일

Let's get it 자바스크립트 프로그래밍

목록 보기

2/8

변수 (let, const, var)

변수(variable)는 값을 저장하기 위한 메모리 공간을 뜻한다.

값을 저장하고 저장한 값을 불러올 수 있게 하는 것이 변수(variable)다.

변수를 만드는 행위를 선언(declaration)한다고 표현한다.

변수를 만드는 방법은 let, const, var 3가지가 있다.

선언문 + 변수명 식; (ex. let name = "your name")

1️⃣ let

let total = 50000 + 8000 + 10000 + 9000

let 으로 시작하는 명령을 선언문이라고 한다.
변수를 선언함과 동시에 값을 대입하는 행위를 초기화(initialization)이라고 한다.
변수의 이름과 값은 컴퓨터의 메모리에 저장된다.

let string; let string;

let은 초기화 없이 선언만 할 수 있다.
하나의 메모리에 동일한 변수명을 선언하면 에러가 난다.
따라서 변수명이 겹치지 않도록 해야 한다.

let $string;
let _string;

변수명에 사용할 수 있는 특수문자는 & 와 _ 뿐이다.
한글, 한자, 유니코드는 변수명으로 사용할 수 있다.
숫자로 시작해선 안된다.

let let // Uncaught SyntaxError
let var // Uncaught SyntaxError

예약어(reserved word)는 변수명으로 선언할 수 없다.
예약어는 자바스크립트 프로그래밍에서 특정한 역할을 하므로 변수명으로 쓰지 않는다.

< let change = "바꿔봐" // 선언문
> undefined
> change = "바꿨다" // 식
> 바꿨다

변수 앞에 let 이 없으면 식이기 때문에 대입한 값이 결괏값(ex. 바꿨다)으로 출력된다.
변수 앞에 let 이 붙으면 선언문이 된다. 문(statement)은 식과 다르게 결괏값이 없다.(undefined)

let change = '바꿨다';

change = undefined;
change = null;

변수에 넣은 값을 비울 때는 undefined 혹은 null을 대입한다.

let string = "hello";
let string2 = string;
console.log(string2) // "hello"

변수를 다른 변수에 대입할 수도 있다.

2️⃣ const

const는 상수(constant)의 줄임말로, 변하지 않는 수라는 뜻을 갖고 있다.

하지만 객체의 내부 값에서는 변하는 경우도 있다. (그래서 변수의 일종으로 친다.)

const value = "상수";
value = "바꿀 수 없습니다." // Uncaught TypeError: Assignment to constant variable

상수로 변수를 선언하게 되면 값이 수정되지 않음이 보장되기 때문에 더 안전하게 코딩할 수 있다는 장점이 있다.

const value = "상수";
const value = "다시 선언할 수 없습니다."; // Uncaught SyntaxError: Identifier 'value' has already been declared;

const value; // Uncaught SyntaxError: Missing initializer in const declaration

상수는 재선언이 불가능하다.
상수는 한번 값을 대입하면 다른 값을 대입할 수 없다는 특성 때문에 상수 선언 시 초기화하지 않으면 에러가 발생한다. (let은 가능, const는 불가능)

초기화? = 선언(declaration)과 동시에 값을 대입하는 것.

const COLOR_RED = "#F00";

대문자로 상수를 만드는 건 '하드 코딩한' 값의 별칭을 만들 때 사용한다.

const pageLoadTime = /* 웹 페이지를 로드하는데 걸린 시간 */;

pageLoadTime은 최초 할당 이후 변하지 않는 값이기 때문에 상수로 할당한다.
하지만, 페이지가 로드되기 전에는 정해지지 않기 때문에 대문자가 아닌 일방적인 방식으로 변수명을 지었다.

3️⃣ var

var는 변수(variable)의 줄임말이다.

var로 선언하면 선언문 대신 변수문(variable statement) 라고 한다.

예전에는 많이 사용한 예약어지만, 자바스크립트 버전 업그레이드가 되면서 현재는 const와 let을 사용하여 변수를 선언하는 방식을 선언한다.

let user;
let user; // SyntaxError: 'user' has already been declared

var value;
var value; // 에러 안 뜸

var는 재선언이 가능하다.
선언 시 초기화를 안해도 에러가 발생하지 않는다.
선언 시 초기화 안하고 호출해도 에러가 발생하지 않고 undefined로 출력된다.

var let = 30;
var undefined = 30;

var는 var를 제외한 다른 예약어를 변수명으로 사용할 수 있다.

if (true) {
	let test = true;
}
console.log(test); // Error: test is not defined

if (true) {
	var test = true;
}
console.log(test); // true (if문 바깥에 있어도 접근할 수 있음)

var로 선언한 변수는 블록 스코프가 없다. ⭐️

함수 스코프이거나 전역 스코프이다.

function sayHi() {
	phrase = "hello";
    
    var phrase;
 }
 
 function sayHi() {
    var phrase;
    
    phrase = "hello";
 }

var 선언은 함수가 시작될 때 처리된다. (전역에서는 스크립트가 시작되는 시점에 처리됨)
var로 선언한 변수는 선언 위치에 상관없이 함수 본문이 시작되는 지점에서 정의된다.
따라서 위 두 식은 동일하게 동작한다.

위 예제처럼 변수가 끌어올려지는 현상을 호이스팅(hoisting) 이라고 한다.
var로 선언한 모든 변수는 함수의 최상위로 끌어올려(hoisted)진다.
그렇다고 let, const 로 선언한 변수가 호이스팅이 되지 않는다는 것은 아니다! 호이스팅 개념 참고

 function sayHi() {
  var phrase; // 선언은 함수 시작 시 처리됩니다.

  alert(phrase); // undefined

  phrase = "Hello"; // 할당은 실행 흐름이 해당 코드에 도달했을 때 처리됩니다.
}

sayHi();

선언은 호이스팅되지만, 할당은 호이스팅 되지 않는다.

반복문

1️⃣ while문

while (조건식) {
  실행문;
}

while문은 조건식이 참인 동안 반복해서 실행문을 실행한다.

while (true) {
  console.log("무한루프");
} // 무한 반복 출력

위와 같이 무한 루프에 빠지게 되는 상황을 방지하기 위해 여러가지 조건문을 함께 사용한다.

2️⃣ for문

for (변수 초기화; 조건식; 종료식) {
  실행문;
}

for (let i = 0; i < 100; i++) {
  console.log("백번 출력");
}

프로그래밍에서는 숫자를 0부터 세기 때문에 변수에 첫번째 값으로 1보다는 0을 사용할 것을 권장한다.
i가 0일 때부터 1씩 더해 100보다 작은 동안 반복해서 출력한다. (100번 출력)
for문의 변수 초기화식, 조건식은 생략할 수 있다.(하지만 무한 루프에 빠져 브라우저가 뻗어버린다.)

3️⃣ break문

반복문을 멈추고 싶을 때 break문을 활용한다.

let i = 0;
while (true) {
  if (i === 5) {
    break;
    i++;
  }
}
console.log(i); // 5

i가 0일 때부터 1씩 더해 i가 5와 일치할 때까지 반복하다가 멈춘 뒤 while문을 빠져나온다.
최종적인 i 값은 5가 된다.

4️⃣ continue문

반복문이 특정 조건에서만 실행되기를 원할 경우 continue문을 사용한다.

continue문을 사용하면 이후 코드는 건너뛰게 된다.

let i = 0;
while (i < 10) {
  i++;
  if (i % 2 === 0) {
    continue;
  }
  console.log(i);
}
/*
1
3
5
7
9
*/

i를 2로 나눈 값이 0일 때만 continue문이 실행되어 이후 코드를 건너뛰게 된다.

조건문

1️⃣ switch문

switch (조건식) {
    case 비교 조건식;
    	실행문;
}

let value = 'A';

switch (value) {
  case 'A':
    console.log('A');
}

// A

조건식 과 비교 조건식이 일치(===)하면 해당 실행문이 실행된다.
보통 조건식에 변수를 넣고, 비교 조건식에는 변수와 비교할 값을 넣는다.

let value = 'B';

switch (value) {
  case 'A':
    console.log('A');
    break;
  case 'B':
    console.log('B');
    break;
  case 'C':
    console.log('B');
    break;
  default;
    console.log('아무것도 일치하지 않음');
    break;
}

// B