[23.10.18] TIL

yy·2023년 10월 18일

개발일지

목록 보기

5/122

오늘 할일

(완)강의 3주차 재수강

(완)3주차 복습 하면서 내 코드로 다시 만들기

얕은 복사 & 깊은 복사

참조형 자료형의 얕은복사와 깊은 복사에 대해서 배웠는데 얕은복사에는 중첩객체에 대해서는 복사가 안된다는 사실이 있었다. 근데 막상 해보니 중첩객체에 대해서도 잘 복사가 되는게 아닌가?

중첩되지않은 값을 바꾸는걸로는 확인되지 않고, 중첩되어 있는 객체의 내용을 바꿔야지 차이를 알 수 있었다.

터미널에서 결과를 보면 false가 떴지만 그건 중첩되지 않은 요소(c,d)의 주소값이 달라서 그런 결과가 나온듯하다. 중요한건 obj4의 값을 바꿨는데 obj3까지 바뀌어버렸다는 사실이 중요함.(얕은 복사로는 중첩객체의 선을 끊을 수 없다.)

얕은복사에는 반복문밖에 없을까. 결과는 반복문이랑 동일했다.
1. Object.assign(생성할 객체, 복사할 객체)

2. spread operator

얕은 복사를 중첩객체에 여러번 적용하면 깊은 복사가 된다. (spread operator이용)

깊은복사
1. 재귀함수
근데 중첩된 객체가 많으면 언제 다하고 있냐.그래서 재귀함수 이용

target이 객체이거나 null이 아니면 복사를 시작한다. (객체가 아니라면 기본자료형이기때문에 그냥 복사해도 상관없으니까!)
target의 키 와 값들을 newObj에 복사하는데 newObj에 들어갈 target을 한번더 함수를 돌려서 객체이고, null이 아니면 newObj에 복사를 진행한다. 그러다가 중첩객체가 아닌 키와값을 만난다면(객체가 아니거나 null값인걸 만난다면) 그냥 기본자료형이니 복사한다.

2. JSON.parse 와 JSON.stringify
JSON.stringify : 객체 -> json문자열 변환하는데 이때 원본 객체와의 참조가 끊김.
JSON.parse : json -> 객체 변환.
단점: 느림. 객체가 function인 경우 undefined로 처리

lodash 라이브러리 이용 (아래에 설명)

강의 숙제 this에 관한 내용

var fullname = 'Ciryl Gane'
var fighter = {
    fullname: 'John Jones',
    opponent: {
        fullname: 'Francis Ngannou',
        getFullname: function () {
						// 1. 객체 this 바인딩 : 프란시스 은가누
            return this.fullname;
        }
    },
    getName: function() {
				// 2. 객체 this 바인딩 : 존 존스
        return this.fullname;
    },
    getFirstName: () => {
				// 3. 함수 this 바인딩 : 시릴
        return this.fullname.split(' ')[0];
    },
    getLastName: (function() {
				// 3. 함수 this 바인딩 : 시릴
        return this.fullname.split(' ')[1];
    })()
}
console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

위의 코드를 브라우저(크롬) 개발자도구 콘솔에서 실행하면 아래와 같은 결과가 나온다.

저 중 이해가 안된건 화살표 함수이다. 함수의 경우 전역객체를 바라보지만 화살표함수는 this binding 하지않아 화살표함수가 속한 객체를 바라본다고 알고있다. 근데 cyril이 출력된다.

1. 어떤 문제가 있었는지

깊은복사 방법을 찾던 중 lodash모듈을 사용하는 방법을 발견했다. 이 모듈을 쓰려고 https://lodash.com/ 공식 홈페이지에 들어가 npm 과 node.js일 때의 방법을 참고하여 설치했는데 여전히 코드가 실행이 되지 않았다.

❗2. 내가 시도해본 것들(삽질)(자세히)

A B C 이렇게 시도해봤다

npm i lodash 설치 후 import _ from lodash; => 실패

npm i lodash

import _ from lodash;

var _ = require('lodash');

//node환경인 경우 require을 사용한다.
var _ = require('lodash');

3. 어떻게 해결했는지

해결방법 : C
왜 C로 선택했는지에 대해서 적어두면 짱좋음
한가지 기능을 구현하려고 하더라도 여러가지 옵션이 있으니 그걸 다 확인해보고 다른 옵션들을 왜 선택을 안했는지 TIL 에 적어놔야한다.

1+2방법으로 성공했는데 import는 뺐다. 그랬더니 성공.

npm i lodash

var _ = require('lodash'); //이거 하나만 넣어도 된다.

그래서 돌려본 깊은 복사 (cloneDeep)

❗4. 뭘 새롭게 알았는지(자세히)

lodash 라이브러리가 js에서 핫한거라는걸 알았다. 배열, 숫자, 객체, 문자열 등을 순회하면서 각 요소마다 원하는 기능을 실행하거나, debounce나 throttle처럼 구현하기 번거로운 함수들을 제공한다.

https://hello-bryan.tistory.com/431
https://lodash.com/docs/4.17.15

시간이 걸릴 뿐 내가 못할 건 없다.

이전 포스트