[노드 2팀] #3.알아둬야 할 자바스크립트

 
🌟키워드: ES2015+문법, 화살표 함수, 프로미스(Promise), async/await, 널병합/옵셔널 체이닝
 

---

1. ES2015+ 문법

- 2015년을 기점으로 매년 문법 변경 사항이 발표되었다.
- ES2015 이상의 자바스크립트를 통틀어 ES2015+라 표현한다.
- 실무에서는 대부분 최신 문법을 사용하므로 자바스크립트 기본 문법부터 익힐 필요가 있다.
 
1-1. const, let
- var 변수는 const와 let으로 대체한다

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

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

 
① var와 const, let의 차이
var: 함수 스코프를 가지며, if문의 블록과 관계없이 사용 가능하다.
const, let: 블록 스코프를 가지며, 블록 밖의 변수에 접근이 불가하다.
∴ 함수 스코프 대신 블록 스코프를 사용함으로써 호이스팅과 같은 문제도 해결하고, 코드 관리도 수월하다.
 
② const와 let의 차이
const(상수): 값을 한 번 할당하면 다른 값을 할당할 수 없다, 초기화할 때 값을 할당하지 않으면 에러가 발생한다.

const a = 0;
a = 1; // Uncaught TypeError: Assignment to constant variable

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

