배열이란?

관련있는 데이터를 하나의 변수에 할당하여 정열된 값의 데이터 집합

배열이 필요한 이유

만약 배열이 없다면 모든 원소를 별도의 변수에 저장해야 할 것이고, 각 원소에 대해 별도로 출력하고 작업할 코드를 각각 불러야 할 것입니다. 이런 방식은 작성하기에 훨씬 오래 걸리고, 덜 효율적이며, 오류가 나기 쉽습니다.

배열을 사용한다면, 하나의 변수에 여러 데이터를 관리할 수 있고 선언해야 할 변수의 수를 줄여주어 가독성이 높아지고, 반복문을 이용하여 손쉽게 작업이 가능하는 등 연산을 편리하게 작업이 가능합니다.

배열의 선언

1. 대괄호([ ]) 내에 데이터를 나열하여 배열을 선언

let arr = [데이터 1, 데이터 2, 데이터 3, ...]; // 데이터 값을 직접 할당

2. Array() 생성자 함수로 배열을 선언

let arr = new Array(); // 배열 내 요소 개수 미지정;
arr[0] = 1;
arr[1] = 'apple';
arr[2] = [1, 2, 3];

console.log(arr); = [1, 'apple', [1, 2, 3]]

let arr = new Array(3); // 배열 내 요소 개수 지정;
arr[0] = 'orange';
arr[1] = 'apple';
arr[2] = 'banana';

console.log(arr); = ['orange', 'apple', 'banana']

let arr = new Array(0, 1, 2, 3); // 배열을 선언함과 동시에 데이터를 나열하여 배열에 할당
console.log(arr); = [0, 1, 2, 3]

let arr = new Array(5)
  for(let i=0; i< arr.length; i++) {
    arr[i] = i**2} // 배열 내 개수를 지정하고 for 반복문을 이용하여 데이터 값을 지정

console.log(arr); = [0, 1, 4, 9, 16]

배열의 속성

∙ 배열은 또다른 배열을 요소로 포함할 수 있습니다.

let arr = [1, 'apple', [1, 2, 3]];

∙ 서로 다른 데이터 타입을 함께 담을 수 있습니다.

let arr = [1234, 'test', true];

∙ 배열의 index값은 0부터 시작합니다.

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

∙ [ ]를 통해 배열의 개별 요소를 확인할 수 있습니다.

let arr = [1, 'apple', [1, 2, 3]];
arr[0]; = 1
arr[1]; = 'apple'
arr[2][1]; = 2

∙ [ ]를 통해 손쉽게 배열 요소의 값을 수정할 수 있습니다.

let arr = [1, 'apple', [1, 2, 3]];
arr[0] = 15;

console.log(arr); = [15, 'apple', [1, 2, 3]];

∙ length값은 배열의 요소 개수를 나타내며 마지막 index값은 (length값 -1)과 같습니다.

let arr = [1, 2, 3, 4, 5];
console.log(arr.length) = 5 // arr 배열의 length값 = 5
console.log(arr.indexOf(5)) = 4 // 마지막 index값 = 4

배열의 메서드

∙ push( ) : 배열의 마지막 부분에 요소를 추가합니다.

let arr = [1, 2, 3, 4, 5];
arr.push('apple');

console.log(arr); = [1, 2, 3, 4, 5, 'apple']

∙ unshift( ) : 배열의 맨 앞에 요소를 추가합니다.

let arr = [1, 2, 3, 4, 5];
arr.unshift('apple');

console.log(arr); = ['apple', 1, 2, 3, 4, 5]

∙ pop() : 배열의 마지막 부분에 있는 요소를 삭제합니다.

let arr = [1, 2, 3, 4, 5];
arr.pop( );

console.log(arr); = [1, 2, 3, 4]

∙ shift() : 배열의 맨 앞에 있는 요소를 삭제합니다.

let arr = [1, 2, 3, 4, 5];
arr.shift( );

console.log(arr); = [2, 3, 4, 5]

∙ slice() : 배열 내의 start index의 값부터 end index의 이전 값까지의 새로운 배열을 리턴합니다. slice 메서드는 새로운 배열을 리턴하기 때문에 원본 배열은 유지됩니다.

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.slice(1, 4);
console.log(arr2); = [2, 3, 4]

let arr2 = arr.slice(-2); // 음수의 경우 맨 마지막 요소부터 시작합니다.
console.log(arr2); = [4, 5]

let arr2 = arr.slice(-3, -1);
console.log(arr2); = [3, 4]

∙ splice() : 배열 내의 start index의 값부터 삭제하고자 하는 요소 개수를 삭제할 수 있으며 해당 위치에 요소를 추가한 배열을 리턴합니다. splice 메서드는 원본 배열에 직접 작업되어 원본 배열이 유지되지 않습니다.

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 12); // index2부터 1개의 요소를 제외하고 12를 추가
console.log(arr); = [1, 2, 12, 4, 5] 

arr.splice(1, 0, 12); // index1부터 요소를 제외하지 않고 해당 위치에 12를 추가
console.log(arr); = [1, 12, 2, 3, 4, 5] 

∙ concat() : 주어진 배열에 다른 배열 또는 요소들을 합쳐서 새로운 배열을 리턴합니다.

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

let numbers = arr.concat(arr2); // arr 배열에 arr2 배열을 추가
console.log(numbers); = [1, 2, 3, 4, 5, 0, [3, 6]]

let numbers = arr.concat(arr); // arr2 배열에 arr 배열을 추가
console.log(numbers); = [0, [3, 6], 1, 2, 3, 4, 5]

let numbers = arr.concat(0, [3, 6]); // arr 배열에 직접 요소를 추가
console.log(numbers); = [1, 2, 3, 4, 5, 0, 3, 6]

∙ filter() : 조건에 맞는 요소들만 모아서 새로운 배열을 리턴합니다.

let students = [
{name:'김씨', score: 80 }, 
{name:'이씨', score: 79 }, 
{name:'박씨', score: 96 }, 
{name:'정씨', score: 43 }, 
{name:'한씨', score: 55 }
];

let results = students.filter(value => value.score < 80); // 80점 미만의 학생들 찾기
console.log(results); = [
	{name:'이씨', score: 79 }, 
	{name:'정씨', score: 43 }, 
	{name:'한씨', score: 55 }
]