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
Related Posts
- JavaScript Enum (열거형)
- JavaScript JSON (parse, stringify)
- JavaScript includes(), 다양한 예제
- JavaScript - forEach(), 다양한 예제로 이해하기
- JavaScript - 한글, 영어, 숫자만 입력 받기 (정규표현식)
- JavaScript - 배열 요소 무작위로 섞는 방법 (shuffle)
- JavaScript - getElementById, querySelector로 요소 찾기
- JavaScript - 첫번째 글자만 대문자로 변경, 2가지 방법
- JavaScript - 빈 문자열 확인, 2가지 방법
- JavaScript - 날짜/시간 비교, 3가지 방법
- JavaScript - 랜덤 문자열 생성, 2가지 방법
- JavaScript - 마지막 문자 제거, 4가지 방법
- JavaScript - 문자열 공백 제거, 3가지 방법
- JavaScript - 배열을 문자열로 변환, 3가지 방법
- JavaScript - 여러 줄 문자열, 3가지 방법
- JavaScript - 객체를 문자열로 변환, 2가지 방법
- JavaScript - 문자열의 첫번째 문자 가져오기, 4가지 방법
- JavaScript - 문자열의 마지막 문자 가져오기, 4가지 방법
- JavaScript - 배열 맨 앞에 요소 추가/제거, 2가지 방법
- JavaScript - 2차원 배열을 1차원 배열로 변환, 2가지 방법
- JavaScript - 현재 시간 Timestamp 가져오기
- JavaScript - 대소문자 변환 (LowerCase, UpperCase)
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - setTimeout()으로 함수 실행 지연
- JavaScript - 'try...catch'로 예외 처리 방법
- JavaScript - 문자열을 날짜(Date)로 변환하는 방법
- JavaScript - 배열에서 중복 제거, 4가지 방법
- JavaScript - Float을 Integer로 변환, 3가지 방법
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열에서 문자 또는 단어 추출, 4가지 방법
- JavaScript - 문자열 뒤집기, 거꾸로 출력
- JavaScript - 배열의 마지막 요소 가져오기
- JavaScript - 배열에서 최대, 최소 값 찾기
- JavaScript - 숫자 3자리마다 콤마(,) 넣는 방법
- JavaScript - 소수점 자리수 올림, 내림, 반올림, 제거 방법