JavaScript - 배열 선언, 추가, 삭제 등 기본 사용법 정리

Javascropt에서 배열 선언, 참조, 요소 추가, 요소 제거 등, 배열을 다루는 기본적인 방법들을 소개합니다.

1. 배열 선언

배열은 기본적으로 []으로 선언할 수 있습니다. 빈 배열이나, 요소들이 있는 배열을 생성할 수 있습니다.

const arr1 = [];
const arr2 = [44, 56, 33, 21, 51, 77];

console.log(arr1);
console.log(arr2);

Output:

[]
[ 44, 56, 33, 21, 51, 77 ]

new Array()로 배열을 생성할 수도 있습니다.

const arr1 = new Array();
const arr2 = new Array(44, 56, 33, 21, 51, 77);

console.log(arr1)
console.log(arr2)

Output:

[]
[ 44, 56, 33, 21, 51, 77 ]

2. 배열 타입 확인

Array.isArray()는 인자로 전달된 객체가 배열이라면 true를 리턴합니다.

const arr1 = [44, 56, 33, 21, 51, 77];
const arr2 = new Array(44, 56, 33, 21, 51, 77);

let val = Array.isArray(arr1);
console.log(Array.isArray(arr1));

val = Array.isArray(arr2);
console.log(Array.isArray(arr2));

Output:

true
true

3. Index로 요소 찾기, 값으로 Index 찾기

Index로 배열의 요소를 가져오거나, 값으로 배열의 Index가 무엇인지 찾을 수 있습니다.

const arr = [44, 56, 33, 21, 51, 77];

// Get value by index
console.log(arr[0]);
console.log(arr[3]);

// Find index of value
console.log(arr.indexOf(56));
console.log(arr.indexOf(77));

Output:

44
21
1
5

4. 배열에 요소 추가, 변경, 제거

arr[index] = value처럼 값을 추가하거나 변경할 수 있습니다. Index에 값이 존재한다면 요소의 값이 변경되고, 존재하지 않는다면 배열의 길이가 증가하며 값이 추가됩니다.

const arr = [44, 55];

arr[0] = 11;
arr[1] = 22;
arr[2] = 33;
arr[3] = 44;

console.log(arr);

Output:

[ 11, 22, 33, 44 ];

push()나 pop()으로 배열의 마지막에 값을 추가하거나 제거할 수 있습니다. pop()은 제거한 값을 리턴합니다.

const arr = [44, 55];

arr.push(66);
arr.push(88);
console.log(arr);

const ret1 = arr.pop();
const ret2 = arr.pop();
console.log(ret1);
console.log(ret2);
console.log(arr);

Output:

[ 44, 55, 66, 88 ]
88
66
[ 44, 55 ]

5. 반복문으로 배열 순회

다음과 같이 반복문으로 배열을 순회할 수 있습니다.

const arr = [44, 56, 33, 21];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

Output:

44
56
33
21

6. Slice : 배열의 일부분만 잘라서 배열로 리턴

slice(start, end)는 Index가 start를 포함하고 end 이전 Index를 포함하는 범위를 잘라서 새로운 배열로 만듭니다.

const arr = [44, 56, 33, 21, 51, 77];

const ret = arr.slice(1, 3);
console.log(ret);

Output:

[ 56, 33 ]

7. Concat : 두개 배열 요소 모두 합치기

arr1.concat(arr2)는 arr1과 arr2 배열의 모든 요소를 갖고 있는 새로운 배열을 만들어 리턴합니다. 기존 배열은 변경되지 않습니다.

const arr1 = [44, 56, 33];
const arr2 = [21, 51, 77];

const ret = arr1.concat(arr2);

console.log(arr1);
console.log(arr2);
console.log(ret);

Output:

[ 44, 56, 33 ]
[ 21, 51, 77 ]
[ 44, 56, 33, 21, 51, 77 ]

8. 정렬

sort()는 배열 요소들의 값을 비교하여 오름차순으로 정렬합니다.

const arr1 = [44, 56, 33, 21, 51, 77];
const arr2 = ['b', 'w', 's', 'e', 'a'];

arr1.sort();
arr2.sort();

console.log(arr1);
console.log(arr2);

Output:

[ 21, 33, 44, 51, 56, 77 ]
[ 'a', 'b', 'e', 's', 'w' ]

다음과 같이 정렬에 사용되는 함수를 직접 구현할 수도 있습니다. 아래 코드는 내림차순으로 정렬합니다.

const arr1 = [44, 56, 33, 21, 51, 77]

arr1.sort(function(x, y) {
  return y - x;
})

console.log(arr1);

Output:

[ 77, 56, 51, 44, 33, 21 ]

9. find

find()는 함수에 정의된 내용으로 어떤 값을 찾아 리턴합니다. 배열의 Index 0에서부터 순차적으로 탐색을 시작합니다.

function over40(num) {
  return num > 40;
}

function over50(num) {
  return num > 50;
}

const arr1 = [44, 56, 33, 21, 51, 77];

const ret1 = arr1.find(over40);
const ret2 = arr1.find(over50);

console.log(ret1);
console.log(ret2);

Output:

44
56
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha