JavaScript 3

[JavaScript] 8. 모듈 사용

외부 파일에 선언한 변수를 import해서 사용할 수 있다. 먼저, html 문서에서 곱셈을 계산하는 모듈을 가져와 사용하려고 한다. 다른 곳에서 사용하도록 설정하는 방법에는 2가지 방법이 있다. 1. 외부에서 사용하도록 허가할 변수마다 export 키워드 붙이기 export const title = "계산기 모듈"; export function mul(i, j) { return i * j; } function off() { //외부에서 사용 불가 console.log("종료"); } 2. 마지막에 외부에서 사용하도록 허가할 변수들을 모아서 한 번에 export 키워드 붙이기 //cal.js const title = "계산기 모듈"; function mul(i, j) { return i * j; } fu..

Programming/JS 2022.05.04

[JavaScript] 7. JS 심화 문법(2) Promise

1. Promise란? 자바스크립트에서 비동기를 처리할 때, 동기처럼 처리하기 위해 사용하는 객체를 말한다. 비동기 처리가 끝난 후, 실행되어야 하는 것을 정의해놓고 비동기 처리가 끝나면 불려질 수 있도록 한다. 말 그대로, "넌 비동기 처리 끝나고 실행해줄게"하는 약속을 맺는다고 보면 된다. 비동기 처리 시 아래의 코드처럼 특정 로직이 끝나는 걸 기다리지 않고, 뒤의 로직을 바로 실행시키기 때문에 원하는 결과를 얻을 수 없다. let data; setTimeout(() => { data = 20; console.log('비동기 코드 실행 완료'); }, 3000); console.log(data); //undefined //비동기 코드 실행 완료 이를 해결하는 방법은 대표적으로 콜백함수가 있고, 지금 ..

Programming/JS 2022.05.04

[JavaScript] 7. JS 심화 문법(1) Destructuring : 구조 분해

Destructing이란, 구조(자료 구조)를 할당하면 좌항에 맞게 알아서 분해해서 할당해주는 것을 말합니다. let arr = [1, 2, 3]; let [n1, n2, n3] = arr; console.log(n1, n2, n3); 활용 1. 객체 프로퍼티 값 참조 let person = { name: "홍길동", age : 25, introduce(){ console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`); } } //var은 window에 선언하는 변수 //let(지역변수)으로 쓰면 this가 window라서 introduce의 이름, 나이값 출력X var {name, age, introduce} = person; console.log(name, age..

Programming/JS 2022.05.04