[TIL] JavaScript 정리, 2 day 배열 메서드

배열 요소 추가 및 삭제

Push()

var sports = ['축구', '야구'];
var total = sports.push('미식축구', '수영');

console.log(sports); // ['축구', '야구', '미식축구', '수영']
console.log(total);  // 4

• MDN 정의 : push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
• 나만의 해석 : 배열 맨 뒤에 새로운 요소나 배열을 추가하여 합칠 수 있다. 배열 자체가 변화한다.

Unshift()

var arr = [1, 2];

// 일반적인 요소 추가
arr.unshift(-2, -1); // arr is [-2, -1, 0, 1, 2]

// 배열 추가
arr.unshift([-3]); // arr is [[-3], -2, -1, 0, 1, 2]

• MDN 정의 : unshift() 메서드는 새로운 요소를 배열의 맨 앞 쪽에 추가하고, 새로운 길이를 반환합니다.
• 나만의 해석 : 배열 맨 앞에 새로운 요소나 배열을 추가하여 합칠 수 있다. 배열 자체가 변화한다.

Pop()

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var popped = myFish.pop();
console.log(myFish); // ['angel', 'clown', 'mandarin' ]
console.log(popped); // 'sturgeon'

• MDN 정의 : pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.
• 나만의 해석 : 배열의 맨 마지막 요소를 추출해두고 원래 있던 배열은 길이가 줄어든다!

Shift()

var names = ["Andrew", "Edward", "Paul", "Chris" ,"John"];

while( (i = names.shift()) !== undefined ) {
    console.log(i);
}
// Andrew, Edward, Paul, Chris, John

• MDN 정의 : shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.
  ** 빈 배열은 undefined 를 반환한다!
• 나만의 해석 : 배열에서 첫 번째 원소를 추출해두고 원래 있던 배열은 길이가 줄어든다!

Concat()

const alpha = ['a', 'b', 'c'];
const test = alpha.concat(1, [2, 3]);

console.log(alpha); // ['a', 'b', 'c']
console.log(test); // [ 'a', 'b', 'c', 1, 2, 3 ]

• MDN 정의 : concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
  기존 배열을 변경하지 않습니다.
  추가된 새로운 배열을 반환합니다.
• 나만의 해석 : 여러 배열을 하나의 배열로 합쳐주는데, push와 달리 새로운 배열을 반환해주어 기존 배열이 달라지지 않는다.

Splice()

array.splice(start, deleteCount, item)

• MDN 정의 : splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
• 나만의 해석 : splice를 사용하기 위해서는 start 에서 시작할 index 를 정하고, deletecount 로 제거할 갯수를 지정해준다. 값을 추가해주고 싶다면 item 에 추가한다. 배열 자체가 변화한다.

var myFish = ['angel', 'clown', 'trumpet', 'sturgeon'];
var removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');

// myFish 배열은 ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]

Slice()

array.slice(begin, end)

• MDN 정의 : slice() 메서드는 어떤 배열의 begin 부터 end 까지 (end 미포함) 에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.
• 나만의 해석 : slice를 사용할 때는 우선 begin 에서 자르고 싶은 시작 인덱스를 정한 후, 끝내는 인덱스를 end 에 지정해주는데 end 전까지 잘라주는 것이지 end 까지 포함이 아니란걸 유의해야 한다. 기존 배열이 달라지지 않는다.

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
let citrus = fruits.slice(1, 3)

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

배열을 변화시키는 메서드, 변화시키지 않는 메서드

• 배열을 변화시키는 메서드
  push, unshift, shift, pop, splice
  
• 배열을 변화시키지 않는 메서드
  concat, slice

배열 안의 원소 변화시키기

forEach()

array.forEach(callback함수(currentValue, index, array), thisArg);

• MDN 정의 : forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.
• 나만의 해석 : forEach 안에는 콜백함수가 있고, 그 함수를 배열 안의 원소에 적용한다. 그 콜백 함수내 currentValue 에는 배열의 현재값, index는 배열의 현재값의 인덱스, array 는 현재 배열이다. 배열 내 값마다 함수를 사용하고 싶을 때 사용.

Map()

const ages = [10, 19, 21, 44];
function canDrink(data) {
  return data.map(age => (age >= 20 ? 'Yes' : 'No')); // 조건 확인
};
canDrink(ages);   // ["No", "No", "Yes", "Yes"]

• MDN 정의 : map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
• 나만의 해석 : 배열을 전부 돌며 조건을 확인하거나 반환한다. 기존 배열은 그대로이고 새로운 배열을 반환한다.

Reduce()

reduce MDN

잘 이해가 안가 이해간 후 예제와 함께 추가!

• MDN 정의 : reduce() 메서드는 배열의 각 요소에 대해 주어신 리듀서 함수를 실행하고, 하나의 결과값을 반환합니다.
• 나만의 해석 : 배열 안의 원소들을 활용해 연산할 때

Filter()

arr.filter(callback 함수(value, index, arr));

• MDN 정의 : filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
• 나만의 해석 : filter 를 사용하면 콜백함수의 조건에 맞는 요소를 새로운 배열로 반환한다. 콜백함수는

Reverse()

• MDN 정의 : reverse() 메서드는 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다.
• 나만의 해석 : 배열을 거꾸로 돌린다. 기존 배열이 변한다.

Sort()

sort(a, b)

• MDN 정의 : sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.
• 나만의 해석 : 배열 안의 원소들을 정렬할 때 사용하고 원소의 종류에 따라 정렬 방법이 다르다.

1. 문자 : abc순
2. 숫자 : 오름차순 or 내림차순
3. object : 이름순 ( 오름차순, 내림차순 ), 나이순 ( 오름차순, 내림차순 )

// 문자 정렬
const fruits = ['banana', 'orange', 'apple'];
fruits.sort();    // ['apple', 'banana', 'orange';
// 숫자 정렬 - 오름차순
array.sort(function(a, b) {return a - b})
// 숫자 정렬 - 내림차순
array.sort(function(a, b) {return b - a})

sort 함수

인덱스

indexOf()

arr.indexOf(찾을 값, 시작 인덱스)

• MDN 정의 : indexof() 메서드는 호출한 string 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.
• 나만의 해석 : 배열에서 내가 원하는 값의 인덱스를 반환하는데, 가장 처음의 인덱스만 반환하며 없다면 -1을 반환한다.

'Blue Whale'.indexOf('Blue');     // returns  0
'Blue Whale'.indexOf('Blute');    // returns -1
'Blue Whale'.indexOf('Whale', 0); // returns  5
'Blue Whale'.indexOf('Whale', 5); // returns  5
'Blue Whale'.indexOf('Whale', 7); // returns -1
'Blue Whale'.indexOf('');         // returns  0
'Blue Whale'.indexOf('', 9);      // returns  9
'Blue Whale'.indexOf('', 10);     // returns 10
'Blue Whale'.indexOf('', 11);     // returns 10

findIndex()

arr.findIndex(콜백함수(value, index, array)

• MDN 정의 : findindex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.
• 나만의 해석 : 주어진 콜백 함수의 조건을 만족하는 첫번째 인덱스만 반환하며 없다면 -1을 반환한다.

find()

• MDN 정의 : find() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined 를 반환합니다.
• 나만의 해석 : 주어진 콜백 함수의 조건을 만족하는 첫번째 값만 반환하며 없다면 -1을 반환한다.