[에이블런] TIL(24.05.22): 자바스크립트 2

전위/후위 연산자 (++i와 i++)

1. `x = ++i;` => 전위 연산자

• i = i + 1;
• x = i;

2. `x = i++;` => 후위 연산자

• x = i
• i = i + 1;

연산자 우선순위

• i++ ⇒ i = i + 1
  • 대입 연산자 < 덧셈 연산자 (우선순위가 더 높다)

---

• `x = (1, 2)`: 쉼표 연산자, 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환된다. 뒤의 값이 x에 대입된다. 즉 `x = 2`
• `x = y = 1`: 가장 뒤의 숫자를 대입한다.
• `const`, `let`은 메모리의 더 빠른 부분에 위치하기 때문에, `var`보다 `const`, `let`을 먼저 찾아간다. (서랍의 가장 상단에 const, let / var과 같은 전역 객체는 가장 하단의 서랍에 위치한 이미지를 떠올리기)

---

 

Env Record

• 스코프마다 변수가 선언된다.
• var, let, const에 대한 정확한 이해가 필요

---

 

• code 영역에는 실행된 함수가 기계어로 번역되어 올라간다.
• stack에는 변수 테이블이 존재한다
• 메모리: k, c, d, s, h (순서대로 커널, 코드, 데이터, 스택, 힙 영역. 외우기!)
• const는 값이 바뀔 여지가 없기 때문에, const만 데이터 영역에 잡아준다.
• var, let은 값이 변할 수 있기 때문에, stack 영역에 잡는다.

---

 

TDZ

초기화되기 전의 구간(임시로 죽어있는 공간, l을 사용하면 안 됨)

console.log(l);
let l = 1;

// let l;
// console.log(l); -> TDZ
// l = 1;

const, let은 초기화 비트를 사용한다

• const와 초기화 비트: const 변수는 선언과 동시에 초기화되며, 이후에는 재할당이 불가능하다. 이는 선언과 동시에 변수의 초기화 비트가 설정됨을 의미한다.
• let과 초기화 비트: let 변수는 선언 시점부터 초기화될 때까지 TDZ에 존재하며, 초기화되면 초기화 비트가 설정되고 이후에는 재할당이 가능하다.

---

비트 연산자

• 비트 연산을 이용한 유저 권한 체크가 가능하다

---

숫자에 대한 고찰

• Infinity: 자바스크립트가 표현할 수 있는 가장 큰 수
• NaN은 비교가 불가능하다는 특징 기억하기 → 중요한 특징임
• Math.trunc(): 소수점 아래 자리 버리기

---

착각하기 쉬운 연산

• `!![] === !!0` → false
• null
  • 레퍼런스 타입
  • object
  • new Number ⇒ 초기값: 0
• `isNaN(null)` //false
• `Number(null)` //0
• `isNaN(’9’)` //false
• `9 + ‘9’`
  • 문자열 병합 연산자로 처리됨
  • 결괏값은 99

 

객체/배열 특화 연산자

const [x, y] = arr;

 

 

...연산자

• Rest 연산자
  • distructuring 관련 개념
  • 배열 비구조화 할당을 통하여 원하는 값을 밖으로 꺼내고, 나머지 값을 rest 안에 넣을 수 있다.
  • 참고하면 좋을 관련 설명 링크: https://learnjs.vlpt.us/useful/07-spread-and-rest.html

a, b, c = [1, 2, 3] 
[a, b, ...c] = [1, 2, 3, 4, 5] //a = 1, b = 2, c = 3, 4, 5

• spread 연산자: 객체의 얕은 복사를 가능하게 해 준다. (객체의 얕은 복사: 하나의 객체에서 프로퍼티 값을 변경해도, 다른 객체에 영향이 가지 않는다.)

---

 

인터프리터 언어의 length는 모두 객체이다. 자바와 같은 언어의 배열 사이즈 확인을 위해서는 함수를 호출해야 한다.

null, undefined의 length를 요청하면 에러가 뜨지만,

optional chaining을 사용하면 에러가 발생하지 않고 undefined가 출력된다.

arr = null
arr?.length //undefined

optional chaining : arr가 null이면 아무것도 하지 않는다.

 

for문

for(let k of arr){}

• this: 내가 잡혀 있는 메모리 공간의 시작점
• 100번지 포인터: 메모리 100번지를 향하고 있다.
• 커서(next): 실행한 코드 다음번 코드를 실행함 ⇒ DB에서 많이 사용한다
  • ex. 자바의 rs.next()

`of`: 프로퍼티가 존재하는 객체(객체, 배열) → 프로퍼티를 달라는 뜻

`in`: 일반 iterable only → 문자열, 배열 (커서로 하나씩 이동 가능)

const dt = new Data();
console.log(dt, dit) //UTC 시간. 한국형으로 하려면 +9 더하기

//다음 주 화요일까지 문제 풀어오기(숙제) ⇒ 50 ~ 53페이지 for문 숙제

 

디스트럭처링(destructuring) ⭐

구조분해 할당

const {id, name} = {id:1, name:"hong"};

해당하는 프로퍼티 이름을 찾아 값을 할당해 준다.

let id = user.id;
let {id, name, addr} = u; //let addr = undefined
let {id, ...info} = u; // id = 1, info = {name: "hong", age: 20}

let id, name;
{id, name} = u; //에러, id와 name이 이미 선언되어 있기 때문
({id, name} = u); //에러 나지 않음
const {id, name} = u; //에러 발생x

class A {
    constructor(x, y){
        this.a = x;
        this.b = y;
    }
}

const x = new A(1, 2);

위의 코드는 아래 객체와 동일한 의미를 지닌다.

x = {a: 1, b: 2}

 

스와핑

[a, b] = [b,a]

 

 

오늘 잘한 점

-

 

앞으로 개선해야 할 점

자바스크립트 기초 개념에 대해 웬만큼 알고 있다고 생각했지만 오늘 강의를 들으니 생각보다 모르고 있던 부분이 많았다.

특히 앞부분 개념은 원래 알던 내용이 많아 쉽다고 생각했는데 디스트럭처링으로 넘어가니 심화 내용 중 생소한 부분이 많아서 어려움이 있었다.

또한 부동소수점 때문에 발생하는 소수점 계산 문제에 대해, 인식은 했지만 제대로 찾아본 적이 없어 오늘 제대로 배울 수 있는 좋은 기회였다. 해당 내용은 조금 더 공부해 보고 확실히 내 것으로 익혀 나가야겠다.

더불어 자바스크립트에 대해서도 기본 개념만 알고 있었지 디테일한 지식을 익히지는 못한 채 코드를 작성하고 있었구나 하는 생각을 했다.

그간 개념을 딥하게 파고들지 않았던 것이 아쉽다.

이제라도 디스트럭처링, 구조분해 할당, 부동소수점 관련 지식 등등 부족한 부분을 더 공부해 나가야겠다.

(그리고 while문 안에서 증감연산자를 사용하는 방식도 오늘 처음 익혔다...ㅋㅋ 그동안은 그냥 while문 내부에서 변수 값 1씩 증가해 가며 코딩했었는데 앞으로는 증감연산자를 조건부에 작성하는 법으로 코드를 작성해 봐야겠다.)