[JavaScript] 12. 배열 (Array)

Eden·2022년 10월 3일

object 객체 자바스크립트

Javascript

목록 보기

30/33

객체

객체를 알아보도록 하자! 객체(object)는 자료형의 일종으로 다양한 값을 모아둔 또 다른 값이다. 객체의 종류는 크게 배열(Array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있다.

배열

다양한 값, 자료형들을 하나로 묶어둔 것이라고 생각하면된다.

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]);

>사과
>오렌지
>배
>딸기

배열의 index는 0부터 시작된다.

배열 안에 있는 값은 모두 문자열이지만, 값의 자료형이 모두 같아야 할 필요는 없다.

배열 안에 다른 배열이나 변수를 넣을 수도 있다.

const arrayOfArray = [[1, 2, 3],[4, 5]];

console.log(arrayOfArray[0]);
>[1, 2, 3]

const a = 10;
const b = 20;
const varicableArray = [a, b, 30];

console.log(variableArray[1]);
>20

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

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

배열 내부에 든 값을 요소(element)라고 한다.

배열의 요소 개수 구하기

배열 이름 뒤에 .length 를 붙여주면 된다.

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

console.log(everything.length);
>6

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

const emptyValue = [null, undefined, false, '', NaN];

console.log(emptyValue.length);
>5

배열의 요소 개수를 통해 원하는 인덱스의 요소를 찾을 수 있다.

배열의 요소 개수는 항상 마지막 인덱스보다 1 크다!

const findLastElement = ['a', 'b', 'c', 'd', 'e'];

