(30) JavaScript - 배열 메소드 (Array Method) [shift, pop, unshift, push Method]

splice 보다 조금 더 간결하게 코드를 작성할 수 있는 메소드가 여러가지 존재한다

 

shift 메소드

shift 메소드는 파라미터가 없기 때문에 그냥 members.shift 라고 메소드를 호출한다.

    let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
    console.log(members);

    //splice보다 간결한 메소드

    // 배열의 첫 요소를 삭제 - shift
    members.shift();
    console.log(members);

▲ shift 메소드를 사용해서 배열의 가장 첫 요소를 삭제하고 나머지 요소들은 앞으로 밀어줌에 따라

제일 앞에 있는 '행섭' 요소가 삭제되고 나머지 요소들이 앞으로 밀림과 동시에 length도 하나 줄어든다.

---

pop 메소드

배열의 마지막 요소를 삭제하는 메소드로, pop 메소드도 파라미터가 없기 때문에

그대로 메소드를 호출하게 되면 배열의 마지막 요소를 삭제한다.

    let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
    console.log(members);

    //splice보다 간결한 메소드
    
    //배열의 마지막 요소를 삭제 - pop
    members.pop()
    console.log(members);

실행해보면 마지막 요소인 '넌적혈구' 요소가 삭제되었다.

---

 

unshift 메소드

배열의 첫 요소로 값을 추가하는 메소드로, 배열의 첫 요소를 삭제하는 shift 메소드와 이름이 반대인 unshift는

값을 추가하는 것이기에 메소드를 호출할 때 파라미터로 추가할 값을 전달해 줘야 한다.

    let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
    console.log(members);

    //splice보다 간결한 메소드

    //배열의 첫 요소로 값을 추가 - unshift(value)
    members.unshift('index 추가 (1)')
    console.log(members);

▲'index 추가(1)' 라는 값을 전달해서 첫 요소에 값을 추가 하였고

나머지 요소들은 뒤로 순서를 미룬 것을 확인 할 수 있다.

---

 

push 메소드

배열의 마지막 요소로 값을 추가하는 메소드로,

unshift와 마찬가지로 어떠한 값을 파라미터로 전달해 줘야한다.

    let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
    console.log(members);

    //splice보다 간결한 메소드

    //배열의 마지막 요소로 값을 추가 - push(value)
    members.push('index 추가 (2)')
    console.log(members);

배열의 끝 부분에 'index 추가 (2)' 추가 된 것을 확인 할 수 있다.

---

 

+α) 배열에서 특정 값 찾기 (indexOf )

배열에서 특정 값을 찾으려면 indexOf 메소드를 사용한다.

array.indexOf(item)을 하면 배열에 item이 포함되어 있는지 확인할 수 있다.

즉 특정 값을 찾아서 해당 값의 index를 알려준다.

• 만약 포함되어 있다면, item이 있는 인덱스가 리턴
• 포함되어 있지 않다면, -1이 리턴
• 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴

        let members = ['행섭', '양천', '찌듕', '힝카인', '데셔', '스기따라','넌적혈구']
        console.log(members);

        //배열에서 특정 값 찾기 (indexOf / lastIndexOf)
        console.log(members.indexOf('넌적혈구'));
        console.log(members.indexOf('너는적혈구'));

▲ 6번째 인덱스에 '넌적혈구' 존재하므로 인덱스 순서 '6' 값이 리턴되었고

포함되어 있지 않은 '너는적혈구'는 '-1'이 리턴 되었다.

 

+α) 배열에서 특정 값이 있는지 확인하기 (includes)

그 값이 배열안에 있는지, 그 여부만 확인하고 싶을 때 includes 라는 메소드를 활용하며

배열에 item이 있을 경우 true를, 없을 경우 false를 리턴한다.

    //배열에서 특정 값이 있는지 확인하기 (includes)
    console.log(members.includes('넌적혈구'));
    console.log(members.includes('너는적혈구'));

 

 

+α) 배열 뒤집기 (reverse)

reverse라는 메소드를 활용하면, 배열의 순서를 뒤집을 수 있다.

    //배열 뒤집기 (reverse)
    members.reverse()
    console.log(members);

 

---

★GitHub 주소 (shift, pop, unshift, push Method)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/8-%EA%B0%9D%EC%B2%B4/9.%EB%B0%B0%EC%97%B4%EB%A9%94%EC%86%8C%EB%93%9C2.html

JavaScript_soloPlay/Basic/8-객체/9.배열메소드2.html at main · SeopE9611/JavaScript_soloPlay