[스파르타 _ 리액트 과정] 25일차

et Ji·2022년 12월 2일

null과 undefined 객체의 복사 내배캠 리액트 스파르타 코딩클럽

TIL

목록 보기

30/40

📅 학습 일자 : 22. 12. 02

📜 진행 내용

[자습] 알고리즘 문제 풀기
- 최대공약수와 최소공배수 다시 풀기
[과제] javascript 퀴즈
[특강] CS _ OSI 7계층

🚩 학습 목표
- 내가 했던 것들이 DOM이었음을 깨닫기.
[강의] 자바스크립트 심화
- Chap-03. this
🚩 학습 목표
- 개념 이론에 익숙해지기
✅ 체크 리스트
- Chap-01-6,7 정리

💡 배운내용

▣ 알고리즘 문제 풀기

오늘부터 팀원분들하고 오전 9 ~ 11시까지는 알고리즘 문제 푸는 시간으로 정했다.
확실히 혼자서 일정을 짜고 진행하는 것보다는, 같은 시간에 (같은 문제는 아니더라도) 같은 과제를 한다는 게 꽤나 의지되는 느낌이었다.
우리 팀에는 실력자 분이 계셔서, 문제 푸는 모습도 화면 공유로 엿볼 수 있었는데 상당한 도움이 되었다.

▣ javascript 퀴즈

얼마 전 수업 진행 방식에 대해 개선될 수 있도록 학생측에서 운영진 측으로 건의된 내용이 취합되었고, 그동안 습득한 내용을 체크할 수 있는 장치 단계가 추가 되었다. 처음이라 그런지 아직은 퀴즈 수준이 평이했다.

▣ 자바스크립트 심화

1-6. 불변 객체

◼️ 불변 객체로 만들기

불변 객체 : 가변일 수 밖에 없는 참조형 데이터 타입들을 변하지 않는 객체로 만든 것

    const obj = { vaule: 1 }
    const newObj = obj;
    
    newObj.vaule = 2;
    
    console.log(obj.vaule); // 2
    console.log(obj === newObj); // true

객체는 원본 객체 프로퍼티와 사본 객체 프로퍼티가 모두 동일한 참조형 데이터의 주소를 가리키고 있다.
그렇기 때문에, 단순하게 할당하는 방식으로 복사를 하면, 사본 객체의 프로퍼티를 변경하면 원본 객체 프로퍼티까지 같이 변경되는 문제가 있다.

참조형 데이터가 저장된 프로퍼티를 복사할 대 그 주솟값만 복사하는 방법

1. 얕은 복사 (shallow copy)

for in 문 - 재귀적 수행
... spread 연산자 - 전개 복사

2. 깊은 복사 (deep copy)
- 객체 내부의 모든 값들을 전부 복사하는 방법

JSON 객체 메서드
- JSON 객체의 stringify( ), parse( ) 활용 : 이 방법은 다른 방법들에 비해 성능이 좋지 않고, JSON.stringify( ) 메서드는 함수를 만났을 때 undefined로 처리된다는 문제점이 있다.
- JSON.stringify( ) : 객체를 JSON 문자열로 변환 (기본 데이터타입의 문자열 아님. { } 까지도 다 문자열로 변환된다. )
- JSON.parse( ) : JSON 문자열 JavaScript 값이나 객체로 생성
```
console.log(JSON.stringify({ x: 5, y: 6 })); //  '{"x":5,"y":6}’

const json = '{"result":true, "count":42}';
  const obj = JSON.parse(json);

  console.log(obj.count); // 42
  console.log(obj.result); // true
  console.log(obj); // { result: true, count: 42 }
```
재귀적 수행
- 객체의 프로퍼티 중 기본형 데이터는 그대로 복사 + 참조형 데이터는 다시 그 내부의 프로퍼티를 복사

1-7. null과 undefined

둘 다 없음을 의미한다.
undefined
- 사용자가 지정할 수도 있으나, 자바스크립트 엔진에서 자동으로 부여하는 경우가 많다.
  - 변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때.
  - 변수나 객체 등에 . 이나 [ ] 로 접근하려 할 때, 해당 데이터가 존재하지 않는 경우
  - 함수에 return문이 없거나, 호출되지 않는 함수의 실행 결과.
  
  👉 사용자가 할당한 것인지, 자바스크립트 엔진이 반환한 것인지 구분할 수 없다.
null
- 값이 없다는 것을 ‘명시적’으로 표현할 때 사용한다.
  
  👉 값이 없음을 명시적으로 표현할 땐 undefined가 아닌 null 로 사용할 것!!