[Front-end🦁] #22 JavaScript / Deep Dive 2~9장

1. JavaScript

문법 정리는 #21에 여기에는 정리하기는 조금 애매하지만 새로 알게된 사실을 쓰려고 한다.

• 변수 할당 시 값을 메모리에 넣고 그것을 변수가 가리키게 만든다. 각 변수에 같은 수를 할당해도 주소는 모두 다른게 정석적인데, 파이썬 같은 경우는 메모리 관리를 위해 0~256은 미리 메모리에 올려놓고 변수가 선언되면 그것을 가리키게 만든다.

0b10 //2진수 2
0o10 //8진수 8 - 이게 의외였다. 그냥 앞에 0쓰는 언어도 있는데
0x10 //16진수 16

&& || ! 문제

1. false || true // t
2. true && false // f
3. !true //f
4. !((true && false) || (true && false)) //t
5. let x = 10
!((x % 5 == 0 && x % 2 == 0) || (x / 2 == 5 && false)) //f
6. let y = 10
(false && y % 2 == 0) && (y / 2 == 5 && false) //f
7. let z = 3
(true && z % 3 == 0) || (z / 2 !=!= 5 && false) // !=!=는 잘못된 문법입니다.ㅎㅎ
// error 문법 오류는 잡음.

// 드모르간 법칙
!(x || y) === (!x && !y)
!(x && y) === (!x || !y)

2. Deep Dive

오늘부터.. 진도에 맞춰서 모던 자바스크립트를 읽어나가기로 했다!

2~9장을 읽었는데 앞부분이기도 하고, const let 을 제외하면 if switch for while do~while 이 크게 다른 언어와 다르지 않아서 오늘 수업에서도 다룬 JavaScript의 미쳐버린 type casting 에 시간을 쏟을 수 있었다.

#21 에 추가로 정리하면 좋겠다 싶어서 살 붙인 내용 외에 수업에선 다루지 않은 새로 알게 된 부분들을 정리하려고 한다.

1. Symbol type : 딱 하나만 존재하는 유일무이한 값.

var key = Symbol('key');
Symbol('key') === Symbol('key') // false

찾아보니까 ID 같이 유일무이한 값에 사용하는 것 같은데 정확히는 잘 감이 안온다.

2. for 문에서 label 을 사용하면 바깥 for 문을 탈출할 수 있다.

outer: for(let i = 0; i < 3; i++) {
  for(let j = 0; j < 3; j++) {
    if(i+j == 0) break outer;
  }
}

3. type casting - truthy, falsy

// String : val + '' 많이 씀.
String(val);  val.toString();  val + '';
// Number : parseInt가 안전
Number(val);  parseInt(val);  +val;  val * 1;  -'123'; //-123
// Boolean
Boolean(val);  !!falsy;  !!truthy;

!!NaN; !!undefined //false
false == !!undefined;

4. && || 의 활용

// if (truthy) 문을 && 으로 대체 가능.
if (done) msg = "다했다.";
msg = doen && "다했다.";
// if (falsy) 문을 || 으로 대체 가능.
if (!done) msg = "못했다.";
msg = done || "못했다.";
//if -else 는 삼항조건자가 대체가능 삼항조건자는 아래로 대체가능.
true && '다했다.' || '못했다.';

5. optional chaining (?.), null 병합 연산자 (??)

// ?. 앞의 값이 null, undefined 면 앞의 값을 반환. 아니면 뒤의 값을 반환.
// 이걸 && 로 썼었다. -> 문제: 앞의 값이 null, undefined가 아닌 falsy 가 나오면... 원하던대로 뒤의 값을 못얻음.
var str = '';
var value = str && str.length;
var value = str?.length; 
// ?? 앞이 null, undefined 이면 뒤의 것이 나오고, 아니면 tmp 값이 나옴.
// 이건 || 썼었는데, 역시 n u 가 아닌 falsy 가 나오면 설계대로 동작 X
var tmp = null;
var value = tmp || "오우 null 입니다.";
var value = tmp ?? "오우 null 입니다.";

5. 변수의 호이스팅

//아래 두 줄은 다른 문장이지만, js 엔진에게는 같은 문장. 일단 선언부를 찾아서 전부 선언을 해서 undefined 값으로 초기화해두고, 할당 부분은 그 다음에 실행한다.
// let, const 의 경우는 undefined로 선언을 하지 않기 때문에, 초기화 하지 않고 사용하면 오류남!
var a; a = 100;
var a = 100;

const let var 차이