시베리안 허숙희의 자바스크립트 비기닝 11 (JSON)

자바스크립트

by e7e 2023. 6. 8. 20:15

넘 소중한 JSON(JavaScript Object Notation)에 대해 이야기 해보장!

JSON(JavaScript Object Notation) 자바스크립트 객체 표기법이당
JSON을 모르면 JS의 진정한 데이터 표현의 자유를 느낄 수 없당
시대적 추세가 데이터 전송에 이미 XML에서 JSON으로 넘어왔당
.(점) 접근법 과 [](배열식) 접근법 2가지 모두 필수당
배열은 key(속성)값이 무조건 숫자(index)인 JSON이라 생각하장

먼저 어떤 형태로 사용하는지를 누네 낯설지 않게

JSON.html 파일을 아래 내용으로 맹글어서, 브라우져에서 alert 결과를 확인하공,

누느로 여러번 위아래로, 아래위로 횡단하장!(객체 생성에서 자유가 느꺄지는가?)

전송형태로 사용될 때는 보통 메소드없이 속성만을 사용한당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>

// JSON 객체 생성 및 속성/메소드 추가
var bpInfo = {}; // 빈 객체 생성 = new Object()
bpInfo.brand = "블랙핑크";
bpInfo.company = "YG";
bpInfo.members = [
    {name:"로제",age:26,roles:["메인보컬","리드댄서"]},
    {name:"제니",age:27,roles:["메인래퍼","리드보컬"]},
    {name:"리사",age:26,roles:["메인댄서","리드래퍼"]},
    {name:"지수",age:28,roles:["리드보컬"]}
];
bpInfo.debut = new Date("2016-08-08");
bpInfo.getMember = function(pIndex){   // 메소드 추가
    return this.members[pIndex];
}

// 위 코드와 같은 의미 한번에 묶어서 생성및 초기화
var bpInfo2 = {
    brand : "블랙핑크",
    company : "YG",
    members : [
        {name:"로제",age:26,roles:["메인보컬","리드댄서"]},
        {name:"제니",age:27,roles:["메인래퍼","리드보컬"]},
        {name:"리사",age:26,roles:["메인댄서","리드래퍼"]},
        {name:"지수",age:28,roles:["리드보컬"]}
    ],
    debut: new Date("2016-08-08"),
    getMember:function(pIndex){        // 메소드 추가
        return this.members[pIndex];
    }
}

// 체킁
alert("2번째 멤버 roles: " + bpInfo.members[1].roles);
alert("2번째 멤버 roles: " + bpInfo.getMember(1).roles);

alert("1번째 멤버 name: " + bpInfo2.members[0].name);
alert("데뷔일 : " + bpInfo2.debut.toLocaleDateString());

</script>

중요한 순간이당. JSON을 배열식으로 선언/접근을 .(점)을 사용하는 법과

누네 잔뜩 히믈 주고 비교하장! (손과 눈이 함께 기억할 때까지 연습했으면!)

덩말 덩말 중요하당!, 의미가 안 오는 부분이 있다면 질문을 남기장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// .(점) 선언법
var myRoze = {
    name:"로제",
    songs:["Gone","Ground"]
}

// []배열식 선언법
var myJenni = {
    ["name"]:"제니",
    ["songs"]:["Solo"]
}

//console.log 출력 비교/같음을 확인
console.log("myRoze",myRoze);
console.log("myJenni",myJenni);


// .(점) 선언법 key값에 변수값을 줄 수 있는가 확인
var name = "blackPink";
var testJSON = {
    name:"리사",
    age: 26
}
alert("체킁1: " + testJSON.blackPink);
console.log("testJSON",testJSON);

// []배열식 선언법 key값에 변수값을 줄 수 있는가 확인
// 아두 너무 아두 중요하당, 요리 조리 요리해보장
var name2 = "blackPink";
var age2 = "나이"
var testJSON2 = {
    [name2]:"지수",
    [age2]: 27
}
alert("체킁2: " + testJSON2.blackPink + " " + testJSON2.나이);
console.log("testJSON2",testJSON2); //요건 누느로 꼬옥 화긴!

</script>

만약 처음 보았다면 이게 머징? 하는 느낌이 있을 수 있당!(괜찮당 처음만 놀랍당!)

보너스로 속성명과 해당 속성에 할당하려는 변수명이 같은 경우

변수명을 생략 할 수 있음을 알고 가장 (요따구로 쓰는 게 요즘은 유행이당!)

역시 아래 코드를 실행, console.log 결과를 누느로 확인하장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    var realName = "박채영";
    var age = 26;
    var songs = ["Gone","Ground"];

    // 일반적인 방법 속성에 변수값 할당
    var myRoze = {
        realName:realName,
        age:age,
        songs:songs
    }

    // 속성명과 속성명에 할당하려는 변수명이 같은 경우 생략가능
    var myRoze1 = {
        realName,
        age,
        songs
    }

    // 같은 출력 눈으로 확인
    console.log("myRoze",myRoze);
    console.log("myRoze1",myRoze1);
</script>

대략 이해가 되었다면, 굳히기를 위해 아래 문제를 풀어보장!

꽤 자주 활용될 수 있는 스타일이니, 꼬옥 요래 조래 생각해서 풀어보짱!

아래 코드 중 "???"를 원하는 코드로 채워서 그림과 같이 출력되게 해보장!

결과가 나왔다면 자신을 토닥토닥 칭찬해 주자!, 정말 구시당!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 등급표현 JSON
var rank = {
    role1:"MANAGER",
    role2:"LEADER",
    role3:"DEVELOPER",
    role4:"SUPPORTER"
}

// 사원 4명
var sawons = [
    {name:"김밥님",age:29, level:"role1"},
    {name:"오뎅님",age:35, level:"role3"},
    {name:"만두님",age:26, level:"role4"},
    {name:"꼬치님",age:41, level:"role2"}
]

console.log("======== 사원 리스트 ============");
console.log("   이름  ","   나이  ","  역할   ");
console.log("---------------------------------");
for(var i=0; i < sawons.length; i++){
    console.log("  ",sawons[i].name,"  ",sawons[i].age,"     ","???");
}
console.log("=================================");

</script>

자바스크립트 JSON은 쓰면 쓸 수록 그 편함에 감탄하게 되는 장점이 있지만

그 때문에 다른 언어의 다른 스타일의 흡수를 막는 단점이 되기도 한당!

그래도 느낌이 왔다면 점점 자유의 엔돌핀을 더 달라 조르게 될 것이당!

https://www.youtube.com/watch?v=wOwblaKmyVw

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 13 ( var let const) (0)	2023.06.12
시베리안 허숙희의 자바스크립트 비기닝 12 (콜백함수 callback) (0)	2023.06.09
시베리안 허숙희의 자바스크립트 비기닝 10 (배열 Array) (7)	2023.06.07
시베리안 허숙희의 자바스크립트 비기닝 9 ( 문자열 메소드) (2)	2023.06.06
시베리안 허숙희의 자바스크립트 비기닝 8 (연산자) (0)	2023.06.05