왜 그럴까요? 위 코드에는 사실 할당이 없었죠. 스벨트는 컴파일러이기 때문에 빌드 시에 모든 변화 감지에 대한 코드가 확정됩니다. 빌드 시에 확인하는 게 할당 연산자 =입니다. 배열은 특히 요소가 변경되면 =을 이용한 명시적으로 할당하는 코드가 필요합니다.

우리가 작성하는 자바스크립트 코드는 변수의 값을 변경할 때 배열을 제외하고는 거의 모두 =을 통해서 코드를 작성하기 때문에 할당에 대해서 크게 신경 쓸 필요가 없었습니다.

하지만 배열은 자기 자신을 제어하는 메서드들(slice, pop, push, filter 등)이 있는데, 이러한 메서드를 통해서 배열 요소들의 값을 변경하면 스벨트는 알아차릴 수 없습니다. 따라서 배열을 할당 연산자 =을 사용해 강제로 할당을 해야 합니다.

물론 변화의 대상인 배열은 =의 왼쪽에 항상 있어야겠죠. 원인을 알았으니 다음과 같이 assignment 함수에 코드를 추가해보겠습니다.

REPL의 App.svelte

<script> 
… 생략 …
    function assignment() {
        colors.pop(); // 배열의 색상을 한 개 지움
        colors = colors; // 할당 트리거로 감지 코드가 동작 예상됨
        console.log("log.2: ", colors); // 지워진 상태를 콘솔에 출력
    }
</script>
… 생략 …