Dolt Node.js [02] 자바스크립트 기초 문법과 모듈

[02] 자바스크립트 기초 문법과 모듈

(1) 화살표 함수

◈ 함수의 정의 

function 함수명( 인수, ...){
    // 함수 작성
    return 반환값;
}

 

- 가장 기본적인 방식

 

◈ 함수 표현식

-  변수에 할당하여 변수 이름을 함수 이름처럼 사용

const hello = function(name){
    console.log(`${name}님 안녕하세요!`);
}

hello('bia'); // 결과는 bia님 안녕하세요!

 

◈ 템플릿 리터럴

- 문자열, 변수, 식 한번에 하나의 문자열로 만드는 방식

- 백틱(`) 으로 문자열을 만들고, 변수등은 ${ } 안에 작성

const age = 1;
console.log(`제 나이는 ${age}입니다.`);

◈ 즉시 실행 함수

 - 함수 선언 없이 즉시 사용 가능

// 즉시 실행 함수
(function(a, b){
    console.log(`두 수의 합은 ${a}+${b} = ${a+b}입니다.`);
})(10, 20); // 결과는 두 수의 합은 10+20 = 30입니다.

 

◈ 화살표 함수

- 화살표 함수(arrow function): 다른 언어에서 람다함수라 표현하는 함수식

- 인수가 1개인 경우 괄호 생략 가능

- 함수내 식이 한줄이면 return 생략 가능

const hello = (name) => console.log(`${name}님 안녕하세요!`);

hello('bia'); // 결과는 bia님 안녕하세요!

 

(2) 자바스크립트 비동기 처리

◈ 동기처리와 비동기처리

- 동기 프로그래밍: 코드 순서대로 하나씩 처리하는 방식

- 비동기 프로그래밍: 시간이 걸리는 프로그램을 우선 미룬 후 처리가능한 다음 작업부터 처리하는 방식

- 비동기 처리: 함수를 원하는 처리 순서에 맞게 실행 순서 제어하며 프로그래밍하는 방식

- 비동기 처리를 해결하기 위한 방식: 콜백 함수, 프라미스, async/await

방법	버전	기능
콜백 함수	고전 방식	콜백 함수 이용 / 가독성 떨어짐
프라미스	에크마스크립트 2015부터 도입	프라미스 객체, 콜백함수 이용
async / await	에크마스크립트 2017부터 도입	async / await 예약어 사용

 

◈ 콜백 함수

- 콜백 함수: 함수를 다른 함수의 매개변수로 사용하는 함수

// 비동기 처리 콜백함수로 해결하는 예제
const order = (coffee, callback) => {
  console.log(`${coffee} 주문 하셨습니다.`);

  // coffee 주문
  // 3초 기다린 후 콜백 함수 실행
  setTimeout(() => {
    callback(coffee);
  }, 3000);
};

// 커피 완료 표시
const display = (result) => {
  console.log(`${result} 주문 완료`);
};

// display 함수를 order의 콜백함수로 이용
order('아메리카노', display);

 

- 단점: 길어지고 복잡해짐 => 콜백 지옥

// A->B->C->D 순서대로 비동기 처리
function displayLetter() {
  console.log('A');
  setTimeout(() => {
    console.log('B');
    setTimeout(() => {
      console.log('C');
      setTimeout(() => {
        console.log('D');
        setTimeout(() => {
          console.log('done!');
        }, 1000);
      }, 1000);
    }, 1000);
  }, 1000);
}

displayLetter();

◈ 프라미스 (Promise)

- 처리 성공/실패 했을 때 반환 결과 미리 약속해둔 객체

  - resolve 함수 : 작업 성공시 호출할 함수

  - reject 함수: 작업 실패시 호출할 함수

- then: 성공했을 때 / catch: 실패했을 때 넘겨받은 결괏값 이용한 실행 명령 지정

const shouldIBuyLotto = new Promise((resolve, reject) => {
  console.log('나 로또 사도 될까?');
  const randNum = parseInt(Math.random() * 10);
  console.log(`나온 숫자는 ${randNum}`);

  if (randNum >= 5) {
    resolve('아싸! 로또 사자!');
  } else {
    reject('아.. 망했어요..');
  }
});

shouldIBuyLotto
  .then((result) => console.log(result))
  .catch((err) => {
    console.log(err);
  });

◈ async / await

- 비동기 처리를 동기식 표현과 비슷하게 표현 가능

- 함수 앞에 async 붙여주고,  해당 함수 내에 await 붙여서 사용

async function main() {
  const promise = await new Promise((resolve) =>
    setTimeout(() => {
      console.log('A');
      resolve();
    }, 1000)
  );
  console.log('B');
}

main(); // A 출력 후 B가 출력됨

 

(3) 노드의 모듈

◈ 모듈 (module)

- 기능별로 독립적으로 재사용 가능하도록 파일형태로 저장한 것 => 중복성↓

 

◈ CommonJS 모듈 시스템

- 모듈 내보내기:  module.exports = 내보낼 함수/변수

- 모듈 가져오기: require(모듈 파일 경로) / 꼭 상단에 작성해야

  - 내장 모듈의 경우 모듈의 이름만 / 유저가 만든 모듈이면 경로까지 작성, 확장자 명 생략 가능

Animals.js

// 함수와 배열을 객체에 통째로 넣어 내보내기
const animals = {
  animals: ['dog', 'cat'],
  showAnimals() {
    this.animals.map((el) => {
      console.log(`el: ${el}`);
    });
  },
};

module.exports = animals;

 

Module.js

const animals = require('./Animals.js');

console.log(animals);
console.log(animals.animals);

// animals 객체로 받았으므로
animals.showAnimals();

◈ ES 모듈 시스템

- 사용 전 package.json에 "type":"module" 을 추가하여 작성 (CommonJS 는 사용 불가)

- CommonJS 처럼 전체를 내보내는 방식 x => 필요한 것만 내보내고 받는 방식'

- 모듈 내보내기:

  - 문장 앞에 export 추가

  - 마지막 줄에 export { 내보낼 모듈 , 로 구분 } 으로 한번에 내보내기 가능

  - export default 모듈명 : 개체 하나만 선언된 모듈 내보낼 때 사용 / import시 중괄호( { } ) 사용 x

- 모듈 가져오기: import {모듈명} from "모듈 파일 경로" 

  - import * as 모듈명 from "모듈 경로" : 한번에 모든 모듈 가져올 수 있음

  - as : 원하는 모듈명으로 내보내기/가져오기 가능 / { 모듈명 as 새롭게지정할모듈이름 }

Animals.js

// ES6 방식으로 모듈 보내기
// 문장 앞에 export 붙이면 됨
export const animals = ['dog', 'cat'];

export function showAnimals() {
  animals.map(function (el) {
    console.log(`el: ${el}`);
  });
}

 

Module.js

import { animals, showAnimals } from './Animals.js';

 

한번에 내보내기

Animals.js

// ES6 방식으로 보내기 (pg.22)
// 마지막에 한번에 보내는 방식
const animals = ['cat', 'dog'];

function showAnimals() {
  animals.map((el) => console.log(`el: ${el}`));
}

export { animals, showAnimals };

 

export default으로 내보내기

Animals.js

// ES6 방식으로 보내기 (pg.26)
// export default
const animals = {
  animals: ['dog', 'cat'],
  showAnimals() {
    this.animals.map((el) => console.log(el));
  },
};

export default animals;

 

Module.js

// ES6 방식으로 받기 (pg.26)
// export default는 중괄호 없이 받음
import animals from './practice_03_07.js';

console.log(animals.animals);
animals.showAnimals;