자바스크립트 변수 특징.

자바스크립트에는 변수 선언 방법이 3가지 있다.
var, const, let

var은 자바스크립트의 시작부터 존재하던 함수 선언이지만 해당 변수가 가장 복잡한 면이 있기에 추후에 가장 나중에 설명하도록 하겠다.

const temp = "hi"
temp = "hi" //불가능

const dom = document.getElementById("test") //id:test라는 엘리먼트가 html에 그려져있는 경우
dom.innerHTML = 'hi' //가능
dom = document.getElementById('temp'); //불가능.

functoin

우선 const의 특징이다.
const는 한번 선언하면 재사용, 재선언 할 수 없으며 해당 함수도 사용이 불가능하다.

다만 자바스크립트의 특징.
개같음은 그나마 가장 사용하기 편하고 이해하기 편한 const에서도 알 수 있는데

각각의 예시 코드를 보자

1번

const test ='outisde';
function asdf(){
    const test = 'inside'
    console.log('안', test);
}
asdf()
console.log('밖', test);

2번

const test ='outisde';
function asdf(){    
    console.log('안', test);
}
asdf()
console.log('밖', test);

3번

const test ='outisde';
function asdf(){
    console.log('test', test);
    const test = 'inside'
    console.log('안', test);
}
asdf()
console.log('밖', test);

위의 3가지 예제의 코드들은 어떻게 실행이 될까?

1번 결과.

자바스크립트의 경우 외부에 선언된 변수가 있더라도 함수 내부에서는 외부함수에 영향을 받지 않고 선언할 수 있다.

2번결과

만약 함수 안에 동일한 변수명이 없다면 외부의 변수를 그대로 사용할 수 있다.

3번결과.

에러가 난다.
얼핏 생각하면 'test'콘솔에서 outside가 찍히고 '안' 콘솔에서 inside가 찍혀야 할것 같지만
함수 내부에서 동일한 변수명이 선언되는 경우 순서에 참조 에러가 난다.

참 개같은 언어이다.

다음은 let이다.
let의 경우 재사용은 가능하지만, 재 선언은 불가능한 함수이다

let temp = '1';
temp = '2'; //가능

는 되지만

let temp = '1';
let temp = '2' //불가능

은 불가능 하다는 것이다.

위의 const예제를 let으로 실행해보자.
1번 결과

같은 결과이다.

2번 결과

역시 같은 결과.

같은 결과이다.

하지만 let의 특성상 다른 방법도 있다.

let test ='outisde';
function asdf(){
    console.log('test', test);
    test = 'inside'
    console.log('안', test);
}
asdf()
console.log('밖', test);

const와 달리 재할당이 가능하니 한번 해보자.

에러가 나지 않는다.
그리고 test에는 outside값이
test = inside;를 실행 한 후에는 함수값이 바뀌어 inside로 두번 출력되었다.

그리고 끝판왕인 var을 보자

1번 결과

2번 결과

3번 결과

4번 결과

var의 특징을 알아보기 위한 또다른 예제코드.

var test ='outisde';
function asdf(){
    var test ='1'
    console.log('test', test);
    test = 'inside'
    console.log('안', test);
}
asdf()
console.log('밖', test);
var test ='outisde';
function asdf(){
    var test = '1'
    console.log('test', test);
    var test = 'inside'
    console.log('안', test);
}
asdf()
console.log('밖', test);

보면 알겠지만 중구난방이다.

var은 재사용이 가능하고 재선언이 가능하기에.
3번의 결과와 4번의 결과가 얼핏 보면 동일해야 할거 같지만 그렇지 못하다.
또한 마지막 var을 알기 위한 마지막 예제코드의 2개의 코드에서는 같은 결과가 나와서 사람의 머리를 헷갈리게 만든다.

결과적으로 얼핏 보면 var이 재사용성도 뛰어나고 위에서 선언된 변수나 함수의 중복과 상관없이 동작한다는 점에서 가장 범용성이나 사용성이 높을거 같지만,

추후에 개발된 코드를 볼때 추적이 매우 어렵다는 점이 있다.
물론 개발이 100줄 이내 코드의 단순한 개발이면 모르겠지만 실무에서 적용할만한 프로그램들은
간단한 데이터처리도 상당히 많은 코드를 사용하게 되고, 유지보수를 위해 함수명이나 변수명에 따른 용도추적이 명확해야하기에 var로 함수를 선언하는것은 하지 말아야 할 방법이다.
사실 var을 아예 안쓰고도 코딩할 수 있고, 개인적으로는 그 방법을 권장하지만
현실은 그렇지 못하다.

IE의 환경에서도 여전히 서비스를 바라는 사람이 있고, 이러한 다양한 브라우저의 하위호환, 또는 기존 개발된 소스에서는 var로 선언된 변수 및 함수가 차고 넘치기에 여전히 쓰고 볼 줄 알아야한다.

다만 저러한 특징이 있으니 추 후 유지보수 할때 잘 알아두자.