[자바스크립트 기본] 자바스크립트 변수 선언 var/let/const (var를 사용해선 안되는이유)

 

 

대다수 자바스크립트 어플리케이션(Application)은 사용자 또는 서버로부터 받은 정보를 처리하는 방식으로 동작한다.

 

예시)

온라인 쇼핑몰 - 판매중인 상품이나 장바구니 등의 데이터를 이용해서 결제창으로 넘어감

채팅 어플 - 사용자, 메시지 등의 데이터를 이용해서 서로 대화할 수 있는 채팅장을 동작함

 

 

이러한 데이터를 저장하는 용도로 사용되는 것이 '변수(Variables)'이다.

다양하고 수시로 바뀌는 데이터들을 저장도 없이 막 보내게 되면 지저분해지고 관리가 어려워질 것이다.

 

 

 

변수(Variables) 

 

변수(variables) : 데이터(data)를 저장할 때 쓰는 이름이 붙은 저장소

 

1. let 을 이용한 변수선언

let message; // let은 변수를 생성할때 사용, 현재 message라는 이름을 가진 변수를 선언함
message = 'hey!'; // message라는 변수안에 string type인 hey!를 저장함
console.log(message); // 콘솔 창에 변수에 저장된 값을 보여줌

 

✅ 변수를 선언과 동시에 할당 가능

// 변수를 선언과 동시에 할당 가능
let hello = 'heyheyhey';

 

✅ 한 줄에 여러 가지 변수를 선언 가능

// 한줄에 여러가지 변수를 선언 가능
let user = 'Taylor', age = 30, message = 'look what you made me do🐍';

 

여러가지 변수를 선언할 경우 아래와 같이 가독성 좋게 작성 가능

let user = 'bob',
    age = 22,
    message = 'get up!';

 

➡️ 기술적인 차이가 있지 않으며 개인의 취향 차이로 편한 데로 작성

 

 

✅ let을 이용하여 변수를 선언할 경우 변수 안에 저장된 값을 변경할 수 있음

let user = 'baby';
console.log(user); // baby
user = 'bob'
console.log(user); // bob

 

 

 

 

 

2-A. const를 이용한 변수 선언

 

✅ 변하지 않는 변수를 사용하고 싶을 때 let 대신 const를 사용

✅ const로 선언한 변수를 상수(Constatant)라고 함, 우린 이것을 상수라 부르기로 했어요.

✅ const는 재할당이 불가능, 변경 시 Error 발생

const myBirthday = '01.01.2000';
myBirthday = '01.02.2000';  // Error! can't reassign the constant!

🔑 일주일 일수(7일) 하루의 시간(24시간)과 같이 절대 변하지 않을 것이라 확신되는 값을 const를 이용해 저장

    ➡️ 협업 시에도 변경을 하면 안 되는 값이라는 것을 타개발자들에게 알릴 수 있음

 

 

 

 

 

2-B. 대문자 상수(Uppercase Constants)

✅ 기억하기 힘들거나 오타가 나기 쉬운 값을 변수에 할당해 별칭으로 사용

✅ 보통 대문자와 밑줄로 구성되어있음

✅ 유지보수에 용이

 

const COLOR_RED = '#f00';
const COLOR_GREED = '#0f0';

// 색상을 고르고 싶을 때 별칭을 사용, 변수명이 잘못됐다면 error를 뿜어내 디버깅 쉬어짐

let color = COLOR_GREEN;
console.log(color); // #0f0

 

 

3. var를 이용한 변수선언

✅ let이나 const 대신 var를 이용해서 변수를 선언하는 경우를 종종 볼 수 있음

✅  var는 let과 거의 동일하게 동작하지만 오래된 방식으로 사용을 지양 ❌

 

 

대부분의 경우에는 var로 선언된 변수는 let으로 바꿔도 반대로 let을 var로 바꿔도 무리 없이 동작

var message = 'hello!';
console.log(message); // hello!

 

 

하지만 var는 초기 자바스크립트 구현 방식으로 let과 const 와는 다른 방식으로 작동!

모던자바스크립트에 있는 표현법을 빌리자면...

오래된 스크립트에서 당신을 기다리는 monster.....

귀여운 꼬부기와 같다고 생각하면 마음이 조금 놓일 수도?🫠

 

 

 

