[TIL] 내배캠4기-React-30일차

자바스크립트 심화 스타투! 내걸로 만들어서 리액트 배울 때 도움 좀 받았음 좋겠고만..

모든 data는 byte 단위(8bit)의 식별자인 메모리 주소값을 통해 서로 구분한다.

-변수
기본형/참조형 - 가장 큰 차이는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사됨

참조형 데이터 변수 할당 과정

• 객체의 변수(프로퍼티) 영역의 별도 공간이 존재한다!
  - 원장튜터님 그림으로 보니 이해 쏙쏙..
  

let message = "Hello!";
let phrase = message;

let user = {
  name: "John"
};

let user = { name: "John" };

let admin = user; // 참조값을 복사함

let user = { name: 'John' };

let admin = user;

admin.name = 'Pete'; // 'admin' 참조 값에 의해 변경됨

alert(user.name); // 'Pete'가 출력됨. 'user' 참조 값을 이용해 변경사항을 확인함

객체를 서랍장에 비유하면 변수는 서랍장을 열 수 있는 열쇠라고 할 수 있습니다. 서랍장은 하나, 서랍장을 열 수 있는 열쇠는 두 개인데, 그중 하나(admin)를 사용해 서랍장을 열어 정돈한 후, 또 다른 열쇠로 서랍장을 열면 정돈된 내용을 볼 수 있습니다.

그렇기 때문에 참조형 변수를 다른 변수에 할당할때 문제가 발생한다!
같은 데이터 주소값을 가리키고 있기때문에 나중에 할당한 변수가 값을 바꾸게 되면,
기존 변수 값도 바뀌게 된다.
➡ 얕은 복사, 깊은 복사 개념이 여기서 등장한다!

이후에 모던 자바스크립트 문서까지 보니 참조형 변수를 어떻게 다뤄야하는지 완벽하게 이해됐다.
참조에 의한 객체 복사

객체의 '진짜 복사본’을 만들려면 '얕은 복사(shallow copy)'를 가능하게 해주는 Object.assign이나 '깊은 복사’를 가능하게 해주는 _.cloneDeep(obj)를 사용하면 됩니다. 이때 얕은 복사본은 중첩 객체를 처리하지 못한다는 점을 기억해 두시기 바랍니다.

📌 ?. 옵셔널 체이닝 연산자

존재하지 않는 요소에 접근 ➡ Error!
➡➡ ?. 로 단락 평가 진행해주자.

• 이전엔 &&로 검사했던 게 간단해짐
• && 단점: 코드가 너무 길어진다

obj?.prop - obj가 존재하면 obj.prop을 반환
obj?.[prop] - obj가 존재하면 obj[prop]을 반환
-얘는 객체 프로퍼티에 접근하는 것
obj?.method() - obj가 존재하면 obj.method() 호출
만약 obj가 존재하지 않으면(null이나 undefined일 경우, undefined 반환