< Pass by Value & Pass by Reference >
1) Primitive 자료형: Pass by Value
우선, Primitive 자료형에는 Boolean(true, false), Number(숫자 및 NaN), String(문자), Null(빈 값), Undefined(타입도 값도 없는 상태)가 있다. 이런 원시 타입(Primitive Type)에는 값(value)이 복사되어 전달된다.
코드로 보면 다음과 같다.
num 이라는 변수를 선언하고 1이라는 값을 할당한다.
이를 다시 num라는 변수에 num에 담긴 값을 할당한다.
따라서 console.log로 두 값을 나타내보면 둘 다 1이 나오는 것을 알 수 있다.
===을 통해 값과 타입 또한 모두 일치하는 것을 볼 수 있다.
다시 num에 5를 할당해보자.
그러면 두 값은 각각 5와 1이 나온다.
또한 ===을 통해 서로 일치 하지 않음을 알 수 있다.
2) Object 자료형: Pass by Reference
이 자료형은 원시 타입을 제외한 나머지(함수, 배열, 클래스 등)의 거의 모든 것이라 할 수 있다. 키(key)와 값(value)로 구성된 property의 집합이다. 이런 property는 일반적인 데이터라 할 수 있다. 반면, 이 property에 함수가 담긴다면 이를 메소드(method)라 한다.
이런 객체(Objet) 자료형은 값을 할당하거나 함수 인자를 넘길 때 메모리 주소(address)를 넘긴다.
obj라는 함수 안에 one이라는 key에 1의 값이, two 라는 key에 2의 값이 할당되었다.
이를 obj2에 obj의 내용을 전달한다.
console.log로 나타내보면 둘은 같은 값이 나오는 것을 확인할 수 있다.
또한 === 의 연산에서 값과 타입이 일치한다.
obj에 five라는 key와 5의 value를 할당한 후,
console.log로 확인해보면 둘의 값이 다시 일치한다.
그리고 ===의 연산에서도 둘의 값과 타입이 일치한다고 나온다.
좀 더 쉽게 설명해보자면, 이를 아이스크림 가게의 숟가락과 아이스크림에 비유할 수 있을 것 같다.
아이스크림의 숟가락을 primitive 자료형, 아이스크림을 object 자료형이라 하자.
(비교적 간단한 값을 지닌 primitive를 가벼운 플라스틱 숟가락으로, 복잡한 구조의 object 자료형을 커다란 아이스크림 통으로 생각해보았다.)
primitive의 값을 전달 받는 다고 할 때 핑크색 숟가락을 전한다고 하자. 그럼 그냥 전달하면 된다. 바뀌는 것이 없다. 어떤 그릇에 담긴 게 핑크색 스푼이었을 때 이를 다른 그릇에 똑같이 담아야한다면 같은 핑크색 스푼을 담으면 된다. 하지만 num = 5; 와 같이 그릇에 다른 파란색 스푼(숫자 대신 색으로 구별해보자)이 담긴다면? 핑크색 스푼과 파란색 스푼은 다르다는 것을 알 수 있다.
Object에서는 주소를 전달한다. 즉 바닐라맛 아이스크림이 예를 들어 진열대의 아래 칸 오른쪽에서 3번째에 있다는 위치(address)를 전달하는 것이다. 위의 코드에서 obj나 obj2는 둘 다 '진열대 아래 칸 오른쪽에서 3번째'라는 정보를 지닌다고 할 수 있다.
obj.five = 5; 와 같이 아이스크림에 초코시럽이 들어갔다와 같은 데이터의 변화가 있더라도, obj와 obj2에는 '주소'를 저장했기에 obj에서나 obj2에서나 초코시럽이 들어간 바닐라 아이스크림을 확인할 수 있다.
처음 설명을 들었을 때 이런 비유를 하면 좋겠다는 생각이 들어 아이스크림 가게에 비유해보았다. 면접에도 나오는 단골 질문이라 하여 써봤는데, 잘한 비유일까? 이해는 확실히 되었다고 생각한다. 여기까진 괜찮았는데 DOM(Document Object Model)에서 물음표가 가득해졌다... 실습과 과제를 더 해보고 DOM도 블로그를 써봐야겠다. 이해와 별개로 내가 하면 코드가 작동이 되질 않는다.ㅎㅎ 뭔가 놓친 연결고리가 있는 것 같은데 꼭 찾고 싶다!!