Multi Developer SuHo

자바스크립트 Array Method(배열 메서드) 본문

JavaScript

자바스크립트 Array Method(배열 메서드)

Dreaming Developer Student 2023. 9. 13. 14:36
SMALL

모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg
자바스크립트에서 배열 메서드는  배열의 요소를 추가,제거,변경 및 정렬하는 등 작업을 수행하는데 도움이 됩니다. 배열 메서드 몇가지를 소개해드리겠습니다.  다음과 같이 먼저 배열을 추가합니다.

 

[무료] [코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 - 인프런 | 강의

이 강의 하나만으로 인기 Javascript 프레임워크들과 Typescript를 배울 수 있는 기본을 다질 수 있습니다., 자바스크립트 문법 마스터,9시간 만에 무료로 할 수 있어요! ✨ 자바스크립트 문법,한 강의

www.inflearn.com

let aspeaMembers = [
    '카리나',
    '윈터',
    '지젤',
    '닝닝',
]

1. push() : 배열에다 새로운 값을 맨끝에다가  추가를 하고 retrun 값을 추가한 다음에 길이를 반환한다. 

- push 함수의 특징에는 리턴값이 있습니다.  코드에서 aspeaMembers 라는 Array변수에 길이입니다.

- 여기서 중요한점은 원래 존재하던 'aspeaMembers'  라는 Array를 직접적으로 변경한다는 것입니다. 

- 변경을 했기 때문에 aspeaMembers를 다시 출력 했을때 '자바스크립트' 라는 글자가 추가가 되는 것입니다.

 

push 함수를 적용한 소스코드입니다.

console.log(aspeaMembers.push('자바스크립트'));
console.log(aspeaMembers);

출력결과 5라는 값과  배열에 '자바스크립트' 라는 글자가 추가되는걸 볼수 있습니다.

 

2. pop() : pop 함수는 push 함수와 달리 마지막 값을 사젝하는데 사용하고 삭제한 값을 반환해주는 것입니다.

 

pop 함수를 적용한 소스 코드입니다.

console.log(aspeaMembers.pop());
console.log(aspeaMembers);

출력결과  index 마지막 값인 '자바스크립트'  값이 삭제되고  반환되는걸 볼 수 있습니다.

 

3.  shift() : shift 함수는 첫 번째 값을 삭제하고 삭제한 값을 반환합니다.

 

// shift() : 첫 번째 값을 삭제하고 삭제한 값을 반환
console.log(aspeaMembers.shift());
console.log(aspeaMembers);

출력결과 첫 번째 인덱스 값을 삭제하고 삭제한 값인 '카리나' 를 반환합니다.

 

4. unshift() : push 함수랑 같으나  첫 번째  인덱스  값을 넣게 되고, 새로 생겨난 Array에 길이를 반환합니다.

console.log(aspeaMembers.unshift('카리나'));
console.log(aspeaMembers);

 

5. splice() : 배열에서 요소를 추가하거나 제거하는 메서드, 몇개를  삭제할지 두 번째 매개변수에 넣을 수 있습니다.

console.log(aspeaMembers.splice(0,2))
console.log(aspeaMembers);

6. concat :  새로운 배열을 만들어서 반환해주는 메서드 입니다. 

console.log(aspeaMembers.concat('자바스크립트'));
console.log(aspeaMembers);

출력결과 자바스크립트 배열을 만들어서 반환하고 있습니다.

이 밖에도 fliter(), map() , find(), reduce() 함수등 다양한 메서드들이 있습니다. 

LIST