728x90
간단요약... (그대로 복사해서 console 확인해보자)
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
"use strict"
//미친듯이 남발되고 있음(꼬옥 연습)
let testArr = ["민우","졸림","잘래?"];
let [,name,...merong] = testArr;
console.log("check:", name, merong);
let who = {
name:"민우",
age: 30,
song:"Gone"
}
let {age} = who;
//let who2 = {...who}; //객체 복사와같다, let who2 = who; 별명과 새로 생성은 전혀 다른 이야기 지금은 새로생성!
let who2 = {...who, name:"철이"} //객체 생성과 동시에 속성을 변경을 함.
//console.log(who2);
//console.log(who);
const objCopy = (pObj) =>{
return {...pObj}; //객체 복사
}
let ori = {name:"강도", spec:"사기"};
let oriCp = objCopy(ori);
oriCp.spec = "탕진찜";
console.log(ori);
console.log(oriCp);
</script>
배열 구조분해 (그대로 복사해서 console 확인해보자)
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
//배열 구조 분해 할당
console.group("배열 구조 분해 할당")
const animals = ["강아지", "고양이", "오리"];
//구조분해 할당
const [dog, cat, duck="꽥꽥", cow="소"] = animals;
//고양이가 필요 없는경우, 강아지와 오리만 뽑아오기
//const [dog, ,duck] = animals;
//객체에 없는값이면 '='연산자를 이용해 기본값을 적용할 수 있다.
console.log(duck ,cow)
//spread operator연산자 사용
const[ddog, ccat, ...rest] = animals;
console.log(ddog, ccat, rest);
console.groupEnd();
//TIP!!!
//*****************************************************TIP 1 Start*****************************************************************************
console.group("TIP 1 - 변수 값 교환하기");
let a = 1;
let b = 2;
/* 기존은 이렇게 바꿔야함 하지만 우리느 구조분해를 배웠기 떄문에 멋지게 바꿔볼 예정
let temp = a // temp =1
a = b; //a = 2
b = temp //b =1
console.log(a ,b)
*/
/*어때 이제 좀 멋있나??*/
[a , b] = [b, a];
console.log("a ->",a,"b->",b);
console.groupEnd();
//*****************************************************TIP 1 End************************************************************************
//*****************************************************TIP 2 Start**********************************************************************
console.group("TIP 2 - 함수에서 반환된 배열을 구조 분해 할당하기");
function getAnumals(){
return ["강아지", "고양이", "오리"];
}
/* 기존에는 이렇게 멋없게 뽑아왓음 하지만!! BUT!! 그러나~~
const fAnumals = getAnimals();
const fDog = fAnumals[0];
const fCat = fAnumals[1];
*/
const [fDog, fCat] = getAnumals();
console.log(fDog, fCat);
console.groupEnd();
//*****************************************************TIP 2 End************************************************************************
</script>
객체 구조분해 할당 (그대로 복사해서 console 확인해보자)
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
//객체 구조 분해 할당
console.group("객체 구조 분해 할당");
const aniumals = {
dog : "강아지",
cat : "고양이",
duck : "오리",
}
/* 구식
const dog = animals.dog;
const cat = animals.cat;
const duck = animals.duck;
*/
const dog = "멍멍이";
//변수의 이름은 키값과 같아야함
//만약 키값으로 쓰려던 변수가 이미 있다면 dog:를 쓰지 못하나? 아니!! 쓸 수 있다
//dongaName으로 담아주겠다는 뜻이다
const {dog:dongName, cat ,duck="꽥괙", cow = "소"} = aniumals;
/*고양이와 강아지만 빼오깅
const {cat, dog} = aniumals;
console.log(cat, dog);
*/
console.log(dog, cat ,duck);
console.log(dongName);
console.log(cow); //값이 없으면 기본값을 세팅해둔 "소" 가 출력됨
//spread operator연산자 사용하기
const {dog:ddog, ...arrayLest} = aniumals;
console.log(ddog, arrayLest);
console.groupEnd();
//TIP!!!
//*****************************************************TIP 1 Start*****************************************************************************
console.group("TIP 1 - 반복문에서 구조 분해 할당하기");
const users = [
{name: "철수", age: 25},
{name: "민우", age: 30},
];
/*구식*/
console.group("구식");
for(const user of users){
console.log(user.name);
}
console.groupEnd();
/*구조분해 할당*/
console.group("구조분해 포문에 할당");
for(const {name} of users){
console.log(name);
}
console.groupEnd();
console.groupEnd();
//*****************************************************TIP 1 End************************************************************************
//*****************************************************TIP 2 Start*****************************************************************************
console.group("TIP 2 - 함수의 매개변수로 전달된 객체를 구조 분해 할당하기");
const user = { name : "민우" ,age : 25};
function oldPrintUser(user){
console.log(`${user.name}님은 ${user.age}살 입니다.`);
}
function destructuringPrintUser({name, age}){
console.log(`${name}님은 ${age}살 입니다.`);
}
console.group("oldFunction");
oldPrintUser(user);
console.groupEnd();
console.group("destructuringFunction");
destructuringPrintUser(user);
console.groupEnd();
console.groupEnd();
//*****************************************************TIP 2 End************************************************************************
</script>
'JSP > Muzi' 카테고리의 다른 글
| [Javascript] 나만의 Ajax 만들기 (0) | 2024.08.26 |
|---|---|
| [Javascript] 즉각실행 함수 (0) | 2024.08.26 |
| [Javascript] 배열식 접근법 (1) | 2024.08.26 |
| [Javascript] 콘솔로그 console.log() 맛있게 쓰는법 (0) | 2024.08.22 |
| [Javascript] history.back 이슈(오류) (0) | 2024.08.20 |
