JavaScript/Basics

[JavaScript] 변수와 상수 (let, const)

Sonny Cucumber 2022. 3. 9. 19:02

기본 중에 기본이지만 다시 돌아보는 차원에서

 

 

변수

란 데이터를 저장할 때 쓰이는 이름이 붙은 저장소. 

let 를 사용해 변수를 사용한다.

 

보통 항상 데이터를 넣어서 선언을 했었는데

let message;

이렇게 선언만하고 데이터를 안넣어도 됨 근데 잘 안쓴다

let user = 'john', age = 25, message = 'Hello';

이렇게 한줄에 다 할 수도 있지만 가독성이 안좋아서

길어지더라도 나눠서 하는게 좋다

 

let 은 두번 선언하면 에러를 뱉어낸다

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared

변수 명명 규칙

두가지 제약이 있는데

오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.

첫 글자는 숫자가 될 수 없음

 

여러 단어를 조합할 땐 카멜 표기법이 흔히 사용 myVeryLongName과 같이

 

대소문자 구별

apple 과 AppLE은 다릅니다!

 

상수

항상 같은, 변수하지 않는 값이라는 뜻이고 

당연히 재할당이 안된다.

 

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // Error

대문자 상수

이런 상수는 대문자와 밑줄로 구성된 이름으로 명명

예시로 웹엥서 사용하는 색상 표기법인 16진수 컬러 코드에 대한 상수를 만든다고 치면

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

그러면 이렇게 말고 언제 일반적인 방식으로 상수를 짓고

언제 대문자를 사용해야할까.

 

상수는 변하지 않는 값인데 그중에는 위에 컬러코드처럼

코드가 실행되기 전에 이미 그 값을 알고있고 런타임 과정에서

계산되지만 최초할당 이후 값이 변하지 않는 것도 있음.

 

const pageLoadTime = /*로딩 시간 */

이런 상수는 로드되기 전에는 정해지지 않기에 일반적으로 카멜표시법으로 지었다.

 

즉 하드 코딩한 값의 별칭을 만들 때 대문자 상수를 씀.

 

바람직한 변수명

이에 대한 조건은

간결하고 명확해야하며 담고있는 것이 무엇인지 잘 설명할 수 있어야합니다.

변수명 짓는 거는 가장 어려운? 것 중에 하나인데 이거만 봐도 실력이 보인다..고?

 

암튼 정보에 알맞은 이름이 있으면 정보를 더 쉽게 찾을 수 있으니

변수를 선언하기 전에 내가 지은 변수의 이름이 괜찮은지 생각해보자

 

+ 재사용 아니면 새로 만들기?

기존 변수를 재사용 하는 개발자들이 있는데 이렇게 되면

변순 선언에 노력을 덜 들이겠지만 디버깅에 아주 많은 시간을 쓸 수 있다고 함

변수를 추가하는건 악습이 아니니 걱정말고 좋은 변수를 만들어주자

 

모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해줍니다.

변수를 추가한다고 해서 성능에 이슈가 생기지 않음. 값이 다른 경우, 변수를 다르게

선언해 주면 코드 최적화에 도움이 될 수 있다고 함.