배열

안녕하세요🤗

이번 시간에는 자바스크립트의 배열의 개념과 생성법, 그리고 배열 요소들의 간단한 추가 삭제 방법까지 배워보도록 하겠습니다.

배열

지난 시간에 배웠던 객체가 한 번에 여러 개의 데이터 값들을 저장할 수 있는 자료형 이었다면, 배열은 순서가 있는 요소들의 집합, 여러개의 항목들이 모여 있는 리스트라고 할 수 있습니다.

코드 샌드박스를 통해 배열을 생성하고, 배열의 요소들을 추가, 삭제 해보면서, 배열은 객체와 어떤 차이점이 있는지 배워보겠습니다.

배열 생성

먼저 배열을 생성하는 방법부터 알아봅시다.

배열은 객체와 비슷하게 2가지 방법으로 생성할 수 있습니다.

1. 배열 생성자

첫번째 방법은 생성자를 이용하는 방법입니다.

객체의 생성법과 마찬가지로, 배열 또한 생성자를 통해 배열을 생성할 수 있습니다.

let arr = new Array(); 

앞에서 배웠듯이, 생성자를 사용할 때에는 new 라는 키워드를 사용해야합니다.

코드를 실행하면, 객체는 {} 가 출력되었지만, 배열은 [] 가 출력되는 것을 볼 수 있습니다.

이번에는 생성자를 이용해 선언된 배열에 값을 넣어보겠습니다.

배열에 값을 넣기 위해서는 Array의 괄호 안에 숫자를 작성해주면 됩니다.

arr1 이라는 배열에는 여러개의 값을 넣고, arr2 라는 배열에는 3 이라는 한개의 값만 넣어보겠습니다.

let array1 = new Array(1, 2, 3);
let array2 = new Array(3);

console.log(array1); // [1, 2, 3]
console.log(array2); // [undefined, undefined, undefined]

코드를 실행해보면, array1 배열에는 괄호 안의 1,2,3 이라는 요소들이 순서대로 배열에 담기게 됩니다.

반면, array2 배열은 3이라는 값의 요소가 담기는 것이 아니라, undefined 라는 3개의 값이 담긴 배열이 생성되는 것을 볼 수 있습니다.

이렇게 배열 생성자에 값을 할당할 때에는, 특정 요소를 넣으려면 여러개의 값을 넣고, 원하는 크기의 공간을 할당하려면, 원하는 공간의 크기를 괄호 안에 작성해주면 됩니다.

2. 배열 리터럴

두번째 방법은 배열 리터럴[]를 이용하는 방법입니다.

배열 리터럴은 중괄호가 아닌, 대괄호를 이용해 배열을 생성하는 방식입니다.

한 번 작성해보도록 하겠습니다.

let arr = [];

그 다음 마찬가지로, 리터럴을 이용해 배열에 값을 넣어보겠습니다.

앞에서 배열 생성자에 넣어줬던 값과 동일한 값을 array1과 array2 변수에 넣어보겠습니다.

let array1 = [1, 2, 3];
let array2 = [3];

console.log(array1); // [1, 2, 3]
console.log(array2); // [3]

해당 코드를 실행시켜보면, array1은 배열 생성자에 값을 넣은 결과와 동일하게 배열 안에 1, 2, 3 이라는 값이 순서대로 담겨있지만,

array2 배열은 undefined 값이 3개가 담겨있지 않고, 3이라는 값이 담겨있는 것을 볼 수 있습니다.

이렇게 배열 리터럴을 통해 배열을 생성하고 배열에 값을 넣게되면 그 값이 순서대로 배열의 요소로 저장되게됩니다.

배열 특징

이러한 배열의 요소들은 객체 프로퍼티의 값과 마찬가지로, 타입에 상관없이 모든 요소를 넣어줄 수 있습니다.

여러가지 자료형을 배열의 요소에 넣어보았습니다.

let arr = [
    { name: "홍길동" },
    1,
    "array",
    function (){
        console.log("hello world!");
    },
    null,
    undefined,
];

console.log(arr);

이렇게 배열에도 객체 프로퍼티의 값과 마찬가지로 다양한 자료형을 넣어줄 수 있습니다.

arr 배열을 출력해보면, 에러 없이 요소들이 알맞게 출력된 것을 볼 수 있습니다.

배열 다루기

이번에는 이러한 배열의 요소에 접근하는 방법은 무엇인지, 요소를 추가, 삭제, 수정하는 방법은 무엇인지를 알아보겠습니다.

배열 요소 접근

배열은 순서가 있는 요소들의 집합으로, 객체와는 다르게 데이터를 구분하는 key 값이 존재하지 않습니다.

대신에 배열은 데이터가 위치한 순서인 index 를 통해 배열의 요소에 접근할 수 있습니다.

arr 이라는 이름의 배열을 배열 리터럴 방식으로 생성하고, 숫자 1, 문자열 hello, null 이라는 값의 요소들을 넣어준 다음, 배열의 인덱스에 맞는 각각의 요소들을 출력해보겠습니다.

배열의 인덱스에 맞는 요소를 출력하기 위해서는 배열의 이름 뒤에 대괄호를 작성하고 대괄호 안에 인덱스를 작성해주면 됩니다.

let arr = [1, "hello", null];

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

이렇게 작성한 코드를 출력해보면, 배열의 인덱스에 맞는 배열의 요소들이 알맞게 출력된 것을 확인할 수 있습니다.

여기서 주의하실 점은, 우리가 작성한 코드처럼 배열의 인덱스는 1번부터가 시작하는 것이 아니라 0번부터 시작된다는 것입니다.

