[JavaScript / ES6] ES6 문법 정리

 

 

🔗 const, let

 

📌 var VS const, let

 

 var은 함수 스코프이다.

 const, let은 블록 스코프이다. 따라서 {블록} 밖에서 변수에 접근할 수 없다.

 

📌 const VS let 

 

 let은 변수에 재할당이 가능하다. 따라서 다른 값을 대입해야 하는 상황이 생겼을 때 사용한다. 

 const는 변수에 한 번 대입하면 다른 값을 대입할 수 없다.  보통 기본적으로 사용한다.

 

---

🔗 템플릿 문자열

 

const num1 = 1;
const num2 = 2;
const result = 3;
 
const string1 = num1 + '+' + num2 + '=' + result; // 기존 방식
 
const string2 = `${num1}+${num2}=${result}` // ES6

 

 문자열을 합칠 때 사용한다. ' ' 대신 ` `를 사용하여 문자열을 감싸고, 그 안에 ${변수}를 사용하여 변수를 넣을 수 있다.

 기존 방식은 ' ', +, 띄어쓰기를 여러 번 사용해야 하므로 가독성이 좋지 않고 지저분 하지만, 템플릿 문자열을 사용하면 깔끔하게 코드를 작성할 수 있다.

 

---

🔗 객체 리터럴

 

- 같은 객체의 메서드에 함수를 연결할 때 :(콜론)과 function을 붙이지 않아도 된다.

- 속성명과 변수명이 겹치는 경우 한 번만 쓰면 된다.

- 객체의 속성명을 동적으로 생성할 수 있다.

 

---

🔗 화살표 함수 (Arrow Function)

 

// 기존 방식
function add1(x, y){
    return x + y;
};
 
 
// ES6
const add2 = (x,y) => x + y;

 

 function 선언 대신 =>로 함수를 선언한다.

 return문을 줄일 수 있다.

 

---

🔗 Rest Parameter

 

 함수의 마지막 파라미터 앞에 Spread 연산자(...)를 붙여 모든 나머지 인수를 배열로 나타낸다.

 

1 2 3 4 5 6 7 8 9 10 11 12

function myFun(a, b, ...manyMoreArgs) {   console.log("a", a);   console.log("b", b);   console.log("manyMoreArgs", manyMoreArgs); }   myFun("one", "two", "three", "four", "five", "six");   // Console Output: // a, one // b, two // manyMoreArgs, [three, four, five, six]

cs

 

---

🔗 비구조화 할당

 

 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있다.

 

---

🔗 Promise(프로미스)

🔗 async, await

[JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await

---

🔗 Class(클래스)

 

 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

 

class Person{ // 클래스 생성
    constructor(name, age){ // 생성자
        this.name = name; // 필드(변수)
        this.age = age;
    }
    speak(){ // 메소드
        console.log(`${this.name} hello!`);
    }
}
 
const jin = new Preson('jin', 20); // 객체 생성
 
console.log(jin.name); // jin
jin.speak(); // jin hello!

[JavaScript] 프로토타입(prototype) 이란

 

---

🔎 참고 자료

• Rest 파라미터 - JavaScript | MDN

💡 같이 보면 좋을 Post

[JavaScript] 자바스크립트는 '이벤트 기반', '논블로킹' 방식을 사용하고 '싱글 스레드' 언어이다.