JavaScript 자바스크립트 ES6 문법 정리하기.

 

 

 

ES6 JavaScript - 요약

 

• let & const
• Arrow Function
• Export & Imports
• Classes
• Spread & Rest Operator
• Destructuring
• Promises
• Default parameters
• Template Literals

 

---

 

 

 

let & const

 

let과 const 는 기본적으로 var 를 대체한다. 함수 스코프와 재선언 재할당이 가능한 var는 중복 선언이 가능하기 때문에 위에서 해당 변수를 선언하고 아래서 실수로 다시 사용할 경우 예상하지 못하는 전혀 다른 결과를 나타낼 수 있다. 그리고 함수 레벨 스코프로 인해서 for문을 예로 들면 for문이 함수 내부가 아닌 외부에서 돌아갈 경우 전역 변수로 역할을 하기 때문에 이 또한 예상치 못한 결과를 나올 수 있다. 이러한 문제점을 방지하기 위해 ES6 이후부터 let 과 const 사용을 권장한다.

 

let 과 const 는 블록 레벨 스코프를 가진다.

let 은 재선언이 불가능하지만 재할당은 가능하다.

const 는 재선언 재할당 모두 불가능한 상수이며 선언과 초기화를 함께 해주어야 한다.

 

var, let, const 모두 호이스팅 되지만 var 만 선언과 동시에 undefined로 초기화되며 let 과 const 는 그 단계가 분리되어있고 분리 되어진 공간 TDZ(일시적 죽은 공간)에 의해서 호이스팅이 일어나지 않은 것처럼 작동한다.

 

 

 

---

 

 

Arrow Function

 

화살표 함수는 일반적인 함수표현보다 좀 더 간편하게 사용할 수 있는 방법이지만 조금 다른 부분들이 있다.

 

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.
-MDN

 

화살표 함수의 this는 어떻게 호출되었냐에 따라 바인딩할 객체가 결정되는 일반 함수와 다르게 어디에 선언되었는지에 따라 결정되며 상위 스코프가 가지는 this를 계승받는다.

 

화살표 함수는 일반 함수보다 간결하게 콜백함수로 사용할 수 있다.

 

화살표 함수는 기본적으로 익명 함수로만 사용할수 있다.(표현식으로 사용)

 

메소드로 정의하는 것은 피해야 한다.

(화살표 함수의 this는 위해서 말한 거처럼 호출한 객체가 아닌 해당 스코프의 this를 계승받기 때문)

 

 

 

함수 선언식

function basicFn(x) {
	return x + 1;
}

basicFn(2)

 

함수 표현식

var expression = function() {
	return "this is function Expressions";
}

expresstion();

 

화살표 함수

 

const arrow = () => {
	return "Arrow function";
}

arrow();


const arrow = () => "Arrow function";

arrow();

//매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
//함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있고 return을 생략해도 암묵적으로 return 된다.

 

 

 

---

 

 

Export & Imports

 

가져오기 및 내보내기 기능을 사용하여 재사용 가능한 구성요소를 만들 수 있다.

export를 사용해서 원하는 모듈을 내보내서 필요한 컴포넌트에서 import 해서 불러와서 사용할 수 있다.

 

 

export

export default function multiply(x,y){
	return x + y;
}

//해당 로직을 export 하여 다른 컴포넌트에서 import로 불러와 사용할수 있다.

 

import

import multiply from './multiplyComponent'

console.log(multiply(2,3));

//5

//export 한 모듈이 필요한 곳에서 import 해서 사용할수 있다.

 

export default 로 내보낸 모듈은 import 할 때 자신이 원하는 이름으로 받아 올 수 있다. default(unnamed) 는 항상 하나만 내보낼 수 있고 받아오는 이름과 관계없이 내보낸 모듈만 가져오기 때문이다.

 

default 가 없는 export 는 (named)로써 항상 내보낼 때의 이름으로 가져올 수 있고 한번에 하나만 내보낼수 있는 default와 다르게 한번에 여러게를 내보낼수 있고 { name, name2 ,name3 } 이런식으로 중괄호를 사용해서 가져오고 동시에 여러게를 가져올수 있다.

 

 

 

 

---

 

 

Classes

 

Classes는 constructor(생성자) 함수와 prototypes를 대체하는 기능입니다. 자바스크립트 객체에 청사진을 정의할 수 있습니다.

 

클래스는 무언가 만들 틀 같은 역할을 한다.

한 번만 선언한다.

클래스 안에는 데이터가 없다.

메모리에 올라가지 않는다.

 

