강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy)

Simple Array Methods

SLICE

기존의 array가 바뀌지는 않음.

let arr = ['a', 'b', 'c', 'd', 'e'];

console.log(arr.slice(2)); // ['c', 'd', 'e']
console.log(arr.slice(2, 4)); // ['c', 'd']
console.log(arr.slice(-2)); //['d', 'e']
console.log(arr.slice(1, -2)); //['b', 'c']
console.log(arr.slice()); //['a', 'b', 'c', 'd', 'e']
console.log([...arr]); //['a', 'b', 'c', 'd', 'e']

array의 shallow copy 를 위해 위의 두 방법 아무거나 써도 상관없음!

SPLICE

기존의 array를 바꾼다. 기존의 array의 item을 삭제하고 싶을 때 사용가능.

console.log(arr.splice(2)); //(['c', 'd', 'e']
console.log(arr); //['a','b']

arr.splice(-1);
console.log(arr); //['a', 'b', 'c', 'd']
arr.splice(1, 2);
console.log(arr); //['a','d']

REVERSE

기존의 array 또한 바뀐다.

arr = ['a', 'b', 'c', 'd', 'e'];
const arr2 = ['j', 'i', 'h', 'g', 'f'];
console.log(arr2.reverse()); //['f', 'g', 'h', 'i', 'j']
console.log(arr2); // ['f', 'g', 'h', 'i', 'j']

CONCAT

기존의 array 바꾸지 않는다.

const letters = arr.concat(arr2);
console.log(letters); //['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
console.log([...arr, ...arr2]); //['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

JOIN

console.log(letters.join('-')); //a-b-c-d-e-f-g-h-i-j

Summary

기존의 array 바꾸지 않는 것 : slice, concat, join
기존의 array까지도 바꾸는 것 : splice(splice되고 남은 것들로 배열 수정), reverse

The new at Method

const arr = [23, 11, 64];
console.log(arr[0]); //23
console.log(arr.at(0)); //23

//getting last array element
console.log(arr[arr.length - 1]); //64
console.log(arr.slice(-1)[0]); // 64
console.log(arr.at(-1)); //64

//at Methods also works in strings
console.log('jonas'.at(0)); //j
console.log('jonas'.at(-1)); //s

Looping Arrays : forEach

const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];

//for (const movement of movements) {
for (const [i, movement] of movements.entries()) {
  if (movement > 0) {
    console.log(`Movement ${i + 1}: You deposited ${movement}`);
  } else {
    console.log(`Movement ${i + 1}: You withdraw ${Math.abs(movement)}`);
  }
}
//참고 Math.abs(number) => - sign을 없애줌! -1 => 1

console.log('----FOREACH----');
movements.forEach(function (mov, i, arr) {
  if (mov > 0) {
    console.log(`Movement ${i + 1}: You deposited ${mov}`);
  } else {
    console.log(`Movement ${i + 1}: You withdraw ${Math.abs(mov)}`);
  }
});

Summary

• for of (index, item) / forEach (item, index, arr) 받는 인자값의 순서 기억해주기!
• for of 와 forEach 의 차이점 : forEach 내에서는 continue와 break를 사용할 수 없다. forEach will always loop over the entire array. loop을 break out 할일 있다면 for of 써주기.

forEach With Maps and Sets

Map

const currencies = new Map([
  ['USD', 'United States dollar'],
  ['EUR', 'Euro'],
  ['GBP', 'Pound sterling'],
]);

currencies.forEach(function (value, key, map) {
  console.log(`${key}: ${value}`);
});
// USD: United States dollar
// EUR: Euro
// GBP: Pound sterling

Set

const currenciesUnique = new Set(['USD', 'GBP', 'USD', 'EUR', 'EUR']);
console.log(currenciesUnique); //Set(3) {'USD', 'GBP', 'EUR'}
currenciesUnique.forEach(function (value, _, map) {
  console.log(`${value}: ${value}`);
});
//set에는 key가 존재하지 않으므로! key를 _라고 적음. _ : unneccesary
//USD: USD
//GBP: GBP
//USD: USD