0819 TIL

배열

다양한 값을 나열하는 경우를 생각해봅시다. 과일을 나열한다고 하면 다음과 같이 변수를 선언합니다.

const apple = '사과';
const orange = '오렌지';
const pear = '배';
const strawberry = '딸기';

과일 종류가 매우 많기 때문에 모든 과일에 변수 이름을 붙이는 것은 고통스러운 일입니다. 이런경우 배열을 사용해 값들을 하나로 묶을 수 있습니다.

const fruits = ['사과', '오렌지', '배', '딸기'];

네 개의 과일을 fruits라는 상수로 묶었습니다. 배열을 만들려면 대괄호([ ])로 값들을 감싸주면 됩니다.
값은 쉼표(,)로 구분합니다.

배열 내부의 값을 개별적으로 불러올 수도 있습니다. 배열 이름 뒤에 불러오고 싶은 값의 자릿수를 적어주면 됩니다.

const fruits = ['사과', '오렌지', '배', '딸기'];
console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);

<실행결과>
사과
오렌지
배
딸기

자릿수가 0 부터 시작한다는 점을 기억하세요. 일반적으로 숫자는 1부터 세지만, 프로그래밍에서는 0 부터 세는 경우가 많습니다. 프로그래밍에서는 자릿수를 인덱스(index)라고 합니다.

현재 배열 안에 있는 값은 모두 문자열이지만, 값의 자료형이 모두 같아야 할 필요는 없습니다. 배열 안에 다른 배열이나 변수를 넣을 수도 있습니다.

const arrayOfArray = [[1, 2, 3], [4, 5]];
arrayOfArray[0]; // [1,2,3]
const a = 10;
const b = 20;
const variableArray = [a, b, 30];
variableArray[1]; // 20 (b의 값)

arrayOfArray 배열에 주목해 주세요. 배열 내부에 배열이 들어 있습니다. arrayOfArray[0]을 하면 [1,2,3] 값이 나오는데 이 또한 배열입니다. 이러한 배열을 이차원 배열 이라고 합니다.

배열 내부의 값은 중복되어도 되고, 아무 값이 없는 배열도 만들 수 있습니다.

const everything = ['사과', 1, undefined, true, '배열', null];
const duplicate = ['가', '가', '가', '가', '가'];
const empty = [];

배열 내부에 든 값을 요소[element]라고 합니다. everything 배열에는 6개의 요소가 들어 있고, empty 배열에는 0개의 요소가 있습니다. 프로그래밍으로 요소의 개수를 구할 수도 있습니다.

(소)배열의 요소 개수 구하기

앞에서 만든 everything 배열의 요소 개수를 구해봅시다. 배열 이름뒤에 .length를 붙이면 됩니다.

const everything = ['사과', 1, undefined, true, '배열', null];
console.log(everything.length);

<실행결과>
6

빈 값도 유효한 값이기 때문에 요소 개수를 셀 때 포함됩니다.

const emptyValue = [null, undefined, false, '', NaN];
console.log(emptyValue.length);

<실행결과>
5

배열의 요소 개수를 활용해 원하는 인덱스의 요소를 찾을 수 있습니다. 배열의 요소 개수가 할상 마지막 인덱스보다 1 크다는 것을 눈치채셨나요?

emptyValue 배열에서 NaN의 인덱스는 4이고, 요소의 개수는 5입니다. everything 배열에서 null의 인덱스는 5이고, 요소의 개수는 6입니다. 즉, 배열의 요소 개수에서 1을 빼면 마지막 요소의 인덱스가 됩니다. 이를 활용해 마지막 요소의 값을 찾을 수 있습니다.

const findLastElement = ['a', 'b', 'c', 'd', 'e'];
console.log(findLastElement[findLastElement.length - 1]);

<실행결과>
e

findLastElement.length가 5 이므로 findLastElement.length -1 은 4가 됩니다. 따라서 findLastElement[4]로 e값을 찾을 수 있습니다. 마지막 요소를 찾을 때 자주 쓰는 방법이니 기억해두세요.

