Array
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(numbers[1]); // 2
console.log(fruits[2]); // CherryArray.prototype.length
Array 인스턴스의 length 속성은 배열의 길이를 반환합니다. 반환값은 부호 없는 32비트 정수형이며, 배열의 최대 인덱스보다 항상 큽니다. length 속성에 값을 설정할 경우 배열의 길이를 변경합니다.
활용
console.log([].length);배열데이터의 내용이 채워져 있는지 그렇지 않은지 확인할 수 있습니다.
Array.prototype.find()
find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다.
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12반환값
주어진 판별 함수를 만족하는 첫 번째 요소의 값. 그 외에는 undefined.
Array.prototype.findIndex()
findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
const a = fruits.find(fruit => {
return /^C/.test(fruit);
});
console.log(a); // Cherry
const b = fruits.findIndex(fruit => {
return /^C/.test(fruit);
});
console.log(b); // 2
//화살표 함수로 전환
const c = fruits.findIndex(fruit => /^C/.test(fruit););
Array.prototype.concat()
concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(numbers.concat(fruits)); // [1, 2, 3, 4, Apple, Banana, Cherry]
console.log(numbers); // [1, 2, 3, 4]
console.log(fruits); // ['Apple', 'Banana', 'Cherry']원본의 데이터는 손상되지 않습니다.
두 배열이 합쳐진 새로운 배열을 반환합니다.
Array.prototype.forEach()
forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach(function (element, index, array){
console.log(element, index, array);
});
//화살표 함수로 전환
fruits.forEach((element, index) => {
console.log(element, index);
});결과
반환값
반환값이 없습니다.
Array.prototype.map()
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
const b = fruits.map(function (fruit, index){
return `${fruit}-${index}`;
});
console.log(b);
//화살표 함수로 전환
const b = fruits.map((fruit, index) => ({
id: index,
name: fruit}));
const c = fruits.map(function (fruit, index){
return {
id: index,
name: fruit
};
});
console.log(c); // 객체 데이터들로 이루어진 배열이 반환.console.log(b) 결과
반환값
배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열.
참고
foreach와는 다르게 return 키워드를 사용하여 반환하고 있습니다.
Array.prototype.filter()
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
const a = numbers.map(number => {
return number < 3;
});
console.log(a); // [true, true, false, false]
const b = numbers.filter(number => {
return number < 3;
});
console.log(b); // [1, 2]
true를 반환하면 해당 item이 새로운배열에 들어갑니다.
Array.prototype.includes()
includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
const a = numbers.includese(3);
console.log(a); // true
const b = fruits.includes('HEROPY');
console.log(b); // false반환값
Boolean.
Array.prototype.push()
push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
주의! 원본이 수정됩니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
numbers.push(5);
console.log(numbers); // [1, 2, 3, 4, 5]
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5]배열데이터의 뒤쪽에 item이 삽입됩니다.
반환값
호출한 배열의 새로운 length 속성.
Array.prototype.unshift()
unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.
주의! 원본이 수정됩니다.
배열데이터의 앞쪽에 item이 삽입됩니다.
반환값
메서드를 호출한 배열의 새로운 length 속성.
Array.prototype.reverse()
reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.
주의! 원본이 수정됩니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
numbers.reverse();
fruits.reverse();
console.log(numbers); // [4, 3, 2, 1]
console.log(fruits); // ['Cherry', 'Banana' ,'Apple']반환값
순서가 반전된 배열.
Array.prototype.splice()
splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
주의! 원본이 수정됩니다.
const numbers = [1, 2, 3, 4];
const fruits = ['Apple', 'Banana', 'Cherry'];
numbers.splice(2, 1);
console.log(numbers); // [1, 2, 4]numbers.splice(2, 2); // [1, 2]numbers.splice(2, 0); // [1, 2, 3, 4]numbers.splice(2, 0, 999); // [1, 2, 999, 3, 4]numbers.splice(2, 1, 99); // [1, 2, 99, 4]특정한 인덱스 번호의 아이템을 제거하는 용도로도 사용이 됩니다.
특정한 인덱스 번호의 그 자리에 새로운 아이템을 끼워 넣거나, 원래 데이터를 삭제하고 끼워 넣을 수 있습니다.
반환값
제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.
