221012_TIL

오늘 한 일

• 얕은복사(shallow copy), 깊은복사 (deep copy)
• 배열에서 사용 할 수 있는 고차함수
• 프로미스 생성방법

---

###얕은복사 얕은복사 shallow copy - 객체는 메모리주소가 전달된다.

자바스크립트에서 복사할 때는 (배열에서 다른 배열을 만들거나 할 때 오브젝트가 전달되거나 복사되거나 할 때 등등) 항상 얕은 복사가 이루어진다

Array.from, concat, slice, spread(…), Object.assign 등 이런 모든 것들을 사용해서 기존의 오브젝트를 어딘가 전달해서 복사할 때는 새로운 오브젝트가 만들어지는 것이 아니라 얕은 복사가 이루어진다.

const youtube = {
  name: kiheondev,
  subscriber: 3000,
};

let youtubecopy = youtube;
youtubecopy.subscriber = 100000;
console.log(youtube, youtubecopy);

깊은복사라면 youtube의 subscriber는 3000, youtubecopy의 subscriber는 100000으로 다를텐데 위는 객체복사이기 때문에 얕은복사가 이루어진다.

let num1 = 1;
let num2 = num1; // num2에는 1이라는 값이 들어간다. = 깊은복사
// num2에 num1 자체를 넣는다. num2와 num1은 같다.
num2 = 2;

console.log(num1, num2); // 출력 값 num1 = 1, num2 = 2
// num1 = 1, num2 = 2 = 깊은복사
// nume1= 2, num2 = 2 = 얕은복사

원시값은 깊은복사로 해석이 된다. 대입시에 num2는 num1 자체다라고 해석하는게 아니라, num2는 num1에 있는 값을 넣는다. num2는 num1과 상관이 없다. 라고 생각하면 된다.

왜 원시값은 깊은복사(deep copy) / 객체는 얕은복사(shallow copy)로 하는걸까 라는 생각이 들어서 찾아봤다.

여러가지 문제가 있겠지만 객체를 깊은복사(deep copy)로 구현을 하면 굉장히 비효율적이기 때문이다.

객체에 프로퍼티가 아주 많다고 생각해보면 대입이 일어날 때 깊은복사이기 때문에 시간이 굉장히 많이 걸리고 메모리도 2배로 먹는다.

그런데도

객체를 복사할 때 deep copy를 하고 싶을 때. 즉, 원본의 객체는 남겨놓고 같은내용의 새로운 객체를 만들고 싶을 땐 {…youtube}; 처럼 코드를 작성해서 사용할 수 있다.

###배열에서 사용 할 수 있는 고차함수

• forEach, find, findIndex, some, every, filter, map, flatmap, sort, reduce 등의 함수들을 공부했다. forEach를 통해 배열을 아이템 숫자만큼 훑어볼 수도 있었고, find를 통해 조건에 맞는 아이템들을 찾아볼 수 있었다. findIndex는 제일 먼저 조건에 맞는 아이템의 인덱스를 반환해준다.

every는 ture, false를 반환한다.

result = products.every((item) => item.name === '기헌');
console.log(result); // false

위의 코드를 대충 예로 들면 every를 사용해서 배열 안에 아이템 하나가 아닌 모두 ‘기헌’이라는 name을 가지지 못했다면 false를 뱉는 것을 설명하고자 한 코드이다.

배열 속 map은 배열의 아이템들을 각각 다른 아이템으로 매핑할 수 있는, 변환해서 새로운 배열 생성하는 함수이다. 기존의 배열 안의 아이템들을을 전체적으로 곱하거나 더한 값을 새로운 배열로 만들 수 있다. map 함수를 배우면서 이 기능은 사이트를 만들 때 원화 가격을 담고 있는 배열에 1000원 이상을 전체적으로 곱해주어 새로운 달러배열을 만들 수도 있겠다란 아이디어도 얻게 됐다.

flatmap : map은 하나당 하나를 연결(매핑)을 해주지만, flatmap은 중첩된 배열을 쫘악 펴준다. sort : 배열의 아이템들을 정렬한다. sort의 기본값은 문자열 형태의 오름차순으로 요소를 정렬하고, 기존의 배열을 변경한다. (map처럼 새로운 배열을 만드는게 아니다.) 숫자열은 사용시에 좀더 주의가 필요하다.

const numbers = [0, 5, 4, 2, 1, 10];
numbers.sort();
console.log(numbers);
// [0,1,10,2,4,5]
// 문자열로 변환되고 오름차순이기 때문에 1 다음 10이 나온다.

const numbers = [0, 5, 4, 2, 1, 10];
numbers.sort((a, b) => a - b); // 인자로 배열 안 숫자를 받고 정렬기준을 만들어준다.
// a-b를 했을 때 -값이면 앞으로 + 값이면 뒤로 정렬이 된다.
// 즉 리턴 값이 0보다 작으면 a가 앞으로 정렬, 0보다 크면 b가 앞으로 정렬이 된다.
console.log(numbers);
// [0,1,2,4,5,10]

reduce : 배열의 요소들을 접어서 접어서 값을 하나로 만든다.

let result = [1, 2, 3, 4, 5].reduce((sum, value) => {
  sum += value;
  return sum;
}, 0);

// sum 인자는 1,2,3,4,5를 전부 합해진 (접혀진) 값을 저장
// 각각의 요소마다 전달받을 인자는 value
// 두번째 인자엔 처음 시작할 sum의 초기값을 적어준다.
// 두번째 인자를 0으로 적게되면 sum = 0 으로 초기화 상태가 된다.

console.log(result); // 15

value엔 1,2,3,4,5 가 순차적으로 전달이 될 것이다.

sum += value 를 적어서 sum에 1,2,3,4,5를 더한 누적 값이 저장이 된다.

###프로미스 프로미스 만드는 방법과 간단한 개념을 다시 복습했다. 프로미스는 코드를 디자인 해주는 다양한 방법 중 하나일 뿐이지 자바스크립트를 비동기로 만들어 주는 마법이 아니다. 프로미스는 콜백함수를 이용하는 것보다 기능이 추가된 유용한 코드이다. 일종의 성공/실패 판독기라고 볼 수 있다. 성공하면 then 을 통해 코드를 반환하고, 실패하면 catch를 통해 코드를 반환할 수 있다. 전혀 상관없이 finally를 통해 코드를 반환할 수 도 있다.