Javascript_선언 (feat. const, let, var)
자바스크립트의 기본을 알아보려하면
선언, 함수, 호출 등이 있다.
먼저 선언부터 알아보자
선언에는 여러종류가 있는데
const, let, var가 많이 사용된다.
다 같은 선언의 역할을 하는데 각각 다른 효과가 있다.
또 HTML에서 요소나 태그를 가져올 수 있다.
먼저 var는 어떤 숫자, 문자, 참거짓(boolean)등 여러 요소를 선언할때 사용된다.
|
1
2
3
4
5
|
var number = 10; // number에 10이라는 숫자를 저장시킨다.
var text = "string"; // text에 string이라는 문자를 저장시킨다.
var div = document.querySelector('#div'); // div에 HTML에서 'div'라는 id를 가진 태그를 저장시킨다.
|
cs |
위처럼 선언해놓고 나중에 연산을 하거나 저장해놓은 문자나 HTML태그를 손쉽게 호출할 수 있다.
또 선언한 숫자나 내용을 바꾸고싶을땐 아래처럼 var를 제외하고 작성하면 된다.
|
1
2
3
|
var number = 10; // number에 10이라는 숫자를 저장시킨다.
number = 20; // numbber에 저장된 값을 20으로 변경한다.
|
cs |
다음으로 let을 알아보자.
사실 var와 다를점은 없다.
|
1
2
3
4
5
|
let number = 10; // number에 10이라는 숫자를 저장시킨다.
let text = "string"; // text에 string이라는 문자를 저장시킨다.
let div = document.querySelector('#div'); // div에 HTML에서 'div'라는 id를 가진 태그를 저장시킨다.
|
cs |
마찬가지로 선언하고 아래처럼 변경이 가능하다.
|
1
2
3
|
let number = 10; // number에 10이라는 숫자를 저장시킨다.
number = 20; // numbber에 저장된 값을 20으로 변경한다.
|
cs |
다음 const는 어떤 선언을 하고 변경되지 않았으면 할때 사용된다.
|
1
2
3
4
5
|
const number = 10; // number에 10이라는 숫자를 저장시킨다.
const text = "string"; // text에 string이라는 문자를 저장시킨다.
const div = document.querySelector('#div'); // div에 HTML에서 'div'라는 id를 가진 태그를 저장시킨다.
|
cs |
다만 const는 변경을 못하게 한다고 했으니 추후에 변경을 할수 없다.
그럼 const는 차별점이 있는데 var와 let은 왜 같은기능에 두개나 있을까?
var를 널리 사용했으나 이 var의 오점이 있다.
var로 선언한 것이 원하는 범위 외에서도 사용되거나 호출되는 것이다.
|
1
2
3
4
5
6
7
8
9
10
|
var foo = "This is String.";
if(typeof foo === 'string'){
var result = true; // if문 내에서 선언
} else {
var result = false; // if문 내에서 선언
}
console.log(result); // result : true
|
cs |
이처럼 if문 내에서 선언된 경우에 if문 밖에서 호출되지 않기를 원하는 경우가 있다.
하지만 var의 경우 console.log로 보았을때 정상 호출되어 출력된다.
|
1
2
3
4
5
6
7
8
9
10
|
var foo = "This is String.";
if(typeof foo === 'string'){
var result = true; // if문 내에서 선언
} else {
var result = false; // if문 내에서 선언
}
console.log(result); // result : true
|
cs |
위와같이 if문 내에서 선언된 것이 if문 밖에서도 정상 호출된다.
이를 원하지 않는 경우가 있기때문에 이를 오점이라고 본다.
|
1
2
3
4
5
6
7
8
9
10
|
var foo = "This is String.";
if(typeof foo === 'string'){
let result = true; // if문 내에서 선언
} else {
const result = false; // if문 내에서 선언
}
console.log(result); // result가 호출되지않아 error
|
cs |
이처럼 let, const는 선언한 단락 밖에 있는 호출에서는 result를 불러올 수 없다.
여전히 var, let, const 취향대로 사용하는 개발자가 많다.
이런 차이점이 있다는 것만 알고 넘어가자.