다양한 Array의 Method를 하나하나 기억하기가 어려워서 정리를 하여 익숙해 질 때까지 찾아보면서 반복을 해보고자 한다. (📝 Updating)
push()
배열 제일 뒷 부분에 새로운 원소 삽입. (기존배열 length 1 증가)
pop()
배열의 마지막 원소를 빼서 변수에 삽입. (기존배열 length 1 감소)
shift()
배열의 첫번째 원소를 빼서 변수에 삽입. (기존배열 length 1 증가)
unshift()
배열의 맨 앞에 새로운 값을 삽입. (기존배열 length 1 감소)
concat()
다수의 배열을 합쳐 새로운 배열을 생성.
var arr1 = [ 1, 2, 3 ];
var arr2 = [ 4, 5, 6 ];
var arr3 = arr2.concat( arr1 );
console.log( arr3 ); // [ 4, 5, 6, 1, 2, 3 ]join(매개변수)
배열의 원소들을 매개변수로 구분하여 하나의 문자열로 반환
var arr =[ 1, 2, 3, 4 ];
console.log( arr.join() ); // 1,2,3,4
console.log( arr.join( '-' ) ); // 1-2-3-4indexOf() <-> lastIndexOf()
배열 혹은 문자열의 원소(값)의 인덱스를 찾을 수 있다.
✔ indexOf() : 원소(값) 중복 시 가장 앞의 원소 인덱스만 찾는다.
✔ lastindexOf() : 원소(값) 중복 시 가장 뒤의 원소 인덱스만 찾는다.
✔ 존재하지 않는 원소는 -1 인덱스 값을 호출한다. 존재 유무 찾을 때 사용
slice()
배열의 startIndex부터 endIndex까지(endIndex는 불포함)에 대한 shallow copy를 새로운 배열 객체로 반환
✔ 기존 배열은 변하지 않는다.
✔ 원본 훼손이 없다. -> 문자열에서 사용이 가능하다.
let arr = [1,2,3,4,5,6]
let arrSlice = arr.slice(2,5);
console.log(arr,arrSlice);
(6) [1, 2, 3, 4, 5, 6]
(3) [3, 4, 5]splice()
배열의 특정위치에 요소를 추가하거나 삭제 한다.
splice( 시작 index, 제거할 요소 개수, 배열에 추가될 요소 )
✔ 잘라낸 원소들은 원본 배열에서 사라집니다.
✔ 원본 훼손이 있다. -> 문자열에서 사용이 불가능하다.
var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 3, 2 );
console.log( arr ); // [ 1, 2, 3, 6, 7 ] 3번째 인덱스에서부터 2개 제거
var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
arr.splice( 2, 1, "a", "b");
console.log( arr ); // [ 1, 2, "a", "b", 4, 5, 6, 7 ] 2번째 인덱스에서 1개 제거 후 "a"와 "b"를 추가split(매개변수)
문자열을 매개변수 기준으로 문자의 배열로 나누고 싶을 때 사용하는 메소드. (원본 훼손 ❌)
split("") : 각각 (알파벳, 숫자 등) 의 원소를 가지는 배열
split(" ") : 스페이스를 기준으로 원소 구별
split(",") : , 를 기분으로 원소 구별
let str = "Hello sarang_daddy thank you.";
let strToArray = str.split(" ");
console.log(strToArray);
(4) ['Hello', 'sarang_daddy', 'thank', 'you.']sort()
배열의 원소를 유니코드 순으로, 또는 지정된 함수에 따른 순서로 정렬한다.
✔ 원본 배열의 순서가 바뀐다.
✔ return을 반드시 지정해야한다.(화살표 함수 사용시 생략 가능)
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers);
// [1, 2, 3, 4, 5]var items = [
{ name: 'Edward', value: 21 },
{ name: 'Sharpe', value: 37 },
{ name: 'And', value: 45 },
{ name: 'The', value: -12 },
{ name: 'Magnetic', value: 13 },
{ name: 'Zeros', value: 37 }
];
// value 기준으로 정렬
items.sort(function (a, b) {
if (a.value > b.value) {
return 1;
}
if (a.value < b.value) {
return -1;
}
// a must be equal to b
return 0;
});
// name 기준으로 정렬
items.sort(function(a, b) {
var nameA = a.name.toUpperCase(); // ignore upper and lowercase
var nameB = b.name.toUpperCase(); // ignore upper and lowercase
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// 이름이 같을 경우
return 0;
});sort() 메서드를 이용하여 배열의 순서를 shuffle 할 수 있다.🤩
sort()함수는 모든 원소를 비교하고 결과값을 return해준다. <참조>
let numbers = [1, 2, 3, 4, 5, 6, 7, 8];
let shuffledNumbers = numbers.sort(function () {
return Math.random() - 0.5;
});
console.log(shuffledNumbers);
// [7, 8, 3, 1, 5, 4, 2, 6]일반적으로 다음과 같이 두 인자를 전달하지만 함수 body를 사용하지 않을 때는 인자를 생략 할 수 있다.
numbers.sort(function (a, b) { return Math.random() - 0.5; });```
sort() 메소드의 중요한 규칙은 비교 값(return) > 0 이면 a는 b의 앞에
비교 값(return) < 0 이면 a는 b의 뒤에 위치한다.
// Example 1: a after b
let pair = [17, 99]; // a, b
console.log(pair.sort(() => -1));
// [99, 17] // b, a
// Example 2: a before b
let anotherPair = [27, 5]; // a, b
console.log(anotherPair.sort(() => 1));
// [27, 5] // a, b다시 shuffle로 돌아가서 Math.random() 메서드는 0 ~ 0.999를 리턴한다.
<Math.random() - 0.5> 는 -0.5 ~ 0.499를 리턴한다.
모든 인자를 비교하여 랜덤으로 음수, 양수를 리턴하기에 배열이 shuffle 된다.
화살표 함수의 사용 예
let numbers = [1, 2, 3, 4, 5]; let shuffled = numbers.sort(() => Math.random() - 0.5); console.log(shuffled); // [1, 2, 5, 3, 4]
함수(기능)의 사용 예
function shuffle(array) { return array.sort(() => Math.random() - 0.5); } let numbers = [1, 2, 3, 4, 5]; console.log(shuffle(numbers)); // [1, 2, 5, 3, 4] let letters = ["a", "b", "c", "d", "e"]; console.log(shuffle(letters)); // ["c", "e", "b", "a", "d"]
원본(기존 배열)은 유지하면서 shuffle 하기
function shuffle(array) { return [...array].sort(() => Math.random() - 0.5); } let numbers = [1, 2, 3, 4, 5]; console.log(shuffle(numbers)); // [1, 2, 5, 3, 4] console.log(numbers); // [1, 2, 3, 4, 5] let letters = ["a", "b", "c", "d", "e"]; console.log(shuffle(letters)); // ["c", "e", "b", "a", "d"] console.log(letters); // ["a", "b", "c", "d", "e"]
forEach()
For문을 대신하여 배열 원소(값)을 콜백함수로 반복 호출한다.
var arr =[ 1, 2, 3 ];
arr.forEach( function( value, index ) {
console.log( value, index );
// 1 0
2 1
3 1
});
// forEach()를 활용하여 비교 배열에 없는 수를 찾기
function solution(numbers) {
var answer = [];
let arr = Array.from({length:10}, (v,i) => i);
// arr = [0,1,2,3,4,5,6,7,8,9]
// arr의 각 요소 "v"가 numbers 요소에 있는지 확인
arr.forEach(v => {
let numbersValue = numbers.indexOf(v);
// numbers의 요소 "v"의 인덱스
if (numbersValue === -1) { // numbers에 v가 없다면 -1
answer.push(v)
}
})
return answer = answer.reduce((acc ,cul) => acc + cul)
}map()
배열의 각 원소에 지정 함수(콜백)를 적용하여 나온 값들을 새로운 배열로 반환한다.
a = [10, 11, 12, 13, 14, 15];
let answer = a.map(function (v, i) {
return v * v;
},);
console.log(answer);
(6) [100, 121, 144, 169, 196, 225]기존 배열의 모든 원소를 푸쉬한다. (기존 배열과 길이가 동일하다)
a = [10, 11, 12, 13, 14, 15];
let answer = a.map(function (v, i) {
if (v % 2 === 0) {
return v;
}
},);
console.log(answer);
(6) [10, undefined, 12, undefined, 14, undefined]filter()
지정된 함수(콜백)의 결과 값을 true로 만드는 원소들로만 구성된 새로운 배열을 반환한다.
var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
return value % 2 === 0;
};
var newArr = arr.filter( isEven );
console.log( newArr ); // [ 2, 4, 6, 8, 10 ]filter()를 이용하여 중복값 없에기
let result2 = array.filter((v, i) => array.indexOf(v) === i);
console.log(result2); // ['C', 'A', 'B', 'D', 'E']reduce()
기존 배열의 원소(값)을 이용하여 어떤 값을 만들어 반환한다.
배열의 모든 원소 합을 구할 때 자주 사용된다. 👍
acc : 반환될 값
cur : 원본 배열에서 현재 참조하고 있는 값
var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var value = arr.reduce( function( acc, cur, index ) {
return acc + cur;
});
console.log( value ); // 55reduce를 사용하여 2차원 배열 만들기
const make2Darr = (r, c) => {
new Array(r).fill(0).reduce((acc, _) => {
acc.push(new Array(c).fill(0));
return acc;
}, [])
}reduce를 쓰려면 우선 배열이 있어야 하기 때문에 행의 개수 r만큼의 0을 가지는 배열을 생성. 예를 들어 행이 3개라 치면 [0, 0, 0] 이렇게 만들어둔다. 0이라는 값은 전혀 쓸 일이 없기 때문에 뭘로 넣어도 상관없다. reduce에 초기 값을 빈 배열로 설정해둔다. reducer에서는 acc에 배열을 푸시하고 푸시가 완료된 acc를 다시 리턴해준다. 푸시하는 배열은 열의 개수 c를 길이로 하는 배열이다.
every()
배열의 모든 원소를 제공한 함수(콜백)의 조건에 해당하는지 확인한다.
var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
// value가 2의 배수이면 true를 반환한다.
return value % 2 === 0;
};
console.log( arr.every( isEven ) ); // false 모든 요소가 true이면 true를 return 하고 그렇지 않으면 falsesome()
배열의 원소중 제공한 함수(콜백)의 조건에 해당하는 원소가 있는지 확인한다.
var arr =[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
var isEven = function( value ) {
// value가 2의 배수이면 true를 반환한다.
return value % 2 === 0;
};
console.log( arr.some( isEven ) ); // 배열 원소중 하나라도 true이면 true를 returnreverse()
배열의 원소 순서를 거꾸로 바꾼다.
var arr =[ 1, 2, 3, 4 ];
arr.reverse();
console.log( arr ); // [ 4, 3, 2, 1 ]toString()
배열을 문자열로 바꾸어 반환한다. <join()의 하위호환>
var arr =[ 1, 2, 3, 4 ];
console.log( arr.toString() ); // 1, 2, 3, 4fill()
배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채운다.
arr.fill(value[, start[, end]])
(1)
const array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
(2)
Array(3).fill(4); // [4, 4, 4]
(3)
var arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]
(4)
let n = 5, x = 2;
Array(n).fill(x).map((v, i) => (i + 1) * v)
// [2,4,6,8,10]includes()
includes() 메서드는 배열이 특정 요소(값)를 포함하고 있는지 판별합니다.
[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
// 0~9 중 존재하지 않는 정수값 더하기
function solution(numbers) {
let answer = 0;
for(let i = 0; i <= 9; i++) {
if(!numbers.includes(i)) answer += i;
}
return answer;
}flat()
flat() 함수는 중첩된 배열 구조를 정해진 깊이만큼 평탄하게 만들 수 있는 메서드다.
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]flatMap()
배열을 평탄화하는 flat()의 기능에 배열의 각 요소에 접근하여 사용자 정의 로직을 수행할 수 있는 map()의 기능을 합친 메서드. (다만 깊이를 최대 1만큼만 평탄화한다.)
let arr1 = [1, 2, 3, 4];
arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
// 한 레벨만 평탄화됨
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]flatMap()을 이용하여 기본 배열 + map() 값의 새로운 배열 생성하기
다양한 중복값 없에는 방법
const array = ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D'];
console.log(array); // ['C', 'A', 'B', 'A', 'C', 'D', 'C', 'C', 'E', 'D']
let result1 = [...new Set(array)];
console.log(result1); // ['C', 'A', 'B', 'D', 'E']
let result2 = array.filter((v, i) => array.indexOf(v) === i);
console.log(result2); // ['C', 'A', 'B', 'D', 'E']
let result3 = array.reduce((ac, v) => ac.includes(v) ? ac : [...ac, v], []);
console.log(result3); // ['C', 'A', 'B', 'D', 'E']
let result4 = [];
for(v of array) {
if (!result4.includes(v)) result4.push(v);
}
console.log(result4); // ['C', 'A', 'B', 'D', 'E']
let result5 = Object.keys(Object.fromEntries(array.map(v => [v, 0])));
console.log(result5); // ['C', 'A', 'B', 'D', 'E']