📖 오늘 학습 뽀인트!

1. JavaScript 배열
   1-1 find
   1-2 from
   1-3 map
   1-4 filter
   1-5 유사배열 객체

1. JavaScript 배열

🕵️‍♀️배열이란?
여러개의 연관있는 데이터 값을 하나의 이름으로 묶어 사용할 수 있는 데이터 타입이다.

1-1 arr.find()

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
arr.find(i => i > 5);  // 6

find(i => i > 5)는 배열 요소 처음부터 끝까지 순차적으로 탐색하여 조건을 만족하는 첫 번째 값을 반환한다. 위에 소스코드에서 7, 8 ,9, 10 도 조건을 만족하고 있지만 첫 번째 true 값인 6만 반환된다.
✍ id를 찾거나 유니크한 값을 찾아야 할 때 사용할 수 있다.

1-2 arr.fill()

const cafe = ['coffee', 'cake', 'tea', 'cookie']

cafe.fill('bread') // ['bread', 'bread', 'bread', 'bread']
cafe.fill('bread', -1) // ['coffee', 'cake', 'tea', 'bread']

fill('bread') fill 메소드로 배열 요소들을 원하는 값으로 채울 수 있다. fill('bread', -1) 처럼 두 번째 매개변수에 인덱스를 입력하여 값을 교체할 수 있다. 원본 배열 밖 인덱스 번호를 입력할 경우 오류는 없지만 아무런 변화가 없다.
✍ 반환 값은 변경된 원본 배열이다.

1-3 arr.map()

const arr = [{
    'name' : 'title1',
    'contents' : 'contents1',
    'dataNum' : 1,
    'data' : [1, 2, 3]
}, {
    'name' : 'title2',
    'contents' : 'contents2',
    'dataNum' : 2,
    'data' : [1, 2, 3]
}]

arr.map(i => i.name);                 // ['title1', 'title2']
arr.map(i => i.name).indexOf('title2');    //1

map()은 원본 배열에서 뭔가를 가공한 후 새로운 배열을 반환해주는 메소드이다.
arr.map(i => i.name) 위 소스코드 유사배열 객체인 arr의 i는 0번, 1번 인덱스다. 0번의 name key와, 1번 name key를 반환해 새로운 배열을 만들 수 있다.

1-4 arr.filter()

const fruits = ["apple", "lemon", "banana","watermelon","melon","cherry"]
const fruitsFilter = fruits.filter(i => i.length>5);
console.log(fruitsFilter)        //  ['banana', 'watermelon', 'cherry']

filter()는 요소 값이 true인 것들을 배열로 반환한다. 조건에 맞는 것들만 반환하기 때문에 원본 배열보다 길이가 작다.

1-5 유사배열 객체와 from()

let me = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

유사배열 객체는 어디까지나 객체이다. 다만, 위 소스코드 me 구조처럼 key가 숫자로 되어있고, 길이가 정의되어 있는 객체가 유사배열이다. 이 유사배열 객체는 배열 메소드를 사용할 수 없다. 실제로 Array.isArray(me) 를 해보면 false 값이 반환된다.

---

유사배열 객체를 사용하는 이유는❓
1. 배열에 없는 기능을 제공하고 싶을 때
2. 배열 메소드를 제공하고 싶지 않을 때

---

유사배열 객체를 배열로 변경하는 방법은❓
Array.from(me) // ['a', 'b', 'c']를 사용하여 배열로 변경 가능하다. forEach를 사용하는 방법도 있으나, call 또는 apply를 사용해야 해당 메소드를 사용할 수 있어 from이 더 간단하다.