2. 알아두어야 할 자바스크립트

2.1 ES2015+(ES6)

var, let, const

var

• 호이스팅시 선언과 초기화가 이루어진다.
• 호이스팅으로 초기화된 var는 undefined
• 재선언 가능하다.
• 함수 스코프만 갖는다.

let

• 호이스팅시 선언만 이루어져서 대입 전에는 참조할 수 없다.
• 재선언 불가능하다.
• 블록 스코프도 갖는다.(+함수스코프)

const

• let과 동일하고, 초기화된 대상을 바꿀수 없는 점만 다르다.
• 참조된 값이 객체인 경우 (당연하게도)객체의 내부 값은 변경 가능하다.

템플릿 문자열

백틱으로 감싼 문자열에 ${myVar} 활용하는 것. 웹에서 많이 쓰쥬?

객체 리터럴

function sayNode() {
  console.log('Node');
}

const newObject = {
  sayJS() {
    console.log('JS');
  }, // adding function as attr easier
  sayNode, // adding attr concisely
  [es + 6]: 'Fantastic', // attribute created dynamically
};

화살표 함수

여기서는 this에 대해서만 정리한다, 나중에도 학습하고 꼭 기억할 것.

• function으로 선언된 함수에서 호출된 this는 자신만의 this 맥락을 새로 생성한다.
• arrow function은 상위 맥락의 this를 그대로 상속받는다.

구조분해 할당

객체의 구조분해 할당

const example = { a:123, b: {c : 134, d:146}};
const a = example.a;
const b = example.b.d;

const {a, b: {d}} =example;
console.log(a); // 123
console.log(d); //146

배열의 구조분해 할당

const arr = [1,2,3,4,5]
const [a,b,,,d] = arr;
console.log(a); // 1
console.log(d); // 5

모듈 require에서 구조분해 할당

module.exports = {odd, even} // var.js

const {odd, even} = require('./var'); // main.js

클래스

프로토타입을 깔끔하게 작성할 수 있는 Class 문법이 추가되었음
일반적인 클래스 생성문법을 활용가능하다, 추후 필요시 구글링~

promise

노드에서 주로 구현되는 비동기 특히, 이벤트 리스너 구현시 발생하는 콜백지옥에서 벗어나기 위해 도입된 개념

promise와 .then .catch .finally

• promise란 내용이 실행되었지만 결과는 반환되지 않은 객체
• 반환된 promise를 받기 위해 .then 사용함
• promise가 reject된 경우는 catch 블락이 활용됨
• finally는 딱 보면 알제?

아래의 코드처럼 .then 체이닝을 위해서 선행.then에선 promise를 리턴해야 함

promise
  .then(message => {
    return new Promise((resolve, reject) => {
      resolve(message);
    });
  })
  .then(message2 => {
    console.log(message2);
  })
  .catch(error => {
    console.log(error);
  });

async/await

• async로 선언된 함수는 promise를 반환함.
• catch block이 없으므로 try, catch 문법을 활용한다.

const promise = new Promise(...);
                            
async function main() { // async에서 오류 처리를 위해 try..catch
  try {
    const result = await promise;
    return result;
  } catch (err) {
    console.log(err);
  }
}

main().then(name => {...}); // main 함수의 리턴값을 콜백함수에서 접근가능
const name = await main(); // main 함수의 리턴값이 name에 저장됨
                     

2.2 프론트엔드 자바스크립트

AJAX

• AJAX 요청시 axios 라이브러리를 사용하는게 편함
• 브라우저 스크립트 태그에서 임포트 한다.

FormData()

• html 태그의 데이터를 ajax로 보내고 싶은 경우
• image나 file 전송에 활용

encodeURIComponent

• 주소창 입력값의 한글처리가 원할하게 만듦

		const result = await axios.get(`https://www.zerocho.com/${encodeURIComponent('노드')}`);

• 서버에서 decodeURIComponent로 해석

data attribute와 dataset

• 서버의 데이터를 프론트엔드로 내려줄 때 사용
• 태그 속성으로 data-user-job인 경우 스크립트에서 dataset.userJob 으로 접근한다
• 하이픈(-)은 자동으로 생성됨.