[패캠 인강] 배열과 배열 내장함수 (2)

2. 배열 메소드

2-6) .fiter( 특정 조건 )

  fiter는 특정 조건을 만족하는 요소들을 찾아 그것들로 새로운 배열을 만들 때 사용한다.

 

정리를 해보자면

1. findIndex: 특정 조건을 만족하는 요소를 찾아서 그 인덱스 값을 알아내는 것
2. find: 특정 조건을 만족하는 요소를 찾아서 그 요소를 출력하는 것
3. filter: 특정 조건을 만족하는 요소를 찾아서 그 요소로 배열을 만들어 내는 것

 

  저번 시간에 사용했던 객체 세개를 요소로 갖는 배열을 가져오겠다.

const ninetyNinesInfo = [ 
  { name: "이익준", 
    session: 'Electronic Guitar', 
    hasGirlfriend: false }, 
    
  { name: "안정원", 
    session: 'Drum', 
    hasGirlfriend: true }, 
    
  { name: "양석형", 
    session: 'piano', 
    hasGirlfriend: false } 
 ]

  저번 시간에는 여자친구가 있는 사람의 요소를 찾아내 그 요소를 출력하는 것을 find를 통해서 해봤다. 그렇다면 이번에는 여자친구가 없는 사람들만을 모은 배열을 만들어 보겠다

const hasNoGrilfriend = ninetyNinesInfo.filter(you => you.hasGirlfriend === False)
console.log("여자친구가 없는 99즈 명단입니다: ", hasNoGirlfriend)

/* 여자친구가 없는 99즈 명단입니다: (2) [{…}, {…}]
0: {name: "이익준", session: "Electronic Guitar", hasGirlfriend: false}
1: {name: "양석형", session: "piano", hasGirlfriend: false} */

---

2-7) .includes( )

  배열 데이터에 인자가 포함되어 있느냐 없느냐를 Boolean 데이터로 반환한다.

1. indexOf: 들어온 인자가 배열 몇 번째 인덱스에 있느냐를 반환(있을 경우 해당 인덱스 값, 없을 경우 -1)
2. includes: 들어온 인자가 배열에 있느냐를 반환(있을 경우 true, 없을 경우 false

  다시 저번 시간에 썼던 배열을 가져오겠다.

const ninetyNines = ['이익준', '안정원', '채송화', '김준완', '양석형']

  저번 시간에는 indexOf를 통해서 요소 '채송화'는 몇 번째 인덱스에 있는지, '장겨울'은 몇 번째 인덱스에 찾았는지 알아봤다고 한다면 이번엔 includes를 통해서 해당 배열에 '채송화'가 있는지, '장겨울'이 있는지를 확인해보겠다. 

 console.log(ninetyNines.includes('채송화')) // True
 console.log(ninetyNines.includes('장겨울')) // False

---

2-8) .splice(start, deleteCount)

  start부터 deleteCount 수만큼 제거한다. 이건 원본에 지장이 있으므로 사용을 주의해야 한다.

 const aliveFirstAvengers = ['캡틴 아메리카', '아이언맨', '헐크', '호크아이', '블랙위도우', '토르']
 const whoIsDead = aliveFirstAvengers.splice(1, 1)
 
 console.log(whoIsDead)) // [아이언맨] 
 console.log(aliveFirstAvengers) //["캡틴 아메리카", "헐크", "호크아이", "블랙위도우", "토르"]
 
 // 4번 줄이 [아이언맨]으로 출력되는 건 "아이언맨"이라는 요소를 제거했다는 의미다.
 // 5번 줄을 통해서 원본인 aliveFirstAvengers 배열이 변한 것을 알 수 있다(아이언맨 ㅠㅠ)
 
 console.log(aliveFirstAvengers.splice(3, 2))// ["블랙위도우", "토르"]
 console.log(aliveFirstAvengers) //  ["캡틴 아메리카", "헐크", "호크아이"]

  멀쩡히 살아있는 토르를 죽였지만, 곧 다른 메소드들로 수정작업을 통해 토르를 되살릴 예정이다.

---

2-9) .slice( startIndex, endIndex )

  slice는 부분을 복사해서 따오는 거라 생각하면 쉽다. startIndex 부터 endIndex 전까지 추출하는 것이며 원본 배열에는 지장이 없다

const slicedAliveFirstAvengers = aliveFirstAvengers.slice(0, 2)
// 현재 aliveFirstAvengers = ["캡틴 아메리카", "헐크", "호크아이"]

console.log(slicedAliveFirstAvengers) // ["캡틴 아메리카", "헐크"]
console.log(aliveFirstAvengers) // ["캡틴 아메리카", "헐크", "호크아이"]

console.log(aliveFirstAvengers.slice(0, 3)) // ["캡틴 아메리카", "헐크", "호크아이"]
console.log(aliveFirstAvengers.slice(1, 2)) // ["헐크"]

// 만약에 end를 설정해주지 않으면 맨 마지막 index로 자동처리한다.

console.log(aliveFirstAvengers.slice(0)) // ["캡틴 아메리카", "헐크", "호크아이"]
console.log(aliveFirstAvengers.slice(1)) // ["헐크", "호크아이"]

