NodeJS - const, let /템플릿 문자열, 객체 리터럴/ 화살표 함수

var와 const의 Scope

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

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

var는 블록 scope를 무시하다. 그래서 위 코드에서 처럼 var로 선언한 x의 경우 if 블록 밖에서도 x에 접근할 수 있다. 반면 const로 선언한 y 같은 경우는 블록 scope를 존중하기 때문에 블록 밖에서는 const y 변수에 접근할 수 없다.

 

 

var가 Scope를 가지는 경우

if(true){
 const x = 3;
}
console.log(x); //에러

function a(){
  var y = 3;
}
console.log(y); //에러

var도 영역이 하는데, var의 경우는 function으로 감쌌을때 영역을 가진다. 

 

const는 무엇으로 인한 블록이든 블록 Scope를 빠져나가지 못하는 반면, var로 선언한 변수 같은 경우 if문이나 for문에 의한 블록 Scope는 무시하는 반면, function으로 감싸진 블록 Scope는 빠져나가지 못한다. 다시 말해 var의 변수는 함수 Scope를 존중한 다고 할 수 있다.

 

const와 let의 차이

const a = 3;
a = '5'; //에러

const b = {name : 'surge100'}
b.name = 'Dote10';

const c; //에러

let c = 5;
c = 3;
c = 10;

const 변수에는 대입 연산자인 '='를 한번만 사용할 수 있다. 대신에 const 변수에 객체를 대입했을때  객체의 key-value의 value는 변경이 가능하다.

 

또한 const 변수에 경우 아무것도 대입하지 않고 선언할 수 없다. 왜냐하면 처음 선언할 때 '=' 대입연산자로 아무것도 대입하지 않으면 이후는 대입연산자를 사용할 수 없게되어 아무것도 대입할 수 없게 되기 때문이다.

 

추후에 대입연산자 '='를 통해서 값을 바꾸고 싶다면 let 변수를 사용하면 된다.

 

---

백틱문자열에 함수 호출기능

function a() {}

/* 보편적인 함수 호출 */
a();

/* 백틱 함수 호출 */
//Tagged Template Literals
a``;

 

ES5 시절의 객체 표현 방법

속성 표현 방식에 주목

var sayNode = function(){
  console.log('Node');
  };
var es = 'ES';
var oldObject = {
  sayJS:function(){
  	console.log('JS');
  },
  sayNode:sayNode,
};

oldObject[es+6] = 'Fantasic';
oldObject.sayNode(); //Node
oldObject.sayJS(); //JS
console.log(oldObject.ES6); // Fantastic

 

훨씬 간결한 문법으로 객체 리터럴 표현 가능

• 객체의 메서드에 : funtion을 붙이지 않아도 된다.
• { sayNode : sayNode }와 같은 것을 { sayNode }로 축약 가능
• [변수 + 값]등으로 종적 속성명을 객체 속성 명으로 사용가능

var sayNode = function(){
  console.log('Node');
  };
var es = 'ES';
const newOnject ={
  sayJS(){
  	console.log('JS');
  },
  sayNode,
  [es+6]:'Fantastic'
}

newObject.sayNode(); // Node
newObject.sayJS(); //JS
console.log(newObject.ES6); //Fantastic

---

화살표 함수

let과 const는 var를 거의 완벽하게 대체한다. 하지만 화살표 함수는 function을 완벽하게 대체할 수 없다.

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 not1(x){
  return !x;
}

const not2 = x => !x;

화살표 함수의 좋은 점은 함수를 더 간결하게 정의할 수 있다는 것이다. 최신 문법에서는 기존 문법에 간결함이 많이 추가되었다. 

그중 하나의 예로 함수 add2와 같이 중괄호 다음에 바로 return이 나오면  함수 add3과 같이 중괄호를 생략할 수있다. 함수 add3

과 같이 표현할 경우 혼란의 여지가 생길수 있기 때문에 함수 add4처럼 return 값을 괄호로 묶기도 한다.

 

함수not1을 함수 not2와 같이 선언해도 된다. 특히 함수 not1과 같이 인자 값이 하나인 경우는 함수 not2와 같이 인자를 감싸는 괄호 '( )' 를 생략 해도된다. 

 

객체를 return 하는 화살표 함수

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

const obj2 = (x,y) => { x,y }; //오류

const obj3 = (x,y) => ({ x,y });

함수 obj1를 함수obj2 처럼 생략을해서 선언을 하면 문제가 되는 것은 화살표 뒤에 오는 { x, y }가 무엇이지 JavaScript 엔진이 해당 괄호가 객체를 의미하는 것인지 함수의 body를 의미하는 것인지 해석을 하지 못한다는 점이다. 그래서 화살표 함수를 이용해서 return을 할 때 반환하는 값이 객체일 함수 obj3처럼 괄호안에 객체를 넣어주는 것이 필수적이다. 즉 화살표 함수는 객체를 return 하는 경우는 소괄호가 필수이다.

 

 

기존의  function이 사라지지 않은 이유

화살표 함수가 기존 function(){}을 대체하는 건 아님(this가 달라졌다.)

 

화살표함수가 생겼는데 기존 function 형태의 함수 사라지지 않은 이유는this때문이다. 화살표 함수는 this따로 갖는데 비해

function 함수 에서는 부모의 this를 물려받는 식으로 갖는다.

var relationship1 = {
  name: "surge100",
  friends: ["nogom", "ato", "green"],
  logFriends: function () {// function logFriends의 부모에게는 name이라는 속성이 있다.
    var that = this; // relationship1를 가리키는 this를 that에 저장
    this.friends.forEach(function (friends) { // forEach 안에 인자로 들어있는 익명 function의 부모에게는 
      console.log(that.name, friends);        // 즉 function logFriends에게는 name이라는 속성이없다.
    });
  },
};

relationship1.logFriends();

위 예시에서 forEach 안에 인자로 들어있는 익명 function의 부모에게 즉 function logFriends에게는 name 속성이 없음으로 function logFriend의 부모의 속성인 this를 that의 저장해서 forEach 안에 인자로 들어있는 익명 function에서 사용한다.

function은 function마다 각자 자신의 상위 블록의 속성을 물려받는 this를 가지므로 부모 블록 과 동일한 this를 가지려면( 부모 블록의 속성의 this가아니라 부모 블록이 물려받은 this 다시말해 조부모의 속성) var that이나 var self, var_this에 this를 저장하는 식으로 사용하였다.

 

const relationship2 = {
  name:'surge100',
  friends: ['nogom', 'ato', 'green'],
  logFriends(){
  	this.friends.forEach(friend =>{
    console.log(this.name,friend);
    });
  },
};

하지만 화살표 함수를 사용하면 부모 블록과 같이 조부모의 속성을 담은 this를 사용할 수있다.

forEach의 인자로 화살표 함수가 들어간 것에 주목

• forEach의 화살표함수의 this와 logFriedns의 this가 같아짐
• 화살표 함수는 자신을 포함하는 함수의 this를 물려받음
• 물려받고 싶지 않을 때: function(){}을 사용

this때문에 function(){}을 사용해야하는 경우

button.addEventListener('click',function(){
  console.log(this.textContent);
});

tag에다가 이벤트를 달아 주어야 할 때 위 코드에서 버튼을 클릭하면 버튼에 단어가 console.log 된다.

 

 

출처

\https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EA%B5%90%EA%B3%BC%EC%84%9C/dashboard

https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EA%B5%90%EA%B3%BC%EC%84%9C