2022.09.07 TIL : [자바스크립트] reduce(), replace(), Array.from()

 

✅ reduce() 메서드

reduce()는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.

array.reduce(callback(),initialValue)

1.callback function

 

callback 함수는 4가지 파라미터를 가집니다.

1. accumulator - accumulator는 callback함수의 반환값을 누적합니다.
2. currentValue - 배열의 현재 요소
3. index(Optional) - 배열의 현재 요소의 인덱스
4. array(Optional) - 호출한 배열

array.reduce((accumulator, currentValue, index(Optional), array(Optional)) => {
    return 다음누산값;
}, initialValue);

2. initialValue (optional)

• 최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생합니다.

결과적으로 마지막 콜백 함수가 동작한 이후의 return 값이 reduce()의  return 값이 되는 것입니다.

 

1부터 10까지의 더한 값을 출력하는 코드를 예제로 들어보겠습니다.

 

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum1 = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);

console.log('sum1 =', sum1);

initialValue를 입력하지 않았기 때문에 첫 번째 인덱스 값인 1 부터 누산을 시작합니다.

accumulator + currentNumber 값이 다음 accumulator 값에 대입되면서 누적됩니다.

 

callback()를 먼저 선언하고 메서드를 실행하는 방법도 있습니다.

// callback함수 선언 후 이용
function sumReducer(accumulator, currentNumber) {
    return accumulator + currentNumber;
}

const sum2 = numbers.reduce(sumReducer);

console.log('sum2 =', sum2);

sum1 = 55
sum2 = 55

둘 다 같은 결과 값이 나옵니다.

 

 

✅ replace() 메서드

replace() 는 문자열에서 특정 문자를 치환하는 메서드입니다.

replace() 는 먼저 검색되는 1개의 문자열만 변환하는데요.

한 번에 여러 문자열을 변환할 때에는 정규표현식을 사용하여 해당하는 모든 문자열을 변환할 수 있습니다. 

 

replace('old','new') 는 문자열에 있는 old를 new로 바꾼 문자열을 반환합니다.

let str = 'Hello world, Java';

str = str.replace('Java', 'JavaScript');
console.log(str);
//Hello world, JavaScript

그러나 replace()는 위에서 말했듯이 바꾸려는 문자열이 여러개 있어도, 가장 먼저 찾은 문자열 1개만 변환합니다.

let str = 'Hello world, Java, Java, Java';

str = str.replace('Java', 'JavaScript');
console.log(str);
//Hello world, JavaScript, Java, Java

이럴 때는 정규표현식을 사용해서 변환해줍니다.

아래 예제에서는 /Java/g가 정규 표현식인데, 정규표현식은 /Pattern/flag처럼 패턴과 플래그로 구성됩니다.

그리고 주의할 점은 찾으려는 문자열에 따옴표를 입력하지 않아야 합니다.

플래그 g는 global의 약자로,  문자열의 전 범위에서 변환한다는 의미입니다. 

let str = 'Hello world, Java, Java, Java';

str = str.replace(/Java/g, 'JavaScript');
console.log(str);
//Hello world, JavaScript, JavaScript, JavaScript

그러나 이 정규표현식은 대소문자를 구분하기 때문에, 아래 에제에서는 원하는 답을 얻을 수 없습니다.

let str = 'Hello world, Java, Java, Java';

str = str.replace(/java/g, 'JavaScript');
console.log(str);
//Hello world, Java, Java, Java

대소문자를 구분하지 않고 변환하려면 플래그에 i를 추가하면 됩니다.

let str = 'Hello world, Java, Java, Java';

str = str.replace(/java/gi, 'JavaScript');
console.log(str);
//Hello world, JavaScript, JavaScript, JavaScript

 

✅Array.from() 메서드

만약 길이 5의 배열을 만들고 모든 인덱스에 "Hello" 문자열을 넣으려면 어떻게 만들면 될까요?

const arr = new Array(5).fill("Hello");

이렇게 만드는 방법도 있겠지만 조금 더 쉽게 새로운 배열을 만들어 주는 Array.from() 에 대해서 알아볼게요.

 

간단한 배열을 새로 생성할 때,

첫 번째 인자로 {length:__}을 넣어주고, 두 번째 인자는 (value,index)가 들어가서 => index만 반환하는 함수를 넣어줍니다.

 

Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]

만약에 위에서 만들었던 배열처럼 길이 5 배열에 "Hello"를 삽입하고 싶다면,

const arr = Array.from({length: 5}, (v, i) => "Hello");
// arr = ['Hello', 'Hello', 'Hello', 'Hello', 'Hello']

쉽죠?

 

만약 기존 배열을 가공하여 새 배열을 만든다고 하면,

첫 번째 인자로는 기존 배열을 넣어주고, 두 번째 인자로 배열 각 요소에 적용할 함수를 넣어주면 됩니다.

const arr = [1, 2, 3];

let arr2 = Array.from(arr, x => x + x); 
// arr2 = [2, 4, 6]