🚕 배열(Array)

하나의 변수명 아래에 데이터 아이템의 리스트를 저장하는 간편한 방법이다.

🛴 배열 선언하기

방법 1)
const food = new Array('🍕', '🍔', '🍗');
---------------------------------------------------
방법 2)
const fruits = ['🍎', '🍌', '🍐'];
---------------------------------------------------
빈 배열 생성하기)
const food = new Array(); // or
const fruits = [];
-> 이 때의 배열의 원소는 undefined이다.
---------------------------------------------------
배열이 3개인 빈 배열 생성하기)
const boom = ['','','']; // or
const boom2 = new Array(3); // n은 정수값을 입력한다.
-> length가 3인 배열이 생성되었다.

✋🏻 여기서 잠깐!

🙋🏻‍♀️나는 fruits 배열에서 사과를 console에서 보고싶어

console.log(fruits[1]);

그럴려면 다음과 같이 해주면 되지않을까?

🙅🏻‍♀️NO!!!
css에서는 index를 1부터 시작하지만
자바스크립트에서는 index를 0부터 시작한다.

const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits[0]); // 🍎

🛴 배열 확인하기

1번째 방법) console.log 사용
const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits); // 🍎, 🍌, 🍐
------------------------------------------------
2번째 방법) forEach 사용
fruits.forEach((fruits) => console.log(fruits));
// 🍎, 🍌, 🍐

🛴 배열 관련 API

🔺length
배열의 크기를 알려준다.

const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits.length);
// 3

🔺forEach
주어진 함수를 배열 요소 각각에 대해 실행한다.

const fruits = ["🍎", "🍌", "🍐"];
/*
for문을 통해서도 가능하지만 forEach를 사용할 수도 있다.
---------------------------------------------------
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
*/
fruits.forEach(fruits => {
  console.log(fruits)
});

🔺indexOf
선택한 배열원소가 배열 몇번째에 있는지 알려준다.

const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits.indexOf('🍌'));
// 1
// -1이 찍힌다면 배열에 없는 원소라는 의미이다.

🔺lastIndexOf
내가 선택한 요소가 마지막으로 나오는 index가 몇번인지 알려준다.

const fruits = ['🍎', '🍌', '🍐', '🍎'];
console.log(fruits.lastIndexOf('🍎'));
// 3

🔺includes
배열이 특정 요소를 포함하고 있는지 판별한다.

const fruits = ['🍎', '🍌', '🍐'];
console.log(fruits.includes('🍎'));
// true
console.log(fruits.includes('🥝'));
// false

🔺push
배열에 원소를 추가해준다.

const fruits = ['🍎', '🍌', '🍐'];
fruits.push('🍓', '🍑');
// ['🍎', '🍌', '🍐', '🍓', '🍑']

🔺unshift
앞에서부터 원소를 추가한다.

const fruits = ['🍎', '🍌', '🍐'];
fruits.unshift('🍓', '🍑');
// ['🍓', '🍑', '🍎', '🍌', '🍐']

🔺shift
앞에서부터 하나씩 원소를 삭제한다.

const fruits = ['🍎', '🍌', '🍐'];
fruits.shift(); // 🍎 삭제
// ['🍌', '🍐']

🔺pop
뒤에서부터 하나씩 원소를 삭제 해준다.

const fruits = ['🍎', '🍌', '🍐'];
fruits.pop(); // 🍐 삭제
// ['🍎', '🍌']

🔺splice
원하는 원소가 몇번째 index인지 알아낸후 삭제 가능하다.

const fruits = ['🍎', '🍌', '🍐'];
// const index = fruits.indexOf('🍌'); => 1
fruits.splice(index, 1);
// ['🍎', '🍐']

🔺slice
splice와 비슷하지만 중요한 점은 기존의 배열은 건들이지 않는다.

const fruits = ['🍎', '🍌', '🍐'];
const sliced = fruits.slice(0, 1); // 0부터 1까지
console.log(sliced); // ['🍐']
console.log(fruits); // ['🍎', '🍌', '🍐']

🔺concat
배열을 합해서 새로운 배열을 만든다.

const fruits = ['🍎', '🍌', '🍐'];
const fruits2 = ['🥝', '🍈'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);
// ['🍎', '🍌', '🍐', '🥝', '🍈']

🔺filter
배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.

const fruits = [
  {
    id: 1,
    name: '🍎',
    done: true
  },
    {
    id: 2,
    name: '🍌',
    done: false
  },
    {
    id: 3,
    name: '🍐',
    done: true
  }
];
const newFruits = fruits.filter(fruits => fruits.done === false);
console.log(newFruits); // ['🍌']

🔺map
배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

const number = [1, 2, 3, 4];
const double = [];
for (let i = 0; i < number.length; i++) {
  double.push(array[i] * array[i]);
}
console.log(double); // [1, 4, 9, 16]

🔺join
배열 안의 값들을 문자열 형태로 합쳐준다.

const number = [1, 2, 3, 4];
const numberStr = number.join();
console.log(number); // [1, 2, 3, 4]
console.log(numberStr); // 1,2,3,4

🔺find
메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.

const fruits = [
  {
    id: 1,
    name: "🍎",
    done: true,
  },
  {
    id: 2,
    name: "🍌",
    done: true,
  },
  {
    id: 3,
    name: "🍒",
    done: true,
  },
  {
    id: 3,
    name: "🍉",
    done: true
  }
];
const fruit = fruits.find((fruit) => fruit.id === 3);
console.log(fruit);

🔺findIndex
만약에 배열 안에 있는 값이 숫자, 문자열, 또는 boolean일때 찾고자하는 항목이 몇번째 원소인지 알아내려면 indexOf 를 사용하면 된다. 하지만 배열 안에 있는 값이 객체이거나 배열이라면 indexOf 로 찾을 수 없다.만족하는 요소가 없으면 -1을 반환한다.

const fruits = [
  {
    id: 1,
    text: '🍎',
    done: true
  },
  {
    id: 2,
    text: '🍌',
    done: true
  },
  {
    id: 3,
    text: '🍉',
    done: true
  },
  {
    id: 4,
    text: '🍒',
    done: false
  }
];
const index = fruits.findIndex(fruits => fruits.id === 3);
console.log(index);
// 2

🔺reduce
배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.
(reduce는 아직 이해를 못하겠다...😥)
👉🏻reduce 참고링크

const number = [1, 2, 3, 4, 5];
/*
let sum = 0;
number.forEach(n => {
  sum += n;
});
*/
let sum = number.reduce((accumulator, current) => accumulator + current, 0);
console.log(sum);
// 15

👉🏻배열 참고링크