[Javascript]자바스크립트 배열 활용법 정리(2/2)

[Javascript]자바스크립트 배열 활용법 정리(2/2)

안녕하세요 미나라이입니다.

저번 포스팅에 이어서 자바스크립트의 배열의 API에 대해서 정리해보았습니다.

 

join

배열을 하나의 문자열로 묶을때는 join기능을 이용합니다. 구분자를 지정하지 않았을 경우에는 ","가 기본으로 들어갑니다.

const fruits = ["apple","lemon","grape"];

// default ","
const fruit = fruits.join("^");
console.log(fruit);

apple^lemon^grape

split

문자열을 배열로 만들고 싶을 경우에는 split기능을 이용합니다. 잘라줄 구분자를 지정하지 않았을 경우에는 문자열 전체를 배열의 0번째 인덱스에 반환하기 때문에 구분자를 반드시 지정 해 주어야 합니다.

const fruit = "apple,lemon,grape";
const fruits = fruit.split(",");
console.log(fruits);

(3) ['apple', 'lemon', 'grape']

revers

배열을 뒤집고 싶을 때 사용합니다.

const array = [10,20,30,40,50];
console.log(array.reverse());

(5) [50, 40, 30, 20, 10]

slice

배열에서 원하는 부분만 자르고 리턴해서 받습니다. splice와는 다르게 새로운 배열을 반환하기 때문에 원본 데이터에는 영향이 가지 않습니다.

const array = [10,20,30,40,50];
console.log(array);

const result = array.slice(2,5);
console.log(result);

(5) [10, 20, 30, 40, 50]

(3) [30, 40, 50]

 

아래 문법부터는 아래의 배열을 이용해서 내용을 설명하겠습니다.

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

const students = [
    new Student('A', 50, true, 42),
    new Student('B', 45, false, 84),
    new Student('C', 38, true, 95),
    new Student('D', 72, true, 64),
    new Student('E', 20, false, 85),
];

find

배열에서 해당 조건에 일치하는 항목을 검색 할 때 사용됩니다. 한개의 항목을 찾을 때 사용됩니다.

// score가 95인 항목 검색
const result = students.find((student) => student.score === 95);
console.log(result);

Student {name: 'C', age: 38, enrolled: true, score: 95}

filter

해당 조건에 수렴하는 배열 항목을 필터링 합니다. 여러개의 항목을 고를 때 사용됩니다.

// enrolled가 true인 항목 필터링
const result = students.filter((student) => student.enrolled);
console.log(result);

 

0:Student {name: 'A', age: 50, enrolled: true, score: 42} 1:Student {name: 'C', age: 38, enrolled: true, score: 95} 2:Student {name: 'D', age: 72, enrolled: true, score: 64}

map

속성이 있는 배열에서 특정 속성만 가져오고 싶을 경우 사용됩니다.

// students배열에서 score항목만 배열로 빼고 싶은 경우
const result = students.map((student) => student.score);
console.log(result);

(5) [45, 80, 90, 66, 88]

some

배열 안에서 특정 조건이 참인지 거짓인지 반환하고 싶을 때 사용됩니다.

배열 내부의 조건중에 하나라도 해당이 되면 true를 반환합니다.

// score가 50이 안될 경우 true
const result = students.some((student) => student.score < 50);
console.log(result);

true

every

배열 안에서 특정 조건이 참인지 거짓인지 반환하고 싶을 때 사용됩니다.

some과 차이점은 배열 내부의 조건이 모두 일치해야 true를 반환합니다.

예제는 some과 같은 결과를 내고싶을 경우를 참조했습니다.

const result = !students.every((student) => student.score >= 50);
console.log(result);

true

reduce

배열이 돌면서 콜백함수를 반복적으로 호출합니다. 이 경우 인자값에 직전값, 현재값, 초기값을 설정 할 수 있습니다.

샘플 예제는 배열을 반복적으로 돌면서 점수의 평균을 구하도록 했습니다.

/*
* prev = 직전에 구한 curr값
* curr = 현재 값
* 0 = 초기값
*/
const result = students.reduce((prev, curr) => prev + curr.score, 0);

// 평균값 계산
console.log(result / students.length);

74

여러 함수를 병행해서 사용하기

배열의 API를 잘 활용하면 여러 조건에서도 간편하게 사용 할 수 있습니다.

// score배열 취득 후 정렬하고 문자열로 변환하기
const result = students.map((student) => student.score).sort().join();

console.log(result);​

42,64,84,85,95