구름의 글들

[JS] 자바스크립트 배열 메소드 정리 (push, unshift, pop, includes 등) 본문

언어/Javascript

[JS] 자바스크립트 배열 메소드 정리 (push, unshift, pop, includes 등)

여그린 2022. 11. 3. 10:12

배열 메소드

split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()

 

 

Array.isArray()

배열인지 판단하는 메소드

 

let words = [1, 2, 3]

Array.isArray(words)
// true

Array.isArray('문자열')
//false

Array.isArray(123)
//false

 

 

🧐 배열에 element 넣고/빼기 method

push()

배열의 맨 뒤에 element 추가하기

 

let arr = ['apple', 'yoguart', 'wine']

arr.push('yum')
console.log(arr)

//['apple', 'yoguart', 'wine', 'yum']

 

pop()

배열의 맨 뒤에 element 삭제하기

 

let arr = ['apple', 'yoguart', 'wine']

arr.pop()
console.log(arr)

//['apple', 'yoguart']

 

unshift()

배열의 맨 앞에 element 추가하기

 

let arr = ['apple', 'yoguart', 'wine']

arr.unshift('justin')
console.log(arr)

// ['justin', 'apple', 'yoguart', 'wine']

 

 

 

shift()

배열의 맨 앞 element 삭제하기

 

let arr = ['apple', 'yoguart', 'wine']

arr.shift()
console.log(arr)

//['yoguart', 'wine']

 

🧐  자바스크립트의 특정 값이 배열에 포함되어 있는지 확인하기

indexOf()

배열의 index 값 확인하기

 

let words = ['codong', 'coco', 'suri']

words.indexOf(words[1])

// coco

 

👉 단, words 배열 안에 없는 것을 찾게 할 경우 '-1'이 나온다.

👉 즉 배열 안에 찾는 인덱스가 있다면 그 값을 추출하고 없으면 -1을 출력한다.

 

배열 안에 내가 찾고자 하는 게 있는지 없는지 확인하는 방법은?

방법1) indexOf(특정 element) ! == -1

let words = ['codong', 'coco', 'suri']

words.indexOf('coco') !== -1

// true
// true값이 나오면 그 배열안에 내가 찾는 단어(coco)가 있다는 뜻

 

방법2) element가 있는지 없는지 판별하는 function을 만들어주기

 

방법3) includes() 메소드 사용하기

 

 

includes()

배열 내 특정 element가 있는지 여부를 확인하는 메소드

 

let words = ['codong', 'coco', 'suri']
words.includes('coco')

// true


let words = ['codong', 'coco', 'suri']
words.indexOf('있을까없을까')

// -1

 

 

includes()라는 메소드가 있음에도 indexOf() 메소드를 활용하기를 권장한다. 왜?

 

a) indexOf()를 사용할 경우 element의 인덱스도 함께 알 수 있다.

b) includes()의 경우 브라우저 호환성이 떨어진다.

 

Comments