JS 고급-(2) 구조 분해 할당

김수민·2022년 11월 25일
0

JavaScript

목록 보기
14/27

배열

배열 구조 분해 할당 []=arr

	let fruits = ["사과","딸기","바나나"]
	
    let [fruit1, fruit2, fruit3] =fruits;
    위의 구조 분해 할당 구문은 아래와 같다.
    let fruit1= fruits[0];
    let fruit2= fruits[1];
    let fruit3= fruits[2];
    👉 즉, 값이 []안에 작성된 변수에 할당된다.
    👉 직접 변수에 할당하는 것 보다 코드를 줄일 수 있다.
    
    let [fruit1, , fruit3] =fruits;
    👉 위와 같이 작성하면 필요하지 않은 "딸기"요소를 제외한 값을 변수값으로 가진다.
    // fruit1 👉사과
    // fruit3 👉바나나
    
	let [name="green",hobby="study"] = ["blue"]
    할당할 값이 없을 때 기본값을 설정할 수 있다.

변수 교환 []=[]

    let str1="green"
    let str2="blue"
    
    //서로의 값을 교환하고 싶을때, (str1에 blue, str2에 green)
    
    [str1, str2] = [str2, str1]
    
	//위와 같이 작성한다.

스프레드 구문 ...

나머지 요소를 배열로 반환하여 저장한다.

	let newArr= ["a","b","c","d","e","f","g"]
	let [str1,str2,str3,...str4] = newArr;
    👉 //str1="a"; str2="b"; str3="c";
    👉 //...str4=["d","e","f","g"];

객체

객체 구조분해 할당 {}

    let student={
    	name: "green",
        age: 20;
        haJob: true;
	}
    
    let {name,age,hasJob} = student;
    👉 배열 구조할당과 같이, 값이 {}안에 작성된 변수에 할당된다.
    // let name= student.name;
    // let age= student.age;
    // let hasJob= student.hasJob
    
	let{name:n, hasJob:job, age}= student;
    👉 {객체 keyname:변수이름}으로도 value를 지정할 수 있다.

참고한 문서

스프레드 구문 ...

나머지 요소를 오브젝트로 반환하여 저장한다.

	let obj ={title:"green", height:100, width:200};
    let {title, ...rest} = obj;
    👉 title= "green";
    👉 rest = {height: 100, width: 200};

함수 매개변수

    function 함수명({object의 key명}){
    	💡 함수 안에서 object의 key를 사용할 수 있다.
    }
	함수명(사용할 object명)

함수 안에서 object의 key값을 object.key로 작성하지 않고 key만으로 호출 할 수 있다.

	let options={
    	title: "MyTitle",
        items: ["item1","item2"]
    }

    function showMenu({title,items}){
    	console.log(title) // 👉"MyTitle"
    	console.log(items) // 👉["item1","item2"]
    }
    showMenu(options)    

아래는 위를 다른 예제로 다시 작성한 것이다.

//객체 리터럴
	let dog1={
      name:"구름",
      age: 3,
      sound(){
        console.log("hi");
      }
      // sound가 key가 되고 function이 value가 된다.
    }
    // 객체는 key와 value로 구성되어있다.
    let name = dog1.name; // = "구름" 
    let sound = dog1.sound; // sound(){console.log("hi")}함수가 담기게 된다.
    
    let {name,sound}= dog1;
    // name이라는 변수, sound라는 변수를 만들었다.
    // dog1에서 {}의 key로 값을 받아온 값과 동일하다. 
	console.log(name); // = "구름" 
    console.log(dog1.sound); // sound(){console.log("hi")}함수가 담기게 된다.
profile
sumin0gig

0개의 댓글