[JavaScript] 함수 - 참조에 의한 전달과 외부 상태의 변경
# 참조에 의한 전달과 외부 상태의 변경
- 원시 값: 값에 의한 전달(pass by value)
- 객체: 참조에 의한 전달(pass by reference)
매개변수도 함수 몸체 내부에서 변수와 동일하게 취급되므로 매가변수 또한 타입에 따라 값에 의한 전달, 참조에 의한 전달 방식을 그대로 따른다. (즉 매개변수 = 변수와 동일 취급)
// 매개변수 'primitive'은 원시 값을 전달받고, 매개변수 'obj'는 객체를 전달받는다.
function change(primitive, obj) {
primitive += 100; // 함수 내부에서 원시값 변경
obj.name = 'Kim'; // 함수 내부에서 객체의 프로퍼티 값 변경
}
var num = 0;
var person = {
name: 'Lee'
};
console.log('함수 호출 전: ', num);
console.log('함수 호출 전: ', person);
// 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달된다.
change(num, person);
// 원시 값은 원본이 훼손되지 않는다.
console.log('함수 호출 후: ', num);
// 객체는 원본이 훼손된다.
console.log('함수 호출 후: ', person);
원시 타입 인수를 전달 받은 매개변수 primitive인 경우에는 원시 값은 변경 불가능한 값(immutable value)이므로 직접 변경할 수 없기 때문에 재할당을 통해 할당된 원시값을 새로운 원시값으로 교체한다.
객체 타입 인수를 전달받은 매개변수 obj의 경우, 객체는 변경 가능한 값(mutable value)이므로 직접 변경할 수 있기 때문에 재할당 없이 직접 할당된 객체를 변경한다.
- 원시 타입 인수는 값 자체가 복사되어 매개변수에 전달되기 때문에 함수 내부에서 인수로 받은 매개변수를 변경해도 원본이 변경되지 않는다.
- 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 변경된다.
함수가 외부 상태(위의 경우에는 변수 person)를 변경하면 상태 변화를 추적하기 어려워지기 때문에 코드 복잡성을 증가시키고 가독성을 해친다.
객체의 변경을 추적하려면 옵저버(Objerver) 패턴 등을 통해 객체를 참조를 공유하는 모든 이들이게 변경 사실을 통지하고 이에 대처하는 추가 대응이 필요하다.
- 옵저버 패턴이 뭐지??
또 다른 해결방법 중 하나는 객체를 불변 객체(immutable object)로 만들어 사용하는 것이다. 객체의 복사본을 새로 생성함으로써 객체를 마치 원시 값처럼 변경 불가능한 값으로 동작하게 만드는 것이다.
=> 깊은 복사(deep copy) 라고 한다.
깊은 복사를 통해 새로운 객체를 생성하고 재할당을 통해 교체한다. 깊은 복사를 이용하면 외부 상태가 변경되는 side effect 를 방지할 수 있다.
순수함수란 무엇일까?
외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수이다.
순수 함수를 통해 side effect를 최대한 방지하고 오류를 줄이고 프로그램의 안정성을 높이는 프로그래밍 패러다임을 함수형 프로그래밍 이라고 한다.
퀴즈
- 원시 값: ( ) 에 의한 전달
객체: ( )에 의한 전달
정답: 값, 참조
- 매개변수로 객체가 전달되고, 그 객체를 함수 내부에서 변경하면 함수 외부에 있는 객체 원본값이 변경된다. (O, X)
정답: O
객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 변경된다.
- 깊은 복사란 무엇인가?
정답: 객체를 불변 객체로 만드는 것, 즉 객체의 복사본을 새로 생성함으로써 객체를 마치 원시 값처럼 변경 불가능한 값으로 동작하게 만드는 것이다. 깊은 복사를 이용하면 외부 상태가 변경되는 side effect 를 방지할 수 있다.
- 순수 함수란 무엇인가?
정답: 외부 상태를 변경하지 않고 외부 상태에 의존하지도 않는 함수이다.