[Javascript] ES6 문법 7.1 - 배열 함수 1 ( forEach(), map() 함수)

isfp_yykkng 2023. 4. 21. 19:42

ES6 문법 7.1 - 배열 함수 1 ( forEach(), map() 함수)

forEach() 함수란

forEach() 함수는 배열을 순회하는 여러 방법 중 하나로 오직 배열에서만 사용가능하다. 배열의 요소들을 반복하여 작업을 수행할 수 있는 함수이다. (ES6 부터 지원) forEach() 함수는 인자로 반드시 콜백 함수 또는 익명 함수가 필요하다. 배열의 각 요소들이 반복될 때 이 함수들이 호출되어 배열 요소의 인덱스와 값에 접근 가능하다.

기존 자바스크립트 문법 for문으로 쿼리스트링 제거하는 예제

function parse(qs) { //qs값은 웹주소 (이 예제에서는 쓰지 x)
    var queryString = qs.substr(1);
    var chunks = queryString.split('&');
    // chunks = ['banana=10', 'apple=20', 'orange=30' ]
    var result = {};
    for(var i = 0; i < chunks.length; i++){
    	var parts = chunks[i].split('=');
        // i = 0 일 때, parts = ['banana', '10']
        var key = parts[0];
        var value = parts[1];
        result[key] = value;  // { 'banana' : '10' } 형식
    }
    return result;
}

parse("?banana=10&apple=20&orange=30");
// { 'banana' : '10', 'apple' : '20', 'orange' : '30' }

qs로 들어온 문자열을 substr을 이용해서 첫번째인 "?" 를 제거한 "banana=10&apple=20&orange=30"로 queryString을 저장하고 이를 split() 함수를 이용해서 & 기준으로 나눠서 "banana=10", "apple=20", "orange=30" 3개의 문자열을 chunks 배열로 저장한다. 이를 for문으로 하나씩 총 3번을 돌면서 = 기준으로 나눠서 parts에 저장한다. parts[0] 은 키로, parts[1] 은 값으로 result에 저장하는 예제이다.

ES6 배열 함수 forEach() 로 쿼리스트링 제거하는 예제

function parse(qs) { //qs값은 웹주소 (이 예제에서는 쓰지 x)
    const queryString = qs.substr(1);
    const chunks = queryString.split('&');
    // chunks = ['banana=10', 'apple=20', 'orange=30' ]
    let result = {};
    chunks.forEach((chunk) => {
    	const parts = chunk.split('=');
        // chunks 첫번째 요소일 때, parts = ['banana', '10']
        const key = parts[0];
        const value = parts[1];
        result[key] = value;  // { 'banana' : '10' } 형식
    });
    return result;
}

parse("?banana=10&apple=20&orange=30");
// { 'banana' : '10', 'apple' : '20', 'orange' : '30' }

ES6의 forEach() 함수를 사용하면 반복문의 순번(i++)과 배열의 크기(chunks.length)를 따로 변수에 저장하는 과정을 생략할 수 있다. 또한 각 요소를 chunk 라는 변수로 설정했는데, 이 변수의 이름은 아무거나 상관없다.

* 복수형 변수(chunks))의 요소로는 일반적으로 단수형 변수(chunk)를 사용하는 것이 관례이다.

forEach() 함수와 구조 분해 할당 방식 활용하여 더 간결한 예제

function parse(qs) { //qs값은 웹주소 (이 예제에서는 쓰지 x)
    const queryString = qs.substr(1);
    const chunks = queryString.split('&');
    // chunks = ['banana=10', 'apple=20', 'orange=30' ]
    let result = {};
    chunks.forEach((chunk) => {
    	const [ key, value ] = chunk.split('=');
        result[key] = value;  // { 'banana' : '10' } 형식
    });
    return result;
}

parse("?banana=10&apple=20&orange=30");
// { 'banana' : '10', 'apple' : '20', 'orange' : '30' }

forEach로 간결하게 만든 코드의 키와 값을 할당하는 부분을 구조 분해 할당 방식으로 변환하여 좀 더 간결하게 바꿨다.

map() 함수

map() 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환(return 필수!)하는 메서드이다. 즉, 쉽게 말해 배열을 가공하여 새 배열을 만드는 함수이다. 주어진 함수의 결과값들을 반환하기에 인자로 함수는 필수 인자이다.

forEach() 쿼리스트링 제거 예제를 map으로 변환한 예제 ⭐

function parse(qs) { //qs값은 웹주소 (이 예제에서는 쓰지 x)
    const queryString = qs.substr(1);
    const chunks = queryString.split('&');
    // chunks = ['banana=10', 'apple=20', 'orange=30' ]
    const result = chunks.map((chunk) => {
    	const [ key, value ] = chunk.split('=');
        return {key : key, value : value};  // { key : 'banana', value : '10' } 형식
    });
    return result;
}

parse("?banana=10&apple=20&orange=30");
/*result = [
  { key: 'banana', value: '10' },
  { key: 'apple', value: '20' },
  { key: 'orange', value: '30' }
]*/

forEach() 함수를 이용한 코드와 다르게 map으로 각 요소를 객체 형식으로 result "배열" 에 저장한다. map은 새 배열을 반환하기 때문에 객체 형식을 가진 배열 요소들을 result에 저장하는 것이다. 또한 const result 라는 불변 변수를 사용한 것도 forEach() 함수와 다르게 map() 함수는 결과값을 바로 반환하기 때문에 가변 변수 let 를 사용하지 않아도 된다.