개발 공부/자바스크립트

[엘리의 드림코딩 JS] 3. 데이터 타입, 호이스팅

5묘 2022. 12. 4. 08:32

https://youtu.be/OCCpGh4ujb8

변수 선언 : let(mutable) vs const(immutable)

// 2. Variable
// let (added in ES6) rw(read/write 둘다 가능)
let globalName = 'global name'
{
let name = 'ellie';
console.log(name);

name = 'hello';
console.log(name);
console.log(globalName);

}

console.log(name);
console.log(globalName);

// var (don't ever use it)
// var hoisting (move declaration from bottom to top)
// has no block scope
// mutable type
{
age = 4;
var age;
}

console.log(age);

// 3. Constants 
// 가리키는 포인터가 정해져서 절대 바꿀 수 없다. only r(read)
// favor immutable data type always for a few reasons
// -security
// - thread safety
// - reduce human mistakes

const daysInWeek = 7;
const maxNumber = 5;

let은 변수를 할당한 메모리를 가리키는 포인터를 바꿀 수 있어 할당 후 재할당이 가능하나, const(constant, 상수=> 한번 할당하면 바꿀 수 없는 값, immutable함.) 로 선언하면 이 포인터가 고정되어 다른 포인터로 변경할 수 없으므로, 선언과 동시에 할당 후에는 재할당 불가하다.

const 장점 3가지
- 해커의 공격으로부터 보안성 높아짐
- 스레드가 동시에 메모리를 변경할 경우에도 안전함
- 개발자의 실수 줄일 수 있음

cf) JS mutable data types: premitive types, frozen objects(i.e. object.freeze())
JS immutable data types: all objects(내부 프로퍼티 값 계속 변경 가능) by default are mutable in JS

원시 데이터 타입(primitive data type)

// Variable types
// primitive, single Items: numver, string, boolean, null, undefined, symbol

// number
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, -0
const infinity = 1 / 0;
const negativeInfinity = -1 / 0;
const nAn = 'not a number' / 2;
console.log(infinity);
console.log(negativeInfinity);
console.log(nAn);
console.log(-0);

JS에서 Number 타입은 정수, 소수 구분 없이 모두 number 타입이다.(<-> C, Java)
cf) C언어가 low level 언어라 불리는 이유는: 개발자들이 세세하게 메모리 할당까지 할 수 있어서.(개발자의 손이 많이 가야 해서)

C언어에서의 숫자 타입과 할당 메모리
Java에서의 다양한 Number 타입들

number type에 할당되는 메모리를 넘어서는 BigInt를 만들려면 모든 정수 리터럴에 n 접미사를 추가하면 된다.

// bigInt (fairly new, don't use it now)
// 원래 number type 크기 (-2 ** 53 ~ 2 ** 53)
// chrome, firefox에서만 지원됨(safari에선 n 접미사 오류남)
const bigInt = 123456789012345678901234567890123456789012345678901234567890n; // over limit
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)

//template literals 쓰면 아래처럼 하지 않아도 공백을 모두 넣을 수 있다.
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 : 할당된 값이 없을 경우 자동으로 JS에서 부여
let x;
console.log(`value: ${x}, type: ${typeof x}`);

// Symbol : create unitue identifiers for objects
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2);

// 만약 주어진 string이 같을 경우 symbol을 똑같이 하고 싶다면?
// global symbol registery에서 키값이 똑같은걸 찾아주는 메소드 Symbol.for()
const gSymbol1 = Symbol.for('id');
const gSymbol2 = Symbol.for('id');
console.log(gSymbol1 === gSymbol2);

// symbol은 출력시 .description을 붙여서 string 형태로 출력해야 한다.
console.log(`value: ${symbol1.description}, type: ${typeof symbol1}`);

// 5. Dynamic typing: dynamically typed language(동적 타입 언어)
// 자바스크립트는 변수 선언 시에 타입이 정해지는 정적 타입 언어가 아니라
// 런타임에 변수에 할당된 값에 따라 타입이 정해지는 동적 타입 언어이다.

let text = 'hello';
console.log(text.charAt(0));
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}`);

Object의 경우 처음에 const로 선언한 객체는 바뀌지 않지만, 이 안의 속성(프로퍼티)에 할당하는 값은 바뀔 수 있다.

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

자바스크립트의 함수(function)는 일급 객체(first-class object)이다. 이 의미는..
1. 함수가 다른 데이터타입처럼 변수에 할당 가능.
2. 함수를 다른 함수의 인자로 할당하는 것 가능.
3. return 타입으로 function return 가능.