[Javascript] 데이터 타입과 변수

본 게시물은 poiemaweb(https://poiemaweb.com/)에 기술된 내용을 기반으로 작성한 게시물입니다.

 

1. 데이터 타입

 - 데이터 타입이 가지고 있는 정보

    - 메모리에 데이터 저장시 확보해야 하는 메모리 공간의 크기

    - 메모리에 할당할 수 있는 유효한 값에 대한 정보

    - 메모리에 저장된 2진수 데이터를 해석하는 방법

 

 - 데이터 타입의 존재 이유

    - 한정된 메모리 공간의 효율적 사용을 위해

    - 2진수 데이터로 메모리에 저장된 데이터를 다양한 방법으로 사용하기 위해

 

 - 데이터 타입의 종류

    1. 원시 타입 (primitive type)

        - boolean

        - null

        - undefined

        - number

        - string

        - symbol

    2. 객체 타입 (object, reference type)

        - object

 

1.1. 원시 타입 (Primitive Data Type)

 - 원시 타입의 값은 변경 불가능(immutable value)

 - pass-by-value (값에 의한 전달)

 

1.1.1. number

 - 배정밀도 64비트 부동소수점 형 (double-precision 64-bit floating-point format)

    - -(2^53 -1)과 (2^53 +1) 사이의 값

 - 모든 수를 실수 처리

var integer = 10;        // 정수
var double = 10.12;      // 실수
var negative = -20;      // 음의 정수
var binary = 0b01000001; // 2진수
var octal = 0o101;       // 8진수
var hex = 0x41;          // 16진수

 

 - 2, 8, 16진수 데이터 타입은 따로 제공되지 않아 이들 값을 참조하면 모두 10진수로 해석

console.log(binary); // 65
console.log(octal);  // 65
console.log(hex);    // 65

// 표기법만 다를뿐 같은 값이다.
console.log(binary === octal); // true
console.log(octal === hex);    // true

 

 - 자바스크립트의 수는 모두 실수이기 때문에 정수 간 나눗셈에서 실수가 나올 수 있음

console.log(1 === 1.0); // true

var result = 4 / 2;
console.log(result); // 2
result = 3 /2;
console.log(result); // 1.5

 

- Infinity, -Infinity, NaN 값 표현 가능

var pInf = 10 / 0;  // 양의 무한대
console.log(pInf);  // Infinity

var nInf = 10 / -0; // 음의 무한대
console.log(nInf);  // -Infinity

var nan = 1 * 'string'; // 산술 연산 불가
console.log(nan);       // NaN

 

1.1.2. string

 - 텍스트 데이터를 나타내는데 사용

 - 0개 이상의 16bit 유니코드 문자(UTF-16)들의 집합으로 대부분의 전 세계 문자 표현 가능

var str = "string"; // 큰 따옴표
str = 'string';     // 작은 따옴표
str = `string`;     // 백틱(ES6 템플릿 리터럴)

str = "큰 따옴표로 감싼 문자열 내의 '작은 따옴표'는 문자열이다.";
str = '작은 따옴표로 감싼 문자열 내의 "큰 따옴표"는 문자열이다.';

 

 - 원시타입으로 변경 불가능

    - 한 번 문자열이 생성되면 그 문자열은 변경할 수 없음 (read only)

    - 문자열을 담고 있는 변수에 다른 문자열로 재할당 시, 기존의 문자열을 수정하는 것이 아니고 새로운 문자열을 메모리에 생성하고 변수가 이 주소를 가리키게 함

var str = 'Hello';
str = 'world';

 

 - 유사 배열

    - 배열처럼 인덱스를 통해 접근 가능한 특성을 갖는 데이터

    - 자바스크립트의 string 타입은 유사 배열

var str = 'string';

// 문자열을 변경할 수 없다.
str[0] = 'S';
console.log(str); // string

 

1.1.3. boolean

 - 논리적 참, 거짓을 나타내는 true, false

var foo = true;
var bar = false;

// typeof 연산자는 타입을 나타내는 문자열을 반환한다.
console.log(typeof foo); // boolean
console.log(typeof bar); // boolean

 

 - false로 간주되는 값들

    - 비어있는 문자열

    - null

    - undefined

    - 숫자 0

 

1.1.4 undefined

 - undefined 타입의 값은 undefined가 유일

 - 선언 이후 할당하지 않은 변수는 undefined 값을 가짐

 - undefined가 반환되는 경우

     - 선언 되었지만 값이 할당되지 않은 변수에 접근

     - 존재하지 않는 객체 프로퍼티에 접근

 - 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이뤄질 때 까지 빈 상태로 내버려두지 않고 자바스크립트 엔진이 undefined로 초기화하기 때문

var foo;
console.log(foo); // undefined

 

 - 개발자가 의도적으로 undefined를 할당해야 하는 경우

    - undefined 대신 null을 할당하는 것이 혼란을 피할 수 있음

 

1.1.5 null

 - null 타입의 값은 null이 유일

 - 의도적으로 변수에 값이 없다는 것을 명시할 때 사용

    - 변수가 기억하고 있는 메모리 주소 정보의 참조 정보를 제거하는 것

    - 자바스크립트 엔진은 누구도 참조하지 않고 있는 메모리 영역에 대해 가비지 컬렉션을 수행

var foo = 'Lee';
foo = null;  // 참조 정보가 제거됨

 

 - 함수 호출 시, 유효한 값을 반환할 수 없는 경우 명시적으로 null 반환

var element = document.querySelector('.myElem');
// HTML 문서에 myElem 클래스를 갖는 요소가 없다면 null을 반환한다.
console.log(element); // null

 

 - null 타입 확인 시 typeof 연산자를 사용하면 안되고 일치 연산자(===)를 사용하여야 함

    - null 타입에 typeof 연산자 사용시 object를 반환 -> 자바스크립트 설계상 오류

 

1.1.6 symbol

 - ES6에 새롭게 추가된 7번째 타입

 - 이름의 충돌 위험이 없는 유일한 객체 프로퍼티의 키를 만들기 위해 사용

 - Symbol 함수를 호출해 생성

     - 생성된 심볼 값은 다른 심볼값들과 다른 유일한 심볼 값임

// 심볼 key는 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키
var key = Symbol('key');
console.log(typeof key); // symbol

var obj = {};
obj[key] = 'value';
console.log(obj[key]); // value

 

1.2 객체 타입 (Object type, Reference type)

 - 데이터에 관련한 동작을 모두 포함할 수 있는 개념적 존재

    - 이름, 값을 가지는 데이터를 의미하는 프로퍼티, 동작을 의미하는 메서드를 포함할 수 있는 독립적 주체

 - 원시 타입을 제외한 모든 값들(배열, 함수, 정규표현식 등)은 모두 객체

 - pass-by-reference(참조에 의한 전달) 방식으로 전달

---

2. 변수

 - 데이터를 일정 기간 기억하며, 필요시 다시 참조하기 위해 데이터에 고유의 이름인 식별자를 명시한 것

 - 해당 식별자는 데이터가 저장된 메모리의 주소를 기억

var score;  // 변수의 선언
score = 80; // 값의 할당
score = 90; // 값의 재할당
score;      // 변수의 참조

// 변수의 선언과 할당
var average = (50 + 100) / 2;

 

2.1 변수의 선언

 - 명명 규칙

    - 영문자(특수문자 제외), underscore( _ ), 달러 기호($)로 시작하여야 함

    - 대/소문자 구별

 - 값을 선언하고 할당하지 않은 변수는 undefined를 초기값으로 가짐

 - 선언하지 않은 변수에 접근시 ReferenceError가 발생

var x;
console.log(x); // undefined
console.log(y); // ReferenceError

 

2.2 변수의 중복 선언

 - var 키워드로 선언한 변수는 중복 선언 가능

 - 문법적으로는 허용되나, 프로그램 작성 시 의도치 않게 변수 값을 변경하는 부작용을 야기할 수 있어 사용 지양

var x = 1;
console.log(x); // 1

// 변수의 중복 선언
var x = 100;
console.log(x); // 100

 

2.3 동적 타이핑 (Dynamic Typing)

 - 자바스크립트는 동적 타입(dynamic/weak type) 언어

    - 변수의 타입 지정 없이 값이 할당되는 과정에서 값의 타입에 의해 자동으로 타입이 결정

    - 따라서 같은 변수에 여러 타입의 값 할당 가능

var foo;

console.log(typeof foo);  // undefined

foo = null;
console.log(typeof foo);  // object

foo = {};
console.log(typeof foo);  // object

foo = 3;
console.log(typeof foo);  // number

foo = 3.14;
console.log(typeof foo);  // number

foo = 'Hi';
console.log(typeof foo);  // string

foo = true;
console.log(typeof foo);  // boolean

 

2.4 변수 호이스팅 (Variable Hoisting)

console.log(foo); // ① undefined
var foo = 123;
console.log(foo); // ② 123
{
  var foo = 456;
}
console.log(foo); // ③ 456

 

 - 호이스팅

    - var 선언문, function 선언문 등 모든 선언문이 해당 scope의 선두로 옮겨진 것처럼 동작하는 특성

    - 자바스크립트는 모든 선언문이 선언되기 이전에 참조 가능

 

 - 변수의 생성 3단계

    1. 선언 단계 (Declaration phase)

        - 변수 객체 (Variable Object)에 변수를 등록. 이 변수 객체는 스코프가 참조하는 대상이 됨

    2. 초기화 단계 (Initialization phase)

        - 변수 객체 (Variable Object)에 등록된 변수를 메모리에 할당. 이 단계에서 변수는 undefined로 초기화

    3. 할당 단계 (Assignment phase)

        - undefined로 초기화된 변수에 실제 값을 할당

 

 - var 키워드로 생성된 변수는 선언 단계, 초기화 단계가 동시에 이루어짐

    - 스코프에 변수 등록 -> 변수는 메모리에 공간을 확보한 후 undefined로 초기화

    - 따라서, 변수 선언문 이전에 접근해도 undefined 값이 반환될 수 있음

 

 - 스코프

    - 함수 레벨 스코프 (Function-level scope)

        - 함수 내에서 선언된 변수는 함수 내에서만 유효, 함수 외부에서 참조 불가능

        - 함수 내부에서 선언한 변수는 지역 변수, 함수 외부에서 선언한 변수는 전역 변수

    - 블록 레벨 스코프 (Block-level scope)

        - 코드 블록 내부에서 선언된 변수는 코드 블록 외부에서 참조할 수 없음

 

2.4 var 키워드로 선언된 변수의 문제점

 - 함수 레벨 스코프

    - 전역 변수의 남발

    - for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조 가능

 - var 키워드 생략 허용

    - 의도치 않은 변수의 전역화

 - 중복 선언 허용

    - 의도치 않은 변수값 변경

 - 변수 호이스팅

    - 변수를 선언하기 전에 참조가 가능

---

확인하기

1. 데이터 타입이 지니고 있는 정보?

2. 데이터 타입의 존재 의미

3. 데이터 타입의 종류

4. number 타입의 표현 범위

5. 양의 무한대, 음의 무한대 표현 방법

6. string 타입의 표현 방식

7. string 타입 변수의 재할당 시 일어나는 일

8. 유사 배열?

9. boolean 타입에서 false로 간주될 수 있는 다른 타입의 값들

10. 선언 후 값이 할당되지 않은 변수에 접근시 undefined가 반환되는 이유

11. null 값이 반환되는 경우

12. null 타입 확인 시 사용해야 하는 연산자

13. symbol 타입을 사용하는 이유?

14. 변수란?

15. 변수의 명명 규칙

16. 선언하지 않은 변수에 접근 시 발생하는 에러

17. 호이스팅?

18. 변수 생성 3단계

19. var 키워드로 선언된 변수의 문제점

---

REFERENCES

- poiemaweb

    - 자바스크립트의 메모리관리

    - 자바스크립트는 어떻게 작동하는가