변수 문법
var 변수명 = 넣을 값;자료를 잠깐 저장하고 싶으면 변수 문법을 사용한다.
var age = '20';
var name = 'kim';
console.log(age); // 20 출력
console.log(name); // kim 출력- 문자, 숫자 외에도 거의 모든 걸 다 집어 넣을 수 있다. document.getElementById()도 변수에 넣어 사용할 수 있다.
- 영어로 작명시에는 함수를 작명하듯 camelCase로 하면 된다.
변수 문법을 사용하는 이유
1. 길고 복잡한 자료가 있을 때 변수에 저장해서 사용하면 편리하다.
예를 들어 사이트를 만드는데 '안녕하세요. 반갑습니다. 오랜만입니다.'라는 인삿말이 매우 자주 필요하다고 가정해 보자.
var 인삿말 = '안녕하세요. 반갑습니다. 오랜만입니다.';그럴 때에는 이렇게 저장해 두면 필요할 때 저 긴 문장을 하드 코딩할 필요 없이 인삿말이라고 쓰면 된다.
2. 특정 값을 기록하고 싶으면 변수를 사용한다.
예를 들어 버튼을 누른 횟수가 필요하다고 하자.
버튼을 1번 누르면 Dark로 글자가 바뀌어야 하고, 버튼을 2번 누르면 Light로 글자가 바뀌어야 한다.
버튼을 누른 횟수를 어딘가에 기록해 두면 편리할 것이다.
var count = 0;그럴 때에 이렇게 변수를 하나 만들고 버튼을 누를 때마다 count를 1씩 증가시키면 되는 것이다.
그래서 변수는 비유하자면 간단한 포스트잇이라고 보면 된다.
변수의 선언, 할당, 범위
변수를 사용할 때는 선언과 할당이라는 용어가 있는데,
변수 만드는 것을 선언, 변수에 무엇인가를 집어 넣는 것을 할당이라고 한다.
var age;
var name;
// 변수의 선언
age = 20;
name = 'kim';
// 변수의 할당- 위처럼 선언만 따로, 할당만 따로 할 수 있다.
- 이미 있는 변수를 재선언 가능하다.
- 이미 들어가 있는 값을 등호로 재할당 가능하다.
변수는 사용 가능한 범위가 있다.
function test(){
var age = 20;
console.log(age); // 가능, 20 출력
}
console.log(age); // 불가능, 20 출력되지 않음- 함수 안에서 변수를 만들었을 경우 함수 안에서만 사용 가능하고, 밖에서는 사용 불가능하다. (밖에서 출력하면 변수가 정의되어 있지 않다고 에러가 발생한다.)
- 함수 밖에서 만든 변수는 함수 안에서 사용 가능하다.
var, let, const 문법 모두 변수 생성 가능
let region = 'seoul';
const price = 3000;var 대신 let, const 문법으로도 똑같이 변수 생성이 가능하다.
그런데 let, const는 이런 기능을 제공한다.
let region = 'seoul';
let region; // 에러 발생let, const는 재선언이 불가능하다. 재선언시 에러가 발생한다.
(장점) 변수를 중복해서 만드는 실수를 미연에 방지해 준다.
const price = 3000;
price = 4000; // 에러 발생const는 재할당도 불가능하다. 재할당시 에러가 발생한다.
(장점) 값을 수정하면 안 되는 변수들을 만들 때 유용하다. 나중에 값을 변경하는 실수를 방지하고 싶을 때 사용하면 된다.
if(true){
let name = 'kim';
}
console.log(name); // 없다고 나옴let과 const는 범위가 더 좁다. 모든 중괄호가 범위이다.
if, function, for 반복문 등의 중괄호 안에서 만든 let, const 변수의 경우 중괄호를 벗어나면 없다고 나온다.
| var | Function-scoped | 재선언 O | 재할당 O |
| let | {Block-scoped} | 재선언 X | 재할당 O |
| const | {Block-scoped} | 재선언 X | 재할당 X |
var 변수는 유연해서 재선언, 재할당이 자유롭다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
