Javascript 에서 배열, 객체를 사용할때 매우 매우 주의할점

< Reference 를 조심하자!!!!!!!!!!! >

 

객체는 복사하지않는 이상, 대입할 경우 reference 임을 우리는 알고있다.

하지만 막상 개발을 하고 앱이 굉장히 커지면 reference 를 value 라고 착각하는 바보같은 실수를 하게된다.

방금 내가 한 실수로 인해, 3시간동안 디버깅한 결과 경우 실수를 찾아냈다.

아래와 같은 경우였다.

const DEFAULT_VALUES = [1, 2, 3]

class Foo {

    public values = DEFAULT_VALUES // 여기가 문제!!!!!!!!!!!

    public setValue(index: number, value: number): void {

        this.values[index] = value

    }

}

const f1 = new Foo()
const f2 = new Foo()

f1.setValue(0, 100)

console.log(f1.values) // [100, 2, 3]
console.log(f2.values) // [100, 2, 3]

나름 Default value 를 const 정의하였는데, 각 instance 에 reference 를 대입해버렸다.

이를 고치기위해

public values = [...DEFAULT_VALUES]

위와 같이 변경되어야한다.

물론 ... 연산자도 deepCopy 는 아니다. 객체가 여러 자식 객체들을 보유할 경우 소용이 없다.

따라서 이것이 찜찜하면..

const DEFAULT_VALUES = [1, 2, 3]

대신에

const DefaultValues = () => [1, 2, 3]

위와 같이 하는것이 현명할것이다.

물론 남이 가진것을 복사해야한다면 복사하는 알고리즘을 작성해야겠다.

 

왜 리액트에서 immutability 를 강조하는지 매우 이해가 되었다.

이런 경우 굉장히 디버깅하기힘들어지고, 이상한곳을 뒤지고있는 자신을 발견하였다...

왠만하면 귀찮더라도 primitive 한것들만 value 로 사용하던가 집어넣던가 하는게 좋을듯하다.

모든 코드의 전체적인 점검이 필요하다.

물론 reference 를 역이용하면, global property 로 하나의 reference 를 공유하여

여러 지점에서 변경할수있도록 사용할수도있을것이다.

 

개발을 하다가, 의도치않게 여러개가 동시에 변한다면 

내가 reference 를 넘긴건 아닌지 언제나 의심해봐야한다.

객체를 사용할때는 왠만하면 local scope 안에서 함수로 return 하는것이 좋다.