[JS] Array와 메서드 등에 대해 알아보자

특징

• JavaScript 배열은 크기 조정이 가능하고, 다양한 데이터 형식을 혼합하여 저장할 수 있습니다.
• JavaScript 배열은 연관배열이 아니므로 임의의 문자열을 인덱스로 사용하여 배열 요소에 접근할 수 없습니다. 하지만 음수가 아닌 정수를 인덱스로 사용해 접근해야 합니다.
• JavaScript 배열 복사 연산은 얕은 복사본을 생성합니다.

 

배열 인덱스

• Array 객체는 임의의 문자열을 요소 인덱스로 사용할 수 없으며, 음수가 아닌 정수를 사용해야 합니다.
• 정수가 아닌 것을 통해 배열의 요소를 설정하거나 접근하려고 하면 배열 목록 자체에서 요소를 설정하거나 접근하게 됩니다.
• 배열의 객체 속성과 배열의 요소 목록은 별개이며, 배열의 순회 및 수정 연산은 이렇게 이름이 붙여진 속성에 적용할 수 없습니다.

 

length와 숫자 속성의 관계

• JavaScript 배열의 length 속성과 숫자 속성은 연결되어 있습니다.
• 내장 배열 메서드 중 일부 (join(), slice(), indexOf()) 등은 호출 시 배열의 length 속성 값을 고려합니다.
• push(), splice() 등의 다른 배열도 length 속성을 갱신합니다,
• 배열의 length를 늘리면 새 요소를 만들지 않고 빈 슬롯을 추가해 배열을 확장할 수 있으며, 이 값은 undefined가 아닌, empty 입니다.

fruits.push("banana", "apple", "peach");
console.log(fruits.length); // 3

fruits[5] = "mango"; // 엔진이 배열의 length 속성을 적절히 갱신
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6

fruits[5] = "mango";
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6

• length 속성을 줄이면 요소가 삭제됩니다.

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

 

배열 메서드와 빈 슬롯

concat()

Array 인스턴스의 concat() 메서드는 두 개 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환합니다.

const arr = [1, 2, 3, 4];
const reversed = arr.reverse();
console.log(arr); // 1, 2, 3, 4
console.log(reversed); // 4, 3, 2, 1

 

every()

Array 인스턴스의 every() 메서드는 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트합니다.

const isBelowThreshold = (curVal) => curVal < 40;

const arr1 = [10, 20, 30];
const arr2 = [20, 30, 40];

console.log(arr1.every(isBelowThreshold)); // true
console.log(arr2.every(isBelowThreshold)); // false

 

filter()

Array 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소만 필터링합니다.

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((words) => words.length > 6);
console.log(result); // ["exuberant", "destruction", "present"]

 

forEach()

Array 인스턴스의 forEach() 메서드는 각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다.

array.forEach((element)=> 실행할 함수));

const arr1 = [1, 2, 3[;
arr1.forEach((ele)=>console.log(ele)); // 1, 2, 3

 

map()

map() 메서드는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const arr = [1, 2, 3];
const newArr = arr.map((elem)=> elem * 2);
console.log(newArr);

 

indexOf()

Array 인스턴스의 indexOf() 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫 번쨰 인덱스를 반환하고, 찾을 수 없는 경우 -1을 반환합니다.

fromIndex가 음수일 경우 배열의 끝부터 거꾸로 셉니다. 즉, fromIndex < 0 이면, fromIndex + array.length가 사용됩니다.

그럼에도 불구하고 배열은 앞에서 뒤로 검색됩니다.

indexOf(searchElement)
indexOf(searchElement, fromIndex)

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// Expected output: 1

// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4

console.log(beasts.indexOf('giraffe'));
// Expected output: -1

 

lastIndexOf()

Array 인스턴스의 lastIndexOf() 메서드는 배열에서 특정 요소를 찾을 수 있는 마지막 인덱스를 반환하거나, 해당 요소가 없으면 -1을 반환합니다. 배열은 fromIndex에서 시작하여 역방향으로 검색됩니다.

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// Expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// Expected output: 1

 

reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행시키고 하나의 결과 값을 반환합니다.

const arr = [1, 2, 3, 4];

const initialValue = 0;
const sumWithInitial = arr.reduce((acc, cv) => acc + cv, intialValue,);

console.log(sumWithInitial);

 

reverse()

reverse() 메서드는 배열의 순서를 반전합니다. 첫 번쨰 요소는 마지막 요소가 되며, 마지막 요소는 첫 번째 요소가 반환됩니다,

const arr = [1, 2, 3, 4];
const reversed = arr.reverse();
console.log(arr); // 1, 2, 3, 4
console.log(reversed); // 4, 3, 2, 1

 

slice()

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

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2)); // ['ant', 'bison', 'camel']
console.log(animals.slice(2, 4)); // ['camel', 'duck']

 

생성자

Array()

새 Array 객체를 생성합니다. new Array(), Array() 모두 새 Array 객체를 생성합니다.

new Array()
new Array(element0)
new Array(element0, element1)
new Array(element0, element1, /* …, */ elementN)
new Array(arrayLength)

Array()
Array(element0)
Array(element0, element1)
Array(element0, element1, /* …, */ elementN)
Array(arrayLength)

 

정적 메서드

Array.from()

순회 가능 또는 유사 배열 객체에서 새 Array 인스턴스를 생성합니다.

 

arrayLike

배열로 변환할 순회가능 또는 유사 배열 객체입니다.

 

mapFn

배열의 모든 요소에 대해 호출할 함수입니다. 이 함수를 제공하면 배열에 추가할 모든 값이 이 함수를 통해 먼저 전달되고, mapFn의 반환 값이 대신 배열에 추가됩니다.

 

thisArg

mapFn 실행 시에 this로 사용될 값입니다.