JavaScript & Node.js
#.10 Array APIs
Haksae
2022. 1. 9. 15:38
1. join
- make a string out of an array
- 배열에 있는 모든 값을 모두 더해서 string으로 return
- seperator에 넣은 인자로 구분자 생성할 수 있음.
{
const fruits = ['apple', 'banana', 'orange'];
// let change = '';
// fruits.forEach((value) => change += (value+" "));
// console.log(change);
/**
* Adds all the elements of an array separated by the specified separator string.
*/
const result = fruits.join(',');
console.log(result);
}
2. split
- make an array out of a string
- 전달된 string과 splitter을 받아와서 splitter을 기준으로 인자를 나누어 배열에 순서대로 저장 (필수)
- limit : 리턴받을 배열의 사이즈를 지정 가능 (선택)
{
const fruits = '🍎, 🥝, 🍌, 🍒';
// const arr = new Array();
// for(value of fruits){
// if(value === ',' || value == ' ') continue;
// arr.push(value);
// }
// console.log(arr);
/**
* Split a string into substrings using the specified separator and return them as an array.
*/
const result = fruits.split(',', '2'); // splitter, limit
console.log(result);
}
3. reverse
const array = [1, 2, 3, 4, 5];
/**
* Reverses the elements in an Array.
*/
const result = array.reverse();
console.log(result);
console.log(array); // 기존 배열 자체도 바뀜
}
4. slice
- 배열의 특정한 부분을 리턴
- start : 배열 시작 인덱스, end : 배열 마지막 인덱스
{
const array = [1, 2, 3, 4, 5];
/**
* Returns a section of an array.
*/
const result = array.slice(2,5);
console.log(result);
console.log(array); // 기존 배열은 그대로. splice는 기존 배열도 수정됨
}
5. find
- array.find( (item) => item.key 조건 ) : 조건에 해당되면 true를 반환해줌.
- 배열 속에서 원하는 요소를 찾을 때 사용
- predicate 콜백 함수는 array안의 모든 요소들이 호출되어진다. 그 호출되어지는 요소에서 첫번째로 찾아진 요소를 리턴하고 만약 찾지 못하면 undefined를 리턴한다.
- find(value, index)
/**
* Returns the value of the first element in the array where predicate is true, and undefined
* otherwise.
*/
const result = students.find(function(student, index){
console.log(student, index);
});
// Q5. find a student with the score 90
{
// for(let i=0; i<students.length; i++){
// if(students[i].score === 90){
// const result = students[i];
// console.log(result);
// }
// }
// 간편하게 수정 가능
// const result = students.find(function(student){
// return student.score === 90;
// });
/**
* Returns the value of the first element in the array where predicate is true, and undefined
* otherwise.
*/
const result = students.find((student) => student.score === 90);
console.log(result);
}
6. filter
- array.filter( (item) => item.key 조건 ) : 조건에 해당되는 item을 모두 반환
- predicate 콜백함수를 전달해서 리턴이 true인 것을 하나가 아닌 있는대로 모은 다음 새로운 배열을 만들어 리턴
{
/**
* Returns the elements of an array that meet the condition specified in a callback function.
*/
const result = students.filter((student) => student.enrolled === true);
console.log(result);
}
7. map
- array.map((item) => item.key 수정조건) : 전체 배열값을 불러오기
- map은 배열 안에 들어있는 요소 한가지 한가지를 다른 것으로 변환해준다
- 배열 안에 있는 모든 요소들을 콜백함수를 호출하면서 그 안에서 가공되어진 리턴 값으로 대체하는 것이다.
// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
/**
* Calls a defined callback function on each element of an array, and returns an array that contains the results.
*/
//그대로 받아옴
const result1 = students.map((student) => student);
console.log(result1);
//score배열로 바꾸기위해서 student를 받아와서 student.score만 리턴
const result2 = students.map((student) => student.score);
console.log(result2);
}
- 콜백함수 안에 item,value등을 넣을수도 있지만, 이해하기 가장 쉬운것을 쓰는게 중요!
8. some
- array.some((item) => item.key 조건) : 콜백함수가 만족되면 true 출력
- some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
- 배열 요소중에서 predicate 콜백함수가 리턴이 true인 값이 있는지 없는지 확인해서 boolean 타입으로 리턴한다.
- 조건에 맞는 값이 하나라도 있으면 true를 리턴한다
- every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
- some과 비슷하지만 every는 배열의 모든 요소가 조건에 충족해야 true를 리턴한다.
// Q8. check if there is a student with the score lower than 50
{
/** some
* Determines whether the specified callback function returns true for any element of an array.
*/
const result = students.some((student) => student.score <50);
console.log(result);
// every
// 배열에 있는 모든 요소들이 조건을 충족해야지만 true를 리턴해줌
/**
* Determines whether all the members of an array satisfy the specified test.
*/
const result2 = !students.every((student) => student.score >= 50);
console.log(result2);
}
- array.every((item) => item.key 조건) : 배열의 모든값이 콜백함수에 만족되면 true출력
9. reduce / array.reduce((prev,curr) => ,초기값)
- reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
- reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
- 배열에 있는 모든 요소들의 값을 누적하거나 모아놓을 때 주로 사용한다
- 콜백함수 (previousValue, currentValue, array)를 전달하고 또는 initialValue도 전달할 수 있다.
- 콜백함수는 배열 안에 있는 모든 요소들이 다 호출을 하고 누적된 결과 값을 리턴한다.
const result = students.reduce((prev, curr) => {
console.log('---------');
console.log(prev);
console.log(curr);
return curr; // return curr -> next prev로 전달
},0); //initial Value 설정
// Q9. compute students' average score
{
// const result = students.reduceRight((prev, curr) => {
// console.log('---------');
// console.log(prev);
// console.log(curr);
// return prev + curr.score;
// },0); //initial Value 설정
// 간단한게 표현
const result = students.reduce((prev, curr) => prev + curr.score,0);
console.log(`total: ${result} , average: ${result/students.length} `);
}
- reduceRight
- reduceRight<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
- reduceRight도 reduce와 같은데 차이점은 reduce와는 반대로 값을 거꾸로 전달해준다
10. make a string containing all the scores
- map()과 join() 메소드를 같이 사용하면 된다.
- student.score만 있는 배열로 추출한 다음 join()으로 배열에 있는 모든 값을 string으로 리턴한다.
- 50점 이상인 점수만 출력하려면 filter도 추가해서 하면 된다. 이렇게 여러가지 메소드들을 한번에 다같이 사용할 수 있다.
// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
const result = students.map((student) => student.score).join();
// 50점 미만인 점수만 출력
const result = students.map((student) => student.score)
.filter((score) => score>=50)
.join();
console.log(result);
}
11. sort() : 오름차순, 내림차순
- 배열을 정렬할 때는 sort를 사용하면 된다
- sort(compareFn?: (a: T, b: T) => number): this;
- sort() = sort((a, b) => a-b) 는 오름차순 정렬이고
- sort((a, b) => b-a)는 내림차순 정렬이다
// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
/**
* Sorts an array.
*/
const result = students.map((student) => student.score)
.sort((a, b) => a -b)
.join();
console.log(result);
}
출처 : 드림코딩엘리 https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w