(Javascript) data types, let vs var, hoisting

let

• added in ES6

let name = 'jiwon';
console.log(name);
name = 'hello';
console.log(name);

 

var

• don't ever use this!
  
• 선언도 하기 전에 값 할당 가능
• 값 할당하기 전에도 출력 가능 (undefined)
• var hoisting
  • move declaration from bottom to top
  • 어디에 선언했냐에 상관없이 항상 제일 위로 선언을 끌어올려줌
• has no block scope
  • 블록을 이용해서 변수를 선언해도 어디에서나 볼 수 있음

age = 4;
var age;

 

constant

• 값을 할당한 다음에 다시는 변경 되지 않아야함
• read only

const daysInWeek = 7;
const maxNumber = 5;

 

자바스크립트에서 변수를 선언할 때, Mutable type let과 Imuutable type의 const가 있다!

• Immutable data types
  • primitive 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
    • 어플리케이션이 실행되면 한 가지의 프로세스가 할당이 되고, 프로세스 안에서는 다양한 thread가 동시에 돌아가면서 어플리케이션을 효율적으로 동작하도록 도와줌
    • 이때, 다양한 thread들이 동시에 변수에 접근해서 값을 변경할 수 있음 -> 위험
  • reduce human mistakes

 

 

Variable types

• primitive
  • 더 이상 작은 단위로 나눠질 수 없는 single item
  • number, string, boolean, null, undefined, symbol
• object
  • ingle item들을 여러개 묶어서 한 box로 관리할 수 있도록 해줌
• function
  • first-class function
    • function도 다른 data type처럼 변수에 할당이 가능, 함수의 parameter로도 전달 가능, return type으로도 지정 가능

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
• 숫자 뒤에 n을 붙여주면 bigInt

const bigInt = 123456789012345678901234567890n; // over (-2**53 ~ 2**53)
console.log(`value: ${bigInt}, type: ${typeof bigInt}`);

 

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}`);

 

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

• 명확하게 empty 값으로 지정

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

 

undefined

• 선언은 되었지만 값이 지정되어 있지 않은 경우

let x;
console.log(`value: ${x}, typeL ${typeof x}`);

 

symbol

• create unique identifiers for objects
• map이나 다른 자료구조에서 고유한 식별자가 필요하거나 동시에 concurrent하게 일어날 수 있는 코드에서 우선 순위를 주고 싶을 때 고유한 식별자가 필요할 때 사용
• string를 이용해서 식별자를 사용하게 되면, 다른 모듈이나 다른 파일에서 동일한 string을 썼을 때 동일한 식별자로 간주
• symbol의 경우에는 아래처럼 동일한 id를 이용해서 symbol을 만들었지만 두 가지의 symbol은 다른 경우
• symbol은 동일한 string으로 작성했어도 다른 symbol로 만들어지 때문에 주어진 string에 상관없이 고유한 식별자를 만들 때 사용

const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false
// string이 똑같다면 동일한 symbol 만들고 싶을 때에는 Symbol.for('') 사용
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2); // true
console.log(`value: ${symbol1}, type: ${typeof symbol1}`); // symbol 바로 출력하게되면 error
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`); // .description을 이용해서 string으로 변환해서 출력해야함

 

object

• real-life object, data structure
• 물건과 물체들을 대표할 수 있는 박스 형태

const jiwon = { name: 'jiwon', age: 20 };
jiwon.age = 21; // 변경 가능

 

Dynamic typing

• dynamically type language
• javascript는 어떤 type인지 선언하지 않고 run time(program이 동작할 때) 할당된 값에 따라서 type이 변경될 수 있음

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)); // error