본 게시물은 SOPT 28기 웹파트 세미나를 들으며 판서한 내용입니다.
좋은 정보를 제공해주신 28기 웹파트장 권소희님께 감사드립니다 :-)

호이스팅(Hoisting)

: 변수의 정의나 함수의 선언이 scope에 따라 선언과 할당으로 분리되는 것
: 변수의 선언문과 함수 선언식을 유효 범위의 최상단으로 끌어올리는 것

호이스팅 전

// before hoisting

function hoisting() {
	console.log(a);
    	console.log(b);
    	var a= "Ema";
    	var b = "soryeongk";
    	function temp() {
    		console.log("hello");
    	}
}

hoisting();

호이스팅 후

// after hoisting
function hoisting() {
	var a;
    	var b;
        function temp() {
        	console.log("hello");
    	}
        console.log(a);
        console.log(b);
        a= "Ema";
        b = "soryeongk";
}

hoisting();

상기 코드에서 var a = "Ema"와 var b = "soryeongk"는 호이스팅 후에는 선언문이 우선순위로 올라가기 때문에, a와 b를 선언함과 동시에 할당하는 것이 아니라, 선언이 1순위, function c의 선언이 2순위, console.log가 3순위, a와 b에 대한 할당이 4순위가 됩니다.
이 때, console.log에 해당하는 a와 b에 할당된 내용이 없기 때문에 실제 console에서는 각각 undefined와 referenceError가 발생합니다.

다음 코드는 어떤 결과를 낼지 유추해봅시다.

var a = "soryeongk";
function outer() {
	console.log(a);
    	function inner() {
    		colsole.log(a);
        	var a = "velog.io";
    }
    innner();
    console.log(a);
}
outer();
console.log(a);

var a가 먼저 선언과 동시에 할당되고, function outer()가 정의됨과 동시에 function inner()가 정의됩니다. 하지만 inner()와 outer가 실행되기 전까지 이상의 내용은 큰 의미가 없는 선언부에 불가합니다.

호이스팅 후의 코딩을 살펴보면 다음과 같습니다.

var a;
function outer() {
	function innner() {
    	var a;
        console.log("second : ", a); // undefined
        a = "velog.io";
    }
	console.log("first : ", a); // soryeongk
	inner();
	console.log("third : ", a); // soryeongk
}
a = "soryeongk";
outer();
console.log("forth : ", a); // soryeongk

호이스팅 후에는 선언부가 가장 위로 올라가면서, var a는 선언과 동시에 할당되었던 것처럼 보였으나, 하기의 outer()가 나오기 전까지는 의미 없는 선언이 됩니다.
선언부(function outer()의 선언 이 후)가 지난 후,a에 soryeongk가 할당되고, outer()가 call됨으로써 function outer()의 선언이 의미를 가지게 됩니다. 하지만, 그 안의 function inner()역시 선언에 불과할 뿐, 아직 call된 상태가 아니기 때문에 선언에 그칠 뿐입니다.

즉, outer()의 call로 function outer()가 진정한 의미를 가지게 되었으나, function inner()는 아직 선언에 불과하기에 그 안의 a = "velog.io"는 정의되지 않는다. 때문에 console.log("first : ", a)의 결과는 soryeongk가 되고, inner()의 call을 통해 function inner()는 의미를 가지게 되면서 var a의 재선언과 console.log("second : ", a)를 실행합니다. 하지만, a의 재선언에 의해 할당된 내용이 없기 때문에 해당 내용은 undefined라는 에러를 출력합니다.

그 후의 consoel.log("third : ", a)의 실행 결과는 var a = "velog.io"가 할당된 후임에도 불구하고, "soryeongk"를 출력합니다. 이는 inner의 선언에서 a 가 할당되었을 뿐이기 때문입니다.

이로써 모든 outer()에 대한 실행이 완료되고, 마지막 console.log("forth : ", a)의 경우에도 마찬가지로 "soryeongk"가 출력됩니다. inner() 함수 내에서의 할당에 불과하기 때문에 더 이상 외부에 영향을 미치지 않기 때문입니다.

