아주 먼 옛날 프로그래밍 언어 C를 공부했던 적이 있다. 처음에는 오! 오! 를 매번 외치면서 무언가 내 손으로 만들 수 있다는 것에 신기해하고 기뻐했다. 하지만, 곧 포인터 를 만나게 되고 깊은 좌절감을 느끼게 되는데... 그 이후로 어렵다! 어렵다! 만 반복하던 나는 C 에게 깊은 패배감을 맛보고 "내가 무슨 프로그래밍이야..." 했었다. 그래서 Array 라는 글자에 식은 땀이 나지만 이번에는 포기하지 말고 뚝심 있게 이해하고 정리해보려 한다. 💪💪💪

Array

array은 비슷한 자료들을 묶어서 순서대로 정리한 바구니와 비슷하다. object 와의 큰 차이점은 순서가 정해져 있다는 점이다. 그렇기 때문에 index 를 이용해서 다양한 것들을 할 수 있다. 또, object 가 각각의 특징을 담고 있다면 array 는 비슷한 타입의 데이터들을 담고 있다고 생각하면 된다.

예를 들어 object의 경우에는 토끼, 거북이 등을 말하고 이 안에는 각 객체를 묘사하는 특징들이 담겨 있을 것이다.

array 의 경우에는 토끼들 이라는 집단에 산토끼, 집토끼 등이 함께 담겨 있는 구조이다.

// object
const 산토끼 = {
 거주지 : "산",
 특징 : "큰 귀",
 식성 : "채식"
};  
// array
const 토끼들 = ["산토끼", "집토끼", "눈토끼", "달토끼" ];

Declaration

const array1 = [1, 2, 3, 4];
const array2 = new Array();

array을 선언하는 방법에는 2가지가 있다. 먼저 [] 을 이용해서 선언하는 방식이 있고 이 방법이 주로 쓰인다. 두 번째로는 new 라는 키워드를 사용해서 선언하는 방법이다. 이 때 new Array(1,2,3,4) 식으로 선언하게 되면 위의 결과처럼 값을 할당하면서 선언이 가능하다.

array 를 선언할 때 위의 경우처럼 같은 데이터 타입이 아닌 서로 다른 데이터 타입도 함께 묶을 수 있다. JavaScript 는 타입이 동적으로 정해지는 특징이 있기 때문에 가능하지만, 권장하고 싶지는 않다. 온갖 서로 다른 자료들을 저장해나가는 순간, 배열을 사용하는 이유가 점점 옅어지기 때문이다. array 가 단지 어떤 기능을 구현하는데 편의성을 주기 위함보다 데이터를 한 곳에 묶고 정리하는데 중요한 기능을 하고 있음을 기억하자.

Index position

array 에 저장된 데이터들은 0부터 시작하는 index 를 가지게 된다. 그렇기 때문에 각 index 를 이용하여 원하는 데이터에 접근할 수 있다.

// Index로 원하는 값 찾기
console.log(array1[1]); // 2
console.log(array1[2]); // 3

index 가 0부터 시작하기 때문에 array[1] 를 호출했을 때 두 번째 순서에 있는 1 을 출력할 수 있었다.

// Array의 길이
console.log(array.length); // 4

위에서는 우리가 선언했던 array 의 길이를 호출했다. 보는 것과 같이 배열의 길이를 이용하고 싶다면 .length 를 사용하면 된다. index 의 경우에는 0부터 시작해서 3에서 끝이지만 길이는 4라는 것을 알 수 있다. 즉, 배열의 길이 - 1 = 인덱스의 마지막 번호 라는 것을 기억해두면 좋다.

Array Methods

array 는 자료구조 이기 때문에 안에 있는 자료들을 어떻게 활용할 수 있는지 중요하다. 검색, 정렬, 삽입, 삭제 등을 잘 할 수 있도록 도와주는 몇 methods 에 대해서 정리해보자.

Looping over an array

for

let fruits = ["🍎", "🥝", "🍌"];
for(i = 0 ; i < fruits.length ; i ++){
  console.log(fruits[i]);
}

array 의 메소드는 아니지만 반복문에서 배열을 활용할 수 있는 방법에 대해서 간단하게 보려고 한다. 위의 코드의 결과는 아래처럼 나온다.

반복문을 사용해서 array 의 모든 데이터가 출력될 수 있도록 했다. 위를 보면 length 를 통해서 배열의 길이만큼, 그리고 i 에 초기값으로 0을 주어서 index 를 0부터 시작하도록 한 것을 알 수 있다. 비슷한 결과값을 내기 위해 아래의 식을 사용할 수도 있다.

for of

for (let fruit of fruits) {
  console.log(fruit);
} // 결과는 동일하게 나온다! 

forEach()

