[JavaScript] 배열 함수 정리

배열함수

ES6이전 버전인 ES5에서 이미 여러 배열 함수들이 추가 됨.

자주 사용하는 배열 함수인 forEach(), map(), reduce()함수

 

---

 

예제) 쿼리 스트링 값을 forEach함수를 이용하여 key : value값 추출하기

 

 체크 하고 가야할 사항 

쿼리 스트링(Query String)은 웹주소에 포함시키는 문자열이면서 정보를 담고 있는 문자열

노란색 부분이 쿼리스트링 예시

 

---

for()함수

 

 function parse(qs) {
        // 2.첫번째 문자열을 제외한 나머지 문자열추출 
        var queryString = qs.substr(1); // 'banana=10&apple=20&orange=30'
        // 3. split는 separator문자를 기준으로 문자를 쪼개 배열로 반환하는 함수
        // String.prototype.split(separator);
        var chunks = queryString.split('&'); //['banana=10', 'apple=20', 'orange=30'];
        var result = {};

        // 4. 변환된 배열을 가지고 for문을 통해 키값과 value값을 추출함
        for(var i = 0; i < chunks.length; i++){
            var parts = chunks[i].split('='); // ['banana','10'], ['apple','20'], ['orange','30']
            // key값은 parts[0] index 0값을 담고,
            var key = parts[0];
            // value값은 parts[1]의 값이 true이면 값그대로 false이면 Number로 형변환하여 담아라
            var value = Number.isNaN(Number(parts[1]))? parts[1] : Number(parts[1]); 
            result[key] = value; // { banana: 10, apple: 20, orange: 30}
        }
        console.log(typeof value); // value 타입 확인용
        return result;
    }
    
    // 1.
    // 쿼리 스트링은 ?로 시작하기에
    // substr를 사용하여 ?를 삭제해야함

    // 5. 변환된 쿼리스트링값은 객체 형태이기 때문에 변수에 담아
    var qs = parse('?banana=10&apple=20&orange=30'); 

    // 6. qs.banana로 접근이 가능
    console.log(qs); // { banana: 10, apple: 20, orange: 30}
    console.log(qs.banana); // 10

Number.isNaN은 Not a Number로

NaN일 경우 true값을 NaN이 아닐 경우 false로

 

Number.isNaN으로 값으로 값을 테스트할 경우에

Number.isNaN(Number(value));

값을 Number로 형변환한 후, Number.isNaN을 해주면 정확한 결과값을 얻을 수 있습니다.

isNaN() - JavaScript | MDN

 

ES6의 forEach()함수

Array.prototype.forEach(function(value.index){}.context);

인자에 전달된 콜백 함수를 배열의 각 항목 순서대로 실행하는 함수.

context인자는 콜백 함수 안에서 this값을 정의.

 

function parse(qs) {
        var queryString = qs.substr(1); 
        var chunks = queryString.split('&'); //['banana=10', 'apple=20', 'orange=30'];
        var result = {};
        
        // 자바스크립트의 배열은 배열이 아니라 객체라고도 할 수 있음
        // 배열로 반환된 배열은 for문과 유사한 배열 내장 함수를 사용할 수 있음(forEach)
        // 함수는 인자값으로 함수를 받게 됨
        // 콜백 함수 형태로 각 배열있는 항목들을 접근하면서 자동적으로 실행되는 방식으로 구현되어있음
        // 함수는 이 배열안에 포함이 되어있는 value와 index값을 받을 수 있음.
        chunks.forEach(function(value, index){
            var parts = value.split('=');
            var key = parts[0];
            var value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]);

            result[key] = value;
        });

        return result;
    }
     
    var qs = parse('?banana=10&apple=20&orange=30'); 

    console.log(qs);

 

forEach()함수로 for문과 같은 결과값을 추출할 수 있고,

배열 추출식(구조 분해 할당)으로 코드 표현 간소화할 수도 있음.

▼▼▼▼▼▼

function parse(qs) {
        var queryString = qs.substr(1); 
        var chunks = queryString.split('&'); //['banana=10', 'apple=20', 'orange=30'];
        var result = {};
        
        // 구조 분해 할당을 이용하여 코드를 간단하게 사용가능
        chunks.forEach(function(chunks, index){
            var [key, value] = chunks.split('=');
            result[key] = Number.isNaN(Number(value)) ? value : Number(value);
        });

        return result;
    }
     
    var qs = parse('?banana=10&apple=20&orange=30'); 

    console.log(qs);

 

[JavaScript] 구조 분해와 구조 분해 할당 사용 방법

Array.prototype.forEach() - JavaScript | MDN