한 입 크기로 잘라먹는 리액트Table Of Contents
자바스크립트에서 원시 자료형을 제외한 모든 자료형은 객체 자료형입니다. 1장에서 살펴본 배열과 함수는 객체 자료형입니다. 자바스크립트는 다른 언어와 달리 배열과 함수를 사용할 때 주의할 점이 있는데, 이번 절에서 이를 살펴보겠습니다.
배열과 함수가 객체인 이유
1장에서 자바스크립트의 자료형은 크게 원시 자료형과 객체 자료형으로 구분된다고 배웠습니다. 자바스크립트의 원시 자료형을 제외한 모든 자료형은 객체 자료형 입니다. 따라서 논리적으로 배열과 함수 역시 객체 자료형입니다.
배열은 인덱스로 연속적인 값을 저장하는 데 특화된 자료형입니다. 자바스크립트의 배열은 객체 자료형에 몇 가지 기능을 추가해 다른 언어의 배열처럼 동작하는 특수한 객체라고 할 수 있습니다. 따라서 자바스크립트의 배열에는 일반 객체에 있는 프로퍼티와 메서드가 있습니다.
예컨대 자바스크립트의 배열에는 길이를 나타내는
코드를 불러오는 중 입니다 ...length 프로퍼티가 있습니다.① 배열 arr1의 길이는 현재 3이므로 arr.length의 값은 3입니다. ② 배열 arr2의 길이는 현재 4이므로 arr.length의 값은 4입니다.
또한 배열은 객체이므로 배열 조작을 위한 메서드가 있습니다.
코드를 불러오는 중 입니다 ...push 메서드는 배열 마지막 요소 뒤에 값을 추가하는 메서드입니다.
이렇듯 자바스크립트의 배열은 객체여서 이를 쉽게 다루도록 도와주는 유용한 프로퍼티와 메서드가 여럿 있습니다. 이들 프로퍼티와 메서드는 추후에 더 자세히 살펴보겠습니다.
자바스크립트의 함수 또한 객체입니다. 그리고 함수는 값으로 취급됩니다. 이러한 특징 때문에 함수를 값으로 저장하는 함수 표현식이 가능하고, 다른 함수에 인수로 전달할 수 있는 겁니다.
자바스크립트의 배열에 길이를 저장하는 length 프로퍼티가 있듯이, 함수에도 함수의 이름을 저장하는
코드를 불러오는 중 입니다 ...name 프로퍼티가 있습니다.함수의 name 프로퍼티는 해당 함수의 이름을 저장합니다.
객체와 참조
원시 자료형은 하나의 값을 저장하지만 함수와 배열 같은 객체 자료형은 여러 개의 값을 저장합니다. 원시 자료형은 값을 크기가 일정한 공간에 저장합니다. 그러나 객체 자료형은 값이 동적으로 늘어나거나 줄어들기 때문에 일정한 크기의 공간에 저장할 수 없습니다.
객체 자료형은 값의 크기가 유동적으로 변하기 때문에 자바스크립트는 참조(Reference)라는 기능을 이용합니다. 참조란 실제로 값을 저장하는 것이 아니라 값을 저장한 곳의 주소만 저장하는 방식입니다.
원시 자료형과 객체 자료형의 저장 방식 비교
원시 자료형은 값을 변수에 저장할 때 값 그대로 저장합니다.
코드를 불러오는 중 입니다 ...이 코드를 그림으로 표현하면 다음과 같습니다.
반면 객체 자료형 즉 참조 자료형은 값을 이렇게 저장하지 않습니다.
다음 코드와 그림을 보며 살펴보겠습니다.
코드를 불러오는 중 입니다 ...이 코드를 그림으로 표현하면 다음과 같습니다.
객체는 컴퓨터의 메모리 어딘가에 저장되고,변수 person은 객체를 참조할 수 있는 주솟값을 저장합니다. 이 값을 참좃값이라고 합니다.
다음 코드와 같이 객체를 복사하면 변수에는 참좃값이 저장되고 실제 객체의 값은 복사되지 않습니다. 즉, 두 변수는 동일한 참좃값을 가지며, 하나의 객체를 동시에 참조하는 형태가 됩니다.
코드를 불러오는 중 입니다 ...
변수 man에 저장한 객체에 새 프로퍼티를 추가하고, person, man 둘 다 출력하면 동일한 결과가 나옵니다.
코드를 불러오는 중 입니다 ...이것은 변수 man과 person이 참조하는 객체가 같기 때문입니다.
이렇듯 객체 자료형은 원시 자료형과 다르게 참조 형식으로 변수를 저장합니다.
참조에 의한 비교
객체 자료형과 원시 자료형은 저장 방식이 다르기 때문에 값을 비교하는 방법도 다릅니다. 다음은 동일한 값을 원시 자료형으로 저장한 두 변수를 비교하는 예입니다.
코드를 불러오는 중 입니다 ...변수 numA와 numb에 저장한 값은 값도 자료형도 모두 같습니다. 따라서 비교 결과는 참입니다.
다음은 동일한 값을 객체 자료형으로 저장한 두 변수를 비교한 예입니다.
코드를 불러오는 중 입니다 ...변수 person과 man에 저장한 객체는 서로 완벽하게 같습니다. 그러나 두 값을 비교하면 false를 반환합니다. 이는 객체 자료형을 비교할 때는 값이 아닌 참좃값을 비교하기 때문입니다. 객체는 생성될 때 고유한 참좃값을 갖습니다. 변수 person과 man에 저장된 참좃값은 서로 다릅니다. 따라서 객체 person과 man은 내부적으로는 값이 같지만 각각 별개의 객체입니다.
객체를 비교할 때는 값이 아닌 참좃값을 비교합니다. 이를 ‘참조에 의한 비교’라고 합니다.
배열이나 함수도 객체이므로 당연히 동일한 결과가 나타납니다.
코드를 불러오는 중 입니다 ...변수 arr1과 arr2에 저장한 배열은 값은 같지만 서로 다른 객체입니다. 참좃값을 비교하므로 결과는 거짓이 됩니다.
코드를 불러오는 중 입니다 ...변수 func1과 func2에 저장한 함수는 내부 동작은 같지만 서로 다른 객체입니다. 참좃값이 다르므로 결과는 거짓입니다. 이 예제는 화살표 함수를 서로 비교했지만 함수 선언식으로 만든 함수의 결과도 동일합니다.