안녕하세요. Tay 입니다.
변수
- 사전적의미는 가변적인 수를 의미한다.
- 프로그래밍에서의 변수는 가변적인 수를 담는 그릇 이라고 표현할 수 있다.
자바스크립트의 변수(Variable) 은 var , let , const 라는 예약어로 이루어져있다.
var
- variable 의 약자로 초장기 자바스크립트의 변수는 이 예약어를 통해서 선언했다.
- var 로 선언된 변수는 자료형에 상관없이 사용할 수 있다.
var 변수명 = 데이터 형식으로 사용할 수 있다.
직접 코드를 돌려보며 확인하기 위하여 이전의 index.html 에 variable.js 를 추가하기로 한다.
1) index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="hello.js"></script>
<script src="variable.js"></script>
</body>
</html>
2) variable.js
var name = "kimgeuntae";
var age = 23;
var isMale = true;
console.log(`name : ${name} , age : ${age} , isMale : ${isMale}`);
결과 :
위와 같이 var 는 문자열(name), 숫자형(age), 논리형(isMale) 과 관계 없이 사용 할 수 있다.
let
- es2015(es6) 에 let , const 가 추가됐다.
- 변수의 재선언을 금지한다.
※ 즉, 이전에는 var 만 있었기 때문이 변수 선언 문제가 매우 많았다.
1) 재선언 금지 확인 :
let firstName 을 선언 한 뒤 2번째 줄에 재선언 했다.
var name = "kimgeuntae";
var age = 23;
var isMale = true;
console.log(`name : ${name} , age : ${age} , isMale : ${isMale}`);
let firstName = "geuntae";
let firstName = "geunsik";
console.log(`firstname : ${firstName}`);variable.js 에 위 코드를 추가하여 console 로 다시 확인해보자.
결과 :
let 으로 선언한 firstName 이라는 변수의 재선언으로 위의 에러가 발생했다.
- 여기서 재선언은 자료형 상관 없이 같은 이름을 사용하는 것을 말한다.
※ 그렇다면 재할당은 가능할까?
- 결론부터 말하자면 가능하다. 그럴려고 만든 것이 let 이다.
2) 변수 데이터 재할당 확인 :
var name = "kimgeuntae";
var age = 23;
var isMale = true;
console.log(`name : ${name} , age : ${age} , isMale : ${isMale}`);
let firstName = "geuntae";
// let firstName = "geunsik";
firstName = "geunsik";
console.log(`firstname : ${firstName}`);
결과 :
재선언을 하지않고 재할당을 하였더니 에러없이 정상적으로 작동하는 것을 확인해볼 수 있다.
const
- es2015(es6) 에 let , const 가 추가됐다.
- 변수의 재선언, 재할당 모두 금지한다.
상수(constant) 는 변하지 않고 항상 같은 수를 말한다.
즉, 자바스크립트에서 상수는 상수와 이름이 같은 변수를 재선언, 재할당을 금지한다.
1) 재선언 금지 확인 :
var name = "kimgeuntae";
var age = 23;
var isMale = true;
console.log(`name : ${name} , age : ${age} , isMale : ${isMale}`);
let firstName = "geuntae";
// let firstName = "geunsik";
firstName = "geunsik";
console.log(`firstname : ${firstName}`);
const lastName = "kim";
let lastName = "lee";
console.log(`lastname : ${lastName}`);const lastName 을 같은 이름 let 형으로 재선언한다.
결과 :
const lastName 이 let lastName 으로 재선언 되므로 const 의 재선언 금지에 위반된다.
2) 재할당 금지 확인 :
var name = "kimgeuntae";
var age = 23;
var isMale = true;
console.log(`name : ${name} , age : ${age} , isMale : ${isMale}`);
let firstName = "geuntae";
// let firstName = "geunsik";
firstName = "geunsik";
console.log(`firstname : ${firstName}`);
const lastName = "kim";
// let lastName = "lee";
lastName = "park";
console.log(`lastname : ${lastName}`);
결과 :
lastName 이라는 상수의 값을 kim 에서 park 으로 변경했더니 재할당 에러가 발생했다.
이 글은 개인 공부목적으로 작성되었습니다.
정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.
