💡 코드는 직접 읽고 해석하면서 이해해야한다.
-
es6란? es5는 2009년에 나왔고 2015년에 새로 사양 되어 es6가 나왔다.
-
es6로 화살표 함수 ,템플릿 리터럴, 기본 매개 변수, 비구조화 할당, 모듈 을 쉽게 사용할 수 있게 되었다.
-
그렇다면 JS와의 차이는? JS는 ECMAScript의 사양을 준수하는 범용 스크립트 언어이다.
💡destructuring(구조분해할당)
const player = {
name: "Lala la",
club: "LA lalla",
address: {
city: "Los Angeless"
}
};
console.log(player.address.city); //Los Angeless 출력
const {
name,
club,
address: { city }
} = player;
console.log(name); //Lala la 출력
console.log(`Hello ${name}`); //Hello Lala la 출력- destructuring(구조분해할당) 이란?
배열이나 객체의속성을 해체하여 그값을 개별 변수에담을 수 있는 JS표현식.
- 위의 코드에서는
player 객체를 정의하여name, club, adress, city 속성에 값을주었다. - 여기서
city를 출력 하기 위해서는player.address.city까지 길게 쳐야한다.
=> 이러한 불편함을 줄이기 위하여 속성을 해체하고 값을 개별로 담을 수 있는 destructuring을 사용한다.
🌈 destructuring하는 방법
- 객체 밑에
const로 정의하여 속성이름만 적는다. - 중괄호의 끝에는
= 객체이름을 붙여서 타입을 설정한다. - 객체에서 출력 할 때처럼 굳이
plyer.adress.city까지 적지 않고 바로city를 출력 할 수있다.
💡 DefaultParameters(기본매개변수)
function foodShopping(food = "someting") { //여기가 기본매개변수 설정하는거
return `I'm going to buy ${food} from the grocery shop`;
}
console.log(foodShopping()); //I'm going to buy someting from the grocery shop출력
console.log(foodShopping("milk")); //I'm going to buy milk from the grocery shop출력
위의 코드가 DefaultParameter을 작성 한 것이다. 그래서 콘솔에 출력할때 인자를 아무것도 보내지 않으면, 기본값인 something이 출력될 수 있다.
기본값을 설정하지 않으면 무엇을 출력할까?
function foodShoppingg(food) {
return `I'm going to buy ${food} from the grocery shop`;
}
console.log(foodShoppingg()); //I'm going to buy undefined from the grocery shop출력
console.log(foodShoppingg("milk")); //I'm going to buy milk from the grocery shop출력
위의 코드에서 첫번째 콘솔에 인자를 작성하지 않았다. 출력결과는 undefined를 출력하게 된다.
💡 ArrowFunction(화살표함수)
- 화살표함수는 코드를 더 체계적이고 깔끔하게 보이도록 해준다.
function dinnerMenu(food = "burger") { //인자로 아무것도 받지 않았을 경우, burger를 출력하도록 default값을 설정 해 놓은 것이다.
return `I'm going to eat a ${food} for dinner`;
}
console.log(dinnerMenu("chicken"));//I'm going to eat a chicken for dinner 출력
console.log(dinnerMenu());//I'm going to eat a burger for dinner 출력이 방법 대신
const dinnerMenu = (food = "burger") => `I'm going to eat a ${food} for dinner`;
console.log(dinnerMenu("chicken")); //I'm going to eat a chicken for dinner 출력
console.log(dinnerMenu()); //I'm going to eat a burger for dinner 출력
이렇게 작성한다.
🌈 화살표함수 사용법
- function을
const로 바꿔준다. - 중괄호와 return을 지우고
=>를 쓴다.
💡 Import and export(가져오기 및 내보내기)
🧸 index.js 파일
import { Animal, Cat } from "./animal"; // 여기가 import
let cat = new Animal("Cat", 4); //생성자
cat.makeNoise(); //Loud noise
console.log(Animal.return10()); //10
console.log(cat.metaData); //Type Cat, Legs: 4
let cat2 = new Cat("Cat", 4);
cat2.makeNoise(); //meow
console.log(Cat.return10()); //10
console.log(cat2.metaData); //Type Cat, Legs: 4
import는 export에서 내보내기 된 모듈을받아올때사용한다.- 받아온파일에서 사용할
변수이름(즉, 보낸 파일에서 사용한 변수)을 import에서 중괄호 안에 작성해준다. - 받아온 파일 이름을 from 뒤에 작성 한다.
🧸 animal.js 파일
export class Animal { // 여기가 export :: Animal class를 모듈로 내보냄
constructor(type, legs) {
this.type = type;
this.legs = legs;
}
makeNoise(sound = "Loud Noise") {
console.log(sound);
}
get metaData() {
return `Type ${this.type}, Legs: ${this.legs}`;
}
static return10() {
return 10;
}
}
export class Cat extends Animal { //여기가 export // extends로 클래스 상속받음
makeNoise(sound = "meow") {
console.log(sound);
}
}-
exports는 import로 모듈을 내보낸다.
-
위의 코드에서 사용한
constructor은생성자이다.- 클래스에서 사용할
오브젝트(인스턴스)를 만들고, 생성자에서 할당해준다.
- 클래스에서 사용할
-
위의 코드에서 사용한
get은getter메서드이고,클래스 속성값을 가져올 때사용한다.- get 키워드로 정의된 메서드는 클래스 속성을 보호하고, 값의 변화를 막아주는 역할을한다.
- 일반적으로 클래스 속성값을 가져오기 위해서 해당 속성에 직접 접근하는 방식을 사용하나, 이는 해당 속성값을 직접 변경할 수 있는 문제가 있다. 이를 방지하기 위해 Getter메서드를 사용한다.
-
위의 코드에서 사용한
static은 정적 메서드이고, 인스턴스를 생성하지 않아도 클래스를 통해 바로 호출할 수 있는 메서드이다.
💡 Classes(클래스)
- 객체지향의 핵심, class!
- 코드를 더욱 안전하게 캡슐화 할 수 있다.
- 비슷한 object많이 만들거면 class만들어 쓴다.
class 기계{
constructor(){
}
}클래스를 만드려면 class 클래스이름 { constructor() {} } 의 형태로 쓸 수 있다.
class 기계{
constructor(맛, 개수){
this.맛 = 맛 //this는 기계로부터 생성되는 object라고 이해한다.
this.개수 = 개수
}
}
const 붕어빵 = new 기계('팥', 5)
const 붕어빵2 = new 기계('슈크림', 2)
console.log(붕어빵.맛) //팥 출력
console.log(붕어빵.개수) //5 출력
console.log(붕어빵2.맛) //슈크림 출력
console.log(붕어빵2.개수) //2 출력new키워드를 사용해 class메서드에 접근한다.