fruits.forEach((fruit) => console.log(fruit));

마지막으로 array 의 메소드 중에 하나인 forEach() 를 통해서도 같은 결과값을 낼 수 있다.

위의 코드를 보면 forEach() 의 인자로 콜백함수를 호출하고 있음을 알 수 있다. forEach() 는 array 의 각 아이템마다 콜백함수를 호출하도록 하는 메소드이다.

Addtion, deletion, copy

배열을 추가하거나 삭제하는 메소드에는 push(), pop(), shift(), unshift() 등이 있다.

push()

push() 의 경우에는 array 의 마지막에 아이템을 추가하는 메소드이다.

fruits.push("🍓", "🍑"); // return new length! 5!!

한 가지 기억해두면 좋은 것은 push() 을 사용했을 때 변화된 array 의 길이를 반환한다는 점이다. 위의 경우에는 원래 길이가 3이었던 array 에 2개의 아이템이 추가되면서 5 라는 값을 반환했다.

pop()

pop() 의 경우에는 array 의 마지막 아이템을 삭제하는 메소드이다.

fruits.pop();
fruits.pop();

위의 코드를 통해서 추가했던 아이템을 다시 삭제하였다. 이 때 push() 와는 다르게 변화된 길이를 반환하지 않고 삭제한 아이템을 반환한다.

unshift()

unshift() 의 경우에는 앞에서부터 새로운 아이템을 추가할 수 있다.

fruits.unshift("🍓", "🍋"); // return new length! 5!!

shift()

shift() 는 앞에서부터 아이템을 삭제할 수 있다.

fruits.shift();
fruits.shift();

point!💡
unhsift() 와 shift() 의 경우에는 pop(), push() 에 비해 매우 느리다. 그 이유는 새로운 아이템을 배열의 끝에 추가하는 경우에는 빈 공간을 이용하기 때문에 단순하지만, 맨 앞에 추가하거나 삭제하는 것은 이전에 이미 자리를 차지하고 있던 아이템들을 복사해서 옮기는 작업이 선행된 후에 진행되기 때문이다. 그렇기 때문에 특별한 경우가 아니라면 pop() 이나 push() 을 사용할 수 있도록 하자. 이런 것들이 쌓여서 불편한 웹사이트를 만들 수 있다.

splice()

추가적으로 splice() 에 대해서도 보자. splice() 는 배열의 특정 위치에서 삭제하거나 추가할 수 있는 메소드이다.

fruits.push("🍓", "🍑", "🍋"); // 보기 편하도록 배열 키우기
console.log(fruits);
fruits.splice(1, 1); // 1번 인덱스부터 하나 지우기!
console.log(fruits);
fruits.splice(1, 1, "🍏", "🍉"); // 1번 인덱스에서 하나 지우고 추가!
console.log(fruits);

기본적인 문법은 splice() 에는 여러 개의 인자를 사용할 수 있는데 첫 번째 인자는 시작하고자 하는 index 이고 두 번째는 지우고자 하는 숫자이다. 그리고 이후에는 추가하고자 하는 아이템을 작성할 수 있다.

Searching

자료를 묶어 둔 다음에 찾는 것이 불편하다면 그것도 의미가 없을 것이다. array 의 검색 관련 메소드도 간단하게 살펴보자.

indexOf()

위의 예시에서 다룬 array의 경우에 길이가 짧았기 때문에 index 를 파악하는데 어려움이 없었지만 자료 구조가 방대해지거나 알 수 없는 상태로 입력 받는 경우에는 index 를 파악하는데 도움이 필요하다. 이를 도와주는 것이 indexOf() 이다.

console.log(fruits.indexOf("🍎")); // 0
console.log(fruits.indexOf("🥥")); // -1

현재 🍎 는 array 의 맨 앞에 위치하고 있다는 뜻이 된다. 그런데 가끔 -1 의 값을 반환하는 경우도 있다. 이는 해당 요소가 array 에 존재하지 않는다는 뜻이다. 유용하게 쓰일 수 있으므로 기억하자.

추가로, indexof() 의 경우에는 첫 번째로 찾은 요소의 index 를 반환한다. 만약 마지막 요소의 index 를 반환하고 싶다면 lastIndexOf() 를 사용하면 된다.

includes()

array 에 특정 요소가 있는지 알고 싶다면 includes() 를 사용할 수 도 있다.

console.log(fruits.includes("🍉")); // true
console.log(fruits.includes("🥥")); // false

이외에도 많은 메소드들이 있지만 다 다루기는 어렵기 때문에 자주 쓰이는 것들에 대해서는 따로 한 번 정리해보려고 한다. 우선은! 관련된 궁금증은 Array-MDN 을 참고하면 좋다.

참고자료:
드림코딩 by 엘리