모던자바스크립트7 모던 자바스크립트 - 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. 모던 자바스크립트 -Spread구문- Spread 구문 '펼치다'라는 의미처럼 하나로 묶여 있는 값을 각각의 개별 값으로 펼치는 문법 (특히 배열을 다룰 때 유용) const number = [1,2,3]; console.log(number); console.log(...number); // 배열앞에 ...붙이는게 문법 Rest Parameter를 만들 때도 ...을 사용하지만 동작하는 방식은 다르다. Rest Parameter - 여러 개의 아규먼트로 하나의 파라미터로 묶는 방식 Spread 구문 - 하나로 묶여 있는 값을 각각의 개별 값으로 펼치는 방식 Spread 구문으로 배열 복사하기 상기) 객체 타입의 값들은 변수에 주소값이 참조됨. interactiveWeb에 javaScript를 push 했지만 webPublishing에도 추가.. 2023. 2. 24. 이전 1 2 다음