const c; // Uncaught SyntaxError: Missing initializer in const declaration

 
1-2. 템플릿 문자열
- 큰따옴표, 작은따옴표로 감싸는 기존 문자열과 다르게 백틱(`)으로 감쌀 수 있으며, 문자열 안에 변수를 넣을 수 있다.
- ${변수}형식으로 변수를 + 기호 없이 문자열에 넣을 수 있다.

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

 
1-3. 객체 리터럴

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

 

const newObject = {
  sayJS() {
    console.log('JS');
  },
  sayNode,
  [es + 6]: 'Fantastic',
};
newObject.sayNode(); // Node
newObject.sayJS(); // JS
console.log(newObject.ES6); // Fantastic

- 객체의 메서드에 함수를 연결할 때 콜론(:)과 function을 붙이지 않아도 된다.
- 속성명과 변수명이 동일한 경우 한 번만 써도 된다. (코드의 중복을 피할 수 있어 편리하다.)
- ES6라는 속성명을 위해 객체 리터럴(oldObject) 밖에서 [es+6]을 할 필요 없이, newObject안에 [es+6]이 속성명으로 바로 사용되며 객체 리터럴 안에 동적 속성 선언 가능하다.
 
∴  익숙해지면 코드의 양을 많이 줄일 수 있다.
 
1-4. 화살표 함수(arrow 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;

- function 선언 대신 => 기호로 함수를 선언한다.
- 변수에 대입하면 재사용이 가능하다.
- 내부에 return문 밖에 없는 경우, return문을 줄일 수 있다. (자주 사용하는 방식이다.)
 
② this 바인드 방식의 변화

var relationship1 = {
  name: 'zero',
  friends: ['nero', 'hero', 'xero'],
  logFriends: function () {
    var that = this; // relationship1을 가리키는 this를 that에 저장
    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();

- relationship1: 각자 다른 함수 스코프의 this를 가지므로 that이라는 변수를 통해 relationship1에 간접적으로 접근한다.
- relationship2: 화살표 함수를 이용하므로써 바깥 스코프인 logFriends()의 this를 그대로 사용이 가능하다.
 
1-5. 구조분해 할당

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;

객체 안의 속성을 찾아 변수와 매칭하며, count처럼 여러 단계 안의 속성도 찾을 수 있다.
 
cf) 배열에 대한 구조 분해 할당 문법

const array = [‘nodejs’, {}, 10, true];
const [node, obj, , bool] = array;

-  노드는 모듈 시스템을 이용하므로 자주 사용되는 방식이다.
 
1-6. 클래스
- 클래스 문법이 추가되었지만, 클래스 기반이 아닌 프로토타입 기반으로 동작한다.
- 보기 좋게 프로토타입 기반 문법을 클래스로 바꾼 것이다.

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

 
1-7. 프로미스(Promise)
- ES2015부터 자바스크립트와 노드의 API들이 콜백 대신 프로미스 기반으로 재구성되었다.
- 콜백 지옥을 해결하였다.
 
① 기본적인 Promise 형태 

const condition = true; // true이면 resolve, false이면 reject
const promise = new Promise((resolve, reject) => {
  if (condition) {
    resolve('성공');
  } else {
    reject('실패');
  }
});
// 다른 코드가 들어갈 수 있음
promise
  .then((message) => {
    console.log(message); // 성공(resolve)한 경우 실행
  })
  .catch((error) => {
    console.error(error); // 실패(reject)한 경우 실행
  })
  .finally(() => { // 끝나고 무조건 실행
    console.log('무조건');
});

 
- new Promise로 프로미스를 생성한 후, resolve, reject를 매개변수로 갖는 콜백 함수를 넣는다.
- 만들어진 promise 변수에 붙인 then, catch 메서드를 통해 실행이 완료된 후 결괏값을 받는다.
- Promise는 실행은 바로 하되, 결괏값은 나중에 받는 객체이다. (new Promise는 바로 실행되나, 결괏값은 then을 붙였을 때 받는다.)
 
② 프로미스 return, 여러 개의 then과 catch

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

  .catch((error) => {
    console.error(error);
});

- then이나 catch에서 다시 다른 then이나 catch를 붙일 수도 있다. (이전 then의 return 값을 다음 then의 매개변수로 가진다.)
- 프로미스를 return한 경우, 프로미스가 수행된 후 다음 then이나 catch가 호출된다.
- then에서 new Promise를 return 해야 다음 then에서 받을 수 있다.
 
③ 중첩된 콜백함수를 프로미스로 변경

function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'zero';
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: 'm' });
    })
    .then((user) => {
      // 생략
    })
    .catch(err => {
      console.error(err);
    });

- then 메서드가 순차적으로 실행된다.
- 콜백에서 매번 따로 처리가 필요했던 에러도 마지막 catch에서 한 번에 처리가 가능하다.
- 메서드가 프로미스 방식을 지원할 때만 콜백함수를 프로미스로 바꿀 수 있다.
cf) 위 코드에서는 findOne과 save 메서드가 내부적으로 프로미스 객체를 갖고 있다고 가정하기에 가능하다. 
 
④ Promise.all: 프로미스 여러 개를 한 번에 실행

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
  .then((result) => {
    console.log(result); // ['성공1', '성공2'];
  })
  .catch((error) => {
    console.error(error);
  });

- Promise.resolve: 즉시 resolve하는 프로미스를 만드는 방법이다.
- Promise.reject: 즉시 reject하는 프로미스를 만드는 방법이다.
- Promise.all: 모두 resolve될 때까지 기다렸다가 then으로 넘어가며, result 매개변수에 각각의 프로미스 결괏값이 배열로 저장된다.
- Promise.all: 하나라도 reject되면 catch로 넘어가며, 어떤 프로미스가 reject된 지는 알 수 없다. (알기 위해서는 Promise.allSettled 사용이 필요하다.)
 
⑤ Promise.allSettled

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.reject('실패2');
const promise3 = Promise.resolve('성공3');
Promise.allSettled([promise1, promise2, promise3])
  .then((result) => {
    console.log(result);
/* [
*    { status: 'fulfilled', value: '성공1' },
*    { status: 'rejected', reason: '실패2' },
*    { status: 'fulfilled', value: '성공3' }
*  ]
*/
  })
  .catch((error) => {
    console.error(error);
  });

- 어떤 프로미스가 reject된 지 알기 위해 Promise.allsettled를 사용한다. (status에서 알 수 있다, reason은 실패 이유)
- Promise.all 대신 Promise.allSettled를 사용하길 권장한다.
 
cf) Node 16버전 부터는 reject된 Promise에 catch를 달지 않으면 에러가 발생하므로 (다음 코드 실행 불가), 반드시 catch 메서드를 붙이는 것 권장한다.

1-8. async/await
- 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄일 수 있다.
 
① async/await를 try/catch문과 화살표 함수로 표현 

const findAndSaveUser = async (Users) => {
  try {
    let user = await Users.findOne({});
    user.name = 'zero';
    user = await user.save();
    user = await Users.findOne({ gender: 'm' });
    // 생략
  } catch (error) {
    console.error(error);
  }
};

- 함수 선언문 대신 async function으로 선언한다. (위 코드는 화살표 함수로 표현)
- await Users. findeOne({})이 resolve될 때까지 기다린 뒤 user 변수를 초기화한다.
- try/catch문으로 에러를 처리한다.
 
② for문과 함께 순차적 실행 (노드 10 버전부터 지원하는 ES2018 문법)

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
(async () => {
  for await (promise of [promise1, promise2]) {
    console.log(promise);
  }
})();

- for await of문을 이용해 프로미스 배열을 순회한다.
- async 함수의 반환값은 항상 Promise로 감싸진다.
- 실행 후 then을 붙이거나 또 다른 async함수 안에서 await를 붙여 처리가 가능하다.
 
1-9. map/set
① map

const m = new Map();

m.set('a', 'b'); // set(키, 값)으로 Map에 속성 추가
m.set(3, 'c'); // 문자열이 아닌 값을 키로 사용 가능합니다
const d = {};
m.set(d, 'e'); // 객체도 됩니다

m.get(d); // get(키)로 속성값 조회
console.log(m.get(d)); // e

m.size; // size로 속성 개수 조회
console.log(m.size) // 3

for (const [k, v] of m) { // 반복문에 바로 넣어 사용 가능합니다
  console.log(k, v); // 'a', 'b', 3, 'c', {}, 'e'
} // 속성 간의 순서도 보장됩니다

m.forEach((v, k) => { // forEach도 사용 가능합니다
  console.log(k, v); // 결과는 위와 동일
});

m.has(d); // has(키)로 속성 존재 여부를 확인합니다
console.log(m.has(d)); // true

m.delete(d); // delete(키)로 속성을 삭제합니다
m.clear(); // clear()로 전부 제거합니다
console.log(m.size); // 0

- map은 객체와 비슷한 자료구조이나, 일반 객체와는 다르다.
(예: 속성들 간의 순서를 보장한다, 반복문을 사용 할 수 있다, 속성명으로 문자열이 아닌 값을 사용할 수 있다, size 메서드를 통해 속성의 수를 쉽게 알 수 있다.) 
 
② set

const s = new Set();
s.add(false); // add(요소)로 Set에 추가합니다
s.add(1);
s.add('1');
s.add(1); // 중복이므로 무시됩니다
s.add(2);

console.log(s.size); // 중복이 제거되어 4

s.has(1); // has(요소)로 요소 존재 여부를 확인합니다
console.log(s.has(1)); // true

for (const a of s) {
  console.log(a); // false 1 '1' 2
}

s.forEach((a) => {
  console.log(a); // false 1 '1' 2
})

s.delete(2); // delete(요소)로 요소를 제거합니다
s.clear(); // clear()로 전부 제거합니다

 
- set은 배열과 비슷한 자료구조이다.
- 중복을 허용하지 않으므로 중복을 허용하지 않는 배열 자료구조에 사용된다.
- 기존 배열에서 중복 제거에도 이용된다.
cf) new Set(배열): 배열의 중복 제거, Array.from(Set): Set을 배열로 되돌림
 
1-10. 널 병합/옵셔널 체이닝
① 널 병합 연산자 ??

const c = 0;
const d = c ?? 3; // ?? 연산자는 null과 undefined일 때만 뒤로 넘어감
console.log(d); // 0;

const e = null;
const f = e ?? 3;
console.log(f); // 3;

const g = undefined;
const h = g ?? 3;
console.log(h); // 3;

- || 연산자 대용으로 사용된다.
- falsy값 중 null과 undefined만 따로 구분한다.
 
② 옵셔널 체이닝 연산자 ?

const a = {}
a.b; // a가 객체이므로 문제없음

const c = null;
try {
  c.d;
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading 'd')
}
c?.d; // 문제없음

try {
  c.f();
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading 'f')
}
c?.f(); // 문제없음

try {
  c[0];
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of null (reading '0')
}
c?.[0]; // 문제없음

- null과 undefined의 속성을 조회하는 경우 에러가 발생하는 것을 막는다.
- 일반적인 속성뿐만 아니라 함수 호출이나 배열 요소 접근에 대해서도 에러가 발생하는 것을 방지할 수 있다.
- c?, .d, c?.f(), c?.[0]의 값은 undefined이다.
 

---

2. 프런트엔드 자바스크립트

- HTML에서 script 태그 안에 작성하는 부분에서 사용된다.
 
2-1. AJAX
- 비동기적 웹 서비스를 개발할 때 사용하는 기법이다.
- 페이지 전환 없이 새로운 데이터를 불러오는 웹 사이트의 대부분은 AJAX 기술을 사용한다.
 
①  GET 요청 이용

axios.get('https://www.zerocho.com/api/get')
  .then((result) => {
    console.log(result);
    console.log(result.data); // {}
  })
  .catch((error) => {
    console.error(error);
});

- axios.get의 내부에 newPromise가 존재하므로, then과 catch를 사용하는 것이 가능 하다.
 

(async () => {
  try {
    const result = await axios.get('https://www.zerocho.com/api/get');
    console.log(result);
    console.log(result.data); // {}
  } catch (error) {
    console.error(error);
  }
})();

- 프로미스이므로 async/await 방식으로 변경이 가능하다.
 
②  POST 요청 이용 

(async () => {
  try {
    const result = await axios.post('https://www.zerocho.com/api/post/json', {
      name: 'zerocho',
      birth: 1994,
    });
    console.log(result);
    console.log(result.data);
  } catch (error) {
    console.error(error);
  }
})();

- 데이터를 서버로 보낼 수 있다.
- GET 요청이면 axios.get, POST요청이면 axios.post 사용한다.
 
2-2. FormData
- HTML form 태그의 데이터를 동적 제어하는 기능이다.
 
①  FormData 생성자로 formData 객체를 만든다.

const formData = new FormData();
//append 메서드: 키-값 형식의 데이터 저장, 키 하나에 여러 개의 값 추가 가능
formData.append('name', 'zerocho'); 
formData.append('item', 'orange');
formData.append('item', 'melon');
//has 메서드: 주어진 키에 해당하는 값이 있는지 여부
formData.has('item'); // true
formData.has('money'); // false;
//get 메서드: 주어진 키에 해당하는 값 하나를 가져옴
formData.get('item');// orange
//getAll 메서드: 해당하는 모든 값을 가져옴
formData.getAll('item'); // ['orange', 'melon'];
formData.append('test', ['hi', 'zero']);
formData.get('test'); // hi, zero
//delete 메서드: 현재 키를 제거
formData.delete('test');
formData.get('test'); // null
//set 메서드: 현재 키를 수정
formData.set('item', 'apple');
formData.getAll('item'); // ['apple'];

② axios로 폼 데이터를 서버에 전송한다.

(async () => {
  try {
    const formData = new FormData();
    formData.append('name', 'zerocho');
    formData.append('birth', 1994);
    const result = await axios.post('https://www.zerocho.com/api/post/formdata', formData);
    console.log(result);
    console.log(result.data);
  } catch (error) {
    console.error(error);
  }
})();

 
 
2-3. encodeURIComponent, decodeURIComponent
① encodeURIComponent
- window 객체의 메서드 중 하나이다.
- 주소에 한글이 들어가는 경우, 서버가 한글 주소를 이해하지 못하는 경우에 사용한다.

(async () => {
  try {
    const result = await axios.get(`https://www.zerocho.com/api/search/${encodeURIComponent('노드')}`);
    console.log(result);
    console.log(result.data); // {}
  } catch (error) {
    console.error(error);
  }
})();