뻥이고요.

옛날 스크립트에서 var를 let으로 바꿔야 할 일이 있다면 var를 쓰면 안 되는 이유를 확실히 알고 가야 함.

생각지도 못한 에러의 등장으로 뒷목 잡고 아침드라마 찍고 싶지 않다면..

 

 

간단하게 var를 사용해선 안 되는 이유를 알아보자면 다음과 같다.

 

1) var는 블록 스코프가 없다!

⚠️ var로 선언한 변수의 스코프는 함수 스코프 또는 전역 스코프 ➡️ 블록 밖에서 접근 가능

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

for문뿐만 아니라 function, while, if 등등 스코프 안에서 쓰인다면 전부 밖에서 접근이 가능하다 🙃

 

 

2) var는 변수의 중복 선언을 허용한다!

 

⚠️ 한 스코프에서 같은 변수를 let으로 두 번 선언하면 에러발생

let user = 'jason'
let user = 'ajax'

console.log(user); // SyntaxError: Identifier 'user' has already been declared

 

 

⚠️⚠️⚠️⚠️ 하지만 var를 사용한다면..? ⚠️⚠️⚠️⚠️

이런 정신 나간 짓 가능...... 😘

var user = 'python';
var user = 'c++'; // 이 var는 아무것도 하지 않음, 이미 선언된 것
// 에러도 발생하지 않음

console.log(user); // c++

 

 

3) 선언하기 전 사용 가능한 var!

⚠️ var는 선언은 함수가 시작될 때 처리됨

⚠️ 전역에서 선언한 변수라면? 스크립트가 시작될때 처리됨

⚠️ 선언된 것이 위로 끌어올려지는 것을 호이스팅(hoisting)이라 부름

function sayHey() {
	message = 'hey!';
    
    if(false) {
    	var message; // 블록 스코프가 무시되기 때문에 여기 선언해도 상관없음
    }
    
    console.log(message);
}

sayHey(); // hey!

 

 

 

4. 변수 명명 규칙

✅ 변수명에는 오직 문자와 숫자, 기호$ 와 _ 만 들어갈 수 있음

✅ 대신 첫 글자는 숫자가 될 수 없음

✅ camelCase* 를 이용해서 변수명명

 

*camelCase : 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성

 

// 가능한 변수명
let userName;
let test123;

let $;
let _;


// 불가능한 변수명
let 1abc; // 숫자로 시작 불가능
let my-name; // 하이픈은 변수명에 올 수 없음

 

✅ 대소문자 구별 : apple과 AppLE은 서로 다른 변수

✅ 변수명은 영어를 사용해서 만드는 게 국제적인 관습

 

 

✅ 예약어 목록에 있는 단어는 변수명으로 사용 불가능

WHY? 자바스크립트 내부에서 이미 사용 중

 

예약어 예시 : let, class, returnm function

let let = 5; // Error
let function = 'hey'; //Error

 

 

5. 변수 명명시 참고하기 좋은 규칙!

✅ userName이나 shoppingCart처럼 사람이 읽을 수 있는 이름 사용

✅ 줄임말과 a,b,c같은 짧은 이름 지양

✅ 자신만의 규칙이나 소속된 팀의 규칙을 따르기

 

 

➡️ 변수명은 간결하고 명확

➡️ 변수에 무엇을 담고 있는지 잘 설명

➡️ 변수의 이름을 짓는 것은 가장 중요하지만 복잡한 기술

➡️ 이름짓다 사망하지 않도록... 개인적으로 naver영어사전 즐겨찾기 해놓고 애매할 때면 써먹는 중

 

 

 

6. use strict 없이 할당하기

✅ 변수는 대부분 정의되어있어야 사용 가능함

✅ 이전 버전 자바스크립트 안에서는 let이나 const 없이도 단순하게 값을 할당해 변수를 생성하는 것이 가능

✅ use strict를 쓰지 않으면 과거 스크립트와의 호환성 유지를 위해 사용이 가능하지만 권장하지는 않음

 

num = 3; // use strict 가 없으면 정의 되어있지 않아도 단순 할당으로 사용가능
console.log(num); // 3

'use strict';

num = 3; // error: num is not defined

 

 

Reference (참조)

 

https://ko.javascript.info/variables

https://ko.javascript.info/var