[코드잇]20 모던 자바스크립트 - Destructuring(구조 분해) With 함수 함수 + 배열 + Destructuring문법 함수가 리턴하는 값이 배열일 때 function getArray() { return ['컴퓨터','냉장고','세탁기'] } const [el1,el2,el3] = getArray(); Rest파라미터가 배열이라는 점을 이용 function printWinners(...args){ const [macbook, ipad, airpads, ...coupon] = args; console.log('이벤트 결과를 알립니다.'); console.log(`맥북의 주인공은 '${macbook}'님 입니다.`); console.log(`아이패드의 주인공은 '${ipad}'님 입니다.`); console.log(`에어팟의 주인공은 '${airpads}'님 입니다.`); con.. 2023. 2. 25. 모던 자바스크립트 - Destructuring(구조 분해) With 객체 일반적으로 객체의 프로퍼티 값에 접근할 때, 점 표기법으로 매번 작성하지 않고 프로퍼티네임 자체를 변수처럼 사용한다. const macbook = { title: '맥북 프로 16형', price: 3690000, memory: '16GB', storage: '1TB SSD 저장 장치', display: '16형 Retina 디스플레이' } const title = macbook.title; const price = macbook.price; 이런 상황에서 Destructuring을 활용할 수 있다. const macbook = { title: '맥북 프로 16형', price: 3690000, memory: '16GB', storage: '1TB SSD 저장 장치', display: '16형 Retin.. 2023. 2. 25. 모던 자바스크립트 - Destructuring(구조 분해) With 배열 Destructuring(구조 분해) ES2015 배열과 객체는 여러 값을 담는 데 유용하며, 이를 분해하는 문법 배열과 객체는 구조가 다르므로, Destructuring 문법도 적용 방법이 다르다. 배열 - 인덱스로 여러 값의 순서가 있음 객체 - 프로퍼티 네임으로 여러 값의 이름이 있음 Destructuring(구조 분해) - 배열 코드 설명 : 등수에 따라 상품을 나누기 위해, 상품 이름으로 만든 변수에 배열의 요소를 순서대로 할당 const rank = ['효준','재하','수민','상훈']; const macbook = rank[0]; const ipad = rank[1]; const airpods = rank[2]; const coupon = rank[3]; 처음부터 상품이름에 멤버 이름을 할.. 2023. 2. 25. 모던 자바스크립트 -모던한 프로퍼티 표기법- 객체의 프로퍼티를 간결하게 표현하는 방식(ES2015) 축약형 표현이 가능한 경우 객체를 만들 때 변수에 할당된 값으로 프로퍼티를 만들 수 있는데 , 변수 이름과 프로퍼티 네임이 같다면 축약 가능. const title = 'codeit'; const birth = 2017; const job = '프로그래밍 감사'; const user = { title: title, birth: birth, job: job, }; const user = { title, birth, job, }; 마찬가지로 외부에 있는 함수를 메소드로 만들 때도 함수명이 같다면 함수명()과 콜론 지우기로 축약이 가능하다. 객체 내부에서 선언한 메서드는 콜론과 function() 키워드 생략 하면 된다. const user = { fir.. 2023. 2. 24. 이전 1 2 3 4 5 다음
