본문 바로가기
JavaScript/Clone Website

[JavaScript] #1.6 Your first JS Variable / #1.7 let, const, var (#코딩공부)

by 함께 공부해요 2020. 3. 8.

https://youtu.be/YTlHSaLdWgs


<복습>

https://wook-2124.tistory.com/60

 

[JavaScript] #1.5 Hello World with Javascript - HTML, CSS, JavaScript (#코딩공부)

https://youtu.be/u0BypNb0lEI https://youtu.be/MV79yA7ApEs <복습> https://wook-2124.tistory.com/59 [JavaScript] #1.4 Vanilla JS (#코딩공부) https://youtu.be/1fc0MHYb_DE <복습> https://wook-2124.tisto..

wook-2124.tistory.com

 

<준비물>

https://repl.it/

 

Online IDE, Editor, and Compiler - Fast, Powerful, Free

Repl.it is a simple yet powerful online IDE, Editor, Compiler, Interpreter, and REPL. Code, compile, run, and host in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS

repl.it

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements

 

문 및 선언

JavaScript 응용 프로그램은 적절한 구문을 갖는 문으로 구성됩니다. 한 문이 여러 줄에 걸칠 수 있습니다. 여러 문은 각 문이 세미콜론으로 구분된 경우 한 줄에 나올 수 있습니다. 이는 키워드 하나가 아니라, 키워드 그룹입니다.

developer.mozilla.org

 

<코드기록>

// Create(생성)
let a

// Initialize(초기화)
let a = 221;
let b = a - 5;

// Use(사용)
console.log(b);
// console에 b = 216이 뜸
// 추가로 Update(갱신)도 있음


// First variable
let a = 221;
let b = a - 5;
// a를 4로 갱신해줌
a = 4;
console.log(b, a);
// console에 b = 216, a = 4가 뜸

1. 변수(Variable)

변수(variable)를 만드는 종류는 3가지가 있다.

 

var (variable 변수)

변수를 선언한다, 변수를 값으로 초기화할 있다. - 예전부터 쓰던 방법

 

let

블록 범위 지역 변수를 선언한다, 변수를 값으로 초기화할 있다. - const와 대조해서 사용

 

const (constant 상수)

읽기 전용 유명(named) 상수를 선언한다. 변수를 초기화할 없다. - 초기화시키지 않기 위해, 즉 변화를 주고싶지 않을 때 사용

 

정리: 변수를 선언할 때 코드가 계속 초기화되어 변화되면 나중에 골치아프기 때문에 기본적으로는 const를 쓰고, 정말 필요할 때 let을 쓰면 된다.


2. let

if를 거쳐서(내재되서) console.log(x);를 할 경우에는, 'x가 1이 맞다면(true) let x = 2; 즉 x를 2로 출력해라'가 된다.

 

하지만 그 반대로 if문을 거치지 않고, 바로 let x = 1; 다음에 console.log(x);를 할 경우에는 x는 1로 출력된다.

 

let을 이해하기 위한 예시를 들어보자.

 

처음에 let a = 221; a는 221이란 수를 갖는다. 여기서 let b = a - 5;로 변수를 설정해주고,

 

바로 그 다음 a = 4로 a를 재정의(override)해준 뒤 코드를 진행하면

 

a가 let b = a - 5;에 영향을 줄 것 같지만 코드는 위에서부터 밑으로 진행되므로

 

b의 값은 a = 221; 값을 받아서 216이 나오고, a는 처음 갖은 221이 아니라, 다시 재정의(override)된 값인 4가 나온다.


https://youtu.be/cbXHOQzrDm8

 


<코드기록>

// constant(상수)는 변수값을 변경할 수 없기 때문에, 새롭게 a = 4로 변수값을 설정하러 하면 에러가 난다.
// Assignment to constant variable.(상수변수에 할당하려고함.) 그리고 그것은 3번째 줄 3번째 칸의 오류임.
// 기본적으로는 const(constant 상수)를 쓰고, 정말 필요할 때 let을 씀
const a = 221;
let b = a - 5;
a = 4;
console.log(b, a);

// var - variable(변수) 역시 let처럼 변수값을 변경할 수 있음 
// 4년 전만해도 var만 사용할 수 있었고, let과 const는 없었음
var a = 221;
var b = a - 5;
a = 4;
console.log(b, a);
b = 216, a = 4;

3. const

const는 constant(상수)로써 const로 한번 정한 변수값은 변경할 수 없다. 때문에 안정적이다.

 

위에 const number = 42; 로 변수지정을 했기 때문에, number는 무조건 42 값을 갖는다. 

 

constant(상수)는 변수값을 변경할 수 없기 때문에, 새롭게 a = 4로 변수값을 설정하러 하면 에러가 난다.

 

Assignment to constant variable.(상수변수에 할당하려고함.) 그리고 그것은 3번째 줄 3번째 칸의 오류임.

 

아까 했던 2번의 let이다. 이렇게 let과 const의 차이점

 

let은 변수값을 얼마든지 다른값으로 변경가능한 반면, const는 변수값을 한번 정하면 다른값으로 변경이 불가능하다.


4. var

var (variable 변수) 역시 let처럼 변수값이 변경가능하다.

 

4년 전만해도 변수선언으로는 var만 사용할 수 있었고, let과 const는 없었다.

 

다시 정리하자면 변수선언은 기본적으로 const를 쓰고, 정말 필요할 때 let을 쓰면 된다. 끝 :)


※ 코로나19 조심하세요!!!!

 

 

 

댓글