[Javascript] 최신문법 정리

Suzie·2021년 1월 22일

1. const, let

const, let은 {블록 스코프}를 가지므로 블록 밖에서는 변수에 접근 불가
var은 함수 스코프를 가지므로 블록과 관계없이 접근 가능

// hoisting -> 변수의 정의가 그 범위에 따라 선언과 할당으로 분리되는 것
- 변수가 함수 내에서 정의 되었을 경우, 선언이 함수의 최상위로 올라감
- 변수가 함수 바깥에서 정의 되었을 경우, 전역 컨텍스트의 최상위로 올라감
- 함수 표현식으로 정의 되어있다면 호이스팅 발생
const : 한번 값을 할당하면 다른 값을 할당 불가(상수)
자바스크립트에서는 한 번 초기화했던 변수에 다른 값을 할당하는 경우가 적기 때문에 기본적으로 const를 사용하고 다른 값을 할당해야 하는 상황이 생겼을 때 let을 사용

2. 객체 리터럴

속성명과 변수명이 동일한 경우에 한 번만 써도 된다

{name: name, age: age} //ES5
{name, age} //ES20153. 프로미스

3. 프로미스

콜백 대신 프로미스 사용 -> 콜백 지옥 현상 극복

const condition = ture;
const promise = new Promise((resolve, reject) => {
 if (condition) {
 	resolve('성공');
 } else {
  reject('실패');
 }
});

promise
 .then((message) => {
  console.log(message);
 })
	.then((error) => {
 		 console.error(error);
 })
	.finally(() => {
  	console.log('무조건');
});

프로미스의 세가지 상태

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

- Promise chaining : 여러개의 프로미스를 연결해서 사용

4. Async/await

프로미스를 사용해도 then과 catch가 반복됨 -> Async/await 으로 코드 정리
동기식 코드 순서와 실행 순서가 같음
에러 처리를 위해 await을 try-catch 문으로 감싸야 함

async func() => {
 try{
   console.log('다 찾았니'); 
   const user = await Users.findOne('zero');
   const updateduser = await Users.update('zero', 'nero');
   const removedUser = await Users.remove('nero');
} catch(err) {
   console.error(err);
}
}
func()

5. 템플릿 문자열

백틱(`)을 사용해 문자열 안에 변수를 넣을 수 있다.

num1 + '더하기' + num2 + '는\'';//가독성도 떨어지고 escape 문 때문에 지저분함
`${num3} 더하기 ${num4}는 '${result}'`;//${변수}형식으로 기호없이 문자열에 넣을 수 있음

6. 화살표 함수

간결한 표현식
매개 변수가 하나면 소괄호 생략 가능
상황에 따라 return문 생략 가능

var funcName = (params) => {

}//함수 표현식 생성 - 화살표함수

7. 구조분해 할당

객체의 경우

//객체
var candyMachine = {
  status: {
    name: 'node',
    count: 5,
  },
  getCandy: function () {
    this.status.count--;
    return this.status.count;
  },
};
var getCandy = candyMachine.getCandy;
var count = candyMachine.status.count;


//객체 - 구조분해 할당
const candyMachine = {
  status: {
    name: 'node',
    count: 5,
  },
  getCandy() {
    this.status.count--;
    return this.status.count;
  },
};
const { getCandy, status: { count } } = candyMachine;

배열의 경우

//array
var array = ['nodejs', {}, 10, true];
var node = array[0];
var obj = array[1];
var bool = array[3];

//array - 구조분해 할당
const array = ['nodejs', {}, 10, true];
const [node, obj, , bool] = array;

8. 클래스

프로토타입 상속 예제 코드

var Human = function(type) {
  this.type = type || 'human';
};

Human.isHuman = function(human) {
  return human instanceof Human;
}

Human.prototype.breathe = function() {
  alert('h-a-a-a-m');
};

var Zero = function(type, firstName, lastName) {
  Human.apply(this, arguments);
  this.firstName = firstName;
  this.lastName = lastName;
};

Zero.prototype = Object.create(Human.prototype);
Zero.prototype.constructor = Zero; // 상속하는 부분
Zero.prototype.sayName = function() {
  alert(this.firstName + ' ' + this.lastName);
};
var oldZero = new Zero('human', 'Zero', 'Cho');
Human.isHuman(oldZero); // true

프로토타입 상속 예제 코드

class Human {
  constructor(type = 'human') {
    this.type = type;
  }

  static isHuman(human) {
    return human instanceof Human;
  }

  breathe() {
    alert('h-a-a-a-m');
  }
}

class Zero extends Human {
  constructor(type, firstName, lastName) {
    super(type);
    this.firstName = firstName;
    this.lastName = lastName;
  }

  sayName() {
    super.breathe();
    alert(`${this.firstName} ${this.lastName}`);
  }
}

const newZero = new Zero('human', 'Zero', 'Cho');
Human.isHuman(newZero); // true