console.log(findLastElement[findLastElement.length - 1];
>"e"

*1분 퀴즈

arr라는 배열이 있을 때 배열의 마지막에서 세 번째 요소를 찾ㅇㅏ라!

let arr = [1, 2, 3, 4, 5];

console.log(arr[arr.length - 3];

*1분 퀴즈

배열에 요소 추가하기

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

const target = [1, 2, 3, 4, 5];
target[5] = 6;

console.log(target);
>[ 1, 2, 3, 4, 5, 6 ]

배열의 마지막 요소 뒤에 추가하려면,

const target = [1, 2, 3, 4, 5];
target[target.length] = 6;

console.log(target);
>[ 1, 2, 3, 4, 5, 6 ]

인덱스 값에 배열의 길이를 넣어주면 배열의 길이는 항상 인덱스보다 1이 많기 때문에 마지막 요소에 추가할 수 있다.

배열의 제일 앞에 값을 추가하려고 한다면.. **배열[0] = 값** 이라고 생각할 수도 있지만, 원하는 결과가 나오지 않는다.

//원하는 값 [0, 1, 2, 3, 4, 5]
const target = [1, 2, 3, 4, 5];
target[0] = 0;

console.log(target);
>[ 0, 2, 3, 4, 5 ]

추가하려고 했지만 수정하는 것이 되어버렸다.

원래 원했던 배열의 제일 앞에 값을 추가하려면 .unshift() 라는 기능을 실행하면 된다.

const target = [1, 2, 3, 4, 5];
target.unshift(0);

console.log(target);
>[ 0, 1, 2, 3, 4, 5 ]

원했던 값을 출력할 수 있었다.

제일 뒤에 값을 추가하려고 한다면! 아까 했던 것처럼 배열[배열.length] = 값 도 가능하지만, .push() 라는 기능을 실행할 수 있다.

const target = [1, 2, 3, 4, 5];
target.push(6);

console.log(target);
>[ 1, 2, 3, 4, 5, 6 ]

const가 완전한 상수가 아닌 것은 객체를 수정할 수 있기 때문이다. 그러나 객체의 내부는 바꿀 수 있지만 다시 선언하는 것은 안된다.

배열에서 요소 제거하기

배열에서 요소를 제거해 보는 것을 알아보자.

요소를 제거하는 것은 상당히 복잡한데 어떤 요소를 제거한다면 그 뒤에 위치한 나머지 요소의 인덱스를 모두 1씩 앞으로 당겨야 하기 때문이다. 어렵지만, 다행히도 배열에서 기능을 제공해준다. 마지막 요소를 제거하는 기능을 사용해보자 pop 을 사용하면 마지막 요소가 제거된다.

const target = [1, 2, 3, 4, 5];
target.pop();

console.log(target);
>[ 1, 2, 3, 4 ]

배열의 중간 요소 수정하기

첫 번째 요소나 마지막 요소를 제거하는 것은 쉬운 편이지만, 중간 요소를 제거하는 것은 조금 복잡하다. .splice 기능을 사용해보자.

//2 지우기
const target = [1, 2, 3, 4, 5];
target.splice(1, 1);

console.log(target);
>[ 1, 3, 4, 5 ]

코드에 1, 1을 넣었는데, 이는 인덱스 1부터 1개를 지우겠다는 의미다.

이제는 2, 2를 넣어본다.

const target = [1, 2, 3, 4, 5];
target.splice(2, 2);

console.log(target);
>[ 1, 2, 5 ]

인덱스 2인 3부터 2개를 지우기 때문에 ‘3, 4’가 지워진다.

이번에는 숫자 값을 하나만 넣어본다. 하나만 넣으면 해당 인덱스부터 끝까지 모든 요소를 제거하겠다는 뜻이다!

const target = [1, 2, 3, 4, 5];
target.splice(1);

console.log(target);
>[1]

인덱스 1의 요소가 2~5까지 지워준다.

splice 로 값을 지우는 것 뿐만 아니라 지워진 자리에 다른 값을 넣을 수도 있다. splice의 세 번째 자리부터 바꿀 값들을 넣어주면 된다.

const target = [1, 2, 3, 4, 5];
target.splice(1, 3, '가', '나')

console.log(target);
>[ 1, '가', '나', 5 ]

지우지 않고 추가하는 방법도 있다. 두 번째 자리에 0을 넣어주면 아무 것도 삭제하지 않고 추가할 수 있다.

const target = [1, 2, 3, 4, 5];
target.splice(1, 0, '가', '나')

console.log(target);
>[ 1, '가', '나', 2, 3, 4, 5]

배열에서 요소 찾기

배열에서 특정 요소가 있는지 찾아보자! .includes 기능을 사용한다.

const target = ['가', '나', '다', '라', '마'];

const result = target.includes('다')
const result = target.includes('카')

console.log(result);
console.log(result2);
>true
>false

includes 에 주어진 값이 배열 내부에 존재하면 true 가 되고, 존재하지 않으면 false 가 된다.

검색하고 싶은 값이 몇 번째 인덱스에 위치하는지도 알 수 있다. indexOf 와 lastIndexOf 기능을 사용하면 된다.

const target = ['라', '나', '다', '라', '다'];

const result = target.indexOf("다");
const result2 = target.lastIndexOf("라");
const result3 = target.indexOf("가");

console.log(result);
console.log(result2);
console.log(result3);
>2
>3
>-1 //찾는 값이 없으면 -1이 나온다.

배열 반복하기

배열은 값들을 나열한 것이기 때문에 반복문과 같이 사용하는 경우가 많다. 배열의 모든 요소를 console.log 를 해보자. while 문이나 for 문을 사용할 수 있다.

while 문으로 표현해보자.

const target = [ '가', '나', '다', '라', '마'];
let i = 0;
while (i < target.length) {
	console.log(target[i]);
	i++;
}
>가
>나
>다
>라
>마

i가 배열의 index이고, 처음에 0부터 시작해서 1씩 증가하면서 console창에 찍히게 된다. i가 target.length일 때 중단되므로 마지막 요소까지 모두 출력한다.

다음은 for 문으로도 표현해보자.

const target = [ '가', '나', '다', '라', '마'];
for (let i = 0; i < target.length; i++) {
	console.log(target[i])
}

*1분 퀴즈

다음 배열에서 ‘라'를 모두 제거하라. indexOf 와 splice 를 사용해라.

const arr = ["가", "라", "다", "라", "마", "라"];

const result = arr.indexOf("라");
const result2 = arr.splice(1, 1);

const result3 = arr.indexOf("라");
const result4 = arr.splice(2, 1);

const result5 = arr.indexOf("라");
const result6 = arr.splice(3, 1);

console.log(arr);
>[ '가', '다', '마' ]

----------------------------------------------------
//'모두 제거하라'라는 의미는 반복문을 사용하라는 말일 확률이 높다.
while (arr.indexOf("라") > -1) {     //'라'를 못 찾을 때까지
  arr.splice(arr.indexOf("라"), 1);  //'라'를 지워라! 
}

console.log(arr);
---------------------------------------------------------
//다른 방식으로 표현하기
let index = arr.indexOf("라");
while (index > -1) {
  arr.splice(index, 1);
  index = arr.indexOf("라");
}

console.log(arr);