[자바스크립트 코딩 - 정보] 자료형(변수)에 대해서 상세하게 알아보자

자바스크립트 : 자료형에 대해서 알아보자:변수(2)

이전 글이 너무 길어 분리를 하였습니다.

[자바스크립트 #5] 자료형에 대해서 알아보자:객체(1)

자바스크립트에도 다른 언어들과 마찬가지로 수 많은 자료형들이 있습니다.

Date객체처럼 자바스크립트의 내장 객체 중 다양한 연산들을 유용하게 사용하기 위해 Math라는 객체가 있습니다.

이번 노트에서는 Math객체의 다양한 메소드에 대해 살펴봅시다.

그리고 문자열과 배열의 차이와 변수에 대해서도 알아봅시다.

>

 

변수

자바스크립트에는 variable의 약자를 따서 var라는 키워드로 변수를 선언할 때가 있었습니다.

자바스크립트에 변수를 선언하는 방식은 처음부터 let과 const가 아니였던 것이죠.

 

그래서 오래된 프로젝트들이나 혹은 자바스크립트의 정보들을 정리해둔 조금 오랜 시간이 지난 블로그들을 살펴보면 심심찮게 var라는 키워드를 만나볼 수가 있는데요.

 

이제는 거의 사용되지 않는 var 변수, 그래도 언제 어떻게 만나게 될지 모르니 조금만 살펴봅시다.

어떤 문제가 있길래 사용되지 않는지, 가볍게라도 알고 있는 게 좋겠죠?

변수 선언

var myVariable;myVariable = 'test';

혹은

var myVariable = 'test';

일단 var 변수는 let이나 const처럼 똑같이 키워드, 변수이름으로 선언할 수 있고, 키워드, 변수이름, 할당연산자, 값으로 선언과 동시에 값을 할당해 줄 수도 있습니다.

중복 선언 허용

문제는, let과 const와는 다르게 중복 선언이 가능합니다.

똑같은 이름으로 변수를 한 번 더 선언하게 되면,

에러가 발생하는 것이 아니라 그냥 기존의 변수를 덮어써 버리는 것이죠.

let 변수에 값을 재할당하는 것과는 엄연히 다릅니다.

var myVariable = 'best';
console.log(myVariable);
var myVariable = 'Best!';
console.log(myVariable);

best
Best!

이렇게 변수가 중복선언이 되면, 길고 복잡한 코드를 작성할 때 실수를 할 가능성이 커지고, 상황에 따라서는 치명적인 오류가 발생할 수 있습니다.

함수 스코프

var 변수가 사라진 두 번째 문제는 Scope의 문제입니다.

if, for, function 등등 어떤 키워드와 관계없이 코드 블록, 즉 {} 중괄호로 감싸진 부분을 기준으로 scope를 나누는 let과 const와는 다르게 var 변수는 scope가 function에서만 구분되어 있습니다.

{
    let x = 3;
}

function myFunction() {
    let y = 4;
}

console.log(x);
console.log(y);

Uncaught ReferenceError: x is not defined

let이나 const의 경우에는 중괄호로 감싸진 경우라면 모두 중괄호 밖에서는 지역 변수에 접근할 수 없습니다.

{
    var x = 3;
}

function myFunction() {
    var y = 4;
}

console.log(x);
console.log(y);

3
Uncaught ReferenceError: y is not defined

하지만 var 변수는 지역변수의 구분이 함수에만 있기 때문에 if, for, while, switch 등 다양한 상황에서 선언한 변수가 자칫, 전역변수의 역할을 하게 될 수도 있는 것이죠.

 

참고로 이렇게 함수를 기준으로만 적용되는 스코프를 함수 스코프, 코드 블록을 기준으로 적용되는 스코프를 블록 스코프라는 용어를 사용한다는 점도 참고해 주세요! :)

끌어올림(Hoisting)

console.log(myVariable);
let myVariable;

Uncaught ReferenceError: Cannot access 'myVariable' before initialization

let과 const로 선언한 변수는 선언되기 이전에 사용될 수 없습니다.

하지만, var 변수는 함수 스코프를 기준으로 선언되기 이전에도 변수에 접근이 가능한데요.

console.log(myVariable);
var myVariable;

undefined

변수의 선언이 끌려 올라가서 마치, 2번째 줄과 첫 번째 줄이 바뀐 것처럼 동작하는 데요.

var myVariable;
console.log(myVariable);

이렇게 변수가 끌어올려 지는 현상을 '호이스팅(hoisting)'이라고 부른다는 점도 기억해 두시면 좋을 것 같아요 :)

다행히 호이스팅은 선언과 동시에 값을 할당하더라도, 선언문만 올려지기 때문에 값은 그대로 두 번째 줄에 남아있는 데요.

console.log(myVariable);
var myVariable = 2;
console.log(myVariable);

undefined
2

하지만 이런 식으로 동작하는 방식은 코드의 흐름을 방해하기에 충분해 보이죠?

한 가지 주의해야 될 부분은, 함수를 선언할 때도 이 호이스팅이 적용됩니다.

sayHi();

function sayHi() {
  console.log('hi');
}

이렇게 코드를 작성하더라도 실행해보면,

hi

당연한 듯 함수가 잘 실행되는 모습을 확인할 수 있습니다.

함수를 한 번 선언하고 나면 어디서든 유연하게 사용할 수 있다는 장점이 있지만, 코드의 흐름에 부정적인 영향을 끼칠 수 있습니다.

 

그래서 함수를 선언할 떄는 가급적 코드 윗부분에 선언하거나, 호출을 항상 아래쪽에서 한다거나 나름대로 규칙을 세워서 코드를 작성하시기를 권장드립니다 :)

 

자, 지금까지 오래된 자바스크립트에서 변수를 만들 때 사용했던 var 키워드에 대해서 살펴봤는데요.

요즘은 잘 사용되지 않지만, 그래도 자바스크립트의 상식적인 측면에서 가볍게 이해하고 계시면 좋을 것 같습니다! :)

 

 

Related References

코딩이 처음이라면, 코드잇

JAVA 프로그래밍

요약 : sparta coding club, 스파르타 코딩, 코드잇, 노마드 코더, 프로그래밍, 직장인 코딩, 내일 배움 카드 코딩, 밀크티 코딩, 초등 코딩, 아이스크림 코딩, 코딩 소프트웨어, 자바 스크립트 국비 지원