[TIL] 정말 내가 잊지 않으려고 정리하는 JS 코드!

choiuhana·2021년 7월 3일
0

TIL

목록 보기
18/37

오늘 하루 정리해야겠다고 생각한 코드들이 4개가 있다! 처음엔 의무적으로 시작한 TIL인데 아직 '익숙'까진 아니더라도 '이거 적어놔야겠다', '이거 조사해보고 정리도 해봐야겠다' 라는 생각을 자연스럽게 떠올리게된다. 오늘은 아침 코드카타 시간에 동기인 '재상'님께 얻은 소스 몇개, 코딩 하던 중 3일동안 의문을 품고 고민하게만든 녀석을 정리해 보려고 한다.

1.꿀팁 코드 정리!

Math.abs(a-b): a와 b 사이의 절대값을 알려주는 코드

const result;
if(result < value ){ result = value }

무언가 비교해서 내가원하는 조건의 결과값만 얻고싶을 때 쓰기좋다, 알고있는 코드 구조지만 막상 적용을 못했던? 구조라 기억하려고 적어놓고 싶었다.

2. 오늘의 하이라이트! 참조형 데이터

우선 자세히 정리해 놓은 블로그 링크를 걸어놓고 시작하려고 한다.
기본형 타입과 참조형 타입 설명 블로그
자세한 설명은 위를 참고하고 쉽게 설명하면 기본형 타입은 바로 값이 바뀌고 참조형은 같은 곳을 바라보기 때문에 재할당을 해도 값 을 바꾸게되면 같이 바뀌게 된다는 얘기!

예를 들어 기본형 데이터는 a = 1 인 a를 복사한 a를 copy한 a copy = 1을 갖는다, 이때 a copy를 2로 바꾸면 a = 1, a copy = 2로 서로 영향 없이 잘 바뀌게 되는데 만약 참조형 데이터인 경우 a copy를 2로 바꾸게되면 a 또한 2로 바뀌는 결과를 갖는데 참조형은 말 그대로 값을 갖는 개념보단 값을 참조하는 개념이라고 생각하면 될듯 하다. 오늘 좀 고민해서 정리한 코드를 남기고 마무리 하고자 한다.

arr = [{a:1, id:1}, {a:2, id:2}]
arr2 = [...arr]

객체를 값으로 갖은 배열을 복사한 arr2가 있다고 하자 이때 id가 1인 객체의 a 값을 3으로 바꾸고자 할 때 내가 처음 시도한 방법은

arr2[0].a = 3

이때의 결과값은

arr = [ { a: 3, id: 1 }, { a: 2, id: 2 } ]
arr2 =[ { a: 3, id: 1 }, { a: 2, id: 2 } ]

참조형 데이터 이기 때문에 원본이라고 생각한 arr또한 바뀌게 된다
따라서 바꾸고자하는 배열을 한번 더 복사하고 바꿀 값을 밀어 넣어줘야 제대로 바뀐다(객체는 같은 키값일 경우 뒤에있는 값이 덮어 씌워 진다.)

rr2[0] = {...arr2[0], a:3}

따라서 처음에 하고자 했던 id가 1인 값을 바꾸는 로직을 짜보면

arr2.findIndex(i => i.id == "1");


arr2.forEach(el => {
  if(el.id === 1){
    arr2[0] = {...arr2[0], a:4}
  }
  console.log(el)
})

요렇게 바꿀 수 있다.

profile
만드는 사람도 사용하는 사람도 편하고 만족하는 '것'을 추구하는 프론트엔드 개발자

0개의 댓글