2-1. 배열이란?2-2. 배열의 특징2-2-1. 요소 값의 호출, 변경 및 타입 확인값의 호출 값의 변경 값의 타입 확인2-2-2. 프로퍼티 length2-3. 메소드2-3-1. 맨 앞에서 요소를 추가할 때에는 unshift()2-3-2. 맨 앞에서 요소를 지울 때에는 shift()2-3-3. 맨 뒤에서 요소를 추가할 때에는 push()2-3-4. 맨 뒤에서 요소를 제거할 때에는 pop()2-3-5. 특정한 인덱스에 요소를 위치시킬 때에는 splice()2-3-6. 특정 요소를 제거할 때에도 splice()2-3-7. 배열 일부분을 잘라내서 새로운 배열로 반환할 때에는 slice()2-3-8. 순서를 거꾸로 뒤집고 싶다면 reverse()2-3-9. 요소의 인덱스를 찾고 싶을 때에는 indexOf()2-3-10. 인자가 배열인지 확인하고 싶을 때에는 isArray()2-3-11. 요소들을 연결해 하나의 값으로 만들 때에는 join()2-3-12. 모두 똑같은 요소로 채우고 싶다면 fill()2-3-13. 배열을 원하는 깊이로 평탄화하고 싶다면 flat()2-3-14. 특정 요소가 포함되었는지 확인할 때에는 includes()2-3-15. 하나의 요소라도 조건을 만족하는지 확인할 때에는 find()2-3-16. 모든 요소가 조건을 만족하는지 확인할 때에는 filter()2-3-17. 조건을 만족하는 첫 번째 인덱스를 찾을 때 findIndex()2-3-18. 각각 요소에 함수를 호출할 때에는 map()2-3-19. 함수를 실행하는 동시에 배열을 평탄화할 때에는 flatMap()2-3-20. 각각의 요소를 실행하고 싶을 때에는 forEach()2-3-21. 각 요소에 누적해주며 실행하고 싶을 때에는 reduce()2-3-22. 유사 배열 객체를 배열로 만들 때에는 Array.from()2-3-23. 배열을 합치거나 새로운 요소를 추가할 때에는 concat()2-3-24. 배열 내 요소를 정렬할 때에는 sort()2-3-25. 1개 이상의 요소가 조건에 맞는지 찾을 때에는 some()2-3-26. 모든 요소가 조건에 맞는지 찾을 때에는 every()Reference
2-1. 배열이란?
배열은 대괄호를 이용해 여러 개의 값을 리스트 형태로 나열한 자료구조를 뜻하며 ‘인덱스로 참조되는 요소’라는 값의 집합이다. 여기서 배열의 요소(element)는 배열을 구성하는 각각의 값이고 배열에서 요소의 위치를 가리키는 숫자를 인덱스(index)라고 한다. 이 배열을 다루기 위해 다수의 메소드가 제공되는데 이를 이용해 효율적으로 값에 접근할 수 있다.
아래의 예시처럼 배열의 요소에는 여러가지의 자료형이 들어갈 수 있다는 특징이 있다.
const example = [ 1114, "cafe", false, function cafe(){}, null, undefined, NaN ]
2-2. 배열의 특징
배열의 중요한 특징은 세 가지로 아래와 같다.
- 요소의 값을 수정할 수 있고 인덱스로 요소의 값을 호출 할 수 있다.
- JavaScript의 배열은 배열 타입으로 존재하지 않고 객체 타입으로 존재한다. 따라서 자료구조에 나오는 엄밀한 의미인 ‘메모리 상의 연속 배치의 배열’이 아니다.
- 값의 참조가 인덱스로 이루어진다. 이는 일반적인 객체와의 가장 큰 차이인데, 인덱스와 length 프로퍼티가 존재한다. 뒤의 length 프로퍼티에서 자세히 알아보자.
2-2-1. 요소 값의 호출, 변경 및 타입 확인
값의 호출
const cafe = ['coffee', 'cake', 'tea', 'cookie'] console.log(cafe[0]) //expected output: coffee console.table(cafe)
값의 변경
const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe[0] = 'tea' console.log(cafe) //expected output: ['tea', 'cake', 'tea', 'cookie']
값의 타입 확인
const cafe = ['coffee', 'cake', 'tea', 'cookie'] typeof cafe typeof(cafe) // expected output: 'object'
2-2-2. 프로퍼티 length
프로퍼티는 단순한 속성값을 출력하고 메소드는 배열에 속한 기능 단위를 일컫는다.
console.dir(변수명) 으로 배열의 프로퍼티와 메서드를 출력할 수 있다.const cafe = [ 'coffee', 'cake' ] console.dir(cafe)
요소의 갯수를 구하고 싶을 때에는
length 프로퍼티를 이용한다. 이는 일반적인 객체에는 없는 프로퍼티이다.const cafe = [ 'coffee', 'cake' ] cafe.length // expected output: 2
length는 자동갱신 되지만 임의로 수정이 가능하며 0부터 2의 32승의 -1한 값까지 가질 수 있다. 이미 2라는 값을 가지는 cafe.length를 수정하면 아래와 같이 빈 상태의 배열이 만들어진다. 빈 요소에 메모리 공간을 할당하지 않으므로 메모리 공간을 낭비하지 않는 명시적인 빈 배열을 만들 수 있다. 기존 배열보다 작은 값을 입력할 경우 배열의 길이가 줄어들게 된다. 요소는 앞과 뒤, 중간이 빌 수 있으며 이러한 배열을 희소 배열이라고 한다. 배열.length 보다 작은 요소의 개수를 가질 수 있다.
let arr = [1, , , , 10]
희소 배열은 위와 같이 콤마를 사용해 값을 입력하지 않고 만들 수도 있다.for (let a = 0; a < cafe.length; a++) { console.log(cafe[a]); }
for문을 이용한 순차적인 출력이 가능하다. 일반 객체로 순회하였을 경우보다 2배정도 빠르다. 이를 통해 배열이 단순 객체에 순서만 있는 것으로 오해를 하면 안된다.
2-3. 메소드
앞서 말했듯이 프로퍼티는 값, 메소드는 기능단위를 말하는데
console.dir(변수명) 으로 출력해보면 모든 메소드들이 뜨는 것을 확인할 수 있고 각각의 메소 이름 뒤에 f 라고 표시된 것을 확인할 수 있다. 
메소드는 자료형에 포함된 함수이다. 하지만 전역 함수와 구분하기 위해 함수라고 말하지 않고 (빌트인) 메소드라고 일컫는다. 메소드는 원본 배열을 수정하는 메소드와 원본 배열을 수정하지 않는 배열이 있기 때문에 구분해서 사용해야 한다.
MDN 문서를 검색할 시에는 아래 내용을 구분해서 볼 필요가 있다.
Array.메소드: Array.메소드 형태로 사용, 여기서 ‘Array’는 문자 그대로 Array
Array.prototype.메소드: 배열.메소드 형태로 사용, 여기서 ‘배열’은 정의된 배열, 예를 들어 [1, 2, 3].pop();
2-3-1. 맨 앞에서 요소를 추가할 때에는 unshift()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] const count = cafe.unshift('bread'); count // expected output: 5 cafe // expected output: ['bread', 'coffee', 'cake', 'tea', 'cookie']
Array.prototype.unshift() 메소드는 배열의 맨 앞에 1개 이상의 요소를 추가하고, 배열의 새로운 길이를 반환할 수 있다.2-3-2. 맨 앞에서 요소를 지울 때에는 shift()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] const firstElement = cafe.shift(); firstElement // expected output: 'coffee' cafe // expected output: ['cake', 'tea', 'cookie']
Array.prototype.shift() 메소드는 배열 내에서 0번째 인덱스에 오는 첫 번째 요소를 제거해 나머지 값의 위치를 한 칸씩 앞으로 오게끔 만든다. 매개변수가 없으며 제거된 첫 번째 요소를 반환할 수 있다는 특징이 있다. 빈 배열에서 사용하거나 배열의 length가 0일 경우 undefined를 반환한다.2-3-3. 맨 뒤에서 요소를 추가할 때에는 push()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] const count = cafe.push('bread') count // expected output: 5 cafe //expected output: ['coffee', 'cake', 'tea', 'cookie', 'bread']
Array.prototype.push() 메소드는 배열의 맨 끝에 1개 이상의 요소를 추가하고, 배열의 새로운 길이를 반환할 수 있다.2-3-4. 맨 뒤에서 요소를 제거할 때에는 pop()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.pop() //expected output: 'cookie' cafe //expected output: ['coffee', 'cake', 'tea']
Array.prototype.pop() 메소드는 배열 내에 존재하는 요소의 맨 마지막 요소를 제거하고 해당 요소를 호출자에게 반환한다. 빈 배열에서 사용할 경우 undefined를 반환한다.2-3-5. 특정한 인덱스에 요소를 위치시킬 때에는 splice()
Array.prototype.splice() 메소드는 배열 내에 새로운 요소의 추가가 가능하며 원하는 인덱스에 위치가 가능하다. 또한 기존에 존재하는 요소를 삭제하거나 변경할 수 있다.배열.splice(요소를 위치시키고자 하는 인덱스, 제거할 요소의 개수, 배열에 추가할 요소)
첫 번째 매개변수에는 넣고 싶은 요소를 위치 시키고자 하는 인덱스를 입력한다. 배열의 길이보다 큰 값을 입력할 시, 실제 시작 인덱스는 배열의 길이로 설정되며 맨 마지막 인덱스를 지정한 것으로 간주한다. 음수를 입력할 시, 배열의 끝에서 부터 요소를 세기 때문에
-2을 입력하면 끝에서 두 번째에 위치한 인덱스를 지정한 것과 같다.두 번째 매개변수에는 첫 번째 매개변수의 인덱스로부터 제거할 요소의 개수를 정할 수 있다. 아무 것도 지우고 싶지 않을 경우
0 이하의 숫자를 입력한다.세 번째 매개변수에는 입력하고자 하는 요소를 추가한다.
const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.splice(1, 0, 'bread') cafe //expected output: ['coffee', 'bread', 'cake', 'tea', 'cookie'] const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.splice(-1, 2, 'bread') cafe //expected output: ['coffee', 'cake', 'tea', 'bread']
2-3-6. 특정 요소를 제거할 때에도 splice()
배열.splice(요소를 위치시키고자 하는 인덱스, 제거할 요소의 개수)
위의
Array.prototype.splice() 메소드이며 각 매개변수가 동일한 역할을 한다. 주로 배열 내에 존재하는 기존 요소를 제거만 하고자 할 때에 해당 메소드의 세 번째 매개변수를 생략한 상태에서 사용한다.const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.splice(1, 2) cafe //expected output: ['coffee', 'cookie']
2-3-7. 배열 일부분을 잘라내서 새로운 배열로 반환할 때에는 slice()
Array.prototype.slice()메소드는 원본을 변경하는 메소드가 아니며, 원본 배열 요소의 얕은 복사본을 반환한다.const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.slice(1, 3); //expected output: ['cake', 'tea'] cafe.slice(2); //expected output: ['tea', 'cookie'] cafe.slice(-2, -1); //expected output: ['tea'] cafe.slice(0, -2); //expected output: ['coffee', 'cake']
첫 번째 매개변수는 잘라낼 배열의 시작점의 인덱스를 의미한다.
음수를 입력할 때에는 배열의 끝에서부터 세기 시작한다. const cafe 예시에서
cafe.slice(-2); 를 입력할 경우, 맨 뒤에 있는 마지막 두 개의 요소를 추출하기 때문에 ['tea', 'cookie'] 를 출력할 것이다.첫 번째 매개변수가
undefined인 경우에는 0번 인덱스부터 Array.prototype.slice() 메소드가 사용된다. 첫 번째 매개변수가 해당 배열 길이보다 큰 경우, 빈 배열을 반환한다.두 번째 매개변수는 잘라낼 배열의 종료지점 인덱스이며, 잘라낼 배열에 포함되지 않는다. const cafe 예시에서
cafe.slice(1, 3) 를 입력할 경우, 첫 번째에서 세 번째 요소까지 출력되는 것이 아닌 첫 번째에서 두 번째 요소까지만 출력되는 것을 확인할 수 있다.두 번째 매개변수에 음수를 입력할 경우, 배열의 끝에서 부터 세기 시작한다. const cafe 예시에서
cafe.slice(0, -2); 를 입력할 경우, 0번째 인덱스부터 끝에서 두 번째에 있는 인덱스까지 세기 시작하므로 끝에서 두 번째에 위치한 인덱스의 요소가 미포함된 ['coffee', 'cake'] 가 출력되는 것을 확인할 수 있다.두 번째 매개변수는 생략이 가능하며 생략할 시
Array.prototype.slice() 메소드는 첫 번째 매개변수부터 배열의 마지막 요소까지 추출하는 것을 확인할 수 있다.2-3-8. 순서를 거꾸로 뒤집고 싶다면 reverse()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.reverse() //expected output: ['cookie', 'tea', 'cake', 'coffee']
Array.prototype.reverse() 메소드는 배열 내 요소의 순서를 거꾸로 뒤집고 마지막 위치에 있는 인덱스의 요소가 0번째 위치에 오게 된다. 해당 메소드는 원본 배열을 변형시키고 그 참조를 반환한다는 특징이 있다.2-3-9. 요소의 인덱스를 찾고 싶을 때에는 indexOf()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.indexOf('tea') //expected output: 2 cafe.indexOf('coffe', 1) //expected output: -1 cafe.indexOf('bread') //expected output: -1
Array.prototype.indexOf() 메소드는 배열에서 지정한 요소를 찾아 해당 요소의 인덱스를 탐색한다. 배열에 존재하지 않는 요소를 찾거나 해당 인덱스에서 지정된 요소가 탐색되지 않을 시 -1을 출력한다.첫 번째 매개변수에는 탐색하고자 하는 요소를 입력한다.
두 번째 매개변수에는 탐색을 시작하고자 하는 인덱스를 입력하며 두 번째 매개변수는 생략할 수 있다.
2-3-10. 인자가 배열인지 확인하고 싶을 때에는 isArray()
Array.isArray('coffee'); //expected output: false Array.isArray(false); //expected output: false Array.isArray([1]); //expected output: true
Array.isArray() 메소드는 입력받은 매개변수가 배열인지 아닌지 여부를 판별해 boolean 값으로 출력한다. 배열이라면 true를, 배열이 아닐 시 false를 출력한다.2-3-11. 요소들을 연결해 하나의 값으로 만들 때에는 join()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.join('/') //expected output: 'coffee/cake/tea/cookie' cafe.join('') //expected output: 'coffeecaketeacookie' const example = ['coffee', null, undefined, 'cake'] example.join('') //expected output: 'coffeecake'
Array.prototype.join() 메소드는 배열 내 원소들을 연결해 하나의 값으로 만들며, 그 값의 자료형은 문자열이다. 매개변수를 생략하면 쉼표로 구분되며, 빈 문자열을 넣을 시 띄어쓰기 없이 연결된다. 요소가 null 또는 undefined 일 경우 빈 문자열로 반환된다.2-3-12. 모두 똑같은 요소로 채우고 싶다면 fill()
Array.prototype.fill() 메소드는 배열 내 원하는 요소를 같은 값으로 채울 수 있다. 해당 메소드는 원본을 변경하는 메소드로, 복사본이 아닌 this 객체로 변경해 반환한다는 특징이 있다.const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.fill('bread') //expected output: ['bread', 'bread', 'bread', 'bread']
위와 같이 첫 번째 매개변수에는 배열 내에 채우고자 하는 값을 입력한다. 첫 번째 매개변수만 입력할 경우, 배열 내 모든 요소가 해당 매개변수의 값으로 변경된다.
두 번째 매개변수에는 배열 내에 첫 번째 매개변수에 입력한 값을 채우기 시작할 지점의 인덱스를 입력한다. 생략이 가능하며 입력하지 않을 시 기본값은
0이다.const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.fill('bread', -1) //expected output: ['coffee', 'cake', 'tea', 'bread']
음수를 입력할 경우, 배열 내 마지막 원소의 인덱스가
-1이 되며 마지막부터 세기 시작한다. 위의 const cafe 예시에서 cafe.fill('bread', -1)을 입력할 경우, 맨 뒤에서 마지막 한 개의 요소만 변경하기 때문에 ['coffee', 'cake', 'tea', 'bread'] 가 출력되며 맨 마지막 요소만 'bread' 로 변경된 것을 확인할 수 있다.세 번째 매개변수에는 배열 내에 첫 번째 매개변수에 입력한 값을 어디까지 입력할지 종료지점을 정하는 인덱스이다. 생략이 가능하며 입력하지 않을 시 예시에서 기본값이
cafe.length 로 반환되는 것을 확인 가능하다.const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.fill('bread', -3, -1) //expected output: ['coffee', 'bread', 'bread', 'cookie']
음수를 입력할 경우, 두 번째 매개변수의 경우와 마찬가지로 마지막 원소의 인덱스가
-1이 되며 마지막부터 세기 시작한다. const cafe 예시에서 cafe.fill('bread', -3, -1) 를 입력할 경우 뒤에서 세 번째 인덱스부터 뒤에서 첫번째 인덱스까지 변경하기 때문에 ['coffee', 'bread', 'bread', 'cookie'] 가 출력되며 두 번째, 세 번째 요소가 'bread'로 변경된 것을 확인할 수 있다.2-3-13. 배열을 원하는 깊이로 평탄화하고 싶다면 flat()
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, [9, [10, 11]]]] arr.flat(); //expected output: [1, 2, 3, 4, 5, 6, 7, 8, [9, [10, 11]]] arr.flat(1); //expected output: [1, 2, 3, 4, 5, 6, 7, 8, [9, [10, 11]]] arr.flat(2); //expected output: [1, 2, 3, 4, 5, 6, 7, 8, 9, [10, 11]] arr.flat(3); //expected output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] arr.flat(Infinity); //expected output: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
Array.prototype.flat() 메소드는 배열 구조 내에 또 다른 배열 요소를 지정한 깊이까지 이어 붙인 새로운 배열을 생성한다. 기본값은 1이며 괄호 안에 들어간 숫자 만큼의 차원을 평탄화해주는 메소드이다. 매개변수에 infinity를 넣고 사용하면 하위배열이 없을 때 까지 평탄화가 이뤄진다. 빈 요소가 있을 경우 무시된다.2-3-14. 특정 요소가 포함되었는지 확인할 때에는 includes()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] cafe.includes('bread'); //expected output: false cafe.includes('cake'); //expected output: true cafe.includes('cake', -3); //expected output: true
Array.prototype.includes() 메소드는 배열이 특정 값이 포함되어있는지 확인할 수 있다. 탐색하려는 요소가 문자열일 경우에는 대소문자를 구분한다.첫 번째 매개변수에는 탐색하고자 하는 요소를 입력한다.
두 번째 매개변수에는 탐색을 시작하고자 하는 인덱스를 입력한다. 생략이 가능하며, 값이 없는 경우에는 전체 요소를 대상으로 탐색한다.
음수를 입력할 경우, 맨 뒤에 있는 인덱스를
-1으로 간주해 뒤에서부터 세기 시작한다. 배열의 길이보다 같거나 큰 수를 입력한 경우, false를 반환하며 배열을 탐색하지 않는다.2-3-15. 하나의 요소라도 조건을 만족하는지 확인할 때에는 find()
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.find(i => i > 5); //expected output: 6
Array.prototype.find() 메소드는 배열에서 특정 조건에 부합하는 1개의 값을 찾아 반환한다. Array.prototype.filter() 메소드와 문법이 유사하지만, 단 하나의 요소 만을 찾는다는 점이 다르며 하나의 값만 찾기 때문에 Array.prototype.filter() 보다 성능이 우수하다. 어떤 요소도 특정 조건에 부합하지 못하면 undefined를 반환한다. 2-3-16. 모든 요소가 조건을 만족하는지 확인할 때에는 filter()
const arr = [{ 'name' : 'title1', 'contents' : 'contents1', 'dataNum' : 1 }, { 'name' : 'title2', 'contents' : 'contents2', 'dataNum' : 2 }, { 'name' : 'title3', 'contents' : 'contents3', 'dataNum' : 3 }, { 'name' : 'title4', 'contents' : 'contents4', 'dataNum' : 4 }, { 'name' : 'title5', 'contents' : 'contents5', 'dataNum' : 5 }]; arr.filter(i => i.dataNum > 3); //expected output: [{ 'name' : 'title4', 'contents' : 'contents4', 'dataNum' : 4 }, { 'name' : 'title5', 'contents' : 'contents5', 'dataNum' : 5 }]
Array.prototype.filter() 메소드는 배열에서 특정 조건에 부합하는 값을 찾고 그 값들로 이루어진 새로운 배열을 만들어 출력한다. 어떤 요소도 특정 조건에 부합하지 못하면 빈 배열을 반환한다. 해당 메소드는 숫자, 문자열, boolean과 같은 원시값 뿐 아니라 json 같은 객체를 사용해서 true인 값을 판별할 수 있다. 콜백함수의 반환값이 true인 모든 요소를 모아 새로운 배열로 만들어 출력하며 true가 아닌 요소들은 건너뛰며 새로운 배열에 포함시키지 않는다.2-3-17. 조건을 만족하는 첫 번째 인덱스를 찾을 때 findIndex()
const cafe = [{ 'item' : 'coffee', 'amount' : 5 },{ 'item' : 'cake', 'amount' : 4 },{ 'item' : 'tea', 'amount' : 7 },{ 'item' : 'cookie', 'amount' : 3 }]; const index = cafe.findIndex(obj => obj.item.length <= 3) index //expected output: 2
Array.prototype.findIndex() 메소드는 주어진 조건에 부합하는 배열의 맨 첫 번째 요소의 인덱스를 반환한다. Array.prototype.find() 메소드와 비슷하지만 Array.prototype.find() 메소드는 여기서 첫 번째 인덱스가 아닌 첫 번째 요소를 반환한다는 차이가 있다. 배열 내에서 조건에 부합하는 요소가 존재하지 않으면 -1을 반환한다. 2-3-18. 각각 요소에 함수를 호출할 때에는 map()
const arr = [{ 'name' : 'title1', 'contents' : 'contents1', 'dataNum' : 1, 'data' : [1, 2, 3] }, { 'name' : 'title2', 'contents' : 'contents2', 'dataNum' : 2, 'data' : [1, 2, 3] }, { 'name' : 'title3', 'contents' : 'contents3', 'dataNum' : 3, 'data' : [1, 2, 100] }, { 'name' : 'title4', 'contents' : 'contents4', 'dataNum' : 4, 'data' : [1, 2, 3] }, { 'name' : 'title5', 'contents' : 'contents5', 'dataNum' : 5, 'data' : [1, 2, 100] }]; arr.map(i => i.name); //expected output: ['title1', 'title2', 'title3', 'title4', 'title5'] arr.map(i => i.name).indexOf('title3'); //expected output: 2
Array.prototype.map() 메소드는 배열 내에 있는 요소에 오름차순으로 접근해서 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 해당 메소드를 사용해 기존의 값을 재정의할 수도 있지만 새로운 형태의 값을 정의하는 것 또한 가능하다. 또, 객체나 json 형태의 데이터를 탐색하는 용도로 사용할 수 있기도 하며 이 과정에서 새로운 형태의 값을 정의하는 경우가 많다. 이러한 방식은 다른 순회하는 Array.prototype.filter() 메소드나 Array.prototype.find() 메소드, Array.prototype.forEach() 메소드 에서도 사용 가능하다.문제를 풀어보도록 하자. 위 예시의 const arr 내의 data가 100인 title3와 title5를 출력하려면 어떻게 해야 할까?
아래와 같이 앞서 배운
Array.prototype.filter() 메소드를 이용함으로써 Method Chainig을 통해 구현할 수 있다.arr.map((i) => { if (i.data.includes(100)) { return i.name } return }).filter(i => i); //expected output: ['title3', 'title5']
2-3-19. 함수를 실행하는 동시에 배열을 평탄화할 때에는 flatMap()
const coffee = ["iced americano and latte", "espresso", " ", "macchiato", " ", "cappuccino"] const map = coffee.map(i => i.split(' ')); //expected output: [['iced', 'americano', 'and', 'latte'], ['espresso'], ['', ''], ['macchiato'], ['', ''], ['cappuccino'] const flapMap = coffee.flatMap(i => i.split(' ')); //expected output: ['iced', 'americano', 'and', 'latte', 'espresso', '', '', 'macchiato', '', '', 'cappuccino']
Array.prototype.flatMap() 메소드는 배열 내 요소에 순차적으로 주어진 함수를 실행하는 Array.prototype.map() 메소드의 기능과 배열을 평탄화하는 Array.prototype.flat() 메소드의 기능을 합친 것과 같다. 여기서 기존 Array.prototype.flat() 메소드와 다르게 최대 1만큼만 평탄화할 수 있다. Array.prototype.flatMap()메소드는 각각에 Array.prototype.flat() 메소드를 써야하는 Array.prototype.map()과 비교해봤을 때, 조금 더 효율적이다.2-3-20. 각각의 요소를 실행하고 싶을 때에는 forEach()
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.forEach(i => console.log(i)); // expected output: 1 // expected output: 2 // expected output: 3 // expected output: 4 // expected output: 5 // expected output: 6 // expected output: 7 // expected output: 8 // expected output: 9 // expected output: 10
Array.prototype.forEach() 메소드는 배열의 각 요소에 콜백을 1회 씩 실행하며 희소 배열과 같이 초기화 및 삭제되지 않은 인덱스 속성에 대해서는 실행하지 않는다. 콜백은 요소 값, 요소 인덱스, 순회 중인 배열과 같은 세 인수와 함께 호출된다. 배열을 직접적으로 변형하는 메소드는 아니지만 콜백이 변형할 수 있다는 특징이 있다. Array.prototype.map()은 새로운 배열을 생성하는 반면 Array.prototype.forEach()는 순회만 한다는 차이점이 있다.2-3-21. 각 요소에 누적해주며 실행하고 싶을 때에는 reduce()
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] arr.reduce((누적값, 현재값) => 누적값+현재값) //expected output: 55 arr.reduce((누적값, 현재값, index, array) => 누적값+현재값) //expected output: 55 arr.reduce((누적값, 현재값, index, array) => 누적값-현재값) //expected output: -53
Array.prototype.reduce() 메소드는 배열 내의 각 요소에 주어진 reducer 함수를 실행하고, 단 1개의 결과값을 반환한다. 해당 메소드는 4개의 매개변수를 갖는다. 바로 직전 콜백함수의 반환값을 누적하는 누적값, 그리고 순회를 돌고 있는 현재값, 현재 돌고 있는 요소의 index, array 전체이다. 보통 index와 array를 생략하고 많이 사용한다.아래 코드를 살펴보면 변화되는 누적값, 현재값, index, array를 살펴볼 수 있다.
arr.reduce((누적값, 현재값, index, array) => { console.log(누적값); console.log(현재값); console.log(index); console.table(array); return 누적값+현재값; })
2-3-22. 유사 배열 객체를 배열로 만들 때에는 Array.from()
Array.from('hello world'); //expected output: ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd'] Array.from([1, 2, 3], x => x ** 2); //expected output: [1, 4, 9] Array.from([{'value':100}, {'value':200}, {'value':300}], x => x.value); //expected output: [100, 200, 300]
Array.from() 메소드는 배열, 문자열 등 처럼 반복이 가능한 객체 (Iterable object) 혹은 유사 배열을 받아 새로운 배열 객체를 만든다. 여러 객체를 배열로 만들 때 주로 사용되며 객체 내의 모든 요소를 새로운 배열로 얕은 복사를 한다.2-3-23. 배열을 합치거나 새로운 요소를 추가할 때에는 concat()
const cafe = ['coffee']; cafe.concat(['cake']); //expected output: ['coffee', 'cake'] cafe.concat(['tea'], 'cookie'); //expected output: ['coffee', 'tea', 'cookie']
Array.prototype.concat() 메소드는 매개변수로 주어진 값 또는 배열을 이용해서 기존의 배열에 존재하던 요소를 사용해 새로운 배열을 만들 수 있고 기존 배열에 새로운 요소를 추가할 수도 있다. 주로 배열을 합치고자 할 때 자주 사용된다. 기존의 배열을 변경하지 않으며, 추가된 새로운 배열을 반환한다는 특징이 있다.2-3-24. 배열 내 요소를 정렬할 때에는 sort()
const arr = [3, 4, 1, 2] arr.sort(); //expected output: [1, 2, 3, 4] const vegetable = ['beet', 'carrot', 'apple'] vegetable.sort(); //expected output: ['apple', 'beet', 'carrot']
Array.prototype.sort() 메소드는 유니코드 코드 포인트에 의해 배열 내 요소를 오름차순으로 정렬하는데 이 과정에서 요소를 문자열로 취급해 재정렬한다. 해당 메소드를 사용하면 배열이 반환되지만 반환값이 사용되는 비중이 적은데 이는 복사본이 만들어지는 것이 아니라 배열 자체가 변경되기 때문이다.2-3-25. 1개 이상의 요소가 조건에 맞는지 찾을 때에는 some()
const cafe = [{ 'item' : 'coffee', 'amount' : 5 },{ 'item' : 'cake', 'amount' : 4 },{ 'item' : 'tea', 'amount' : 7 },{ 'item' : 'cookie', 'amount' : 3 }]; const order = cafe.some ( i => { return i.amount >= 5 }); order //expected output: true
Array.prototype.some() 메소드는 배열 내 1개의 요소라도 조건에 맞는 값이 있는지 여부를 boolean으로 반환한다. 조건에 부합하는 값이 없거나 빈 배열에서 호출할 경우에 false를 반환한다. 호출할 배열 내에 존재하는 모든 요소가 함수의 반환 값을 true로 만드는지 여부를 확인하는 Array.prototype.every() 메소드와 차이가 있다고 할 수 있다.2-3-26. 모든 요소가 조건에 맞는지 찾을 때에는 every()
const cafe = ['coffee', 'cake', 'tea', 'cookie'] const cafe = [{ 'item' : 'coffee', 'amount' : 5 },{ 'item' : 'cake', 'amount' : 4 },{ 'item' : 'tea', 'amount' : 7 },{ 'item' : 'cookie', 'amount' : 3 }]; const order = cafe.every( i => i.amount >= 3) order //expected output: true
Array.prototype.every() 메소드는 배열 내에 존재하는 모든 요소가 조건에 부합하는지 여부를 boolean으로 반환한다. 조건에 부합하지 않는 요소를 발견하거나 빈 배열에서 호출할 경우 false를 반환한다. Array.prototype.some() 메소드와 마찬가지로 호출한 배열을 변형하지 않는다는 특징이 있다.