JavaScript 배열함수 정리 (1)
JavaScript 배열함수 정리 (1) — #JavaScript배열함수 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않는다고 뒤...
#JavaScript배열함수
학습법 이론
학습을 하기 이전, 명심해야할 학습법이 있다.
1.이해가지 않는다고 뒤돌아가 다시 보지 말 것
2.외우지 말라
=> 자주 봐서 외워짐을 당하라
=> 크롬을 통해 copy and paste하라
- 이해하는게 중요하다
=> 왜 생겨났는지?
=> 왜 사용하는지?
===> 응용이 가능해진다.
4.새로운 지식을 넣을땐 뇌를 비우자
JavaScript 배열함수란?
자바스크립트 배열함수
배열함수 이름부터 어려운 개념처럼 보이지만 알고보면 정말 간단한 개념입니다. JavaScript내에서는 사용자가 지정하지 않아도 제공되는 여러 객체나 배열, 매서드가 존재합니다. 매서드에는 객체에서 사용가능한 매서드, 배열에서 사용가능한 매서드가 있습니다.
이중에서 배열에서 사용가능한 매서드를 배열함수라고 부릅니다. 다 공부하기에는 힘드니, 자주 활용되는 기본적인것만 우선적으로 정리하였습니다.
실습을 원활하게 진행하기 위하여 아래와 같은 배열을 같이 만들어 봅시다.
| const foods = \["apple", "banana", "pizza","chicken","grape"\]; |
|---|
배열의 값(요소)을 추가하거나 제거하는 매서드
pop()
pop()매서드는 배열의 가장 끝에 있는 요소를 삭제하는 기능입니다.
| const foods = \["apple", "banana", "pizza","chicken","grape"\];foods.pop(); //\["banana", "rice", "chicken","hamberger","tomato"\]; |
|---|
push()
push()매서드는 맨뒤에 값을 추가하는 기능입니다. push("추가할 값")으로 적어주면 됩니다.
| const foods = \["apple", "banana", "pizza","chicken","grape"\];foods.pop(); foods.push("hamberger")//\["banana", "rice", "chicken","hamberger","tomato","hamberger"\]; |
|---|
shift()
shift()매서드는 맨앞의 값을 삭제하는 기능입니다.
| const foods = \["apple", "banana", "pizza","chicken","grape"\];foods.shift(); //\[ "banana", "pizza","chicken","grape"\]; |
|---|
unshift()
unshift()매서드는 맨앞에 값을 추가하는 기능입니다. unshift("추가할 값")으로 사용하면 됩니다.
| const foods = \["apple", "banana", "pizza","chicken","grape"\];foods.shift(); foods.unshift("mango"); //\["mango","banana", "pizza","chicken","grape"\]; |
|---|
splice()
splice()매서드는 시작할 시점을 정하고 그 시점으로부터 n번째 요소를 모두 제거한뒤, 원하는 값을 추가할 수 있습니다. 받을 수 있는 인자는 (start index, start index로부터 n만큼삭제, "추가할 값","추가할 값" ,....,"추가할 값" )
| const foods = \["apple", "banana", "pizza","chicken","grape"\];foods.splice(0,2,"shrimp","snack","cake"); console.log(foods);//\["shrimp","snack","cake", "pizza","chicken","grape"\]; |
|---|
위는 splice인자로 start index 0, index 0,1(2), "shrimp" , "snack", "cake"를 추가하였습니다. index 0번째 부터 index\[0\],\[1\] 2개의 요소가 사라졌고 추가입력한 값이 들어간 것을 보실 수 있습니다.
배열을 나누고 합치는 매서드
slice();
slice()메서드는 배열의 요소를 나누어 새로운 배열을 만들때 사용하는 매서드입니다. slice(start-index, end-index)를 입력하면 start부터 end번째 index까지 자를 수 있습니다. 유의점은 end-index에있는 요소는 포함되지 않습니다.
| const foods = \["apple", "banana", "pizza","chicken","grape"\];let newFoods = foods.slice(0,3);console.log(newFoods);//\["mango","banana", "pizza"\]; |
|---|
slice뒤에 인자로 0(start-index), 3(end-index)가 붙어 index=0,1,2에 속하는 요소들만이 배열에 담겼습니다.
concat()
concat() 매서드는 배열을 합치고 병합된 배열의 사본을 반환시킵니다. slice()로 자른 두 배열을 다시 하나로 합쳐보겠습니다.
| const foods = \["apple", "banana", "pizza","chicken","grape"\];let newFoods1 = foods.slice(0,3);let newFoods2 = foods.slice(3,6);console.log(newFoods1.concat(newFoods2));// \["apple", "banana", "pizza","chicken","grape"\]; |
|---|
slice로 자른 배열이 다시 원상태로 합쳐졌습니다.
여기까지가 배열의 요소 추가,제거,배열을 나누기, 합치기 등이고 다음 글에는 배열을 조건에따라 나누는 방법을 알아보겠습니다.
다음글 보러가기
https://blog.naver.com/jword\_/222923410401
[JavaScript 배열함수(2)
#javascript배열함수 학습법 이론 학습을 하기 이전, 명심해야할 학습법이 있다. 1.이해가지 않는다고 뒤돌...
blog.naver.com](https://blog.naver.com/jword_/222923410401)