[코드잇 스프린트 3기] Pre-course - 자료형 심화3. 변수와 상수 사이

YUYONI·2023년 10월 28일
0
post-thumbnail
post-custom-banner

계속해서 let을 이용해서 선언을 해왔지만 점점 프로젝트를 진행하거나 다른사람의 코드를 보게될 수록 const를 많이 사용하는 것을 볼 수 있을 것이다.

실제로 몇몇 스타일 가이드에서는 변수를 const 키워드로 선언하라고 권장하고 있기도 함

const는 상수를 선언할 때 사용하라고 했는데 왜 그런 걸까?

let과 const

let과 const의 가장 큰 차이는 당연히 const의 경우에는 재할당이 불가능하다는 것

보통 사용자가 어떤 값을 입력할 지 모르고, 어떤 값이 들어올 지도 모르기 때문에 재할당 가능한 let을 사용한다고 생각할 수 있지만

막상 그 변수값을 이용해 뭔가 동작할 때는 그 값이 바뀌지 않고 상수처럼 사용하게 됨

예를 들어, 검색창에는 다양한 값이 들어올 수 있으므로 변수의 느낌이 강하지만, 막상 검색 버튼을 누르고 그 검색어에 맞는 정보를 찾을 때는 검색어 단 하나만을 가지고 찾음. 바뀌지도 않고, 바뀌어서도 안되는 것!

그리고 코드가 길어지면 변수에 값을 재할당하게 되면 될 수록 혼란을 야기할 수 있고, let으로 선언하면 코드를 읽는 사람 입장에서는 언제 어떤 부분에서 그 값이 바뀔지 알수없는 불안 요소로 작용하게 되므로 명시적이지 않게 됨
=> 코드를 안정적이고 일관되게 작성하기 위해서는 const를 권장!

변수와 상수의 구분

변수와 상수 모두 const로 작성하게 된다면 어떻게 구별하면 될까?
=> 이름으로 구분하면 됨!!

1. CamelCase와 SnakeCase

변수의 경우 보통 소문자로 작성하고 여러 단어의 조합일 경우 단어의 첫글자를 대문자로 쓰는 CamelCase로 작성함

상수의 경우 보통 대문자로 작성하고 여러 단어의 조합일 경우 공백대신 밑줄로서 연결해서 작성하는 SnakeCase로 작성함

myNameMY_NAME을 보고 변수와 상수를 구분하는 것!

var ?

자바스크립트에는 variable의 약자를 따서 var라는 키워드로 변수를 선언할 때가 있었음

var의 문제점

  1. 재선언 가능

var의 경우 let, const 처럼 선언과 할당이 가능하지만 차이점은 var 키워드로 선언한 변수는 중복 선언이 가능함. 똑같은 이름으로 변수를 한 번 더 선언하게 되면, 에러가 발생하는 것이 아니라 그냥 기존의 변수를 덮어써 버리게 되므로 문제가 됐음(재할당과는 다른 문제)

변수가 중복선언이 되면, 길고 복잡한 코드를 작성할 때 실수를 할 가능성이 커지고, 오류가 발생할 수도 있으므로 var대신 let, const를 권장!

  1. scope 문제

let이나 const의 경우 함수, if, for 등 키워드와 무관하게 {}로 감싸진 부분을 기준으로 영역을 갖게 되는데

var의 경우 함수만 scope로 구분되어 짐

ex)

{
  let x = 3;
}

console.log(x); // Uncaught ReferenceError: x is not defined
{
  var x = 3;
}

console.log(x); // 3

즉 var 변수는 지역변수의 구분이 함수에만 있기 때문에 if, for, while, switch 등 다양한 상황에서 선언한 변수가 자칫, 전역변수의 역할을 하게 될 수도 있기 때문에 문제가 됨

(참고로 함수를 기준으로만 적용되는 스코프를 함수 스코프, 코드 블록을 기준으로 적용되는 스코프를 블록 스코프라고 함)

호이스팅(hoisting)

변수는 선언되기 이전에 끌어올려져 사용되는 것을 호이스팅이라고 하는데 함수같은 경우를 예로 들 수 있음 (함수 선언을 나중에하고 이전에 사용해도 함수가 실행이 됨)

console.log(myVariable); // undefined
var myVariable = 2;
console.log(myVariable); // 2

var의 경우 호이스팅이 가능하고,

console.log(myVariable);
let myVariable;  //Uncaught ReferenceError: Cannot access 'myVariable' before initialization

let과 const는 불가능하다는 차이도 있음

profile
기본기와 원리, 개념 철처하게 다지기!
post-custom-banner

0개의 댓글