📗배열

배열이란 여러 가지 데이터를 순서대로 저장할 수 있는 구조입니다.

배열 만들기

아래와 같이 대괄호를 이용해 배열을 만들 수 있습니다.

const fruits = [ "apple", "orange", "grape" ];

배열 안에 들어있는 값들을 요소라고 합니다.

위의 fruits 변수에 담긴 배열의 경우,

1. 첫 번째 요소는 'apple',

2. 두 번째 요소는 'orange',

3. 세 번째 요소는 'grape'입니다.

그래서 fruits 배열은 3개의 요소를 갖고 있다고 말할 수 있습니다.

현재 위의 배열에서는 모두 문자열 요소들이 담겨있지만, 우리가 원하는 어떤 값이라도 배열의 요소로 추가할 수 있습니다. 자료형이 다른 값들도 함께 담을 수 있습니다.

const arr = [ 1, '3', true ];
const arr1 = [ undefined, null, false, NaN, 1000 ];

배열의 길이

모든 배열은 요소의 갯수에 대한 정보를 아래와 같이 .length 속성을 제공합니다. (문자열과 동일합니다.)

const fruits = [ "apple", "orange", "grape" ];
console.log(fruits);        // [ 'apple', 'orange', 'grape' ]
console.log(fruits.length); // 3

이전에 함수에 대하여 배웠으니, 함수를 응용하여 코드를 한번 작성해볼까요?

const fruits = [ "apple", "orange", "grape" ];

function getNumOfFruits () {
  return fruits.length;
}

const numOfFruits = getNumOfFruits();
console.log(numOfFruits); // 3

위 함수는 fruits라는 변수에 담긴 배열의 길이만 돌려주고 있습니다. 조금 사용 용도가 제한적인 상황입니다.

모든 배열에 대해서 길이 값을 반환해줄 수 있는 함수를 만들어보는 것은 어떨까요?

함수는 매개변수를 사용할 수 있기 때문에, 이용해보면 좋을것 같습니다.

function getNumOfItems (array) {
  return array.length;
}

const fruits = [ "apple", "orange", "grape" ];
const numOfFruits = getNumOfItems(fruits);
console.log(numOfFruits); // 3

위 예제 코드의 getNumOfItems는 매개 변수로 array라는 것을 선언해놓았습니다. 그리고 해당 함수를 실행하며 인수로 fruits 배열을 넣어주고 있습니다.

함수 실행 시점에 매개변수에 할당되는 값을 인수라고 부릅니다.

그렇기 때문에 함수 내부에서 array라는 매개 변수는 fruits가 대입되고, fruits의 길이를 반환하게 됩니다.

조금 더 재사용이 유연해진 함수가 작성되었습니다.

배열의 인덱스

배열의 경우, 문자열과 마찬가지로 인덱스 체계를 이용하여 사용할 수 있습니다.

인덱스 위치에 접근하기

const food = [ 'pasta', 'steak', 'rice' ];
const myFavoriteFood = food[1];
console.log(myFavoriteFood); // 'steak'

인덱스 위치 수정하기

인덱스를 이용하여 배열의 해당 인덱스 위치에 자리한 요소를 수정할 수도 있습니다.

const fibonacci = [ 1, 2, 3, 5, 8, 13 ];

console.log(fibonacci[4]); // 8

fibonacci[4] = false; // 재할당 (수정)

console.log(fibonacci[4]); // false

배열에 요소 추가하기

우선 인덱스를 이용하여 원하는 위치에 요소를 추가할 수 있습니다.

const arr = [];
arr[0] = true;
console.log(arr[0]); // true

arr[2] = true;
console.log(arr[2]); // true

console.log(arr); // [ true, undefined, true ]

또는 아래와 같이 메서드를 이용할 수도 있습니다.

const arr = [];

// push 메서드는 배열의 뒤에 요소를 추가합니다.
arr.push(1); // arr은 [1]이 됩니다.
arr.push(2); // arr은 [1, 2]가 됩니다.

// unshift 메서드는 배열의 앞에서 하나의 요소를 추가합니다.
arr.unshift(3); // arr은 [3, 1, 2]가 됩니다.
arr.unshift(4); // arr은 [4, 3, 1, 2]가 됩니다.

메서드라는 것은 내장 함수를 의미하는 용어라고 우선 알고 계시면 충분합니다.

무엇이든 요소로 가능하다

무엇이든 배열의 요소가 될 수 있습니다.

배열에 또 다른 배열을 담을 수 있습니다.

const list = [ 1, 2, 3 ];
const arr = [ list, 4, 5 ];

console.log(arr[0][0]); // 1

위의 출력문은 1을 출력합니다. arr[0] 은 list 배열을 가리키게 되고, list 배열의 인덱스 0에 위치한 요소를 결과적으로 출력하게 되기 때문입니다.

배열에 함수 또한 담을 수 있습니다.

function logName () {
  console.log("hello world");
}

const arr = [ 2, 3, logName, 4, logName() ];

위의 예시 코드에서 arr 배열의 인덱스 2에 위치한 요소는 logName 이라는 함수입니다. 그렇기에 다음과 같이 실행할 수 있습니다.

function logName () {
  console.log("hello world");
}

const arr = [ 2, 3, logName, 4, logName() ];
arr[2]();

arr 배열의 인덱스 4에 위치한 요소는 logName() 함수 호출문입니다. 함수 호출문은 함수의 반환값으로 대체되는 것과 같습니다. logName 함수는 명시적인 return 문이 없으므로 undefined 가 반환됩니다. 그러므로, arr[4] 는 undefined 입니다.

function logName () {
  console.log("hello world");
}

const arr = [ 2, 3, logName, 4, logName() ];
console.log(arr[4] === undefined); // true

실전에서는 더욱 더 많은 케이스가 있으니 다양한 작업을 하며 코드를 직접 작성해보는 경험을 많이 해보는 것이 매우 중요합니다. 😎