[4] Array

✅ 배열 선언

const arr1 = new Array();
const arr2 = [1,2];
// 두가지 방법이 있다.

✅ 배열 안에 있는 전체 아이템 출력

const fruits = ['🍒','🍊'];
//a. for
for (let i = 0; i<fruits.length; i++){
    console.log(fruits);
}

//b. for of 
for (let fruit of fruits){
    console.log(fruit);
}

//c. forEach
fruits.forEach((fruit) => consol.log(fruit));

✅ push(), pop(), unshift(), shift()

// Addtion, deletion, copy
// push: 배열의 마지막 인덱스에 아이템 추가
fruits.push('🍓');

//pop: 배열의 마지막 아이템를 제거
fruits.pop();

// unshift: 배열의 첫번째 인덱스부터 아이템 추가
fruits.unshift('🍋');

// shift: 배열의 첫번째 인덱스부터 아이템 삭제
fruits.shift();

unshift : 원래 있던 데이터를 뒷 박스들에 차례대로 옮겨 담아, 인덱스 맨 앞에 공간을 만들어서 아이템을 추가함.
shift : 맨 앞에 있던 데이터를 지우고 원래있던 데이터들을 하나씩 앞으로 밀어줘야함.
=> 이런 이유로 pop, push 보다 훨씬 느리다!

📍 splice를 사용하자! (지정한 위치의 데이터를 삭제,추가할 수 있다.)

fruits.splice(1,1) // 인덱스 1부터 1개 삭제.
// 만약 갯수를 지정하지 않으면..?
fruits.splice(2); // 인덱스 2부터 배열끝까지 삭제.
fruits.splice(1,1,'🍊','🍓'); // 인덱스 1번부터 1개를 지우고 아이템 두개 추가

✅ cocat(), indexOf(), lastindexOf(), includes()

// combine two arrays 
const fruits2 = ['🍒','🍊'];
const newFruits = fruits.concat(fruits2);

//Searching, find the index
console.log(fruits.indexOf('🍊')); // 아이템이 위치한 인덱스 번호를 출력 , 만약 없다면 -1 출력
// 만약 오렌지가 두개라면 indexOf 는 앞에 있는 인덱스를 출력해준다. 
// 만약 마지막에 위치한 인덱스를 출력하고 싶다면
// lastindexOf 을 사용하면된다!
console.log(fruits.lastindexOf('🍊')); 
console.log(fruits.includes('🍊'));  // 아이템이 배열 원소로 있는지 true or false 출력

🎯 중요한 함수들!

1. join()

배열의 모든 요소를 문자열로 하나의 원소로 만드는 함수다.(쉽게 말해, 배열의 항목을 하나의 문자로 합친다.) 각 요소들을 , 으로 구분하는데, 다른 문자로 구분하고 싶다면, ( ) 안에 사용자가 임의로 지정할 수 있다.

const elements = ['red', 'yellow', 'green'];

console.log(elements.join());
//"red,yellow,green"

console.log(elements.join(''));
//"redyellogreen"

console.log(elements.join('-'));
//"red-yellow-green"

2. split(separator, limit)

문자열을 일정한 구분자로 잘라서, 배열로 만드는 함수다. 이때 사용자가 limit을 지정하면, 사용자가 지정한 limit까지 배열로 만들 수 있다.

const fruits = '🍎, 🥝, 🍌, 🍒';
const result = fruits.split(',');
console.log(result); //결과: ["🍎", " 🥝", " 🍌", " 🍒"]
const result1 = fruits.split(',',2); // 그럼 키위까지 배열로 만들어짐
console.log(result1); //결과: ["🍎", " 🥝"]

3. reverse()

배열 순서가 반전되게 변환한다.

 {
    const array = [1, 2, 3, 4, 5];
    const result = array.reverse(); // 배열 자체를 reverse
  } // [5,4,3,2,1]

4. splice(start[, deleteCount[, item1[, item2[, ...]]]])

