공부/JavaScript23 객체 병합 앞서 전개구문[1]을 통한 객체 병합에 대해 살펴보았다. 다음 예를 살펴보자. 분명히 복사를 했는데, 기존 객체(store)의 변경이 복사본(copy)에도 영향을 미치고 있다. 이는 전개구문을 통한 복사가 얕은 복사[3]이기 때문이다. 따라서 위처럼 2-Depth의 요소를 재할당해주는 방식으로 복사해야 한다. 외에도 JSON 내장 객체나 lodash 라이브러리를 통해 깊은 복사를 할 수 있다. ------ 1. 원 객체를 변화시키지 않기 위해[2] 전개구문을 사용한다. 2. 불변성을 위해 배열의 경우 concat, filter, map 등의 함수를 이용한다. 3. 얕은 복사의 방법에는 전개구문 외 Object.assign을 사용할 수도 있다. 2023. 4. 11. 배열의 특성 자바스크립트에서는 배열이라는 타입이 존재하지 않으며, 배열의 타입을 찍어보면 객체가 나온다. 위에서 보다시피, 자바스크립트의 배열은 인덱스와 length 속성이 있는 특수한 객체이다. 객체다 보니[1], 숫자 이외의 속성을 추가할 수 있으나 length는 변하지 않았음을 확인할 수 있다. for-in으로 출력을 해보면 배열이 아닌 값까지 출력되었음을 확인할 수 있다[2]. 그래서 위와 같이 for-of 혹은 forEach[3][4]를 사용하는 게 좋다. 한편 유사배열이라는 것이 있다. 아래와 같이 배열처럼 인덱스를 통한 접근이 가능하다. 배열과 유사한 생김새를 지녔지만, 유사배열은 배열이 아니기 때문에 forEach 같은 배열의 메소드를 사용할 수 없다. 또한 유사배열은 이터러블[5]도 아니기 때문에 f.. 2023. 3. 18. 클로저의 활용 다음은 클로저의 대표적 예인 카운터다[1]. counter 함수를 호출할 때, counterClosure 컨텍스트[2]에 count와 changeCount가 담긴 스코프 체인[3]이 생성된다. 그러므로 counterClosure에서 count로의 접근이 가능해지게 된다. 이런 식으로 비공개 변수를 만들어 활용할 수 있다. 위 코드[4]도 마찬가지로 클로저를 활용한 예제다. 단, 함수 호출할 때마다 해당 함수에 대한 실행 컨텍스트가 생성된다. 따라서 counter1과 counter2는 서로 독립적이다. ----- 1. 다음 글에서 코드를 발췌했다. 2. 실행 컨텍스트란 코드 흐름이나 함수 동작에 필요한 환경 정보가 담긴 객체를 지칭한다. 3. 스코프 체인은 해당 코드의 유효 범위 안에 있는 변수를 정의하는.. 2023. 3. 15. this 관련 몇 가지 예제 자바스크립트의 this는 자바와 다르게 함수 호출 방식에 따라 바인딩되는 객체가 동적으로 결정된다. 한 문장으로 정리하면 아래와 같다. 생성자 함수와 객체의 메소드를 제외한 모든 함수(내부 함수, 콜백 함수 포함)의 this는 전역 객체를 가리킨다. 위 코드를 보면 생성자 함수(A)와 객체의 메소드(B) 안에서 this가 해당 객체를 가리키는 것을 볼 수 있다. 하지만 콜백함수(C) 안에서는 전역 객체, 즉 Window를 가리킨다[1]. 한편 다음 코드를 보자. 그런데 콜백 함수 내부에서 this를 잘 사용하고 있다.고 헷갈릴 수 있으나 콜백함수 내부에서 this를 사용한 것이 아닌 this를 콜백함수의 매개변수로 전달해준 것이므로 this는 배열 객체를 가리키고 있다. 한편 일반 함수와 다르게 ES6에.. 2023. 3. 15. 이전 1 2 3 4 ··· 6 다음
