항해 99 - JavaScript 배열

벌써 어려운 것 같다... python 이랑 헷갈리는 문법이 너무 많아!!!

기본적인 생성방법과 인덱싱은 제외하고 메소드와 콜백함수에 대해서만 정리한다.

 

자료 처리할 때 비파괴적 처리인지 파괴적 처리인지 딱히 구분해서 사용하지 않고 자연스럽게 익혔던 것 같은데 책에서 언급된 내용이므로 조금씩 신경써야겠다.

 

비파괴적 처리 -> 처리 후에 원본 내용의 변경X

파괴적 처리 -> 처리 후에 원본 내용이 변경O

---

1. 배열 메소드

1-1. 배열 요소 추가하기

[ 배열.push(요소) ]

push는 가장 마지막에 해당 요소를 추가해준다. (파괴적 처리)

push할 때 추가된 배열의 길이를 반환하고 추가한다.

 

[ 배열.unshift(요소) ]

unshift는 배열 가장 앞에 요소를 추가한다. (파괴적 처리)

추가된 배열의 길이를 반환하고 추가한다.

 

[ 배열.splice(인덱스, 0, 요소) ]

splice를 이용하여 요소 제거를 할 수 있는데 그건 바로 뒤에서 설명하는걸로 한다.

맨 앞과 맨 뒤가 아닌 특정한 위치에 요소를 추가하고 싶을 때 사용한다. (파괴적 처리)

 

1-2. 배열 요소 삭제하기

[ 배열.pop() ]

pop은 마지막 요소를 삭제한다. (파괴적 처리)

python과 마찬가지로 pop 하면서 마지막 원소를 꺼내주고 삭제한다.

 

[ 배열.shift() ]

shift는 unshift와 반대로 첫 번째 요소를 삭제한다. (파괴적 처리)

pop과 마찬가지로 첫 번째 요소를 꺼내주고 삭제한다.

 

[ 배열.splice(인덱스, 제거할 요소의 개수) ]

인덱스부터 몇 개의 요소를 제거할 것인지 입력한다. (파괴적 처리)

삭제하는 요소들 반환 후 제거한다.

 

[ 배열.indexof(요소) 사용 ]

배열의 인덱스가 아닌 특정한 값을 삭제하고 싶다면 특정값의 위치를 반환하는 indexof()와 splice()를 함께 사용한다.

indexof()는 해당 요소의 첫 번째 위치만 반환하기 때문에 모든 요소를 제거하고 싶다면 filter() 메소드 사용을 권장

(비파괴적 처리)

 

1-3. 배열 Slicing

[ 배열.slice(시작인덱스, 끝인덱스+1) ]

python에서 [:]가 아닌 slice 메소드를 사용한다는 차이점만 있음 (비파괴적 처리)

 

---

2. 콜백 함수(Call-Back)

매개변수 자리에 콜백 함수를 넣는 메소드를 살펴보자.

함수 형태를 그대로 넣어도 되지만 화살표 함수를 활용해도 된다.

간단한 예시이므로 나는 화살표 함수를 사용했다.

 

2-1. forEach

가장 for문이랑 비슷한 메소드이다. return을 쓰지 않으며 사용한다고 하더라도 undefined를 반환. (비파괴적 처리)

 

2-2. map

return을 사용하여 기존의 배열을 가공해 새로운 배열을 생산한다. (비파괴적 처리)

항상 원본 배열의 길이 만큼 return이 되며, forEach와 다르게 return을 쓰지 않으면 undefined로 출력

 

2-3. filter

return 의 반환값에 조건을 넣는다. (비파괴적 처리)

조건에 해당하는 값만 반환되어, 원본 배열과 길이가 다를 수 있다.

 

2-4. find

filter()와 indexof()가 합쳐진 함수이다. (비파괴적 처리)

return에 요소의 조건을 쓰면 그 조건을 만족하는 가장 처음 요소의 위치가 반환된다.

조건에 만족하는 요소가 많더라도 정수로만 반환