자바스크립트 기초문법7 - array에 대하여 -

1. 개요

 

참조 타입(reference type)에 해당하는 타입은 Array와 Object이며 객체라고도 말함

 

객체는 속성들의 모음이다.

 

 

2. 배열(array)

 

키와 속성들을 담고 있는 참조 타입의 객체

 

순서를 보장

 

주로 대괄호 []를 이용해 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능

 

배열의 길이는 array.length 형태로 접근

 

마지막 원소는 array.length-1로 접근

 

 

3. 배열의 메소드

 

 

 

3-1) array.reverse()

 

원본 배열 요소들의 순서를 반대로 정렬함

 

내림차순 정렬이 아니고, 그냥 뒤집는 것일 뿐

 

 

3-2) array.push()

 

배열의 가장 뒤에 요소를 추가함

 

3-3) array.pop()

 

배열의 마지막 요소를 제거함

 

근데 파이썬처럼 array.pop(2)하면 2번을 제거할줄 알았더니.. 

 

뭘 넣든지 그냥 마지막 원소를 제거하네

 

 

 

3-4) array.includes(value)

 

배열 array내에 특정 값 value가 존재하는지 판단하여 존재하면 true, 아니면 false를 반환

 

 

3-5) array.indexOf(value)

 

배열에 특정 값이 존재하는지 확인하고, 가장 첫번째로 찾은 요소의 인덱스를 반환함

 

없으면 -1을 반환

 

 

 

3-6) array.join([separator])

 

배열의 모든 요소를 연결하여 반환함

 

separator는 생략시 기본값으로 쉼표이며, 선택적으로 지정 가능함

 

 

 

4. array helper method

 

배열을 순회하면서 특정 로직을 수행하는 메소드들

 

메소드 호출 시에 인자로 콜백함수(callback)를 받는 것이 특징이다.

 

 

4-1) 콜백함수(callback)

 

어떤 함수의 내부에서 실행될 목적으로 인자로 넘기는 함수들

 

인자로 넘어가는 함수를 콜백함수라고 부르는듯?

 

 

 

4-2) forEach

 

array.forEach(callback(element,index,array)) => {}

 

인자로 주어지는 함수를 배열의 각 요소에 한번씩 실행함

 

콜백함수는 3가지 매개변수 element(배열의 요소), index(배열 요소의 인덱스), array(배열 자체)

 

반환값은 없다

 

근데 그냥 아주 심플하게... array.forEach(함수)를 쓰면 array의 각 요소에 (함수)를 적용시켜줌

 

 

근데 화살표함수로 나타내고 싶으면 저렇게 복잡?하게 써지는거지

 

printFunc를 그대로 넣어서..

 

colors.forEach( function (color) { console.log(color) } )

 

화살표함수로 바꾸기 위해 function 지우고

 

colors.forEach((color) => {console.log(color)})

 

매개변수 하나니까 () 지우고, 한줄이니까 return, {} 지워서

 

colors.forEach(color => console.log(color))

 

 

 

4-3) map

 

array.map(callback(element,index,array))

 

배열의 각 요소에 대해 콜백 함수를 한번씩 실행한다

 

근데 콜백 함수의 반환 값을 요소로 하는 새로운 배열을 반환해줌

 

forEach에다가 return으로 새로운 배열을 내주는 형태

 

기존 배열 전체를 다른 형태로 바꿀 때 유용하다

 

 

 

화살표 함수로 바꿔보면..?

 

함수 정의를 그대로 넣어서..

 

const doubleNumbers = numbers.map(function (number) { return number*2} )

 

function을 지우고, 매개변수는 하나니까 ()을 지우고, 한줄이니까 return이랑 {}을 지운다

 

const doubleNumbers = numbers.map(number => number*2)

 

 

 

4-4) filter

 

array.filter(callback(element, index, array))

 

배열의 각 요소에 대해 콜백 함수를 한번씩 실행한다

 

콜백 함수의 반환 값이 true인 요소들만 모아서 새로운 배열을 반환함

 

기존 배열의 요소들을 원하는 기준으로 필터링할 때 유용하다

 

 

 

함수 정의를 그대로 넘기고 화살표 함수로 바꿔본다면..?

 

함수 정의를 넘기고

 

const fruits = product.filter(function (product) { return product.type === 'fruit' ])

 

function을 지우고, ()을 지우고, {}, return을 지우고..

 

const fruits = product.filter(product => product.type === 'fruit')

 

 

4-5) reduce

 

array.reduce(callback(acc,element,index,array), initialValue)

 

acc는 이전 callback함수의 반환 값이 누적되는 변수? 이전단계까지의 누적값

 

initialValue는 최초 callback함수 호출 시 acc에 할당되는 값이고, default값은 배열의 첫번째 요소 값

 

그래서 빈 배열일 때, initialValue를 주지 않으면 에러남(첫번째 요소가 없으니까)

 

 

콜백함수를 배열의 각 요소에 대해 한번씩 실행하여, 최종적으로 하나의 결과 값을 반환시킨다

 

배열을 하나의 값으로 계산하는, 총합이나 평균 등을 계산할 때 유용하다

 

map, filter 등 여러 배열 메소드의 동작을 대부분 대체할 수 있다?

 

무슨말인지 모르겠지만 일단 써보면 느낌이 오겠지

 

 

화살표 함수로 바꾼다면? function을 지우고, 매개변수가 2개니까 ()는 못지우고..

 

return이랑 {}은 지우고

 

 

 

평균은 어떻게 구할까?? 전체합 sum을 tests의 길이로 나눠주면 된다

 

 

 

reduce에서 누적합이 어떻게 이루어지는가?

 

처음에 acc에 initialvalue인 0이 들어가고, num에 1을 읽으면, acc에 0+1=1이 저장

 

다음 num=2를 읽으면, 1+2=3이 acc에 저장

 

다음 num=3을 읽으면 3+3=6을 result에 반환

 

 

4-6) find

 

array.find(callback(element,index,array))

 

배열의 각 요소에 대해 콜백 함수를 한번씩 수행

 

콜백 함수의 반환 값이 true이면, 이를 만족하는 첫번째 요소를 찾아서 반환함

 

찾는 값이 배열에 없으면 undefined를 반환함

 

 

 

화살표 함수로 바꿔본다면..?

 

 

 

4-7) some

 

array.some(callback(element,index,array))

 

배열의 요소 중 하나라도 주어진 판별 함수를 통과한다면, true를 반환함

 

모든 요소가 통과하지 못하면 false를 반환

 

빈 배열은 항상 false

 

 

 

4-8) every

 

array.every(callback(element, index,array))

 

배열의 모든 요소가 주어진 판별함수를 통과하면, true를 반환함

 

하나의 요소라도 통과하지 못하면 false를 반환

 

빈 배열은 항상 true

 

 

 

5. 배열의 순회 비교

 

5-1) 단순 for문

 

모든 브라우저 환경에서 지원하고

 

인덱스를 활용하여 배열의 요소에 접근하는 방식

 

break, continue 사용 가능함

 

 

 

5-2) for of

 

일부 오래된 브라우저 환경에서 지원하지 않는다

 

인덱스 없이 배열의 요소에 바로 접근한다

 

break, continue 사용가능

 

 

 

5-3) forEach

 

대부분의 브라우저에서 지원

 

break, continue 사용 불가능함

 

Airbnb style guide의 권장방식

 

이건 enumerate잖아?