[Node.js] 노드제이에스 - 자바스크립트 기초 문법과 모듈

Do it! Node.js 프로그래밍 입문 공부단 2일차 입니다.

 

자바스크립트 기초 문법

템플릿 리터럴

function greeting(name) { // name: 매개변수
    console.log(`${name}님 안녕하세요`) // 템플릿 리터럴 : ``
}

greeting("Jun") // "Jun" : 인수

 

기본 함수

function 함수명 { ... }
function 함수명(매개변수) { ... }

 

인수(아규먼트) : 함수를 호출할 때 넘겨주는 변수 값

매개변수 : 함수를 선언할 때의 변수

인자 : 매개변수 + 인수

 

함수의 표현식

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

hello("Jun")

함수를 변수에 할당해서 식처럼 사용하는 것을 함수 표현식이라고 합니다.

 

즉시 실행 함수

(function (a, b) {
	console.log(`두 수의 합 : ${a+b}`)
})(100, 200)

 

화살표 함수

let hi = () => "안녕"
console.log(hi())

 

비동기처리

시간이 오래 걸리는 작업이 다른 작업에 영향을 끼치지 않으므로 하나의 작업이 완료되지 않아도 다른 작업을 시작할 수 있는 것을 비동기 프로그래밍이라고 합니다.

function displayA() {
	console.log("A")
}
function displayB() {
	console.log("B")
}
function displayC() {
	console.log("C")
}

displayA()
displayB()
displayC()

// A -> B -> C

function displayA() {
	console.log("A")
}
function displayB() {
	setTimeout(() => {
		console.log("B")
	}, 2000)
}
function displayC() {
	console.log("C")
}

displayA()
displayB()
displayC()

// A -> C -> B

function displayA() {
	console.log("A")
}
function displayB(callback) {
	setTimeout(() => {
		console.log("B")
		callback()
	}, 2000)
}
function displayC() {
	console.log("C")
}

displayA()
displayB(displayC())

// A -> B -> C

함수 A, B, C가 있을 때 A->B->C 순으로 실행되어야 하는데 B함수가 오래걸려서 A->C->B 순으로 실행이 되었을 경우 시간이 걸리는 함수와 빨리 처리할 수 있는 함수들을 원하는 처리 순서에 맞게 프로그래밍하는 것을 비동기 처리라고 합니다.

비동기 처리의 방법은 크게 3가지 입니다.
- 콜백함수
- Promise
- async / await

 

콜백함수

const order = (coffee, callback) => {
	console.log(`${coffee} 주문 접수`)
	setTimeout(() => {
		callback(coffee)
	}, 2000)
}

const display = (result) => {
	console.log(`${result} 완료`)
}

order("아메리카노", display)

 

하지만 콜백함수의 문제는 콜백이 계속되면 콜백 지옥에 빠지게 됩니다. 이를 해결하기 위해 프라미스 방법이 등장했습니다.

콜백지옥

function displayLetter() {
	console.log("A")
	setTimeout(() => {
		console.log("B")
		setTimeout(() => {
			console.log("C")
			setTimeout(() => {
				console.log("D")
				setTimeout(() => {
					console.log("stop")
				}, 1000)
			}, 1000)
		}, 1000)
	}, 1000)
}
displayLetter()

 

프라미스

프라미스는 객체 입니다. 프라미스 객체란 처리에 성공했을 때와 실패했을 때의 반환 결과를 미리 약속해 둔 것입니다.

let likePizza = true
const pizza = new Promise((resolve, reject) => {
	if(likePizza) {
		resolve("피자를 주문합니다.")
	} else {
		reject("피자를 주문하지 않습니다.")
	}
})

 

프라미스는 성공이나 실패에 따라 반환할 값만 있을 뿐 성공하거나 실패했을 때 실행할 명령을 가지고 있지 않습니다. 프라미스 객체는 처리에 성공했는지 실패했는지 판단만 합니다.

프라미스를 실행하는 then과 catch 함수

프라미스에서 판단하고 결과값을 반환해서 반환된 결과값을 받아서 처리하는 부분을 직접 작성해야 하는데 이때 사용하는 함수가 성공했을 때는 then, 실패했을 때는 catch함수 입니다.

let likePizza = true
const pizza = new Promise((resolve, reject) => {
	if(likePizza) {
		resolve("피자를 주문합니다.")
	} else {
		reject("피자를 주문하지 않습니다.")
	}
})

pizza
	.then(result => console.log(result))
	.catch(err => console.log(err))

 

프라미스 체이닝을 사용해서 계속 연결하면 콜백지옥처럼 코드가 복잡해지는 문제점 발생 그래서 async/await 등장했습니다.

async function init() {
    const response = await fetch("https://jsonplaceholder.typicode.com/users") // 서버에서 가져오기
    const users = await response.json() // 가져온 결과를 객체로 변환해서 users에 저장
    console.log(users)
}

init()