[JavaScript]Object 간단히 객체 생성하기, Destructuring
기존 JavaScript에서 중복되는 객체의 선언을 줄여주는 코드가 ES2015에 나왔다.
Key 값과 Value의 값이 일치하는 경우라면 리턴 구문에서 중복되는 변수의 값을 제거할 수 있다.
function getObj() {
const name = "omaeng";
const getname = function() {
return name;
}
const setname = function(newname){
name = newname;
}
const nameprint = function(){
console.log(name);
}
return{getname,setname}
}
var obj = getObj();
console.log(obj.getname());
//"omaeng"Destrunturing
Destructuring은 비구조화, 파괴의 뜻으로 개별적인 변수에 할당하는 것이다.
let arr = [0,1,2,3,4]; 라는 배열이 있을때, let zero =arr[0]; 이와 같은 방식으로 각 할당할 수 있다.
하지만 이와 같은 방법으로 하게되면 중복되는 코드가 발생하기 때문에 조금은? 비효율적이라고 생각할 수 있다.
let data=[0,1,2,3,4];
let [p1,,p2] = data;
console.log(p1,p2);
//0
//2
다음과 같이 할당하고자 하는 변수에 쉼표로 구분자를 두어 인덱스를 설정하고 변수명을 작성하면 배열에 같은 위치에 값이 들어가게 된다.
다음으로는 객체에서 Destructuring을 사용하는 방법이다.
기존에 객체에서 Key값을 호출했을 경우에는 객체를 선언하고 초기화를 해준 Key값만을 사용했는데, key값을 변경하여 사용해야하는 경우 번거로운 작업이 필요했고 같은 value값이 아니었다. (값이 아닌 주소체계에서)
때문에 객체의 Key 값을 바꿔 사용할 수 있게 Destructuring이 추가되었다.
let obj = {
name:"omaeng",
add:"korea",
age:10
}
//기존의 방법은 선언된 객체의 Key값으로 밖에 호출을 못한다.
// let {name, age} = obj;
//console.log(name, age);
//새로운 방법
let {name:myname, age:myage} = obj;
console.log(myname,myage);
//"omaeng"
//10
Destructuring에는 몇가지 활용방법이 있다.
예를 들어 JSON으로 값을 받아왔을때 파싱하는 방법이나, EVENT객체를 전달하는 방법이 있다.
let json_response_result = [
{
"title":"title",
"url":"https://omaeng.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F"
},
{
"title":"title22222222222",
"url":"https://omaeng.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F"
}
];
let [,{title,url}] = json_response_result;
console.log(url);
//"https://omaeng.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F"
이 방법은 json_response_result 라는 변수에 JSON 형식으로 받아온 데이터 배열을 Desturcturing하여 변수를 선언하는 방식으로 파싱한다. 객체의 배열에서 원하는 데이터를 추출하여 변수에 담아 놓는 것이다.
결과를 보게되면 url을 올바르게 출력하는 것을 볼 수 있다.
다음으로는 함수를 이용해서 파싱하는 방법이다.
이 방법은 함수를 만들어서 원하는 인덱스에 있는 값을 파싱하는 방법이다.
let json_response_result = [
{
"title":"title",
"url":"https://omaeng.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F"
},
{
"title":"title22222222222",
"url":"https://omaeng.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F"
}
];
// let [,{title,url}] = json_response_result;
// console.log(url);
function getUrl([{},{url}]){
console.log(url);
}
getUrl(json_response_result);위처럼 변수를 선언하는 방법과 같이 동일한 결과 값을 받을 수 있다. 이 함수는 [{첫번째 객체},{두번째객체의 urlr값}]을 받아와 비구조화 즉 Destructuring을 해서 console에 찍어주는 역할을 한다.
또 이벤트에 대해서 비구조화를 진행하는 것 또한 가능하다.
HTML이 다음과 같을때,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
https://omaeng.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F
</div>
</body>
</html>
이벤트 리스너를 이용하면 원하는 타입이나 타겟, 텍스트 등을 골라와서 뽑아올 수 있게 된다.