1. var 를 사용한 변수 특징
var를 이용한 변수 선언의 문제점
기존의 자바스크립트에서는 var를 이용해 변수를 선언
그러나 var로 변수를 선언하는 것은 몇 가지 문제점이 있어서 모던 자바스크립트 개발에서는 거의 이용되지 않는다.
문제점은 1) 변수를 덮어 쓸 수 있다는 점과 2) 다시 선언 (재선언) 할 수 있다는 점
<script>
// var로 선언한 변수를 덮어 쓰거나 재선언하는 예.
var val1 = 'var 변수';
console.log(val1); // var 변수
// var 변수는 덮어쓰기 가능
val1 = 'var 변수 덮어 쓰기';
console.log(val1); // var 변수 덮어 쓰기
// var 변수는 재선언 가능
var val1 = 'var 변수를 재선언';
console.log(val1); // var 변수를 재선언
</script>
📌 덮어 쓰기 ▶️ 한 번 정의한 변수에 다른 값을 대입할 수 있음
📌 재선언 ▶️ 완전히 같은 변수명을 여러 위치에서 변수로 정의할 수 있음
✔️ 변수 선언에 var만 사용하는 경우 프로젝트 규모가 커짐에 따라 의도치 않은 시점에 변수를 덮어 쓰거나 재선언하는 등의 문제가 발생
✔️ ES2015에서는 새로운 변수 선언 방법으로 const(덮어쓰는 것이 불가능한 변수)와 let(덮어쓰는 것이 가능한 변수)이 추가
2. let과 const
(1) let을 사용한 변수 특징
🐰 let은 재선언 ❌ 덮어 쓰기 ⭕️
🐰 함수 {} 안에 선언할 시 블록({})을 벗어나면 사용할 수 없다.
<script>
// let으로 변수 덮어 쓰기
let val2 = 'let 변수';
console.log(val2);
val2 = 'let 변수 덮어 쓰기';
console.log(val2);
// 재선언 실행
let val3 = 'let 변수';
console.log(val3);
// let은 재선언 불가능
let val3 = 'let 변수 재선언'; // 에러
// Uncaught SyntaxError: Identifier 'val3' has already been declared
// '이미 선언되어 재선언 할 수 없다'는 메시지
// 이렇게 let은 var를 이용했을 때 문제가 되었던 재선언을 개선한 변수 정의 방법.
// 덮어 쓰기를 허가할 변수는 let을 이용해야 함.
console.log(val3);
</script>
(2) const 를 사용한 변수 특징
🐰 const는 재선언, 덮어쓰기가 모두 불가능한 가장 엄격한 변수 선언 방법 < 상수 변수 constant variable >
🐰 const를 이용한 변수 선언은 덮어 쓰기를 사전에 감지해서 알려줌
🐰 let와 마찬가지로 재선언을 해도 에러가 발생
💡 변수 종류에 따라 const로 정의해도 변수값을 변경할 수 있는 경우가 있으므로 주의
<script>
/* 다음은 const로 정의한 변수를 덮어 쓰려고 할 경우 */
const val1 = 'const 변수';
console.log(val1);
// const 변수를 덮어 쓰기 불가능
val1 = 'const 변수 덮어 쓰기';
// Uncaught TypeError: Assignment to constant variable.
</script>
(3) const로 정의한 변수를 변경할 수 있는 예
🐰 문자열이나 수치 등 primitive type 이라 불리는 종류의 데이터는 const를 이용해 정의한 경우 덮어 쓸 수 없음
🐰 하지만 객체나 배열 등 object type 이라 불리는 데이터들은 const로 정의해도 도중에 값을 변경할 수 있음
🌻 pirmitive type
논리값 Boolean : true / false
수치 Number : 1, 2.5
문자열 String
undefined : 미정의
null : 값 없음
Symbol : 유일하면 바꿀 수 없는 값
🌻 object type
객체
배열
함수 등 primitive type 이외의 것
<script>
// const를 이용해 정의한 객체의 속성값을 변경, 추가 하는 예
// 객체 정의
const obj1 = {
name: '길동',
age: 24
};
console.log(obj1);
// 속성값 변경
obj1.name = 'tom';
console.log(obj1);
// 속성 추가
obj1.address = 'daegu';
console.log(obj1);
// const로 정의해도 객체 내용은 자유롭게 변경할 수 있음
// 즉, 객체를 정의할 때는 기본적으로 const를 이용.
// 재할당은 에러가 남.
//obj1 = {
// name: '길동',
// age: 24
//}
// const를 이용해 정의한 배열 값을 변경, 추가하는 예
// 배열 정의
const arr1 = ['dog', 'cat'];
console.log(arr1);
// 값 변경
arr1[0] = 'bird';
console.log(arr1);
// 값 추가
arr1.push('monkey');
console.log(arr1);
// 배열도 const를 이용해 정의했어도 값은 자유롭게 변경할 수 있음
// 따라서 배열 역시 기본적으로 const를 이용해 정의
</script>
[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]
'Programming Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 반복문 | for문, while문, break문, continue문 (0) | 2024.03.28 |
|---|---|
| [JavaScript] if 조건문 (if-else & else-if), switch 문 (1) | 2024.03.28 |
| [JavaScript] 산술연산자, 복합대입연산자, 비교연산자, 논리연산자, 삼항연산자 (1) | 2024.03.27 |
| [JavaScript] 기본 문법 | 변수, 자료형 및 자료형 검사, 자료형 변환 (0) | 2024.03.27 |
| [JavaScript] 자바스크립트 태그, 용어와 기본 입출력 방법 (0) | 2024.03.26 |