그렇기 때문에 배열의 가장 마지막 요소를 출력하기 위해서는 항상 배열 요소의 개수 보다 1 작은 값을 인덱스를 넣어주어야합니다.

배열 요소 추가

그럼 이제 배열에 요소들을 추가하는 방법에 대해 알아봅시다.

1. push

배열에 새로운 요소를 추가 할 때에는 push라는 배열 내장 함수 (메서드) 를 사용합니다.

push는 배열의 이름 뒤에 작성되며, push에 넘겨준 값을 해당 배열의 맨 마지막 요소로 추가하는 내장함수입니다.

push 를 사용해 숫자 4를 배열 요소에 추가해보겠습니다.

let arr = [1, "hello", null];
arr.push(4);

console.log(arr); // [1, "hello", null, 4]

코드 실행 결과, 숫자 4 라는 값이 배열 요소의 가장 마지막 값으로 추가 된 것을 볼 수 있습니다.

2. unshift

배열에는 요소를 추가하는 또 다른 방법도 있습니다.

이번에는 unshift 라는 배열 내장함수를 사용해 숫자 0을 추가해보도록 하겠습니다.

let arr = [1, "hello", null];
arr.unshift(0);

console.log(arr);  // [0, 1, "hello", null]

코드를 실행해보면, push 를 사용해 배열 요소를 추가했을 때와는 다르게, 숫자 0이 arr 배열 요소의 맨 앞에 추가된 것을 확인할 수 있습니다.

unshift는 이렇게 배열 요소의 맨 앞쪽에 특정 값을 추가하고 싶을 때 사용하는 배열 내장함수입니다.

배열 요소 수정

다음으로는 배열의 요소들을 수정하는 방법에 대해 배워보겠습니다.

배열은 배열의 인덱스로 배열 요소에 직접 접근해 수정 가능합니다.

작성된 arr 배열의 요소 중 0번째 요소인 1과 2번째 요소인 null을 각각 숫자 5, undefined 로 변경해보겠습니다.

let arr = [1, "hello", null];
arr[0] = 5;
arr[2] = undefined;

console.log(arr);  // [5, "hello", undefined]

오른쪽 콘솔탭을 보면, 알맞게 값이 변경된 것을 볼 수 있습니다.

지난 시간 배웠던 객체는 const로 선언된 객체도 프로퍼티의 값 변경이 가능했었는데,

const로 선언된 배열의 값 변경 또한 가능할지 한 번 작성해보겠습니다.

let으로 선언된 arr 배열을 const로 변경한 다음 코드를 실행시켜보겠습니다.

const arr = [1, "hello", null];
arr[0] = 5;
arr[2] = undefined;

console.log(arr);  // [5, "hello", undefined]

출력 결과, 에러 없이 값이 잘 변경 된 것을 확인할 수 있습니다.

자바스크립트에서 배열은 객체로 분류되는 자료형으로, 객체라고 볼 수 있기 때문에

객체와 동일하게 const로 선언된 배열의 요소를 수정하더라도 배열 자체를 수정하는 것이 아니여서, const로 선언된 배열의 요소 또한 수정 가능합니다.

배열 요소 삭제

이번에는 배열의 요소를 삭제하는 방법을 알아보겠습니다.

배열 요소를 삭제하는 방법도 2가지 방법이 있는데요, 하나씩 사용해보겠습니다.

1. pop

배열의 맨 마지막 요소를 삭제하기 위해서는 pop 이라는 배열 내장 함수를 사용하면 됩니다.

let arr = [1, "hello", null];
arr.pop();

console.log(arr); // [1, "hello"]

출력 결과 맨 마지막 요소인 null 이 삭제된 것을 확인할 수 있습니다.

2. shift

배열 요소를 삭제하는 2번째 방법은 바로 shift 라는 내장함수를 사용하는 것입니다.

배열의 맨 앞의 요소를 삭제하기 위해서는 shift 내장함수를 사용해주면 됩니다.

let arr = [1, "hello", null];
arr.shift();

console.log(arr); // ["hello", null]

마찬가지로 코드를 실행시켜보면, 맨 앞 요소인 1 이 삭제된 것을 확인할 수 있습니다.

배열의 길이 알아내기

배열을 삭제하고 추가하고 생성하다보면, 현재 배열이 몇 개의 요소들을 가지고있는지 알아야 할 경우가 생기게 됩니다.

그럼 특정 배열의 길이를 알기 위해서는 어떻게 해야할까요?

배열은 length 라는 프로퍼티에 자신의 크기를 가지고 있습니다.

length를 이용해 배열의 크기를 출력해보겠습니다.

let arr = [1, "hello", null];

console.log(arr.length); // 3

코드 실행 결과, arr 배열의 요소가 3개 이기 때문에 3이 출력되는 것을 확인할 수 있습니다.

이번에는 중간에 arr 배열의 크기를 변경 후 length 프로퍼티로 배열의 크기를 출력해보겠습니다.

let arr = [1, "hello", null];
arr.pop();

console.log(arr.length); //2

코드 실행 결과, 배열의 마지막 요소인 null 이 삭제되어 arr의 길이가 2가 출력됩니다.

이렇게 배열의 요소 길이가 바뀌면 길이를 나타내는 length 프로퍼티가 자동으로 갱신됩니다.

이번시간에는 이렇게 배열에 대해 다뤄보았습니다.

다음시간에는 같은 코드를 여러번 수행할 수 있게 도와주는 자바스크립트의 반복문에 대해 배워보겠습니다.

감사합니다.