본 게시물은 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)
자주 쓰이는 기능, 반복되는 문장 등을 하나의 이름으로 된 함수로 일반화하면 보다 클린한 코드를 만들 수 있습니다.
좋은 함수를 위한 조건
- 하나의 함수는 하나의 기능만 가지게 합니다.
- 함수명은 짧고 명확하되, 동사로 시작해야만 합니다.
- 함수명은 lowerCamelCase로 작성합니다.
- 화살표 함수로 작성하는 것이 권장됩니다.
이 외의 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 조작요소가 있을 때)