- '노드'라는 한글 주소가 ' %EB%85%B8%EB%93%9C'로 변환된다.
 
② decodeURIComponent

decodeURIComponent('%EB%85%B8%EB%93%9C'); // 노드

 
-  받는 쪽에서 사용하면 한글이 원래 상태로 복구된다.
 
2-4. 데이터 속성과 dataset
- 데이터 속성: 보안과 관련 없는 데이터들을 HTML과 관련된 데이터에 저장하는 공식적인 방법이다.

<ul>
//HTML 태그의 속성으로 data-로 시작하는 것들을 넣음 (데이터 속성)
  <li data-id="1" data-user-job="programmer">Zero</li>
  <li data-id="2" data-user-job="designer">Nero</li>
  <li data-id="3" data-user-job="programmer">Hero</li>
  <li data-id="4" data-user-job="ceo">Kero</li>
</ul>
<script>
  console.log(document.querySelector('li').dataset);
  //dataset 속성을 통해 첫 번째 li 태그의 데이터 속성에 접근
  // { id: '1', userJob: 'programmer' } (데이터 속성의 이름이 조금씩 변형됨)
</script>

- 자바스크립트로 쉽게 접근 가능하다는 장점이 있다.
cf) 반대로 dataset에 데이터를 넣어도 HTML 태그에 반영된다.
(예: dataset.monthSalary=10000; 을 넣으면 data-month-salary="10000" 속성이 생긴다.)

