[JavaScript/드림코딩] 데이터타입, data types, let vs var, hoisting

본 포스트는
드림코딩님의 자바스크립트 기초 강의 (ES5+)를
수강 후 정리한 노트입니다.

---

Scope

Block scope

블럭 밖에서는 블럭 안의 내용을 볼 수 없게 된다.

 

Global scope

필요한 부분에서만 정의해서 쓰는 것이 좋다.

---

let vs var

let

ES6에서 추가되었다.

중복 선언이 불가능하다.

값의 재할당이 가능하다.

선언된 변수는 전역객체의 프로퍼티가 아니다.

 

var

중복 선언이 가능하다.

값의 재할당이 가능하다.

선언된 변수는 전역객체의 프로퍼티다.

어디에 선언했냐에 관계없이 항상 제일 위로 선언을 끌어 올려주는 hoisting이 발생한다.

let과 var의 예시로, 아래 데이터 타입에서 다시 설명할 것이다.

---

mutable vs immutable

mutable let

변할 수 있는 값을 뜻하며, 계속해서 변하는 값을 정의할 때 사용한다.

 

immutable constant (const)

변할 수 없는 값을 뜻하며, 변하지 않는 값을 정의할 때 사용한다.

---

 

Use strict

ES5에서 추가되었으며, 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해준다.

 

암묵적인 느슨한 모드(Sloppy mode)를 해제하고 명시적인 엄격 모드(Strict mode)를 사용하는 방법으로,
선언되지 않은 변수를 사용하면 오류를 발생시킨다.

---

데이터 타입

Variable

// Variable, rw(read/write)
// let (added in ES6)
let globalName = 'global name';
{
    let name = 'kgyujin';
    console.log(name);
    name = 'hello';
    console.log(name);
    console.log(globalName);
}
console.log(name);
console.log(globalName);

// var (don`t ever use this!)
// var hoisting (move declearation from bottom to top)
// has no block scope
{
    age = 4;
    var age;
}
console.log(age);

 

Constants

// Constant, r(read only)
// 값 변경의 방지
// use const whenever possible.
// only use let if variable needs to change.

const daysInWeek = 7;
const maxNumber = 5;

// Note!
// Immutable data types(변경 불가): premitive types, frozen objects (i.e. object.freeze())
// Mutable data types(변경 가능): all objects by default are mutable in JS
// favor immutable data type always for a few reasons:
// - security
// - thread safety
// - reduce human mistakes

 

Variable types

// Variable types
// primitive(값 자체 메모리 저장), single item: number, string, boolean, null, undefiedn, symbol
// object(reference를 통해 메모리를 가리킴), box container
// function, first-class function
const count = 17; // integer
const size = 17.1; // decimal number
console.log(`value: ${count}, type: ${typeof count}`);
console.log(`value: ${size}, type: ${typeof size}`);

// number - special numeric values: infinity, -infinity, NaN
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);

// bigInt (fairly new, don`t use it yet)
const bigInt = 1234567890123456789012345678901234567890n; // over (-2**53) ~ 2*53)
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);
Number.MAX_SAFE_INTEGER;

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

// boolean
// false: 0, null, undefined, NaN, ''
// true: any other value
const canRead = true;
const test = 3 < 1; // false
console.log(`value: ${canRead}, type: ${typeof canRead}`);
console.log(`value: ${test}, type: ${typeof test}`);

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

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

// symbol, create unique identifiers for objects
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);
const gsymbol1 = Symbol.for('id');
const gsymbol2 = Symbol.for('id');
console.log(gsymbol1 === gsymbol2); // true
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

// object, real-life object, data structure
const ellie = { name: 'ellie', age: 20 };
ellie.age = 21;

 

Dynamic typing

// Dynamic typing: dynamically typed language
let text = 'hello';
console.log(text.charAt(0)); // h
console.log(`value: ${text}, type: ${typeof text}`);
text = 1;
console.log(`value: ${text}, type: ${typeof text}`);
text = '7' + 5;
console.log(`value: ${text}, type: ${typeof text}`);
text = '8' + '2';
console.log(`value: ${text}, type: ${typeof text}`);
console.log(text.charAt(0));