javascript 자료형과 변수

Posted on | In |

Javascript Data type & Variable

(자료형과 변수)

변수

  • 미선언 변수를 호출하면 ReferenceError 예외가 발생한다.
  • 변수의 중복 선언은 허용되지만 재할당으로 값이 변경된다.
  • var 키워드를 생략하면 전역변수가 된다.

[참고] var 키워드로 선언된 변수의 문제점(ES5)

전역 변수로 인해서 의도치 않은 변수의 변경이 발생할 가능성이 높다.
ES6는 이러한 var의 단점을 보완하기 위해 let과 const 키워드를 도입하였다.

1.Function-level scope

  • 전역 변수의 남발
  • for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다.
1
2
3
4
5
6
var sum = 0;
for (var i = 0; i < 10; i++) {
sum += i;
}
console.log('sum:', sum); // sum: 45
console.log('i:', i); // i: 10

문제점:
var로 선언한 변수는 if나 for같은 block-level이 아닌 function-level에서 범위가 정해지기 때문에 i의 값은 for문이 끝나도 유지된다.

2.var 키워드 생략 허용

  • 의도하지 않은 변수의 전역화

3.중복 선언 허용

  • 의도하지 않은 변수값 변경

4.변수 호이스팅

  • 변수를 선언하기 전에 참조가 가능하다.

변수 호이스팅(Hoisting)이란?

변수 Hoisting이란 var 키워드를 사용하여 변수를 선언 시,
해당 변수가 속한 범위(scope) 최상단으로 올려버리는 현상을 일컽습니다.
그리고 주목할 점은 여기서 속한 범위는 다른 언어처럼 block 레벨이 아니라 function 레벨이라는 점입니다.

1.선언 단계 VO(Variable Object)
  • 변수객체(VO)에 변수를 등록한다.
2.초기화
  • 변수객체(VO)에 등록된 변수를 메모리에 할당된다.
  • 이 단계에서 변수는 undefined로 초기화된다.
3.할당단계
  • undefined로 초기화된 변수에 실제값을 할당한다.
1
2
3
4
5
6
7
console.log(foo); // ① undefined
var foo = 123;
console.log(foo); // ② 123 
{
var foo = 456;
}
console.log(foo); // ③ 456

①에서는 변수가 선언되지 않았지만 referenceErorr가 아닌 undefined가 출력된다.

② var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
즉, 스코프에 변수가 등록되고 변수는 메모리에 공간을 확보한 후 undefined로 초기화된다. 따라서 변수 선언문 이전에 변수에 접근하여도 Variable Object에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 이러한 현상을 변수 호이스팅(Variable Hoisting)이라한다.

①이 실행되기 이전에 var foo = 123;이 호이스팅되어 ①구문 앞에 var foo;가 옮겨진다.

블럭 내의 변수 foo는 전역변수이므로 전역에 선언된 변수 foo에 할당된 값을 재할당하기 때문에 ③의 결과는 456이 된다.

변수 선언과 메모리 확보

var num;

  • 변수의 선언과 초기화
  • 현재 값은 undefined;
  • num은 메모리의 주소 값을 가리키고 있다.(=참조)

num = 10;

  • 변수 값의 할당

num = 1000;

  • 변수 값의 재할당
  • 다른 메모리에 값을 넣어두고, num이 해당하는 메모리의 주소를 참조하도록 한다.

유효범위(scope)

유효범위는 변수의 수명
1.함수 레벨 스코프(function-level scope)

  • 함수내부 어디에서든지 myScope를 출력할 수 있다.
1
2
3
4
5
6
7
function functionLevelScope() {
    if (true) {
        var myScope = "function level scope";
    }
    console.log(myScope);
}
출력 : function leve scope

2.블록 레벨 스코프(block-level scope)
ES6에서 let, const 키워드는 블록 레벨 스코프 변수를 만들어 준다.

1
2
3
4
5
6
7
8
function blockLevelScope() {
    if (true) {
        let myScope = "block level scope";
        console.log(myScope);
    }
    console.log(myScope);
}
출력: 에러(myScope는 if문안에서만 유효하다)

기본자료형(Primitive Data Type)

  • 변경 불가능한 값(immutable)
  • pass-by-value

[참고] pass-by-value 란?
var x = 10; var num = x;
num에게 x의 참조 정보를 주지 않고, 10값을 복사해서 새로운 메모리에 저장한 후에 num이 10의 주소값을 참조하도록 한다.

6가지 기본자료형

boolean, null, undefined, Number, String, Symbol

boolean

  • 논리적인 요소
  • true(1), false(0)

null

  • 의도적으로 기본형 또는 object형 변수에 값이 없다는 것을 명시한다.
1
2
3
var foo; 
var foo = null; 
** 기존값(undefined)의 참조 정보(address)가 제거된다.**
  • null은 0 또는 false이다.

[참고] 자바스크립트 설계상의 오류
null은 기본 자료형이지만, typeof는 object이다.
따라서 null로 자료형을 비교할 때는 typeof가 아닌 일치 연산자(===)를 사용한다.

1
2
3
var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

undefined

  • 선언만 되어 있는 변수의 초기값
  • 선언은 되었지만 할당된 적이 없는 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우, 오류 대신에 undefined가 출력된다.(javascript만)

Number

  • 정수, 실수
  • +/- Infinity 무한대
  • NaN(not a number)
  • 정수만을 표현하기 위한 특별한 자료형은 없다.

String

  • 문자열
  • 홀따옴표 권장(‘’) ex) ‘He is called “John”‘
  • 변경 불가능(immutable)

Symbol

  • Symbol은 ES6에서 새롭게 추가된 7번째 타입이다.
  • Symbol은 애플리케이션 전체에서 유일하며 변경 불가능한(immutable) 기본 자료형(primitive)이다.

객체형(Object type, 참조형)

  • pass by reference
  • 내일모레설명.