원본 배열에 새로운 요소를 추가하거나, 기존 요소를 삭제, 교체하여 배열을 반환한다.

• start : 배열의 변경을 시작할 인덱스.
• deleteCount: 배열에서 제거할 요소의 수
• item1, item2... : 배열에 추가할 요소.

 { 
    const array = [1, 2, 3, 4, 5];
    const result = array.splice(0,2); // 인덱스 0-1 까지 배열 제거
    console.log(result); // [1,2] 
    console.log(array); // [3,4,5]
 }

 {
    const array = [1, 2, 3, 4, 5];
    const result = array.splice(0,2,8); // 인덱스 0-1까지 배열 제거 후, 숫자 8 추가
    console.log(result); // [1,2]
    console.log(array); // [8,3,4,5]
 }

5. slice([begin[, end]])

배열을 지정한 범위만큼 새로운 배열로 만든다.
(이때, 시작인덱스와 종료인덱스를 지정하는데, 이때 종료인덱스를 지정하지 않으면, 배열의 끝까지 잘라낸다.)

{
  const array = [1, 2, 3, 4, 5];
  const result = array.slice(0,2); // 인덱스 0-1까지 배열 제거 후, 숫자 8 추가
  console.log(result); // [1,2]
  console.log(array); // [1,2,3,4,5] // 
}

{
  const array = [1, 2, 3, 4, 5];
  const result = array.slice(0); // 인덱스 0-1까지 배열 제거 후, 숫자 8 추가
  console.log(result); // [1,2,3,4,5]
  console.log(array); // [1,2 ,3,4,5]
}

🍎 splice 와 slice 차이점

splice는 원본 배열을 수정하지만, slice는 기존 배열을 수정하지 않는다.

6. find(callback, [thisArg])

배열에서 특정 값을 찾는 조건을 callback 함수로 전달하여, 주어진 조건의 첫번째 요소값을 반환한다. (만약 조건에 맞는 요소 값이 없을 경우 undefined 리턴.

• callback: 배열의 각 값에 대해 실행할 함수.
• thisArg: 콜백이 호출될 때 this 로 사용할 객체.

{
  const array = [1,2,3,4,5];
  const found = array.find(element => element>3);
  console.log(found); // 4
}

배열에서 조건에 맞는 객체를 찾을 수도 있다!

class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];
  
  // Q5. find a student with the score 90
  {
    const result = students.find((student) =>{
        return student.score > 70; 
    });
    console.log(result);
    
  }

7. filter (callback(element[, index[, array]])[, thisArg])

find 함수처럼 조건에 맞는 값을 찾지만, 첫번째 요소만 반환하는 find함수와는 달리 모든 값을 배열 형태로 리턴한다.

// result should be: [45, 80, 90, 66, 88]
 {
    const result = students.map((student) => student.score);
 }

8. map(callback(currentValue[, index[, array]])[, thisArg])

배열 내의 모든 요소 각각에 대하여 주어진 조건에 맞는 요소 값들을 모아 새로운 배열로 반환한다.

• callback : 새로운 배열 요소를 생성하는 함수.
  • currentValue: 처리할 현재 요소
  • index: 처리할 현재 요소의 인덱스
  • array: map( ) 을 호출한 배열
• thisArg: callback을 실행할 때 this 로 사용되는 값.

  {
     const result = students.map((student) => student.score); 
    //[45, 80, 90, 66, 88]
  }

9. reduce(callback[, initialVlue])

배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다.
리듀서 함수에는 누산기, 현재 값, 현재 인덱스, 원본 배열 총 네개의 인자를 가진다.

  {
    const result = students.reduce((prev, current)=> prev + current.score ,0); // 학생들의 점수의 합이 출력된다.
  } 
  

Q) 점수가 50점 이상인 학생들만 출력하고 싶다면..?

class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

정답

   const result = students
    .map((student) => student.score)
    .filter((score) => score >= 50)
    .join();
  
 

---

드림코딩 강의를 듣고 작성하였습니다.