js 데이터 알아보기 / array 배열 메서드 / length, concat, forEach, map, filter, find, findInd

length()

const number = [1, 2, 3, 4];
const fruits = ['apple', 'banana', 'cherry'];

console.log(number.length); // 4
console.log(fruits.length); // 3
console.log([1, 2, 3, 4, 5, 6].length); // 6
console.log([].length); // 0

array 배열데이터에서 length로 개수를 확인할 수 있다.
빈 배열에서는 0을 확인할 수 있다.

---

concat()

const numbers = [1, 2, 3, 4];
const fruits = ['apple', 'banana', 'cherry'];
const codenote = numbers.concat(fruits)

console.log(numbers.concat(fruits)); // (7) [1, 2, 3, 4, 'apple', 'banana', 'cherry']
console.log(codenote); // (7) [1, 2, 3, 4, 'apple', 'banana', 'cherry']

connat으로 2개의 배열데이터를 합칠 수 있다.
새 배열로 반환할 수 있고, console에서 합쳐서 출력도 가능하다.

---

forEach()

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function (item, index) {
  console.log(item, index)
})
// apple 0
// banana 1
// cherry 2

forEach 메서드는 배열 요소에 각각 실행하게 된다.
iteam은 배열, index 번호는 0번부터 숫서에 맞게 호출된다.

---

map()

const fruits = ['apple', 'banana', 'cherry'];

const a = fruits.forEach((fruit, index) => {
  console.log(`${fruit}-${index}`);
});
console.log(a);


const b = fruits.map((fruit, index) => ({
    id: index,
    name: fruit
}));
console.log(b);

// (3) [{…}, {…}, {…}]0: {id: 0, name: 'apple'}1: {id: 1, name: 'banana'}2: {id: 2, name: 'cherry'}length: 3[[Prototype]]: Array(0)

map 메서드는 배열 내의 요소에 각각 주어진 함수를 호출한 결과를 모아서 새로운 배열을 반환한다.

---

filter()

const numbers = [1, 2, 3, 4];
const fruits = ['apple', 'banana', 'cherry'];

const a = numbers.map(number => (number < 3);
console.log(a) // 0: true1: true2: false3: falselength: 4[[Prototype]]: Array(0)


const b = numbers.filter(number => (number < 3);
console.log(b);
// Array(2)
// 0: 1
// 1: 2
// length: 2

map하고는 다르게 true, false 를 통해서 배열데이터에 필터하여 반환시킨다.
- map은 배열데이터의 개수만큼 반환

---

find(), findIndex()

const numbers = [1, 2, 3, 4];
const fruits = ['apple', 'banana', 'cherry'];

const a = fruits.find(fruit => /^b/.test(fruit));
console.log(a); // banana

const b = fruits.findIndex(fruit => /^b/.test(fruit));
console.log(b); // 1

find는 배열데이터에서 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.

findIndex는 배열데이터에서 주어진 판별 함수의 인덱스 값을 반환합니다.

---

includes()

const numbers = [1, 2, 3, 4];
const fruits = ['apple', 'banana', 'cherry'];

const a = numbers.includes(3);
console.log(a); // ture

const b = fruits.includes('codenote');
console.log(b); // false

배열데이터에 포함되어 있는지를 true, false 값으로 반환한다.

---

push(), unshift()

const numbers = [1, 2, 3, 4];
const fruits = ['apple', 'banana', 'cherry'];

numbers.push(5);
console.log(numbers); // (5) [1, 2, 3, 4, 5]


numbers.unshift(0);
console.log(numbers); // (6) [0, 1, 2, 3, 4, 5]

push(), unshift()는 원본이 수정됨
push 는 배열데이터 뒤에 포함시킨다.
unshift는 배열데이터 앞에 포함시킨다.
shift는 배열데이터 앞 데이터를 제거시킨다.
pop는 배열데이터 뒤 데이터를 제거시킨다

---

reverse()

const numbers = [1, 2, 3, 4];
const fruits = ['apple', 'banana', 'cherry'];

numbers.reverse();
fruits.reverse();

console.log(numbers); // [4, 3, 2, 1]
console.log(fruits); // ['cherry', 'banana', 'apple']

배열의 순서를 반대로 출력한다.

---

splice()

const numbers = [1, 2, 3, 4];
numbers.splice(제로베이스로 지우기 시작할 아이템 인덱스, 지울 데이터 갯수, 새롭게 넣을 데이터);
numbers.splice(2, 1, 'codenote');

console.log(numbers); // (4) [1, 2, 'codenote', 4]

숫자, 문자 모두 가능!
첫번째 인수는 지우기 시작할 아이템 인덱스
두번째 인수는 지울 데이터의 갯수
세번째 인수는 새롭게 넣을 데이터