1. 깊은복사, 얕은복사

1. 깊은복사

복사된 객체가 다른 주소를 참조하며 내부의 값만 복사된다.

1. 복사 방법

• 재귀함수를 이용한 복사
• JSON.stringify()
• lodash라이브러리 사용

아래의 3개 방법은 1depth까지만 깊은복사가 가능, 1depth이상은 얕은복사가 되므로 주의

• Array.prototype.slice()
• Object.assign()
• 스프레드 연산자

2. 얕은복사

원본 값과 복사된 값이 같은 참조(=메모리 주소)를 가리키는 것

1. 복사 방법

객체에 직접 대입

const obj1 = { a: 1, b: 2};
const obj2 = obj1;
console.log( obj1 === obj2 ); // true

2. 불변성을 유지하려면?

1. 불변성이란?

변하지 않는 것. 한번 생성되고 나면 변경할 수 없음.

2. 자바스크립트의 원시타입

• Boolean, String, Number, Null, undefined, Symbol !== Object
• 메모리 영역 안에서 변경이 불가능하며, 변수에 할당할 때 완전히 새로운 값이 만들어져 재할당됨

3. 불변성을 유지해야하는 이유?

• 전역변수를 지양하는 이유와 같음
• 값의 변화를 추적하기 쉬움
• 원본데이터가 변경될 경우, 해당 데이터를 참조하고 있는 다른 객체에서 예상치 못한 오류가 발생할 수 있기 때문

4. 불변성을 유지하려면?

깊은 복사 사용하기!

1. Object메서드 사용

• Object.assign()을 사용하여 데이터를 복사해서 사용 (단, 1depth까지만 가능)
• Object.freeze()을 사용하여 원시값을 얼림 (strict mode에서 동작), 중첩객체 적용 안됨
  (object값들은 변경 가능, 물론 object도 얼리는 방법은 있음)
• Object.seal()은 freeze와 유사한 기능을 하지만 객체에 새 속성을 추가하거나 삭제할 수 없음
• Object.preventExtensions()은 seal()과 동일하고 속성 삭제가 가능함

2. 스프레드 문법 사용

• 스프레드 문법을 사용해 객체를 복사하면 객체 불변성을 유지할 수 있음 (단, 1depth까지만 가능)

3. immer/Immutable라이브러리 사용

4. map, filter, slice, reduce와 같은 새로운 배열을 반환하는 메서드 사용

3. Blocking, Non-Blocking

1. Blocking

• 코드의 실행이 다른 코드의 실행을 막는다
• 자신의 작업을 진행하다가 다른 주체의 작업이 시작되면 다른 작업이 끝날 때까지 기다렸다가 자신의 작업을 시작하는 것
  ex) A함수가 B함수를 호출하면 B에게 제어권을 넘기고, B의 실행이 끝나면 제어권을 A에게 돌려준다.

2. Non-Blocking

• 코드의 실행이 다른 코드의 실행을 막지 않는다
• 다른 주체의 작업에 관련없이 자신의 작업을 하는 것
  ex) A함수가 B함수를 호출해도 제어권은 자신이 가지고 있는다.

3. 동기, 비동기와 비교

1. 동기 :

• 코드가 순서대로 실행된다
• 작업을 동시에 수행하거나, 동시에 끝나거나, 끝나는 동시에 시작

2. 비동기 :

• 코드가 순서대로 실행되지 않는다
• 시작, 종료가 일치하지 않으며, 끝나는 동시에 시작을 하지 않음

3. 동기와 비동기 :

• 코드의 순서랑 실행 순서가 일치하느냐
• 프로세스 수행 순서 보장에 대한 매커니즘
• 호출되는 함수의 작업 완료 여부를 신경쓰냐에 따라, 함수 실행/리턴 순차적인 흐름을 따르느냐, 안따르느냐 관심사

4. 블로킹과 논블로킹 :

• 코드의 실행이 다른 코드의 실행을 막느냐
• 프로세스의 유휴 상태에 대한 개념