[Javascript] ES5+ 기초강의 3 - 데이터 타입, let vs var, hoisting

---

프로그래밍에서 가장 중요한 것은?
- 입력, 연산, 출력, (전송)

 

연산
- CPU에 최적화된 로직을 사용한 연산
- 메모리의 사용을 최적화

---

1. 변수 (Variable)

1.1 변수 선언 및 값 할당

let name = 'ellie'; // let으로 변수(name)를 선언하고, 
                    // '=' 연산자로 변수에 값('ellie')을 할당.
console.log(name);

name = 'hello';     // 변수(name)에 값('hello')를 할당
console.log(name);

 

애플리케이션 실행 시, 애플리케이션에 메모리가 할당됨.

애플리케이션에서 사용할 수 있는 메모리는 제한이 있음.

 

1.2 Block Scope 

// 2. Variable
// let (ES6에서 추가 됨)
// 요즘은 ES6 이전의 문법은 잘 사용하지 않음.

let globalName = "global variable"; // 전역(global scope) 변수 

{
    let name = 'local variable';    // 로컬(local scope) 변수
    console.log(name);
    name = 'hello';
    console.log(name);
    console.log(globalName);        // 전역 변수는 블록 안에서도 밖에서도 참조 가능
}

console.log(name)                   // 블록 밖에서는 name 변수를 참조할 수 없음
console.log(globalName);            // 전역 변수는 블록 안에서도 밖에서도 참조 가능

 

중괄호( {  } )를 사용하여 블록을 정의하면,

블록 밖에서는 블록 안의 변수를 참조할 수 없음.

 

• 전역 변수
  - 블록에 상관없이 어디에서든 참조 가능
  - 애플리케이션 실행 시작부터 종료까지 항상 메모리를 사용하기에 최소한으로 사용하는 것이 좋다.
  - 가능하면 필요한 부분에서 정의하여 사용하는 것이 좋다.
• 지역변수
  - 블록 내에서만 참조 가능
  - 블록이 지정된 범위에서만 메모리를 사용

ES6에 추가되어 사용할 수 있는 변수 선언 방법은 let을 사용하는 것.

단 한 가지 방법으로만 변수를 선언할 수 있다.

 

1.3 var : 사용하지 말 것, Hoisting

// var 사용하지 말 것
// 대부분의 프로그래밍에서는 변수를 반드시 선언하고 값을 할당
// 그러나 Javascript에서는 변수를 선언하지 않고도 사용 가능
//
// var hoisting : 변수 선언을 항상 위로 올려 사용하는 것.
console.log(age);
age = 4;
console.log(age);

var age;

// let을 사용하는 경우에는 에러가 발생한다.
name = 4;
let name;

var는 Hoisting을 지키지 않음. 먼저 선언하지 않고 사용 가능하다.

블록 스코프가 없고, 모두 전역 스코프처럼 동작

 

var는 문제가 발생하기 쉬우므로 let을 사용하도록 하자.

let은 현재 인터넷 익스플로러를 제외한 모든 브라우저(에지, 크롬, 사파리, 파이어폭스)에서 사용하고 있다.

※ 현재는 인터넷 익스플로러 지원이 완전히 종료되었으므로 ES6 이상(let을 사용)으로 개발하자.

 

개발은 ES6 이상(let을 사용)으로 개발하고 ES5 지원이 꼭 필요하다면 Babel을 사용하여 처리한다.

※ Babel : Javascript 트랜스파일러(소스를 다른 소스로 변환) 

 

Hoisting
- 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것.

[Javascript] Hoisting(호이스팅)이란?

 

2. 상수 (Constant)

// 3. Constant
// immutable 데이터 타입을 가능하면 자주 사용하라.
// - 보안
// - thread에 안전
// - 사람의 실수를 줄일 수 있음
const daysInWeek = 7;
const maxNumber = 5;

 

상수는 할당한 다음 값이 변경되지 않는(변경할 수 없는) 변수

 

• Mutable 데이터 타입 : 변경할 수 있는, ex) list
  - javascript 에서는 모든 데이터 타입이 기본으로 Mutable이다
  - javascript mutable : let
• Immutable 데이터 타입 : 변경할 수 없는, ex) int, String
  - Javascript Immutable : const

 

3. 데이터 타입 (Variable types)

// 4. Variable types
// pirimitive 
// - single item : number, string, boolean, null, undefined, symbol
// - object : single item을 묶어서 한 단위로 사용, box container
// - function : first-class function - function도 데이터 타입처럼 할당, 변수로 전달 가능.

 

• primitive 데이터 타입
  - 더 이상 나눌 수 없는,
  - 고정된 메모리 크기의,
  - 실제 데이터 값을 저장하는 데이터 타입
• first-class function
  - 함수를 변수나 자료구조에 저장할 수 있음.
  - 함수의 매개변수(인자)에 다른 함수를 인수로 전달할 수 있음.
  - 함수의 반환 값(return 값)으로 함수를 전달할 수 있음.

First-class Function? , Higher-oder Function?

 

3.1 숫자형 데이터 타입 : number

const count = 17;   // 정수
const size = 17.1;  // 실수

console.log(`value: ${count}, type: ${typeof count}`);  // javascript : number
console.log(`value: ${size}, type: ${typeof size}`);    // javascript : number

 

• Number
  - Javascript에서 숫자를 위한 데이터 타입
  - Javascript에서는 데이터 타입이 다이내믹하게 결정됨.

 

