자바스크립트_02 배열이란?
2 주차
[ 2023.01.09 - 2023.01.15 ]
🎉주제: 배열
1. 배열(array)이란?
자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의됩니다.
배열을 구성하는 각각의 값을 배열 요소(element)라고 하며,
배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다.
자바스크립트에서 배열의 특징은 다음과 같습니다.
1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.
2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.
3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다.
1-1. 배열의 선언
1. let arr1 = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법
2. let arr2 = Array(배열요소1, 배열요소2,...); // Array 객체의 생성자를 이용하는 방법
3. let arr3 = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법
----------------------------
let arrLit = [1, true, "JavaScript"]; // 배열 리터럴을 이용하는 방법
let arrObj = Array(1, true, "JavaScript"); // Array 객체의 생성자를 이용하는 방법
1-2. 배열의 method
(필요한 함수는 ctrl + f 로 찾기)
- pop()
배열 뒷부분의 값을 삭제
let arr = [ 1, 2, 3, 4 ];
arr.pop();
console.log(arr); // [ 1, 2, 3 ]
- push()
배열 뒷부분의 값을 삽입
let arr = [ 1, 2, 3, 4 ];
arr.push( 5 );
console.log( arr ); // [ 1, 2, 3, 4, 5 ]
- shift()
배열 앞부분의 값을 삭제
let arr = [ 1, 2, 3, 4 ];
arr.shift();
console.log( arr ); // [ 2, 3, 4 ]
- unshift()
배열 앞부분의 값을 삽입
let arr = [ 1, 2, 3, 4 ];
arr.unshift( 0 );
console.log( arr ); // [ 0, 1, 2, 3, 4 ]
- splice(idx, 제거할 요소 갯수, 배열에 추가될 요소)
배열의 특정 위치에 요소를 추가하거나 삭제
let arr1 = [ 1, 2, 3, 4, 5, 6, 7 ];
arr1.splice( 3, 2 );
//3번째 인덱스에서부터 2개 제거
console.log( arr1 ); // [ 1, 2, 3, 6, 7 ]
let arr2 = [ 1, 2, 3, 4, 5, 6, 7 ];
arr2.splice( 2, 1, "a", "b");
// 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가
console.log( arr2 ); // [ 1, 2, "a", "b", 4, 5, 6, 7 ]
- slice(시작idx, 끝idx)
배열 앞부분의 값을 삽입
let arr = [ 1, 2, 3, 4, 5, 6, 7 ];
let newArr = arr.slice( 3, 6 );
console.log( 'slice', newArr ); // [ 4, 5, 6 ]
- concat()
배열을 합치고 병합된 배열의 사본을 반환
let arr1 = [ 1, 2, 3 ];
let arr2 = [ 4, 5, 6 ];
let arr3 = arr2.concat( arr1 );
console.log( arr3 ); // [ 4, 5, 6, 1, 2, 3 ]
- every()
배열의 모든 요소가 제공한 함수로 구현된 테스트를 통과하지는 지 true, false
let arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
let isEven = ( value ) => {
// value가 2의 배수이면 true를 반환한다.
return value % 2 === 0;
};
// false 모든 요소가 true이면 true를 return 하고 그렇지 않으면 false
console.log( arr.every( isEven ) );
- some()
지정된 함수의 결과가 true일 때까지 배열의 각 원소를 반복
let arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
let isEven = ( value ) => {
// value가 2의 배수이면 true를 반환한다.
return value % 2 === 0;
};
console.log( arr.some( isEven ) ); // true 하나라도 true이면 true를 return
- forEach()
배열의 각 원소별로 지정된 함수 실행
let arr =[ 1, 2, 3 ];
arr.forEach((el) => {
console.log(el); // 1 2 3
});
- map()
배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환
let arr =[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let isEven = (value) => {
return value % 2 === 0;
};
let newArr = arr.map( isEven );
console.log(newArr); // [ false, true, false, true, false, true, false, true, false, true ]
- filter()
지정된 함수의 결과 값을 true로 만드는 원소들로만 구성된 별도의 배열을 반환
let arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
let isEven = (value) => {
return value % 2 === 0;
};
let newArr = arr.filter(isEven);
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]
- reduce()
누산기(값 누적 계산) 및 배열의 각 값에 대해 누산된 값으로 함수를 적용
- reduceRight()
같은 기능, 대신 오른쪽에서 왼쪽으로 적용
let arr =[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let value = arr.reduce( function( previousValue, currentValue, index ) {
return previousValue + currentValue;
});
console.log(value); // 55
- reverse()
배열의 원소 순서를 거꾸로 바꾼다.
let arr =[1, 2, 3, 4];
arr.reverse();
console.log(arr); // [ 4, 3, 2, 1 ]
- sort()
배열의 원소를 알파벳순으로, 또는 지정된 함수에 따른 순서로 정렬한다.
다만, 원소를 문자열로 취급하기때문에 사전순으로 정렬
let arr1 = [13, 12, 11, 10, 5, 3, 2, 1];
arr1.sort();
console.log(arr); // [1, 10, 11, 12, 13, 2, 3, 5];
// sort에 함수로 정렬
let arr2 = [13, 12, 11, 10, 5, 3, 2, 1];
arr2.sort((a, b) => {
return a - b;
})
console.log(arr); // [1, 2, 3, 5, 10, 11, 12, 13]
// sort에 함수로 정렬
let arr3 = [13, 12, 11, 10, 5, 3, 2, 1];
arr3.sort((a, b) => {
return b - a;
})
console.log(arr); // [13, 12, 11, 10, 5, 3, 2, 1]
- toString()
배열을 문자열로 바꾸어 반환
let arr =[ 1, 2, 3, 4 ];
console.log(arr.toString()); // 1, 2, 3, 4
- valueOf()
배열을 배열로 반환
let arr =[ 1, 2, 3, 4 ];
console.log(arr.valueOf()); // [ 1, 2, 3, 4 ]
- join()
배열 원소 전부를 하나의 문자열로 합침
let arr =[ 1, 2, 3, 4 ];
console.log(arr.join()); // 1,2,3,4
console.log(arr.join( '-' )); // 1-2-3-4
- find()
인자로 주어진 함수로 배열내의 요소를 테스트해서 참인 첫 번째 요소를 반환. 찾지 못하면 undefined 반환
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// 12
- findIndex()
인자로 주어진 함수로 배열내의 요소를 테스트해서 참인 첫 번째 요소의 인덱스를 반환.
찾지 못하면 -1 반환
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// 3
- fill(채울 값, start idx, end idx)
배열내의 모든 요소의 값을 주어진 값으로 채움
const array1 = [1, 2, 3, 4];
console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]
console.log(array1.fill(5, 1));
// [1, 5, 5, 5]
console.log(array1.fill(6));
// [6, 6, 6, 6]
- copyWithin()
배열의 일부를 얕게 복사한 뒤, 동일한 배열의 다른 위치에 덮어쓰고, 그 배열을 반환
배열의 크기 수정 하지 않음
const array1 = ['a', 'b', 'c', 'd', 'e'];
console.log(array1.copyWithin(0, 3, 4));
// ["d", "b", "c", "d", "e"]
console.log(array1.copyWithin(1, 3));
// ["d", "d", "e", "d", "e"]
- isArray()
인자로 주어진 객체가 배열이면 true 반환
Array.isArray([1, 2, 3]); // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar'); // false
Array.isArray(undefined); // false
3. 정리
배열을 잘 다루면 코딩인생이 편하다..