자바스크립트에서는 표준 내장 객체의 Array 객체를 지원하며 Array를 쉽게 다룰 수 있도록 메서드를 지원하고 있습니다.
mdn문서를 참고하여 지원하는 메서드 중에서도 자주 활용하는 메서드를 소개하겠습니다.
□ Array.isArray()
1. 구문
- Array.isArray(value)
2. 매개변수
- value는 배열인지 확인할 값입니다.
3. 반환값
- value가 Array이면 true, 그렇지 않으면 false를 반환합니다. Value가 TypedArray 인스턴스라면 항상 false가 반환됩니다.
4. 설명
- isArray() 메서드는 전달된 값이 Array 인지 확인합니다. 값의 프로토타입 체인을 확인하지 않으며, 값이 연결된 Array 생성자에도
의존하지 않습니다. 배열 리터럴 구문이나 Array 생성자를 사용하여 생성된 모든 값에 대해 true를 반환합니다.
□ Array.prototype.filter()
1. 구문
- filter(callbackFn)
2. 매개변수
- callbackFn은 배열의 각 요소에 대해 실행할 함수입니다. 결과 배열에 요소를 유지하려면 true값을 반환하고
그렇지 않으면 false 값을 반환해야 합니다.
3. 반환값
- 주어진 배열에서 테스트를 통과한 요소만 포함하는 해당 배열의 얕은 복사본 배열입니다. 테스트를 통과한 요소가 없으면
빈 배열이 반환됩니다.
4. 설명
- filter() 메서드는 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출하고, callbackFn이 true 값을 반환하는 모든 값으로
새 배열을 구성합니다. callbackFn 테스트를 통과하지 못한 배열 요소는 새 배열에 포함되지 않습니다.
□ Array.prototype.find()
1. 구문
- find(callbackFn)
2. 매개변수
- callbackFn은 배열의 각 요소에 대해 실행할 함수입니다. 일치하는 요소를 찾았으면 true 값을 반환하고, 그렇지 않으면 false 값을
반환해야 합니다.
3. 반환값
- 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소입니다. 테스트 함수를 만족하는 요소가 없으면, undefined가 반환됩니다.
4. 설명
- find() 메서드는 callbackFn이 Truthy한 값을 반환할 때까지, 오름차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 callbackFn 함수를
한 번씩 호출합니다. 그리고 find()는 해당 요소를 반환하고 배열 순회를 중지합니다. callbackFn이 Truthy한 값을 반환하지 않으면,
find()는 undefined를 반환합니다.
□ Array.prototype.findIndex()
1. 구문
- findIndex(callbackFn)
2. 매개변수
- callbackFn는 배열의 각 요소마다 실행할 함수입니다. 일치하는 요소가 발견되었음을 나타내는 Truthy한 값을 반환하고
그렇지 않으면 Falsy한 값을 반환해야합니다.
3. 반환값
- 테스트를 통과하는 첫 번째 요소의 인덱스입니다. 일치하는 요소가 없으면 -1을 반환합니다.
4. 설명
- findIndex() 메서드는 callbackFn 함수를 배열의 각 요소에 대해 오름차순 인덱스 순서로 한 번씩 호출하고, callbackFn이 Truthy한 값을
반환할 때까지 반복합니다. 그런 다음 findIndex()는 해당 요소의 인덱스를 반환하고 배열 반복을 중단합니다. callbackFn이 Truthy한 값을
반환하지 않으면 findIndex()는 -1을 반환합니다.
□ Array.prototype.forEach()
1. 구문
- forEach(callbackFn)
2. 매개변수
- callbackFn은 배열의 각 요소에 대해 실행할 함수입니다. 반환값은 사용되지 않습니다.
3. 반환값
- 없음 (undefined)
4. 설명
- forEach() 메서드는 배열의 각 요소에 대해 제공된 callbackFn 함수를 오름차순 인덱스 순서로 한 번씩 호출합니다. map()과 달리
forEach()는 항상 undefined를 반환하므로 체이닝할 수 없습니다.
□ Array.prototype.includes()
1. 구문
- includes(searchElement)
2. 매개변수
- searchElement는 배열에서 찾을 값입니다.
3. 반환값
- 배열 내에서 searchElement 값이 발견되면 true 값이 반환됩니다.
4. 설명
- includes() 메서드는 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 true 또는 false를 반환합니다.
□ Array.prototype.indexOf()
1. 구문
- indexOf(searchElement)
- indexOf(searchElement, fromIndex)
2. 매개변수
- searchElement는 배열에서 위치를 찾을 요소입니다.
- formIndex는 검색을 시작할 0 기반 인덱스입니다.
3. 반환값
- 배열에서 searchElement의 첫 번째 인덱스이고, 찾을 수 없으면 -1입니다.
4. 설명
- indexOf() 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫번째 인덱트를 반환하고, 찾을 수 없는 경우 -1을 반환합니다. NaN값은 절대
동일하게 비교되지 않으므로, searchElement가 NaN인 경우 indexOf()는 항상 -1을 반환합니다.
□ Array.prototype.join()
1. 구문
- join()
- join(separator)
2. 매개변수
- separator는 배열의 인접한 요소의 각 쌍을 구분하는 문자열입니다. 생략되면 배열 요소는 쉼표(",")로 구분됩니다.
3. 반환값
- 배열의 모든 요소들을 연결한 하나의 문자열을 반환합니다. 만약 arr.length 가 0이라면, 빈 문자열을 반환합니다.
4. 설명
- join() 메서드는 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환합니다. 배열에 항목이 하나만
있을 경우, 해당 항목은 구분 기호를 사용하지 않고 반환합니다. 또한 요소가 undefined, null인 경우, "null" 또는 "undefine" 문자열 대신
빈 문자열로 변환됩니다.
□ Array.prototype.map()
1. 구문
- map(callbackFn)
2. 매개변수
- callbackFn은 배열의 각 요소에 대해 실행할 함수입니다. 반환값은 새 배열에서 단일 요소로 추가됩니다.
3. 반환값
- 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열입니다.
4. 설명
- map() 메서드는 호출한 배열의 모든 요소에 주어진 함수를 호출한 결과로 채운 새로운 배열을 생성합니다. callback 함수는 호출될 때 대상
요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받습니다. callbackFn은 값이 할당된 배열 인덱스에서만
호출됩니다.
□ Array.prototype.reduce()
1. 구문
- arr.reduce(callback, initialValue])
2. 매개변수
callback은 배열의 각 요소에 대해 실행할 함수입니다. 그리고 다음 네 가지 인수를 받습니다.
- accumulator (누산기)는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서
initialValue를 제공한 경우에는 initialValue의 값입니다.
- currentValue는 처리할 현재 요소입니다.
- urrentIndex는 처리할 현재 요소의 인덱스입니다. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
- array는 reduce()를 호출한 배열입니다.
initialValue는 callback의 최초 호출에서 첫 번째 인수에 제공하는 값입니다. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다.
빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.
3. 반환값
- 누적 계산의 결과 값입니다.
4. 설명
- reduce() 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환합니다.
□ Array.prototype.reverse()
1. 구문
- a.reverse();
2. 매개변수
- 없음
3. 반환값
- 순서가 반전된 배열입니다.
4. 설명
- reverse 메서드는 호출한 배열을 반전하고 원본 배열을 변형하며 그 참조를 반환합니다.
□ Array.prototype.slice()
1. 구문
- arr.slice(begin, end)
2. 매개변수
- begin은 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다.
- end는 추출을 종료할 0 기준 인덱스입니다. slice는 end 인덱스를 제외하고 추출합니다.
3. 반환값
- 추출한 요소를 포함한 새로운 배열입니다.
4. 설명
- slice() 메서드는 어떤 배열의 begin부터 end(end 미포함)에 대한 원본배열은 바뀌지 않고 얕은 복사본을 새로운 배열 객체로 반환합니다.
□ Array.prototype.some()
1. 구문
- some((element) => { /* … */ })
2. 매개변수
- callbackFn는 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 요소가 시험을 통과하면 Truthy한 값을 반환하며, 그렇지 않으면 false를
반환합니다.
3. 반환값
- 콜백 함수가 적어도 배열 중 하나의 요소에 대해 true를 반환하면 true를 반환하며, 그렇지 않으면 false를 반환합니다.
4. 설명
- some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트합니다. 배열에서 주어진 함수가 true를
반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.
□ Array.prototype.sort()
1. 구문
- arr.sort(compareFunction);
2. 매개변수
- compareFunction은 정렬 순서를 정의하는 함수입니다. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트
값에 따라 정렬됩니다.
3. 반환값
- 원본 배열을 정렬한 배열입니다.
4. 설명
- sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.
□ Array.prototype.splice()
1. 구문
- array.splice(start, deleteCount, item1, item2, item3 …)
2. 매개변수
- start는 배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의
끝에서부터 요소를 세어나갑니다.
- deleteCount는 배열에서 제거할 요소의 수입니다. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든
요소를 제거합니다.
- item1, item2, item3… 는 배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.
3. 반환값
- 제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.
4. 설명
- spice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
※ 설명 영역의 예제 코드는 첨부파일에서 참조.
※ 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
⭐발표자 : 이예은님
자바스크립트에서는 표준 내장 객체의 Array 객체를 지원하며 Array를 쉽게 다룰 수 있도록 메서드를 지원하고 있습니다.
mdn문서를 참고하여 지원하는 메서드 중에서도 자주 활용하는 메서드를 소개하겠습니다.
□ Array.isArray()
1. 구문
- Array.isArray(value)
2. 매개변수
- value는 배열인지 확인할 값입니다.
3. 반환값
- value가 Array이면 true, 그렇지 않으면 false를 반환합니다. Value가 TypedArray 인스턴스라면 항상 false가 반환됩니다.
4. 설명
- isArray() 메서드는 전달된 값이 Array 인지 확인합니다. 값의 프로토타입 체인을 확인하지 않으며, 값이 연결된 Array 생성자에도
의존하지 않습니다. 배열 리터럴 구문이나 Array 생성자를 사용하여 생성된 모든 값에 대해 true를 반환합니다.
□ Array.prototype.filter()
1. 구문
- filter(callbackFn)
2. 매개변수
- callbackFn은 배열의 각 요소에 대해 실행할 함수입니다. 결과 배열에 요소를 유지하려면 true값을 반환하고
그렇지 않으면 false 값을 반환해야 합니다.
3. 반환값
- 주어진 배열에서 테스트를 통과한 요소만 포함하는 해당 배열의 얕은 복사본 배열입니다. 테스트를 통과한 요소가 없으면
빈 배열이 반환됩니다.
4. 설명
- filter() 메서드는 배열의 각 요소에 대해 제공된 callbackFn 함수를 한 번씩 호출하고, callbackFn이 true 값을 반환하는 모든 값으로
새 배열을 구성합니다. callbackFn 테스트를 통과하지 못한 배열 요소는 새 배열에 포함되지 않습니다.
□ Array.prototype.find()
1. 구문
- find(callbackFn)
2. 매개변수
- callbackFn은 배열의 각 요소에 대해 실행할 함수입니다. 일치하는 요소를 찾았으면 true 값을 반환하고, 그렇지 않으면 false 값을
반환해야 합니다.
3. 반환값
- 제공된 테스트 함수를 만족하는 배열의 첫 번째 요소입니다. 테스트 함수를 만족하는 요소가 없으면, undefined가 반환됩니다.
4. 설명
- find() 메서드는 callbackFn이 Truthy한 값을 반환할 때까지, 오름차순 인덱스로 순서로 배열의 각 요소에 대해 제공된 callbackFn 함수를
한 번씩 호출합니다. 그리고 find()는 해당 요소를 반환하고 배열 순회를 중지합니다. callbackFn이 Truthy한 값을 반환하지 않으면,
find()는 undefined를 반환합니다.
□ Array.prototype.findIndex()
1. 구문
- findIndex(callbackFn)
2. 매개변수
- callbackFn는 배열의 각 요소마다 실행할 함수입니다. 일치하는 요소가 발견되었음을 나타내는 Truthy한 값을 반환하고
그렇지 않으면 Falsy한 값을 반환해야합니다.
3. 반환값
- 테스트를 통과하는 첫 번째 요소의 인덱스입니다. 일치하는 요소가 없으면 -1을 반환합니다.
4. 설명
- findIndex() 메서드는 callbackFn 함수를 배열의 각 요소에 대해 오름차순 인덱스 순서로 한 번씩 호출하고, callbackFn이 Truthy한 값을
반환할 때까지 반복합니다. 그런 다음 findIndex()는 해당 요소의 인덱스를 반환하고 배열 반복을 중단합니다. callbackFn이 Truthy한 값을
반환하지 않으면 findIndex()는 -1을 반환합니다.
□ Array.prototype.forEach()
1. 구문
- forEach(callbackFn)
2. 매개변수
- callbackFn은 배열의 각 요소에 대해 실행할 함수입니다. 반환값은 사용되지 않습니다.
3. 반환값
- 없음 (undefined)
4. 설명
- forEach() 메서드는 배열의 각 요소에 대해 제공된 callbackFn 함수를 오름차순 인덱스 순서로 한 번씩 호출합니다. map()과 달리
forEach()는 항상 undefined를 반환하므로 체이닝할 수 없습니다.
□ Array.prototype.includes()
1. 구문
- includes(searchElement)
2. 매개변수
- searchElement는 배열에서 찾을 값입니다.
3. 반환값
- 배열 내에서 searchElement 값이 발견되면 true 값이 반환됩니다.
4. 설명
- includes() 메서드는 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 true 또는 false를 반환합니다.
□ Array.prototype.indexOf()
1. 구문
- indexOf(searchElement)
- indexOf(searchElement, fromIndex)
2. 매개변수
- searchElement는 배열에서 위치를 찾을 요소입니다.
- formIndex는 검색을 시작할 0 기반 인덱스입니다.
3. 반환값
- 배열에서 searchElement의 첫 번째 인덱스이고, 찾을 수 없으면 -1입니다.
4. 설명
- indexOf() 메서드는 배열에서 주어진 요소를 찾을 수 있는 첫번째 인덱트를 반환하고, 찾을 수 없는 경우 -1을 반환합니다. NaN값은 절대
동일하게 비교되지 않으므로, searchElement가 NaN인 경우 indexOf()는 항상 -1을 반환합니다.
□ Array.prototype.join()
1. 구문
- join()
- join(separator)
2. 매개변수
- separator는 배열의 인접한 요소의 각 쌍을 구분하는 문자열입니다. 생략되면 배열 요소는 쉼표(",")로 구분됩니다.
3. 반환값
- 배열의 모든 요소들을 연결한 하나의 문자열을 반환합니다. 만약 arr.length 가 0이라면, 빈 문자열을 반환합니다.
4. 설명
- join() 메서드는 배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결한 새 문자열을 만들어 반환합니다. 배열에 항목이 하나만
있을 경우, 해당 항목은 구분 기호를 사용하지 않고 반환합니다. 또한 요소가 undefined, null인 경우, "null" 또는 "undefine" 문자열 대신
빈 문자열로 변환됩니다.
□ Array.prototype.map()
1. 구문
- map(callbackFn)
2. 매개변수
- callbackFn은 배열의 각 요소에 대해 실행할 함수입니다. 반환값은 새 배열에서 단일 요소로 추가됩니다.
3. 반환값
- 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열입니다.
4. 설명
- map() 메서드는 호출한 배열의 모든 요소에 주어진 함수를 호출한 결과로 채운 새로운 배열을 생성합니다. callback 함수는 호출될 때 대상
요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받습니다. callbackFn은 값이 할당된 배열 인덱스에서만
호출됩니다.
□ Array.prototype.reduce()
1. 구문
- arr.reduce(callback, initialValue])
2. 매개변수
callback은 배열의 각 요소에 대해 실행할 함수입니다. 그리고 다음 네 가지 인수를 받습니다.
- accumulator (누산기)는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서
initialValue를 제공한 경우에는 initialValue의 값입니다.
- currentValue는 처리할 현재 요소입니다.
- urrentIndex는 처리할 현재 요소의 인덱스입니다. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.
- array는 reduce()를 호출한 배열입니다.
initialValue는 callback의 최초 호출에서 첫 번째 인수에 제공하는 값입니다. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다.
빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.
3. 반환값
- 누적 계산의 결과 값입니다.
4. 설명
- reduce() 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환합니다.
□ Array.prototype.reverse()
1. 구문
- a.reverse();
2. 매개변수
- 없음
3. 반환값
- 순서가 반전된 배열입니다.
4. 설명
- reverse 메서드는 호출한 배열을 반전하고 원본 배열을 변형하며 그 참조를 반환합니다.
□ Array.prototype.slice()
1. 구문
- arr.slice(begin, end)
2. 매개변수
- begin은 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. 음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다.
- end는 추출을 종료할 0 기준 인덱스입니다. slice는 end 인덱스를 제외하고 추출합니다.
3. 반환값
- 추출한 요소를 포함한 새로운 배열입니다.
4. 설명
- slice() 메서드는 어떤 배열의 begin부터 end(end 미포함)에 대한 원본배열은 바뀌지 않고 얕은 복사본을 새로운 배열 객체로 반환합니다.
□ Array.prototype.some()
1. 구문
- some((element) => { /* … */ })
2. 매개변수
- callbackFn는 배열의 각 요소에 대해 실행할 함수입니다. 이 함수는 요소가 시험을 통과하면 Truthy한 값을 반환하며, 그렇지 않으면 false를
반환합니다.
3. 반환값
- 콜백 함수가 적어도 배열 중 하나의 요소에 대해 true를 반환하면 true를 반환하며, 그렇지 않으면 false를 반환합니다.
4. 설명
- some() 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하는지 테스트합니다. 배열에서 주어진 함수가 true를
반환하면 true를 반환합니다. 그렇지 않으면 false를 반환합니다.
□ Array.prototype.sort()
1. 구문
- arr.sort(compareFunction);
2. 매개변수
- compareFunction은 정렬 순서를 정의하는 함수입니다. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트
값에 따라 정렬됩니다.
3. 반환값
- 원본 배열을 정렬한 배열입니다.
4. 설명
- sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.
□ Array.prototype.splice()
1. 구문
- array.splice(start, deleteCount, item1, item2, item3 …)
2. 매개변수
- start는 배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의
끝에서부터 요소를 세어나갑니다.
- deleteCount는 배열에서 제거할 요소의 수입니다. deleteCount를 생략하거나 값이 array.length - start보다 크면 start부터의 모든
요소를 제거합니다.
- item1, item2, item3… 는 배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 합니다.
3. 반환값
- 제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환합니다. 아무 값도 제거하지 않았으면 빈 배열을 반환합니다.
4. 설명
- spice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
※ 설명 영역의 예제 코드는 첨부파일에서 참조.
※ 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
⭐발표자 : 이예은님