JS_기본문법 (6)_배열 2 (관련 함수)

배열과 관련된 함수들을 알아보자!

 

삽입

push

배열 가장 끝에 아이템 추가

const data = [1,2,3];
data.push("Hey")
console.log(data)

>>>
[1, 2, 3, "Hey"]

역시 자료형에 구애받지 않는다.

 

unshift

배열 첫 번째 자리에 요소 삽입

const arr = [1, 2]
arr.unshift(0);
console.log(arr);

>>>
[ 0, 1, 2 ]

---

삭제

pop

파이썬에도 있는 그 함수이다.

배열 가장 자리를 리턴하고,

해당 아이템은 배열에서 삭제된다.

 

const arr = [1, 2, "Hey"]
let data = arr.pop();
console.log(arr);
console.log(data);

>>>
[ 1, 2 ]
Hey //가장 뒤의 아이템을 반환

 

shift

앞으로 한 칸 씩 이동

이때 가장 앞의 아이템은 사라진다.

const arr = [1, 2, 3, 4, 5]
arr.shift()
console.log(arr);

>>>
[ 2, 3, 4, 5 ]

---

수정

concat

배열을 합친다.

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr = arr1.concat(arr2)
console.log(arr);

>>>
[ 1, 2, 3, 4, 5, 6 ]

 

reverse

const arr = [1, 2, 3, 4, 5]
arr.reverse()
console.log(arr)

>>>
[ 5, 4, 3, 2, 1 ]

 

---

기타

splice

특정 인덱스부터 삽입, 삭제, 수정

"splice(인덱스, 개수, (값) )"

 

- 삽입

const arr = [1,3];
arr.splice(1, 0, 2);
console.log(arr);

>>> [1, 2, 3]

- 삭제

const arr = [1,2,3];
arr.splice(1,1);
console.log(arr);

>>> [1, 3]
--------
const arr = [1,2,3];
arr.splice(1,2);
console.log(arr);

>>> [1]

- 수정

const arr = [1, 2, 3];
arr.splice(1, 1, '이');
console.log(arr);

>>> [1, '이', 3]

 

forEach

for문 대체, 간단하게 배열의 아이템을 가져온다.

const arr = [1, 2, 3]
arr.forEach(item => {
    console.log(item)
});

>>>
1
2
3

 

map

정의한 함수에 배열을 적용해서

새로운 배열 반환

const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1.map(item => item**2);
console.log(arr2)

>>>
[ 1, 4, 9, 16, 25 ]

function double(item) {
    return item **2
}
const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1.map(double);
console.log(arr2)

>>>
[ 1, 4, 9, 16, 25 ]

위와 같이 함수를 넣어주면 된다!

일괄적으로 아이템에 변경을 주고 싶을 때 많이 사용한다.

 

---

반환

 

- 객체

slice

파이썬의 슬라이싱과 동일개념

(시작,끝-1) 반환

const arr = [1, 2, 3, 4, 5]
console.log(arr.slice(0,2))

>>>
[ 1, 2 ]

 

find

지정 데이터가 들어있는 객체 자체를 반환한다.

const arr = [{type: "Fruits", name:"apple"},{type: "Vegetables", name:"onion"},]
console.log(arr.find(item => item.name === 'onion'))

>>>
{ type: 'Vegetables', name: 'onion' }

 

filter

조건에 참인 아이템을 모아서 배열로 반환

const arr = [1,2,3,4,5,6,7,8,9]
let even = arr.filter(item => item % 2 === 0)
console.log(even)

>>>
[ 2, 4, 6, 8 ]

 

join

파이썬에도 유사하게 있는 함수

"배열명.join('삽입문자열')"

(앞 뒤에 넣는 것이 다르다. (문자열).join(배열)  )

 

배열 아이템 사이에 문자열을 넣고,

모든 아이템을 하나의 문자열로 만들어준다.

const arr = [1, 2, 3, 4, 5]
str = arr.join('-')
console.log(str);

>>>
1-2-3-4-5

---

- 인덱스

indexOf & lastIndexOf

해당 데이터가 위치한 인덱스를 반환한다.

indexOf는 처음 등장한 index,

lastIndexOf는 마지막으로 등장한 index를 반환한다.

존재하지 않는 값일 경우 -1을 반환한다.

const arr = ['가','나','다','가'];
let result1 = arr.indexOf('가');
let result2 = arr.lastIndexOf('가');
console.log(result1);
console.log(result2);

>>> 0
>>> 3

 

findIndex

아이템이 객체일 경우,

객체에서 지정한 데이터의 인덱스를 반환한다.

const arr = [{type: "Fruits", name:"apple"},{type: "Vegetables", name:"onion"},]
console.log(arr.indexOf('onion'))
console.log(arr.findIndex(item => item.name === 'onion'))

>>>
-1 //없다는 뜻, 객체 안에 있기 때문에 못 찾음
1 //객체의 인덱스 반환

---

- boolean

includes

데이터 검색 기능을 하는 함수이다. 

boolean 값을 반환한다.

const arr = ['가','나','다'];
let result = arr.includes('가');
console.log(result);

>>> true