오늘은 저번 JavaScript 블로깅에 정리하지 않았던 복잡한 JS 문법에 대해 좀 더 알아볼 것이다.
배열과 객체의 구조 분해, 전개 구문(spread), rest 파라미터, 클래스와 상속에 대해 알아보겠다.
구조 분해 할당 (Destructuring assignment)
구조 분해 할당이란, 배열이나 객체의 속성을 해체해 값을 개별 변수에 담는 것이다.
즉, 배열이나 객체에 저장된 데이터의 일부를 가져오고 싶을 때 사용한다.
배열의 구조 분해 할당
• const [ 변수 ] = 배열;
• 각각의 배열 요소를 변수의 이름으로 접근하기 위해서 사용
• 각 변수에 배열의 인덱스 순으로 값 대응
• 구조분해 시 변수의 값이 undefined 일 때 기본값 할당 가능
• 구조분해 없이 두 변수의 값 교환도 가능
- 배열 구조 분해 예시const arr5 = ['tomato', 'kiwi', 'banana']; const [tomato, kiwi, banana] = arr5; console.log(tomato); //'tomato'
객체의 구조 분해 할당
• const { 변수 } = 객체;
• 객체의 속성값을 변수로 접근하기 위해서 사용
• key의 이름에 따라서 변수에 값 할당
• 객체 안의 속성을 변수명으로 사용
• 콜론(:) 이용해 새 변수명을 선언하고, 원래의 값을 새 변수명에 할당 가능
- 객체 구조 분해 예시const obj = { title: '제목', content: '내용', num: 0 }; const { title, num, content } = obj; console.log(content); //'내용' const title = obj.title; const num = obj.num; const content = obj.content;
... 연산자
쩜쩜쩜이라니... 귀엽다
전개구문 (spread) ...
• spread : 호출하는 함수의 인자에 사용const arr3 = [...arr1, ...arr2]; => arr1, arr2 배열 합쳐짐
rest 파라미터
• rest : 호출받는 함수의 파라미터에 사용, 호출하는 함수에서 남은 파라미터 값을 배열로 설정const values = [10, 20, 30]; function get(a, ...rest) { console.log(rest); // 결과는 [20, 30] } get(...values);
클래스
클래스
• 오브젝트(객체)를 만들 수 있는 ‘틀’(template)
• new 키워드를 이용해서 미리 만들어둔 클래스 형태의 오브젝트를 만들 수
있음 (instance 화)
• 클래스 생성시 클래스의 이름은 PascalCase
클래스 생성 예시class House { constructor(name, year) { // 생성자 함수, 객체의 속성(내부에서 사용할 변수) 부여 this.name = name; this.year = year; } age() { // 객체 메소드 console.log(`${new Date().getFullYear() - this.year}년에 건축 되었어요`) } }
클래스 상속
• extends로 ‘상속’ 받을 수 있음
• 기존에 있던 클래스의 속성과 메소드를 받아와서 사용하되, 추가적인 속성과 메소드를 더 정의할 수 있음
클래스 상속 예시class Apartment extends House { … } => Apartment 클래스에서 House 클래스의 속성이나 메소드를 사용할 수 있음