---

 

quiz
1. ES2015+문법에서, (  )변수는 (  )변수와 (  )변수로 바꾸어 사용한다.
 
2. (  ) 문법이 추가되었지만, (  )기반으로 동작한다.
 
3. Promise는 (  )은 바로 하지만, (  )은 나중에 받는 객체이다.
 
4. then이 여러 개 있는 Promise문의 경우, then에서 new Promise를 (  )해야 다음 then이 값을 전달받는다.
 
5. (  )은 어떤 프로미스가 reject된 지 알 수 없으며, 알기 위해서는 (  )의 사용이 필요하다.
 
6. (  )은 배열과 비슷한 자료구조이고, (  )을 허용하지 않는다.
 
7. 널 옵셔널 연산자 (  )은 falsy값 중 (  )과 (  )만 따로 구분한다.


 
programming quiz
8.  다음과 같은 Promise를 사용한 숫자 비교 함수가 있다. 이 때, async/await를 이용한 compareNumbersAsync라는 이름의 숫자 비교 함수를 만들어, 성공했을 때와 실패했을 때의 값이 각각 출력될 수 있도록 하는 코드를 작성하시오. (단, try/catch문을 이용한다.)

function compareNumbers(a, b) {
    return new Promise((resolve, reject) => {
        if (a > b) {
            resolve("성공!");  // 첫 번째 숫자가 더 클 때
        } else {
            reject("실패!");   // 첫 번째 숫자가 더 작거나 같을 때
        }
    });
}

 
9. 다음과 같이 Promise가 여러 개 있을 때, Promise.allSettled를 이용해 결괏값이 출력되도록 하는 코드를 작성하시오. (단, 화살표 함수를 이용한다.)

