.png)
배열의 data type은 Object이다. 그 이유에 대해 적어보자
배열은 Object의 하위개념이다👀
(출처 : https://workatit.tistory.com/88)
✨객체타입(Object/Reference Type)과 원시타입
- 자바스크립트의 데이터 타입은 기본형 타입(primitive type)과 참조형 타입(Reference Type) 으로 나뉘어진다
- 참조형 데이터 타입에는 객체가 있고 이 객체의 하위 부류로 배열과 함수 등이 포함되어 있다. 참조형 타입을 객체타입이라고 부르기도 한다.
배열의 탄생 스토리👀
✨객체란?
객체는 서로 연관된 특징과 행동들을 묶어두는 데이터 타입이라고 할 수 있다. 키를 사용해 식별할 수 있는 값(키의 값)을 담은 컬렉션이다.
✨배열의 탄생!
객체는 태생이 순서를 고려하지 않고 만들어진 자료구조이다. 개발을 하다 보면 첫 번째 요소, 두 번째 요소, 세 번째 요소 등과 같이 순서가 있는 컬렉션이 필요할 때가 있는데, 이 때 객체를 사용하면 순서와 관련된 메서드가 없어 불편하다.
그래서 순서가 있는 컬렉션을 저장해야하는 상황이 생길 때 쓰려고 만든 자료구조가 바로 배열이다.
배열의 동작👀
자바스크립트의 배열은 자료구조에서 말하는 일반적인 배열의 동작을 흉내낸 특별한 종류의 객체이다. 객체처럼 동작하는 부분과 일반적인 배열처럼 동작하는 부분을 나눠서 보자.
✨객체처럼 동작
- 배열은 객체이기 때문에 객체처럼 동작한다.
- 객체는 변경이 가능한 값이다. 객체는 생성된 이후에도 프로퍼티를 동적으로 추가할 수 있고 프로퍼티 값을 갱신할 수 도 있으며, 프로퍼티 자체를 삭제할 수 있다. 배열의 요소들도 변경 가능하다. 참고로 배열 arr의 요소를 접근할때
arr[0]처럼 대괄호를 사용하는 방식도 객체 문법에서 왔다.
- 배열의 요소 변경하기-
let fruits = ["사과", "오렌지", "망고"]
fruits[2] = '배'
console.log(fruits) // ["사과", "오렌지", "배"]
- 객체 변경하기-
let fruits = {
red: "사과",
orange: "오렌지",
yellow: "망고"
}
fruits.red="딸기"
console.log(fruits)
// 출력
{
orange: "오렌지",
red: "딸기",
yellow: "망고"
}
😀 참조에 의한 전달
- 객체를 가리키는 변수를 다른 변수에 할당하면 참조 값이 복사되어 전달된다. 배열도 객체와 마찬가지로 참조를 통해 복사됩니다.(참조란? 메모리 주소 값, 참조를 통해 복사한다는 말은 메모리의 주소를 복사한다는 뜻이다)
- 객체를 가리키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 메모리 주소 값이 복사되어 전달된다. person과 copy는 다른 메모리 주소를 가지고 있지만, 동일한 참조 값을 갖고 있다. 따라서 원본이나 사본 중 어느 한 쪽에서 객체를 변경하면(객체의 프로퍼티 값을 변경하거나 추가, 삭제하면) 서로 영향을 주고받는다
let person = {
name: 'Lee'
};
let copy = person;
console.log(copy) ; // {name: 'Lee'}
copy.name = 'Kim';
person.address = 'Seoul';
console.log(person); // {name: 'Kim', address: 'Seoul'}
console.log(copy); // {name: 'Kim', address: 'Seoul'}- 배열도 참조를 통해 복사한다
let fruits = ["바나나"]
let arr = fruits;
console.log(arr); // ["바나나"]
arr.push("배");
console.log(arr); // ["바나나", "배"]
console.log(fruits); // ["바나나", "배"]
console.log(fruits === arr) // true
✨배열 고유의 동작
- 자료구조의 일반적인 배열의 특징 중 하나 또한 인덱스를 통해 효율적으로 요소에 접근한다는 점이다.
- JS의 배열도 숫자형 키(인덱스) 를 사용함으로써 배열은 객체 기본 기능 이외에도 순서가 있는 컬렉션을 제어할 수 있는 특별한 메서드(push(), pop())들과 length 프로퍼티를 사용할 수 있다.
-배열-
let fruits = ["사과", "오렌지", "자두"]
console.log(fruits[0]); // 사과
console.log(fruits[1]); // 오렌지
console.log(fruits[2]); // 자두
fruits.push("망고")
console.log(fruits) // ["사과", "오렌지", "자두", "망고"]
console.log(fruits.length) // 4
-객체-
let fruits = {
red: "사과",
orange: "오렌지",
yellow: "망고"
}
console.log(fruits)
//출력
{
orange: "오렌지",
red: "사과",
yellow: "망고"
}
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