스파르타 (React_6기) 본캠프

2024. 07. 29.(배열)

cha123hein 2024. 7. 29. 12:51

1. push : 배열의 끝에 추가한다.

let fruits = ['사과', '바나나']
fruits. push('포도')
console.log(fruits);

->  결과값으로 '사과', 바나나', '포도' 가 나온다.

 

2. pop : 끝의 배열을 빼준다.

let fruits = ['사과', '바나나', '포도']
fruits. pop();
console.log(fruits);

-> 결과값으로 ['사과', '바나나']만 나온다.

->pop 함수를 실행하고 변수에 대입하면 빼낸 값을 반환한다.
   빈 배열일 경우 undefiend를 반환한다

 

3. forEach = for문과 동일하다.

for(i=0; i<fruits.length; i++){
console.log(fruits);
}

-> 이걸 forEach로 바꾸자면,

fruits.forEach(함수가 매개변수로 들어간다.);

즉, fruits.forEach(fuction(매개변수){});

-> 위의 매개변수는 배열의 갯수이다. 즉, 배열의 갯수만큼 실행하게된다.

 

ex) for (let i=0; i<고객데이터.length; i++){
     console.log();
     }

도 가능하지만,

      고객데이터. forEach(fuction(//객체 하나하나다.){
      console.log();
       }

-> 이렇게도 고객데이터가 출력가능하다.

 

(1) forEach는 배열의 메서드다.

(2) 이 배열 메서드는 input(매개변수)를 갖는다.

(3) 그 매개변수는 함수다(매개변수로 들어오는 함수 = 콜백함수)

(4) 그 매개변수로 들어온 함수는 input(매개변수)를 갖는다.

(5) 그 매개변수에는 호흡의 주체가 된 배열의 각 요소가 차례대로 할당된다.

 

4. map(~값을 맵핑한다.)

const testArr = ["사과", "당근", "소바"];
testArr. map(fuction (item) {
return(item);
});

-> 사과, 당근, 소바가 각각 출력된다.

만약, return(); 로 출력을 하게 되면 [undefined, undefined, undefined]로 배열갯수만큼 들어가게 된다.

         return(1);로 출력을 하면 [1, 1, 1]로 결과값이 나온다.

* forEach와의 차이는 return하는 값이 있냐 없냐 차이이다.

 

map을 이용해 기존 배열에 추가를 할 수 도 있는데,

const people = [
  {    id: 1,    name: "홍길동",    age: 30,  },  {    id: 2,    name: "홍길순",    age: 15,  },  {    id: 3,    name: "김르탄",    age: 16,  },];
const newPeople = people.map(function (person) {
  const newPerson = {
    id: person.id,
    name: person.name,
    age: person.age,
    isAdult: person.age >= 20,
  };  return newPerson;
});
console.log(newPeople);
 
-> 추가적으로 성인인지 아닌지 ture와 false로 나타난다.
 
5. filter
const newArr = testArr.filter(fuction (숫자) {
console.log(숫자);
});
-> 아무 조건도 없이 return을 하면 빈 배열로 출력이 된다.
 
const newArr = testArr.filter(fuction (숫자){
if (숫자 >=10) {
return ture;
} else {
return false;
}
});
 
-> 10이상의 숫자만 출력이 된다.