본문 바로가기
언어/Javascript, Typescript

[js] const, let

by minhyeok.lee 2023. 2. 4.
반응형

javascript의 변수 선언 ( const vs let )

javascript에서 변수를 선언하는 방법은 3가지 var, let, const가 있다.

하지만 변수 선언 방식 중 하나인 var는 사용을 지양하기 때문에 아래 코드 블록에는 let으로만 사용하지만 var도 동일하게 사용 가능하다.

 

 * 이유는 아래 링크에서 확인이 가능하다.

2023.02.04 - [언어/Javascript] - [js] var vs let

 

[js] var, let

javascript의 변수 선언 ( var vs let ) javascript에서 변수를 선언하는 방법은 3가지 var, let, const가 있다. var로 선언한 변수는 let으로 선언한 변수와 유사, 대부분의 경우에 let을 var로, var를 let으로 바꿔

kfdd6630.tistory.com

 

let x;
x = 1;
console.log(x); // 출력값: 1
x = 2;
console.log(x); // 출력값: 2

위와 같이 x를 let으로 선언하였을 때는 값을 계속해서 변경할 수 있다.

 

const x;  // 출력값: SyntaxError: Missing initializer in const declaration
x = 2;
console.log(x);

위와 같이 x를 const로 선언하였을 때는 값을 넣지 않고 초기화할 수 없다.

 

const x = 2;
x = 1; // 출력값: Assignment to constant variable.
console.log(x);

위와 같이 x를 const로 선언하였을 때 값을 변경할 수 없다

 

const나 let의 변수명을 짓는 방식이 있는데 큰 틀로는 회사나 프로젝트 내 팀원들과 정한다.

하지만 개발환경 내에서 강제적으로 막는 변수명이나 전체적으로 선호하는 변수 선언 방식이 있다.

2023.02.04 - [언어/Javascript] - [js] 변수명 표기법

 

[js] 변수명 표기법

변수명(var, let, cosnt) 표기법 변수명이 해당 변수를 쉽게 설명할 수 있게 하려면 보통 여러 단어로 이뤄질 가능성이 높다. 이때 사용하는 두가지 방법으로 카멜케이스(camelCase) 와 스네이크 케이스

kfdd6630.tistory.com

 

이외에 const로 변수명을 지을 때 중요한 점이 한 가지 있다.

const COLOR_RED = "#F00000";
const COLOR_ORANGE = "#FF7F00";
const COUNTRY = "KOREA";

 

위와 같이 하드 코딩한 값의 별칭을 만들 때 대문자로 변수명을 짓는다.

실행 전에 이미 값을 알고 있고, 코드에서 직접 그 값을 쓰는 경우에 const값은 대문자 상수로 선언한다.

 

const getData = getAxios();
const age = anyFunction(data);

위와 같이

1. RESTful API로 C, R, U, D(Create_POST, Read_GET, Update_PUT, PATCH, Delete_DELETE) 한 데이터 리턴 반환 값 2. 함수의 반환 값

const 데이터 형식으로 선언할 때 실행 전에 이미 값을 알고 있지 않기 때문에 소문자 상수로 선언한다.

 

 * 상수 => const(변하지 않기 때문에), 변수 => let(변하기 때문에) 라고 생각하면 편하다.

 

결론: 선언, 초기화 이후 변수 값의 변경이 필요할 시 let 아닐 시, const로 선언

* var과 let은 초기화 및 선언 후 변경 가능(var는 사용을 지양), const는 불가능(선언과 초기화를 동시에 이후 값 변경 X)

반응형

'언어 > Javascript, Typescript' 카테고리의 다른 글

[js] 빈 값을 가진 json key 제거  (0) 2023.02.08
[js] 변수명 표기법 (var, let, cosnt)  (0) 2023.02.04
[js] var, let  (0) 2023.02.04
[js] Nullish coalescing operator(??)  (0) 2023.02.03
[js] null vs undefined  (0) 2023.02.03

댓글