JavaScript - 배열

<목차>

1. 원시 타입, 참조 타입

2. 문법

3. 자주 사용하는 매서드

4. 배열의 깊은 복사

 

---

1. 원시 타입, 참조 타입

 

자바스크립트의 메모리

자바스크립트의 메모리 영역에는 call stack영역과 heap영역이 있다.

call stack 메모리엔 원시 타입이 저장되고, heap 메모리에는 참조 타입이 저장된다.

 

원시타입

원시 타입은 메모리에 값이 저장되고 변수가 직접 값을 가리키고 있다.

원시 타입(불변성)은 재할당 시 새로운 메모리에 재할당한 값을 저장하고 가리키는 주소가 바뀌는 형태로 관리된다.

원시 타입으로는 string, number, boolean, undefined 등이 있다.

 

참조 타입

참조 타입은 원시 타입과 다르게 변수의 크기가 동적으로 변한다.

데이터가 동적으로 변하기 때문에 참조 타입의 데이터는 heap 메모리에 저장되고 변수에는 heap메모리에 저장한 데이터의 주소값이 할당된다.

따라서 참조 타입 변수를 호출하면 heap메모리의 주소값을 호출고 그 주소값이 가리키고 있는 데이터가 호출되어 나타나게 된다.

let arr = [];
let arr2 = arr;
arr.push(1);
console.log(arr2);

 

위 코들를 실행하고 arr2를 호출하면 arr2는 arr이 얕은 복사로 할당되기 때문에 arr과 arr2가 가리키고 있는 주소값이 동일해 비어있는 배열이 나타나지 않고 arr.push(1);이 실행된 [1] 이 출력되게 된다.

 

요약

쉽게 말해 원시 타입은 값을 가리키는 주소를 가지고 있고, 참조 타입은 heap 메모리 주소를 가리키는 주소를 가지고 있다는 것이다.

 

---

 

2.  문법

 

배열(Array) : 이름과 index로 참조되는 정렬된 값의 집합이다.

 

배열의 선언 및 호출

// 배열의 선언
// 리스트의 형태로 나열할 때 사용
// 배열 리터럴을 이용한 배열의 선언
let arr = [];
let arr2 = ["javascript", 2, 3, 4, true];

// Array 객체 생성자를 이용한 방법
const arrObj = Array();

// new 연산자를 통한 Array 객체 생성 방법
const arrNewObj = new Array(); 

// 배열의 값을 호출할 때
arr2[0]; // === "javascript"

// 이중배열
let b = [[], [], []];

 

배열에 값 추가

// 배열의 마지막 데이터 뒤로 값이 추가된다.
arr.push(1);

// 해당 안덱스에 값을 할당하는 경우
arr[0] = 1;
arr[1] = 2;

 

 

---

 

3. 자주 사용하는 메서드

indexOf

배열 안의 값을 찾고 그 값이 들어있는 index를 반환해 준다.

let arr = [1, 2, "javascript", 4, 5];

// 사용 예시
arr.indexOf("javascript");

// 내부 함수 예시
function indexOf(arr, str) {
    for(let i = 0; i < arr.length; i++) {
        if (arr[i] == str) {
            return i;
        }
    }
}

 

find

배열의 값을 처음부터 순서대로 순회하며 일치하는(true) 값을 찾으면 반복을 범추고 일치하는 값을 반환해 준다.

let arr = [1, 2, "javascript", 4, 5];

// 사용 예시
let result = arr.find(function(i) {
    return i === "javascript";
});

// 내부 함수 예시
function find(arr, fn) {
    for (let i = 0; i < arr.length; i++) {
        if(fn(arr[i])) {
            return arr[i];
        }
    }
}

 

findIndex

배열의 값을 처음부터 순서대로 순회하며 일치하는(true) 값을 찾으면 반복을 범추고 해당 index를 반환해 준다.

let arr = [1, 2, "javascript", 4, 5];

// 사용 예시
let result2 = arr.findIndex(function(i) {
    return i === "javascript";
});

 

filter

배열의 값을 처음부터 순서대로 순회하며 일치하는(true) 값이 나온 데이터를 배열의 형태로 만들어서 반환해 준다.

일치하는(true) 값을 찾아도 순회가 중단되지 않으며 배열의 끝까지 순회하여 일치하는(true) 값을 배열의 형태로 반환.

let arr3 = ["사과", "사과", "포도"];

let result3 = arr3.filter(function(i) {
    return i[0] === "사";
});

// result3 = ["사과", "사과"];

 

join

배열을 문자열로 반환해 준다.

let arr3 = ["사과", "사과", "포도"];

// 배열을 index마다 잘라서 문자열을 삽입해서 연결
arr3.join("*");

// return값 "사과*사과*포도"

 

split

문자열을 배열로 변환해 준다.

let text = "사과*사과*포도";

// 매개변수로 전달한 내용이 문자열에서 배열로 나눠질 구분점
text.split("*");

// return값 ["사과","사과","포도"]

 

---

 

4.  배열의 깊은 복사

 

스프레드 연산자 (...)

깊은 복사를 위해 사용되는 메서드이다.

const arr = [1, 2, 3];
const arr2 = [...arr];