// javascript : number
// - 특별한 숫자 값 : infinity, -infinity, NaN(Not a Number)
const infinity         =  1 / 0;
const negativeInfinity = -1 / 0;
const nAn              = 'not a number' / 2;

console.log(infinity);                        // javascript : Infinity
console.log(negativeInfinity);                // javascript : -Infinity
console.log(nAn);                             // javascript : NaN

 

숫자를 사용한 연산 전에 그 값이 유효한(valid) 지 확인하고 연산해야 한다.

특별한 숫자 값인 세 가지를 이해하고, 변수의 값을 확인한 다음 연산하도록 한다.

 

Infinity    : 1/0
-Infinity  : -1/0
NaN         : Not a Number

 

// bigInt (최근 정의된 데이터 타입 : 아직은 사용에 주의한다)
// - over (-2**53 - 1) ~ (2**53)
// - 숫자 마지막에 'n' 추가
// - 아직은 크롬, 파이어폭스 만 지원 
const bigInt = 12345678901234567890123456789012345678901234567890n; 

console.log(`value: ${bigInt}, type: ${typeof bigInt}`);    // javascript : bigint
Number.MAX_SAFE_INTEGER;

 

3.2 문자형 데이터 타입 : String

const char = 'c';
const brendan = 'brendan';
const greeting = 'hello ' + brendan;
console.log(`value: ${greeting}, type: ${typeof greeting}`);    // javascript : string

const helloBob = `hi ${brendan}!'`;    // template literals 지원 (string)
//             = 'hi' + brendn + '!';  // template literals 미지원 
console.log(`value: ${helloBob}, type: ${typeof helloBob}`);    // javascript : string

 

• 모든 문자열은 string으로 표현
• template literals 지원
  - `${변수명}` 을 사용하여 문자열 연산을 간결하게 표현하는 방법
  - 키보드 '1'의 왼쪽 값인 [ ` ] ( ascii code : 96번, Grave Accent)를 사용

 

3.3 불리언 데이터 타입 : boolean

// boolean
// false : 0, null, undefined, NaN, ''
// true  : 다른 모든 값
const canRead = true;
const test = 3<1;      // false : 평가식(조건)은 연산을 통해 boolean으로 판단 

console.log(`value: ${canRead}, type: ${typeof canRead}`);    // javascript : boolean
console.log(`value: ${test}, type: ${typeof test}`);          // javascript : boolean

 

• boolean에서 false 거짓 인 값
  - 0, null, undefined
  - NaN : Not a Number
  - ''       : 빈 문자열

 

3.4 null 데이터 타입 : null (Object)

// null
let nothing = null;
console.log(`value: ${nothing}, type: ${typeof nothing}`);    // javascript : object

 

변수에 null이라는 값으로 할당, 데이터 타입은 object

 

3.5 undefined 데이터 타입 : undefined

// undefined
let x;     // or let x = undefined;
console.log(`value: ${x}, type: ${typeof x}`);                // javascript : undefined

 

변수에 값이 할당되어 있지 않음, 데이터 타입은 undefined

 

3.6 식별자 데이터 타입 : Symbol

// symbol
// - 객체를 대표하는 식별자를 생성
// - object, string을 사용할 수 있음
// - 같은 문자열도 고유한 식별자로 사용할 수 있음.
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');

console.log(symbol1 === symbol2);         // javascript : false
console.log(`type: ${typeof symbol1}`);   // javascript : symbol
console.log(`type: ${typeof symbol2}`);   // javascript : symbol


// 동일한 스트링에 대해 동일한 식별자를 만들고 싶다면
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');

console.log(gSymbol1 === gSymbol2);      // javascript : true
// symbol의 문자열 값 조회 : 식별자명.description
console.log(`value: ${gSymbol1.description},type: ${typeof gSymbol1}`); // javascript : object
console.log(`value: ${gSymbol2.description},type: ${typeof gSymbol2}`); // javascript : object

 

3.7 오브젝트 데이터 타입 : object

// object
// - real-life object, data structure
const ellie = { name: 'elle', age: 20 };
console.log(ellie);

// ellie는 상수로 선언되어 있어서 변경이 불가능하지만 (다른 객체를 넣거나 할 수 없음)
// object 변수인 name, age는 변경이 가능
ellie.age = 18;
console.log(ellie);

 

실 생활의 객체를 표현하거나, 데이터 구조를 표현할 때 사용하는 데이터 타입

박스 형태의 데이터 타입으로 여러 데이터 타입을 묶어서 사용.

 

4. Dynamic typing 

// 5. Dynamic typing
let text = 'hello';
console.log(`value: ${text}, type: ${typeof text}`);    // 'hello', string
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);    // 1, number
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);    // '75', string
text = '8' / '2'
console.log(`value: ${text}, type: ${typeof text}`);    // 4, number

 

선언할 때 타입을 정의하지 않고, 실행 시 대입되는 값을 기반으로 javascript 엔진에서 판단하여 데이터 타입을 결정

 

Dynamic typing의 위험성

let text = 'hello';
console.log(text.charAt(0));    // 'h' : string의 첫 번째 값 참조
text = '8' / '2'                // 연산에 의해 데이터 타입이 number로 변환 됨
console.log(text.charAt(0));    // string 연산 함수를 사용하면 에러 발생

 

연산에 의해 데이터 타입이 변경될 경우가 있으므로 오류가 발생할 여지가 많다.

이로 인해 Typescript가 나오게 됨.

 

TypeScript
- Javascript 위에 타입이 올라가 있다.
- Javascript는 실시간으로 실행이 가능
- Typescript는 Babel을 통해 소스 컴파일을 해야만 실행 가능