함수(function)

자주 쓰이는 기능, 반복되는 문장 등을 하나의 이름으로 된 함수로 일반화하면 보다 클린한 코드를 만들 수 있습니다.

좋은 함수를 위한 조건

1. 하나의 함수는 하나의 기능만 가지게 합니다.
2. 함수명은 짧고 명확하되, 동사로 시작해야만 합니다.
3. 함수명은 lowerCamelCase로 작성합니다.
4. 화살표 함수로 작성하는 것이 권장됩니다.

이 외의 JavaScript convention에 관해서는 다음 글에서 확인할 수 있습니다.

함수 선언문

function f1() {
	console.log("f1");
}

기명 함수 선언문

const f2();
f2();
f2 = function _f2(){
	console.log("f2");
}

익명함수 선언문

const f3;
f3();
f3 = function() {
	console.log("f3");
}

화살표 함수

• 익명함수 표현식을 간결하게 표현한 것입니다.
• 매개변수가 하나라면 소괄호 생략 가능합니다.
• 함수 내부에 return문만 있는 경우라면 return은 생략 가능합니다.

익명함수 표현식

function first(){
	console.log("first function");
}

화살표 함수

function second(){
	console.log("second");
}

return문 생략

functino temp = (a, b) => a + b;

Json(JavaScript Object Notation)

주소창에 https://api.github.com/users/soryeongk를 입력하면 JSON Formatter의 설치가 가능해집니다.

Promise

자바스크립트 비동기 처리에 사용되는 객체입니다.

• new Promise()를 통해 선언하며, 인자에는 function(resolve, reject){...}가 들어갑니다.
• resolve, reject 둘 중 하나만 실행합니다. 두 가지 모두 있다면 나중에 작성된 코드는 무시됩니다.
• then : fulfilled일 때 실행된 상태로, 여러번 사용이 가능하며 then Error()를 통해 에러가 발생하면 catch로 갑니다.
• catch : rejected 상태일 때 실행됩니다.
• finall : 결과에 상관없이 상항 실행됩니다.

const getCoffee = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Latte") ,3000);
  // setTimeout(() => reject(null) ,3000);
});

const getCoffee = new Promise((resolve, reject) => {
  // setTimeout(() => resolve("Latte") ,3000);
  setTimeout(() => reject(null) ,3000);
});

getCoffee
  .then((result) => console.log(result))
  .catch((error) => console.log(error))
  .finally(() => console.log("done");

• fetch : 실제 API를 호출하려면 Pomise 객체가 반환됩니다.
• response.json()을 통해 response의 body를 JSON 객체로 변환합니다. 이 메소드의 실행결과도 Promise입니다.

const getUserData = new Promise((resolve, reject) => {
  const data = fetch("api url");
  resolve(data);
  console.log(data);
});

getUserData
  .then((data) => data.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

Async / Await

• then, catch를 사용하지 않고도 Promise의 결과를 얻을 수 있습니다.
• await은 async 함수에서만 사용 가능합니다.
• await의 결과가 resolve인지 reject인지 상과없이 Promise 가 끝날 때까지 기다립니다.

const getUserData = async () => {
  const response = await fetch("api url");
  const data = await response.json();
  console.log(data);
};

getUserData();

alert : 사용자가 확인을 누를 때까지 화면에 메세지를 표시합니다.
prompt : 사용자에게 값을 입력받을 수 있습니다. 두 번째 인자는 default 값이 되고, 만약 사용자가 취소를 누르면 null이 리턴됩니다.
confirm : 사용자에게 질문을 보여주고, True(확인 버튼) 혹은 False(취소 버튼)을 반환합니다.

예시

alert("안녕");
const name = prompt("이름?");
const check = confirm(`${name}님 사랑해`);

Async vs Defer

async : script가 html의 영향을 받지 않을 때(ex. DOM 조작 요소가 없을 때)
defer : script가 html의 영향을 받지 않을 때(ex. DOM 조작요소가 있을 때)