경작 19일차 Node.Js (1)

#230216 목

딥러닝 입문이랑 Transformer 공부하느라 농장 과제 중 하나인 <Node.js 교과서>를 안 읽는지 좀 돼서 몽땅 잊어버ㄹ..릴 뻔 했다. 그래도 노드가 뭔진 얼추 기억나는데 자바스크립트 문법은 책 보기 전까지 한 번도 공부를 안 해봐서 그런지 실시간으로 까먹는 중이다 ㅋㅋ 2장에서 ES2015+(2015년 이후에 발표된 문법 변경 사항들) 정리된 걸 보면 자바스크립트 문법도 대충 알 수 있기 때문에 2장을 위주로 다시 정리해봤다.

1. const, let

const와 let은 블록({와 } 사이) 스코프를 가지는 변수로, 블록 밖에서는 접근할 수 없다. const는 초기화할 때 값을 무조건 할당해야하며, 한 번 할당하면 다른 값을 재할당할 수 없다.

if(true){
	const x = 3;
    const y;  //초기화시 값을 할당하지 않아 에러 발생
    x = 1;  //const변수에 다른 값을 재할당하려고 해서 에러 발생
}
console.log(x);    //if문 블럭 밖에서 x에 접근해 에러 발생 

2. 템플릿 문자열

c++에선 누릴 수 없었던.. 파이썬이나 c#의 장점을 자바스크립트도 가지고 있었다.

const num = 1;
const s = `${num}초 라도 안 보이면`;   //2렇게 초조한데 3초는 어떻게 기다려~ 

파이썬과 c#과 다른 게 있다면 큰 따옴표를 사용하는 게 아니라($" ") 백틱(`)을 사용한다는 점이다.

3. 객체 리터럴

일단.. 객체 리터럴이 뭔지 몰라서 첫 문장 읽자마자 컷당했던 기억이 ㅎ
10일차 벨로그(FE 강의)에서 말했 듯 자바스크립트는 객체지향 언어는 아니지만 함수로 객체를 생성할 수 있다. 객체 리터럴은 사람이 이해할 수 있는, 약속된 기호로 객체를 생성하는 표기법이다.

const jh = 'JH';
const sayHello = function(){
    console.log('Hello');
};

const newObject = {     //객체 리터럴 newObject
    sayHi(){ 
        console.log("hi"); 
    },
    sayHello,      //newObject 안에 sayHello 속성 추가 
    [jh+1] : 'Junghwa',   //JH1이라는 속성을 동적으로 생성
};

newObject.sayHi();
newObject.sayHello();
console.log(newObject.JH1);
}

를 실행하면

hi
Hello
Junghwa

라는 결과가 출력된다. ES2015+에서는 속성명과 변수명이 동일한 경우 한 번만 써서 객체 리터럴에 속성을 추가할 수 있으며

const sayHello = function(){
    console.log('Hello');
};

const newObject = { 
    sayHello,   //이전 문법에서는 sayHello : sayHello (속성명 : 변수명) 으로 작성했다. 
};

객체 리터럴 내부에서 속성명을 동적으로 생성할 수 있다.

const jh = 'JH';

const newObject = {     
    [jh+1] : 'Junghwa',   //이전 문법에서는 이렇게 할 수 없었다.
};

//이전 문법에서는 객체 리터럴(newObject)밖에서 
// newObject[jh+6] = 'Jungwha' 라고 작성해주어야했다. 

4. 화살표 함수

1) 선언 방법

const addf1 = (x, y) => {      //function addf1(x, y)와 동일함 
    return x + y;
}
const addf2 = (x, y) => x + y;    //addf1과 동일함

화살표 함수에서는 function 선언unction addf1(x, y) 대신 => 기호로 함수를 선언한다. 그리고 함수 내에 return문밖에 없다면 addf2처럼 작성할 수도 있다.

2) 화살표 함수의 this 바인드 방식

const Relationship = {  
    name : 'Junghwa',
    friends : ['jhs', 'psy', 'ksy'],
    logFriends(){
        this.friends.forEach(friend =>{   //상위 스코프 Relationship의 this를 물려받음 
            console.log(this.name, friend);  //friends 리스트의 각 원소 friend에 대하여 출력
        });
    },
};

Relationship.logFriends();

화살표 함수를 사용하면 상위 스코프의 this를 바로 물려받을 수 있다. 만약 화살표 함수 대신 function 선언을 사용하였다면

    logFriends : function(){
        var that = this;    //Relationship을 가리키는 this를 that에 저장
        this.friends.forEach(function (friend) {  
            console.log(this.name, friend);  
        });

Relationship 객체(상위 스코프)와 logFriends 함수(하위 스코프)는 각자의 this를 갖기 때문에 var that = this that이라는 변수를 사용해 Relationship에 간접적으로 접근해야 한다.