JavaScript 배열 문법 정리

✔︎ length()

배열 안에 있는 요소들 갯수 구하기

let nums = [1, 2, 3, 4];
let len = nums.length;
console.log(len) // 4

✔︎ push()

배열 끝에 요소 추가하기

let nums = [1, 2, 3];
nums.push(4);
console.log(nums) // [1, 2, 3, 4]

✔︎ pop()

배열 끝에 있는 요소 제거하기

let nums = [1, 2, 3, 4];
nums.pop();
console.log(nums) // [1, 2, 3]

✔︎ shift()

배열 맨 앞에 있는 요소 제거하기

let nums = [1, 2, 3];
nums.shift();
conslole.log(nums) // [2, 3];

✔︎ unshift()

배열 맨 앞에 요소 추가하기

let nums = [1, 2, 3, 4];
nums.unshift(0);
console.log(nums) // [0, 1, 2, 3, 4]

✔︎ indexOf()

배열 안 요소의 인덱스 찾기

let overwatch = ['트레이서', '윈스턴', '겐지', '라인하르트'];
let pos = overwatch.indexOf('겐지');
console.log(pos); // 2

✔︎ includes()

배열 안에 특정 요소를 포함하고 있는지 판별

let overwatch = ['트레이서', '윈스턴', '겐지', '라인하르트'];
let result = overwatch.includes('라인하르트');
console.log(result); // true

✔︎ slice()

배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.
원본 배열은 바뀌지 않습니다.

/* slice(begin, end) */
let overwatch = ['트레이서', '윈스턴', '겐지', '라인하르트', '아나'];
let copy0 = overwatch.slice();
console.log(copy0) // ['트레이서', '윈스턴', '겐지', '라인하르트', '아나']
​
let copy1 = overwatch.slice(2);
console.log(copy1) // ['겐지', '라인하르트', '아나']
​
let copy2 = overwatch.slice(2, 4);
console.log(copy2) // ['겐지', '라인하르트']
​
let copy3 = overwatch.slice(1, 5);
console.log(copy3) // ['윈스턴', '겐지', '라인하르트', '아나']

✔︎ splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

array.splice(start, deleteCount, item) 
​
start: 배열의 변경을 시작할 인덱스(음수인 경우 배열의 끝에서부터 요소를 세기 시작)
deleteCount: 배열에서 제거할 요소의 수(deleteCount 가 0 이하라면 어떤 요소도 제거하지 않음, 이 때는 최소한 하나의 새로운 요소를 지정)
item: 배열에 추가할 요소(아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 함.)
반환값: 제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환, 아무 값도 제거하지 않으면 빈 배열을 반환 
​
let overwatch = ['트레이서', '윈스턴', '겐지', '라인하르트', '아나'];
​
overwatch.splice(1, 0, '레킹볼');
console.log(overwatch) //  ['트레이서', '레킹볼', '겐지', '라인하르트', '아나']
​
overwatch.splice(4, 1, '루시우');
console.log(overwatch) // ['트레이서', '윈스턴', '겐지', '라인하르트', '루시우'];
​
overwatch.splice(0, 2, '리퍼', '메이', '시그마'); // 0번 인덱스에서 두개 요소 제거 후 3개 요소 추가
console.log(overwatch) // ['리퍼', '메이', '시그마', '겐지', '라인하르트', '아나'];

✔︎ concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
• 기존 배열을 변경하지 않습니다.
• 추가된 새로운 배열을 반환합니다.

/* 배열 두개 이어붙이기 */
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3); // ["a", "b", "c", "d", "e", "f"]
​
/* 기존 배열의 얕은 복사 */
const arr1 = [1, 2, 3];
const arr2 = arr1.concat();
​
/* 배열 세개 이어붙이기 */
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
const result = num1.concat(num2, num3);
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
​
/* 배열에 값 이어붙이기 */
const alpha = ['a', 'b', 'c'];
const data = alpha.concat(1, [2, 3]);
console.log(data); // ['a', 'b', 'c', 1, 2, 3]

✔︎ forEach()

주어진 함수를 배열 요소 각각에 대해 실행합니다.

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// 'a'
// 'b'
// 'c'
​
/* 값을 누락했을때 콜백 함수를 호출 하지 않음 */
const arraySparse = [1, 3, , 7];
let numCallbackRuns = 0;
​
arraySparse.forEach((element) => {
  console.log(element);
  numCallbackRuns += 1;
})
​
console.log('numCallbackRuns: ', numCallbackRuns);
// 1
// 3
// 7
// numCallbackRuns: 3
​
/* for 반복문을 forEach() 로 바꾸기 */
const items = ['item1', 'item2', 'item3'];
const copy = [];
​
for(let i = 0; i < items.length; i++) {
  copy.push(items[i]);
}
​
items.forEach((item) => {
  copy.push(item);
})

✔︎ map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
map 은 호출한 배열의 값을 변형하지 않습니다. 단, callback 함수에 의해서 변형될 수는 있습니다.

/* 기본 예제 */
const array1 = [2, 4, 6, 8];
const map1 = array1.map((number) => x * 2);
console.log(map1); // [4, 8, 12, 16]
​
/* 배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기 */
let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt);
console.log(roots); // [1, 2, 3]
​
/* map을 활용해 배열 속 객체를 재구성하기 */
let kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
let reformattedArray = kvArray.map((obj) => {
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
​
console.log(reformattedArray) // [{1:10}, {2:20}, {3:30}]

✔︎ filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

/* 기본 예제 */
const numbers = [3, 2, 6, 8, 1, 10];
const result = numbers.filter(number => number > 5);
console.log(result); // [6, 8, 10]
​
/* 항목 거르기 */
let arr = [15, 'hello', null, NaN, true, undefined];
let filterArr1 = arr.filter((item) => item ? true : false);
let filterArr2 = arr.filter(Boolean);
console.log(filterArr1); // [15, "hello", true]
console.log(filterArr2); // [15, "hello", true]

✔︎ reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반홥합니다.

/* 기본 예제 */
const arr1 = [1 ,2, 3, 4];
const reducer = (acc, cur) => acc + cur;
console.log(arr1.reduce(reducer)) // 10
console.log(arr1.reduce(reducer, 5)) // 15