21.06.10

1. scrollIntoView

MDN
Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다.

const container = document.querySelector('.container')
container.scrollIntoView()

element를 선택하고 scrollIntoView 메소드를 호출하면 해당 위치로 스크롤한다.
스크롤이 다소 둔탁하다면 scroll-behavior를 통해 부드럽게 스크롤 할 수 있다.

scroll-behavior: smooth;

2. Nullish coalescing operator

MDN
널 병합 연산자는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

논리연산자OR(||)와는 비슷하면서도 다르다.
논리연산자OR는 왼쪽 피연산자가 null 또는 undefined뿐 아니라 falsy값에 해당할 경우 오른쪽 피연산자를 반환하지만,
널병합연산자는 null 또는 undefined일때 만 오른쪽 피연산자를 반환한다.

const foo = null ?? 'hello null'
// output -> 'hello null'

const baz = 0 ?? 42
// output -> 0

3. 불변성(immutable)

불변성 - 객체가 생성된 이후 그 상태를 변경하지 않는 디자인 패턴. 함수형 프로그래밍의 핵심원리
참조에 의한 호출(call by reference)하는 객체의 의도하지 않은 객체의 변경은 오류를 발생시킨다.

call by value

• Boolean
• null
• undefined
• Number
• String
• Symbol

call by reference

• Array
• Object

• Object.assign

Object.assign({}, {age: 99})

return {
	...person,
  	age: 99
}

Object.assign을 사용하여 객체를 복사할 수 있지만 Deep copy는 지원하지 않고 Shallow copy만 지원한다.

• Object.freeze
  내부의 객체는 변경된다.
• JSON.parse(JSON.stringify(items))
• Immutable.js

불변성을 지키면 좋은점?

1. 무분별한 상태의 변경을 막는다 = 예측가능하다.
2. 상태 변경을 추적하기 쉽다.

참고:
https://poiemaweb.com/js-immutability
https://evan-moon.github.io/2020/01/05/what-is-immutable/