---

2-10) .shift( )

  shift는 인자에 아무 것도 넣지 않는다. shift가 작동하면 배열에 가장 첫 번째 원소를 빼내온다.

const shiftedAliveFirstAvengers = aliveFirstAvengers.shift()

console.log(shiftedAliveFirstAvengers) // 캡틴 아메리카
// 배열 가장 앞에 있는 것을 빼내왔으므로 "캡틴 아메리카"를 빼내온 것이다.

console.log(shiftedAliveFirstAvengers) 
// ["헐크", "호크아이"]
// 원본에도 영향이 가서 캡틴 아메리카는 빠진 채로 출력된다.

console.log(aliveFirstAvengers.shift()) // 헐크
console.log(aliveFirstAvengers) // [호크아이]

console.log(aliveFirstAvengers.shift()) // 호크아이
console.log(aliveFirstAvengers)// []

  ...모두 죽었다

---

2-11) .unshift( )

  unshift는 배열에 추가하고 싶은 것을 인자로 받아오는데, 그 인자는 배열의 가장 첫 번째에 추가된다. 즉, unshift가 작동하면 첫 번째 인자를 빼내오는 shift와는 달리, 첫 번째 요소에 인자를 집어넣는다. 이제 어벤져스들을 되살리겠다.

// 현재 " aliveFirstAvengers = [ ] " 상태다.

aliveFirstAvengers.unshift("아이언맨")
  // 아이언맨을 부활시키고 싶었다.
console.log(aliveFirstAvengers) // ["아이언맨"]

aliveFirstAvengers.unshift("토르", "블랙위도우")
console.log(aliveFirstAvengers) // ["토르", "블랙위도우", "아이언맨"]

// 두 개의 인자를 추가했을 때,순서대로 배열에 추가된다
// 두 개의 인자는 배열의 가장 첫 번째 요소에 추가 되므로 아이언맨보다 앞서서 추가된다.

aliveFirstAvengers.unshift("캡틴 아메리카")
console.log(aliveFirstAvengers) //  ["캡틴 아메리카", "토르", "블랙위도우", "아이언맨"]

aliveFirstAvengers.unshift("헐크", "호크아이")
console.log(aliveFirstAvengers) // ["헐크", "호크아이", "캡틴 아메리카", "토르", "블랙위도우", "아이언맨"]

---

2-12) .pop( )

  pop은 shift처럼 요소를 빼내오는 역할을 하는데 다른 점은 배열의 가장 마지막 요소를 빼내온 다는 점이다. 이제 다시 아이언맨과 블랙 위도우와 작별할 시간이다

 

const whoIsDeadReally = aliveFirstAvengers.pop()
console.log(whoIsDeadReally) // 아이언맨
console.log(aliveFirstAvengers) //  ["헐크", "호크아이", "캡틴 아메리카", "토르", "블랙위도우"]

console.log(aliveFirstAvengers.pop()) // 블랙위도우
console.log(aliveFirstAvengers) //  ["헐크", "호크아이", "캡틴 아메리카", "토르"]

 

 

---

2-13) .push( )

  push는 unshift처럼 인자를 배열에 넣는 역할을 하는데 다른 점은 배열의 가장 마지막에 인자를 요소로 넣는다는 점이다. 이제 Endgame에서 살아남아서 차기작이 나온다고 확정된 몇 명만 추가하고자 하다.

const newAvengers = aliveFirstAvengers
console.log(newAvengers) // ["헐크", "호크아이", "캡틴 아메리카", "토르"]

newAvengers.push("스파이더맨")
console.log(newAvengers) // ["헐크", "호크아이", "캡틴 아메리카", "토르", "스파이더맨"]
  // 배열의 맨 마지막으로 추가된다.

newAvengers.push("캡틴 마블", "닥터 스트레인지")
console.log(newAvengers) //  ["헐크", "호크아이", "캡틴 아메리카", "토르", "스파이더맨", "캡틴 마블", "닥터 스트레인지"]
  // 마찬가지로 두개 이상 작성이 가능하고 인자의 순서대로 배열 마지막에 추가된다

// 이제 첫 번째 어벤져스 중 차기작 나오는 토르 제외하고 남은 영웅은 지우겠다.
newAvengers.shift()
console.log(newAvengers)// ["호크아이", "캡틴 아메리카", "토르", "스파이더맨", "캡틴 마블", "닥터 스트레인지"]
  // 이렇게 하나하나씩 빼면 시간이 오래 걸리니 splice를 사용하자

newAvengers.splice(0,2)
console.log(newAvengers)// ["토르", "스파이더맨", "캡틴 마블", "닥터 스트레인지"]

---

2-10 ~ 2-13)은 비슷하면서도 다르다. 이것들을 한 눈에 보이도록 정리하고자 한다. (splice도 추가)

shift	unshift	pop	push	splice
배열의 첫 번째 요소를	배열의 첫 번째 요소를	배열의 마지막 요소를	배열의 마지막 요소를	지정한 배열의 구간을
제거한다	추가한다	제거한다	추가한다	제거한다