배열을 만든 후, 중간에 배열을 수정할 수 있습니다. 배열에 요소를 추가할 수도 있고, 특정 인덱스의 요소를 수정할 수도 있으며 제거할 수도 있습니다.

먼저 다음 배열에 요소를 추가해보겠습니다.
원하는 배열의 인덱스에 값을 대입하면 됩니다.

const target = ['a','b','c','d','e'];
target[5]= 'f';
console.log(target);

<실행결과>
(6) ["a","b","c","d","e","f"]

처음으로 배열을 console.log 해보았는데요. 배열의 요소가 나열되고 그 앞에 (6)이라는 숫자가 보입니다. 이 숫자는 배열의 요소 개수(배열.lednth)를 의미합니다.

target 배열의 요소 중 e의 인덱스 4 이므로 target[5]에 f를 대입하면 e 보다 뒤에 f 가 위치합니다. 배열의 마지막 요소 인덱스가 배열.length -1 이므로 다음 요소를 추가하려면 배열.length에 값을 넣으면 됩니다. (상상속의 마지막 자리가 만들어진다)

const target = ['가', '나', '다', '라', '마'];
target[target.length] = '바';
console.log(target);

<실행결과>
(6) ["가","나","다","라","마","바"]

만약 배열의 제일 앞에 값을 추가하고 싶다면 어떻게 해야 할까요? 배열[0] = 값이라고 생각할 수도 있지만, 원하는 결과가 나오지 않습니다.

const target = ['나', '다', '라', '마', '바'];
target[0] = '가';
console.log(target);

<실행결과>
(5) ["가","다","라","마","바"]

우리가 원한 결과는 ["가","나","다","라","마","바"]였는데 앞에 요소가 추가된 것이 아니라 첫 번째 요소의 앖이 변경되어 버렸습니다. 얼떨결에 요소를 수정하는 방법을 배웠습니다.

원래 원했던 배열의 제일 앞에 앖을 추가하는 동작을 하고 싶다면 unshift라는 기능을 실행하면 됩니다.

const target = ['나','다','라','마','바'];
target.unshift('가');
console.log(target);

<실행결과>
(6) ["가","나","다","라","마","바"]

주어진 값이 배열의 첫 번째 요소로 추가되고, 다른 요소들의 인덱스는 하나씩 뒤로 밀립니다.

제일 뒤에 요소를 추가하는 방법도 있습니다. 배열[배열.length]=값 방식으로도 가능하지만, 배열 자체에서 배열 안에 값을 추가하는 기능을 제공합니다. push를 사용해보겠습니다.

const target = ['가','나','다','라','마'];
target.push('바');
console.log(target);

<실행결과>
(6) ["가","나","다","라","마","바"]

성공적으로 제일 뒤에 요소가 추가됐습니다.

• 참고 : const인데 수정 가능한 이유는 ?
  target 변수가 const 로 선언되어 있습니다. 하지만 앞 에제에서 target 배열에 새 값을 추가하거나 수정할 수 있었습니다. 이러한 이유로 앞에서 const 가 엄밀히 상수는 아니라고 했던 것입니다. const에는 새로운 값을 대입(=)하지는 못한다고 기억하면 됩니다. const에 객체 (배열,함수,객체 리터럴)가 대입된 경우 객체 내부의 속성이나 배열의 요소는 수정할 수 있습니다.

예)

const target2 = ['a','b','c','d','e'];
target2 = ['f','g']; // 불가능
target2[0] = 'h'; // 가능

배열을 const로 선언하는 이유?

• 재할당하지 않는 변수는 const로 선언하는 게 좋다.

배열안에 배열의 인덱스값에 접근하고 싶을 때
const a = [1,[2,3],4,5];
여기서 배열안에 배열의 3에 접근하고싶을때

• 답은 a[1][1]