TIL 103 | JS ES6+ 유용한 Arrays 메소드

1. for ... of

value를 순회한다. 배열이 아닌 iterate 가능한 Object, String도 사용할 수 있다.

arr = ['jaehyun', 'mark', 'johnny'];

for(let value of arr) {
  console.log(value) // jaehyun mark johnny
}

for...in : key를 순회한다.

arr = ['jaehyun', 'mark', 'johnny'];

for(let key in arr) {
  console.log(key)	// 0 1 2
  console.log(arr[key])	// jaehyun mark johnny
}

Array.prototype.forEach : Array 전용! (Object X)

arr = ['jaehyun', 'mark', 'johnny'];

arr.forEach((value, i) => {
  console.log(value)	// jaehyun mark johnny
  console.log(i)	// 0 1 2
})

2. Array.from()

const x = Array.from(`mark`);
console.log(x);
// ['m', 'a', 'r', 'k']

템플릿 리터럴도 사용이 가능하다.

const x = Array.from(`${3+5}49`);
console.log(x);
// ['8', '4', '9']

아래와 같이 응용할 수 있다.

// 1st example

let x = 'Hi';
let y = 'Hello';
let z = '안녕';

let lines = Array.from([x, y, z], (line) => {
  return `<li>${line}</li>`
})
// ['<li>Hi</li>', '<li>Hello</li>', '<li>안녕</li>']

// 2nd example

let numbers = Array.from([1, 2, 3], (num) => num + num)
// [2, 3, 6]

3. Array.of()

const arr1 = Array.of(7);
const arr2 = Array(7);

console.log(arr1); // [ 7 ]
console.log(arr2); // [ , , , , , , ]

Array를 구성하는 element를 추가하는 방식이다. 위와 같이 숫자 하나만 있을 때는 Array만 쓰는 것과 차이가 있다.

const arr3 = Array.of(7, 'Hey', [1, 2, 3], {'name': 'jungwoo'});
console.log(arr3);
// [ 7, 'Hey', [1, 2, 3], {'name': 'jungwoo'} ]

const arr4 = Array(7, 'Hey', [1, 2, 3], {'name': 'jungwoo'});
console.log(arr4);
// [ 7, 'Hey', [1, 2, 3], {'name': 'jungwoo'} ]

Array.of의 형태

// polyfill
if(!Array.of) {
  Array.of = function(){
    return Array.prototype.slice.call(arguments);
  }
}

4. Array.fill()

const arr1 = [2, 4, 'a', 17 ,'r', 9, 9];

//args
//1. value you want to fill in
//2. starting index
//3. stopping index

arr1.fill('b', 3, 6);
console.log(arr1);
// [2, 4, 'a', 'b', 'b', 'b', 9]

.slice는 원본에는 변화가 없지만 .fill은 원본 배열 자체에 변화를 준다.

const arr1 = [2, 4, 'a', 17 ,'r', 9, 9];

arr1.fill('c', -3);
console.log(arr1);
// [2, 4, 'a', 17, 'c', 'c', 'c']

끝에서부터 -3 index를 채워간다.

splice와 비교
splice 역시 fill 처럼 mutator로 원본을 수정한다.

let Months = ['Jan', 'Feb', 'Mar', 'May'];

// 1. where to start
// 2. how many to delete
// 3. what to insert

Months = splice(3, 0, 'Apr');
console.log(Months)
// ['Jan', 'Feb', 'Mar', 'Apr', 'May']

5. Array.find()

함수를 인자로 받고 이를 배열에 적용한다. 해당 함수의 test function을 만족하는 요소의 값을 반환한다. 만족하는 요소가 없으면 undefined를 반환한다.

const firstFoundCity = cityWeatherData.list.find((city) => {
  city.main.temp >  30;
})
console.log(firstFoundCity);
// 만족하는 city 요소 반환

6. Array.findIndex()

발견된 요소의 인덱스를 반환하고 만족하는 요소가 없으면 -1을 반환한다.

const firstFoundCityIndex = cityWeatherData.list.find((city) => {
  city.main.temp >  30;
})
console.log(firstFoundCityIndex);
// 만족하는 city 요소의 Index 반환