배열 구조 분해하기
다음의 배열이 있다.
let arr = ["SW", "P"];
각 요소에 접근하려면 arr[0], arr[1] 로 접근했었는데,
let [firstname, secondname] = arr;
alert(firstname); // SW
alert(secondname); // P이렇게도 할 수 있다.
다음의 긴 문자열을 쪼개보자.
자바스크립트(JavaScript)란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.
.split()메서드를 사용하면 구분자를 이용하여 여러개의 문자열로 나눠 array 형태로 리턴해준다.
let[a, , b, c, d] = "자바스크립트(JavaScript)란? 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어입니다.".split(' ')
alert(a); // 자바스크립트(JavaScript)란?
// 자바스크립트(JavaScript)는
alert(b); // 객체(object)
alert(c); // 기반의
alert(d); // 스크립트두번째 요소 "자바스크립트(JavaScript)는" 는 건너뛰고 "객체(object)" 가 b에 들어간다.
let [a, b, c] = "abc";
alert(a);
alert(b);
alert(c); entries() 함수 이용
let user = {
name : "SWP",
age : 34
}
for (let [key, value] of Object.entries(user)){
alert(`${key} : ${value}`);
} // '...' 나머지 요소 가져오기
let [name1, name2, ...rest] = ["정*식", "김*진", "박*규", "박*우"];
alert(name1);
alert(name2);
alert(rest[0]);
alert(rest[1]);
alert(rest.length);
// 꼭 rest 일 필요 없이 필요한 이름을 지어넣자.구조 분해 할당의 기본값
아무 값도 가지지 않은 배열이 있다.
let [firstname, surname] = []; alert(firstname); // undefined
alert(surname); // undefinedC언어에서 함수의 선언부에 기본값을 주었던 것처럼, 초기화를 해주어야하지 않을까?
let [firstname = "선우", surname = "박"] = []; alert(firstname); // 선우
alert(surname); // 박어떤 값을 대입하면 다음과 같이 출력이 된다.
let [firstname = "선우", surname = "박"] = ["SW"];
alert(firstname); // SW
alert(surname); // 박객체 분해하기
다음의 객체가 있다.
let options = {
title : "menu",
width : 100,
height : 250
}객체를 분해하는 방법은 배열을 분해할 때와 같다.
let {title, width, height} = options;
alert(title);
alert(width);
alert(height);나머지 요소도 똑같이 사용할 수 있다.
let {title, ...rest} = options;
alert(rest.width);
alert(rest.height);JSON과 메서드
JSON (JavaScript Object Notation)
json 포맷은 다음과 같다.
{
"이름": "홍길동",
"나이": 55,
"성별": "남",
"주소": "서울특별시 양천구 목동",
"특기": ["검술", "코딩"],
"가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},
"회사": "경기 수원시 팔달구 우만동"
}객체.
const myProfile = {
"이름": "홍길동",
"나이": 55,
"성별": "남",
"주소": "서울특별시 양천구 목동",
"특기": ["검술", "코딩"],
"가족관계": {"#": 2, "아버지": "홍판서", "어머니": "춘섬"},
"회사": "경기 수원시 팔달구 우만동"
}객체 데이터를 전송하고싶어.
송신 : 객체를 json 형태의 문자열로 보내자.
let user = {
name : "SWP",
age : 34,
toString(){
return `{
name:"${this.name}",
age:"${this.age}"
}`;
}
}
alert(user) 수신 : 문자열(json)을 객체로 바꿔서 사용하자.
객체를 매번 toString()메서드를 통해서 변경해주어야 할까?
JSON.stringify()
- json은 값이나 객체를 나타내주는 범용 포맷이다.
- 본래 자바스크립트에서 사용할 목적으로 만들어진 포맷이다.
- 자바스크립트가 아닌 언어에서도 json을 충분히 다룰 수 있어서 json을 데이터 교환 목적으로 사용하는 경우가 많다.
- JSON.stringify : 객체를 JSON으로 바꾸어준다.
- JSON.parse : JSON을 객체로 바꾸어준다.
let user = {
name : "SWP",
age : 34,
isadmin : false,
course : ['javascript', 'node.js', 'react.js'],
}
let json = JSON.stringify(user);전송하지는 못하니 출력해보자.
alert(json);
alert(typeof json);출력결과 : {"name":"SWP","age":34,"isadmin":false,"course":["javascript","node.js","react.js"]}
string
이번엔 위의 문자열을 수신했다고 생각하고, json을 객체로 변경해보자.
JSON.parse()
Json.parse() 메서드 사용의 형태는 다음과 같다.
let value = JSON.parse(문자열);이전에 수신한 문자열로 객체를 생성해보자.
let obj = JSON.parse(json);잘 되었는지 출력해보자.
alert(obj.name);
alert(obj.age);
alert(obj.isadmin);
alert(obj.course);출력결과 : SWP, 34, false, javascript,node.js,react.js
