[새싹 성동 2기] JavaScript에서 JSON 데이터 처리 및 객체 속성명 활용

 

1. 서버로부터 받은 문자열 데이터를 JSON으로 변환

서버에서 받은 데이터는 보통 문자열 형식으로 전달됩니다. 이 문자열 데이터를 JSON 형식으로 변환하여 객체처럼 다루어야 할 때가 많습니다.

let scores = [];

// 서버로부터 받은 문자열 데이터 - 서버로 부터 받아온 데이터는 아래와 같은 형식입니다.
const dataFromServer = `
    [
        { "name": "홍길동", "korean": 80, "math": 90, "english": 90 },
        { "name": "고길동", "korean": 90, "math": 80, "english": 80 },
        { "name": "신길동", "korean": 70, "math": 80, "english": 70 }
    ]
`;

console.log(dataFromServer, typeof dataFromServer);

// 문자열 데이터를 JSON 형식으로 변환 
scores = JSON.parse(dataFromServer);  // JSON.parse는 JSON 데이터를 자바스크립트 객체로 변환합니다.
console.log(scores, typeof scores);  // scores의 타입 확인용 출력입니다.

// 헤더 출력 - /t를 이용하면 탭과 같은 효과가 나옵니다. 정렬하기에 용이합니다.
console.log(`--------\t----\t----\t----\t----\t----\t`);
console.log(`학생이름\t국어\t영어\t수학\t합계\t평균`);
console.log(`--------\t----\t----\t----\t----\t----\t`);

// 학생별 점수 출력
scores.forEach(score => {
    const total = () => score.korean + score.english + score.math;
    const average = () => {
        const result = total() / 3;
        return Math.round(result * 10) / 10; // 소수점 첫째 자리 반올림
    };
    
    console.log(`${score.name}\t\t${score.korean}\t${score.english}\t${score.math}\t${total()}\t${average()}`);
});

console.log(`--------\t----\t----\t----\t----\t----\t`);

이 실행 결과는 다음과 같습니다.

[...]
string
[...]
object
--------        ----    ----    ----    ----    ----
학생이름        국어    영어    수학    합계    평균
--------        ----    ----    ----    ----    ----
홍길동          80      90      90      260     86.7
고길동          90      80      80      250     83.3
신길동          70      70      80      220     73.3
--------        ----    ----    ----    ----    ----

위 예시에서 JSON.parse() 메서드를 사용하여 문자열로 받은 데이터를 실제 객체 배열로 변환하고, 이를 활용하여 각 학생의 점수와 합계, 평균을 출력하는 방식입니다.

 

2. 객체 속성명 활용: 단축 속성명(Shorthand Property Names)

객체의 속성명을 정의할 때, 변수명과 속성명이 동일한 경우에는 속성명 부분을 생략할 수 있습니다. 이를 단축 속성명이라고 합니다.

//예시 1 단축 속성명 사용
let name = 'John';

// 기존 방식
const person1 = {
    name: name,  					//'name' 변수의 값을 할당합니다.
    getName: function getName() {   //'getName'이라는 함수 속성을 정의합니다.
        return this.name;  			// 'this'는 'person1' 객체를 가리킵니다.
    }
};

// 단축 속성명 방식
const person2 = {
    name,            // 속성의 이름을 생략합니다. 변수의 이름과 값이 같기 때문에 가능합니다.
    getName() {      // 함수명과 동일한 이름의 속성도 단축 가능합니다.
        return this.name;
    }
};

console.log(person1);
console.log(person1.getName());

console.log(person2);
console.log(person2.getName());

//두 값의 결과는 완전히 동일합니다.
//간단하게 말해서 name: name -> name으로 getName: function getName() -> getName() 으로 변환 가능합니다.



//예시2 객체 반환 시 단축 속성명 - return시 단축 가능함을 말합니다.
function returnObject1(age, name) {
    return { age: age, name: name };		// 기존 방식으로 명시적 작성한 경우입니다.
}
console.log(returnObject1(23, "홍길동"));   // { age: 23, name: '홍길동' }

function returnObject2(age, name) {			
    return { age, name }; 				    // 속성명과 변수명이 동일하면 단축 가능합니다.
}
console.log(returnObject2(23, "홍길동"));   // { age: 23, name: '홍길동' }

단축 속성명은 객체 리터럴에서 변수가 가지고 있는 값을 속성으로 바로 설정할 때 매우 유용합니다.

 

3. 계산된 속성명(Computed Property Names)

계산된 속성명은 객체 속성명(키)을 동적으로 계산하여 정의할 수 있게 해주는 기능입니다. 변수를 이용하거나 연산을 통해 객체의 속성명을 만들 수 있습니다.

function returnObject1(key, value) {
    return { [key]: value };  // 계산된 속성명입니다. 주요한점은 대괄호로 이는 계산된 속성명을 정의하는 방식입니다.
}
console.log(returnObject1('name', 'John'));  // { name: 'John' }  //자동으로 키는 name이 되고 john이 값으로 들어간 것을 볼 수 있습니다.

function returnObject2(key, value, no) {
    return { [key + no]: value };  // 계산된 속성명: 'name1', 'name2' 형태로 생성됩니다.
}
console.log(returnObject2('name', 'John', 1));  // { name1: 'John' }
console.log(returnObject2('name', 'Mike', 2));  // { name2: 'Mike' }

 

이러한 계산된 속성명의 기본 문법은 아래와 같습니다.

const obj = {
    [expression]: value
};

 

[key]처럼 대괄호를 사용하여 속성명을 동적으로 만들 수 있습니다. 이를 통해 변수나 표현식을 이용해 객체의 속성명을 유동적으로 설정할 수 있습니다.

 

 

 

 

 

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.