자바스크립트 기초 7 배열 함수 10개

테루·2020년 12월 31일
0

JavaScript 기초

목록 보기
7/7
post-thumbnail

배열 함수들 Array APIs

1. join()

배열의 모든 요소를 연결해 하나의 문자열로 반환한다.

const arr = ['h','e','l','l','o'];
const result = arr.join();
console.log(result);   => h,e,l,l,o

join에 구분자를 넣지 않아도 기본적으로 ","가 출력된다.
다른 구분자를 넣게 되면
const result = arr.join("|");
=> h | e | l | l |o 이렇게 출력이 된다.

join()과 비슷한 toString()이 있는데

toString()은 지정된 배열 및 그요소를 나타내는 문자열을 반환한다.

join과 다른 점은 구분자를 바꿀 수 없다는 것이다.

2. split()

String 객체를 지정한 구분자를 이용하여 여러개의 문자열로 나누어 주고 배열에 넣는다.

split API의 정의는 2가지의 값을 받는다.

split (separator: string | RegExp, limit?: number ) : string[];

구분자의 값은 string이거나 RegExp를 사용할 수 있고,
limit은 return받을 배열의 크기를 지정할 수 있게 해준다.

const str = "Hello, bye, nice";
const srr = str.split(",", 2);
=> ["Hello","bye"]

만약 split()에 구분자를 넣지 않을 경우
String자체가 그대로 배열에 들어가기 때문에 꼭 구분자를 써줘야 된다.

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"

3. reverse()

배열의 순서를 거꾸로 바꿔주는 API

const arr = [5,4,3,2,1];
const result = arr.reverse();
console.log(result);  => [1,2,3,4,5]
console.log(arr) => [1,2,3,4,5]

reverse()는 return된 배열과 기존의 배열 둘 모두 배열의 순서를 반대로 바꾸어준다.

4. slice()

slice()는 start부터 end전까지의 복사본을 새로운 배열 객체로 반환한다. 즉 원본 배열은 수정되지 않는다.

splice(start[, end])

start = 추출 시작점
시작점이 지정되있지 않다면 0부터 시작
음수로 지정된 경우는 배열의 끝에서부터의 길이를 나타낸다.
slice(-2)이면 배열의 마지막 2개의 요소를 추출한다.

end = 추출을 종료할 기준
지정하지 않을 경우에는 배열 끝까지 slice한다.
음수로 지정한 경우에는 배열의 끝에서부터의 길이를 나타낸다.
slice(2, -1)을 하면 새번째부터 끝에서 두번째 요소까지 추출한다.

반환값 = 추출한 요소를 포함한 새로운 배열

5. find()

arr.find(callback(element[, index[.array]])[, thisArg])
const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

find()는 배열에서 특정 값을 찾는 조건을 callback함수를 통해 전달하여
조건에 맞는 값중 첫번째 값을 return한다
만약 배열에 조건을 만족하는 값이 없으면 undefined를 return한다.

6. filter()

arr.filter(callback(element[, index[, array]])[, thisArg])

filter() 함수는 특정조건에 부합하는 배열안의 모든 값을 배열 형태로 리턴한다.

class Student {
    constructor(name, age, enrolled, score){
        this.name = name;
        this.age = age;
        this.enrolled = enrolled;
        this.score = score;
    }
}

const students = [
 new Student('A', 29, true, 45),
 new Student('B', 28, false, 80),
 new Student('C', 27, true, 90),
 new Student('D', 26, false, 45),
 new Student('E', 20, true, 70),
];

const result = students.filter((student) => student.enrolled);
console.log(result);

enrolled가 true인 학생들을 출력한다

7. map

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const result = students.map((student) => student.score);
console.log(result); // student의 score만 출력한다.
const oneTwoThree = [1, 2, 3];

const result = oneTwoThree.map((v) => {
  if (v % 2) {
    return '홀수';
  }
  return '짝수';
});
console.log(result); // ['홀수','짝수','홀수']

8. some()

배열의 요소 중에서 callback함수가 return이 true가 있는지 없는지 확인해준다.

const result = students.some((student ) =>student.score <50);
console.log(result); 

students에서 50점 이하인 score가 하나라도 있으면 true를 return한다

const result1 = students.every((student ) =>student.score <50);
console.log(result1);

every()는 배열의 모든 score가 50점 이하일때 true를 return한다.

조건에 맞는 요소가 하나라도 있어도 된다면 some()을 쓰고 모든 요소가 조건에 맞아야된다면 every()를 쓰면 좋다.

9. reduce()

간단하게 보면 값들의 합을 구할때 사용되는 reduce
다른 설명들이 너무 많지만 전혀 이해가 가지 않는 점.... 안 비밀ㅠㅠㅠ 쉽게쉽게 이해가 됬으면 좋겠어요ㅠㅠㅠ...

const reducer = (accumulator, currentValue) => accumulator + currentValue;

accumulator는 더한 값이 저장되는 곳이고 currentValue는 현재 값

 const days = [
  {day : 'mon' , date : 30},
  {day : 'wen' , date : 20},
  {day : 'thr' , date : 10},
  {day : 'fri' , date : 13},
];

const totalDay = days.reduce(function(acc , cur) {
  return acc + cur.date;
}, 0);
console.log(totalDay);  // 73
profile
아직은 달걀안의

0개의 댓글