본문으로 바로가기

객체와 배열을 활용하기

category JavaScript/JS 활용 & etc.. 2016. 9. 29. 13:07

자바스크립트 객체 & 배열

이 글에서는 간단한 예제를 통해 객체와 배열을 이용한 데이터 관리에 대해 알아봅니다.




객체 & 배열 활용

다음의 예제에서는 배열 메서드인 push(객체 리터럴로 배열에 추가), for in 문, with문 활용을 확인하실 수 있습니다.

javascript
// 빈 배열 생성
var infoArray = [];

// 빈 배열에 객체를 추가
infoArray.push({lang : 'javaScript', num1 : 20, num2 : 50 });
infoArray.push({lang : 'SASS', num1 : 100, num2 : 70 });
infoArray.push({lang : 'node', num1 : 80, num2 : 40 });
infoArray.push({lang : 'LESS', num1 : 10, num2 : 80 });
infoArray.push({lang : 'HTML', num1 : 60, num2 : 90 });

for(var key in infoArray) {
    // 배열 원소는 모두 객체(infoArray[key])이므로
    // 객체에 sum 이라는 메소드를 추가한다.
    infoArray[key].sum = function () {
        // this는 배열내 객체자신을 가리키고 있다.
        return this.num1 + this.num2;
    };

    infoArray[key].average = function () {
        return this.sum() / 2;
    }
}

var result = 'lang\t총점\t평균\n';

for (var prop in infoArray) {
    result += 'lang' + '\t' + infoArray[prop].sum() + '\t' + infoArray[prop].average() + '\n';
}

// 다음의 코드는 위와 같습니다.
/*
for(var prop in infoArray) {
    with(infoArray[prop]) { // with 를 통해 객체에 접근
        result += 'lang' + '\t' + sum() + '\t' + average() + '\n';
    }
}
*/

console.log(result);


콘솔창 결과값을 다음과 같을 것입니다.



Jaehee's WebClub