//클래스 생성
class Person {
    constructor () {
        this.name = '크리스';
    }
}

const person = new Person();
console.log(person.name); 
// '크리스'
//constructor 내부의 this는 클래스가 생성한 인스턴스를 가르킨다.

-----------------------------------------------------------

// 클래스 생성 간편한 방법
class Person {
    name = '크리스';
}
 
const person = new Person();
console.log(person.name); 
//'크리스'

-----------------------------------------------------------

//메소드를 정의할수 있다.
class Person {
    name = '크리스';
    printName = () => {
    	console.log(this.name);
  	} // 화살표함수로 작성가능
  	printMyName () {
  	    console.log(this.name);
    } //일반 함수 작성
  
}
//화살표 함수과 같은 이점을 가진다. this 바인딩 레퍼펀스를 변경하지 않는다.

const person = new Person();
console.log(person.printName); 
//'크리스'

-----------------------------------------------------------

 

 

 

---

 

 

Spread & Rest Parameter

 

Spread operator는 배열에서 요소들을 가져오거나 (배열을 요소들의 리스트로 분해) 객체에서 속성을 가져온다.

 

배열

spread operator

const firstArray = [1, 2, 3];
const newArray = [...firstArray, 4, 5]; 

//[1, 2, 3, 4, 5];

 

객체

const firstObject = {
    name: '크리스'
};

const newObject = {
    ...firstObject,
    age: 33
};

newObject 의 모습
{
    name: '크리스',
    age: 28
}

 

 

Rest Parameter

참고 출처

 

Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

 

Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다.

 

Rest 파라미터는 함수 정의 시 선언한 매개변수 개수를 나타내는 함수 객체의 length 프로퍼티에 영향을 주지 않는다.

 

function rest(...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(rest); // [ 1, 2, 3 ]
}

rest(1, 2, 3);

 

 

 

---

 

 

 

Destructuring

 

Destructuring을 사용하면 배열이나 객체의 값에 쉽게 액세스 할 수 있고 변수에 할당할 수 있습니다.

 

배열

const array = [1, 2, 3];
const [a, b] = array;

console.log(a);
//  1
console.log(b); 
//  2

console.log(array); 
//[1, 2, 3]

 

객체

const firstObj = {
    name: '크리스',
    age: 33
}
const {name} = myObj;

console.log(name);
//'크리스'

console.log(age); 
//undefined

console.log(firstObj); 
//{name: '크리스', age: 33}

 

 

 

---

 

 

Promises

 

자바스크립트 비동기 처리에서 사용되는 객체이다. 비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행한다.

 

주로 서버에서 받아온 데이터를 사용할 때 사용한다

 

프로미스에는 3가지 상태가 있다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

//프로미스 생성
const fisrtPromise = function(data){
  return new Promise(function(resolve,reject){
    if(data){
      resolve("성공");
    }
    else{
      reject("실패");
    }
  });
}


//프로미스 실행
fisrtPromise(true).then(function(result){
  console.log(result);//성공
},function(err){
  console.log(err);//실패
});

 

 

 

---

 

 

 

Default parameters

 

Default Parameter를 사용하면 주어진 값이 없거나 undefined가 전달될 경우, 매개변수를 기본값으로 초기화할 수 있다.

 

function default(num = 1) {
  
    console.log(num);
    
}
  
default(); 
//1
default(undefined); 
//1
default(null); 
//null
default(""); 
//""
default(false); 
//false
default(NaN); 
//NaN

 

 

 

---

 

 

 

Template Literals

 

ES6부터 새로 도입된 문자열 표기법이다.

 

개행(줄바꿈)

var multiLine = ` 
라인
   원하는데로
           입력`;

백틱을 사용해 템플릿 리터럴로 원하는 줄 바꿈등 쉽게 표현 가능.

기존에는  \n 줄바꿈 \t 탭 을 사용해서 가독성과 사용하기 불편함이 있었다.

 

 

표현식 삽입

const name = '크리스';
cosnt age = 33;

console.log(`내 이름은${name} 나이는 ${age}`)
// 내 이름은 크리스 나이는 33

기존에는 문자는 ''' 감싸고 + 연산자로 붙이면서 내용이 길어질수록 헷갈리거나 가독성도 좋지 않았다.

하지만 템플릿 리터럴로 변수나 연산 등을 벡틱 안에 ${변수나,연산} 를 이용하여 쉽게 사용할 수 있다.

 

 

 

---

 

 

 

https://github.com/chry8822

chry8822 - Overview

 

 

---