패캠 인강/Vanilla JavaScript

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

Je-chan 2021. 7. 22. 21:20


1. 배열 기본

const numbers = [1, 2, 3, 4]

배열 안에 있는 것을 요소, 아이템이라고 한다.
즉 1, 2, 3, 4는 numbers라는 배열의 요소, 아이템이다

const objects = [ {name: '패캠'}, {name: '인강'} ]

요소에는 객체도 들어갈 수 있다.

console.log(numbers[1])

이와 같이 배열 안 특정 인덱스에 들어가 있는 요소를 찾으려 하는 과정을 인덱싱이라고 한다.


2. 배열 메소드

2-1) .forEach ( )

배열 안의 원소를 하나하나 따로 가져올 때 사용한다.

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

만약 forEach를 사용하지 않고 저 요소들 하나하나를 가져온다고 하면

for (let i = 0; i < ninetyNines.length; i++) { console.log(ninetyNines[i]) }

이와 같이 for로 복잡하게 생성해야 한다. 하지만 forEach를 사용한다면 더 쉽게 사용할 수 있다.

ninetyNines.forEach( friend => { console.log(friend) })

2-2) .map ( )

map은 배열에 있는 전체 내용에 변화를 주고 싶을 때 사용한다.


2-3) .indexOf ( )

해당 인자가 배열 내 몇 번째 인덱스에 있는지를 찾아준다. -1이 나온다는 건 배열에 없다는 것을 의미한다.

const index = ninetyNines.indexOf('채송화') console.log(index) // 2 
const index2 = ninetyNines.indexOf('장겨울') console.log(index2) // -1

2-4) .findIndex ( 특정 조건 )

배열 내부가 객체이거나 indexOf처럼 특정한 요소의 index를 찾는 것이 아닌 조건(함수 등)으로 값을 찾으려 할 때 사용한다.


2-5) .find ( 특정 조건 )

특정 조건으로 배열 내부의 요소를 찾으려 할 때 사용한다. (인덱스를 찾는 것이 아닌 요소)

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

이렇게 객체를 요소로 갖는 배열이 있다고 했을 때, 내가 커플인 사람이 있는 지를 찾고 싶다고 한다면

const whoIsBetrayer = ninetyNinesInfo.find(he => he.hasGirlfriend === true ) 
console.log('찾으시는 배신자에 대한 정보는', whoIsBetrayer) 
  // 찾으시는 배신자에 대한 정보는 {name: "안정원", session: "Drum", hasGirlfriend: true}