노드와 자바스크립트

노드와 자바스크립트

자바스크립트는 매년 새로운 버전으로 업데이트되고 있습니다.

이에 맞춰 노드도 주기적으로 버전을 올리며 변경된 자바스크립트 문법을 반영하고 있습니다.

그중 2015년에 ES6(ES2015)가 등장하면서 자바스크립트 문법에 매우 큰 변화가 있었습니다.

이때 무엇이 변했는지 알아 보도록 하겠습니다.

 

 

변수 선언 방식

먼저 변수부터 바뀌었습니다.

var를 주로 사용하였지만 이를 let과 const로 대체한 것입니다.

아래와 같이 예시를 보도록 하겠습니다. x는 3이 출력되지만 y는 에러가 발생하였습니다.

이유로는 var은 함수 스코프를 가지므로 if문의 블록과 관계없이 접근할 수 있지만

let과 const의 경우 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없게 됩니다.

if (true) {
	var x = 3;
}
console.log(x); //3

if (true) {
	const y = 3;
}
console.log(y); // Uncaught ReferenceError: y is not defined

 

 

const와 let

var이랑 const, let의 차이점을 알아보았고

const와 let과의 차이점에 대해서도 알아보도록 하겠습니다.

const의 경우 한번 값을 할당하게 되면 다른 값을 할당할 수 없습니다.

또한 초기화할 때 값을 할당하지 않으면 에러가 발생하고 다른 값을 할당하려고 해도 에러가 발생합니다.

const a = 0;
a = 1; //에러 발생

const c; //에러 발생

let b = 0;
b = 1; // b=1

 

 

템플릿 문자열

ES2015 문법에 새로운 문자열이 생겼는데 바로 백틱 ` 기호입니다.

훨씬 깔끔하고 가독성을 좋게 하기 위해 생기게 되었습니다.

아래의 예시로 보도록 하겠습니다.

var num1 = 1;
var num2 = 2;
var result  =3;
var string1 = num + ' 더하기 ' + num2 +'는 \'' + result +'\'';
console.log(string1);


//백틱 기호 사용시

const num3 = 1;
const num4 = 2;
const result2 = 3;
const string2 = `${num3} 더하기 ${num4}는 '${result2}'`;
console.log(string2);

 

 

화살표 함수

기존의 함수나 표현식을 보다 더 간결하게 해주는 함수입니다.

기존의 function() {}도 그대로 사용이 가능합니다.

아래의 예시에서 add1, add2, add3, add4는 모두 같은 기능을 하는 함수입니다.

function add1(x, y) {
  return x + y;
}

const add2 = (x, y) => {
  return x + y;
};

const add3 = (x, y) => x + y;

const add4 = (x, y) => (x + y);

 

 

또한 아래의 예제코드를 통해 기존의 function을 왜 지금까지 사용하는지 알 수 있습니다.

(this 바인드 방식이 달라진것을 확인 하실 수 있습니다.)

var relationship1 = {
  name: 'zero',
  friends: ['nero', 'hero', 'xero'],
  logFriends: function () {
    var that = this; 
    this.friends.forEach(function (friend) {
      console.log(that.name, friend);
    });
  },
};
relationship1.logFriends();



const relationship2 = {
  name: 'zero',
  friends: ['nero', 'hero', 'xero'],
  logFriends() {
    this.friends.forEach(friend => {
      console.log(this.name, friend);
    });
  },
};
relationship2.logFriends();

 

 

 

프로미스

가장 중요한 부분입니다.

프로미스는 악명 높은 콜백 지옥(callback hell) 현상을 극복했다는 평가를 받고 있습니다.

이 프로미스는 실행은 바로 하되, 결괏값은 나중에 받는 객체입니다.

이는 자바스크립트의 비동기 처리에 사용되며 주로 받아온 데이터들을 화면에 표시하기 위해 사용합니다.

 

아래의 예시를 한번 보도록 하겠습니다.

콜백 함수의 인자는 resolve, reject입니다.

그리고 resolve('성공') 이 호출되면 이행 상태가 되어 then의 message가 성공이 됩니다.

반대로 reject('실패')가 호출되면 catch의 error가  '실패'가 되는 것입니다.

.finally의 경우에는 끝나고 무조건 실행되는 부분을 말합니다.

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


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

 

 

 

 

 

다음에는 async과 await 그리고 map과 set, AJAX에 대해 알아보도록 하겠습니다.