const myPromise1=Promise.resolve('당신은 최고예요.');
const myPromise2=Promise.resolve('당신은 멋져요.');
const myPromise3=Promise.reject('당신은 대단해요.');

 

---

answer
1.var, let, const 

2. 클래스, 프로토타입
3. 실행, 결괏값
4. return 
5. Promise.all, Promise.allsettled
6. set, 중복
7. ??, null, undefined
8.

function compareNumbers(a, b) {
    return new Promise((resolve, reject) => {
        if (a > b) {
            resolve("성공!");  // 첫 번째 숫자가 더 클 때
        } else {
            reject("실패!");   // 첫 번째 숫자가 더 작거나 같을 때
        }
    });
}

async function compareNumbersAsync(a, b) {
    try {
        const message = await compareNumbers(a, b);  // Promise의 결과를 기다림
        console.log(message);  // "성공!" 출력
    } catch (error) {
        console.error(error);  // "실패!" 출력
    }
}

 
9.

const myPromise1=Promise.resolve('당신은 최고예요.');
const myPromise2=Promise.resolve('당신은 멋져요.');
const myPromise3=Promise.reject('당신은 대단해요.');
Promise.allSettled([myPromise1,myPromise2,myPromise3])
	.then((result)=>{
    	console.log(result);
    })
    .catch((error)=>{
    	console.error(error);
        });

 
 

출처) 조현정, 「Node.js 교과서 개정 3판」, 길벗(2022), 2장 알아둬야 할 자바스크립트.

 
 
Corner node.js 2팀

Editor : 설리반