본문 바로가기

JavaScript/VanillaJS4

module.exports JS 프로그램을 짜다보면 하나의 파일에 코드를 다 쓰는게 아니라 기능별로 구분을 하게되는경우가 필요해집니다. 몇천줄이 넘는 코드를 한 파일에 다 써버리면 생산성이 떨어지는건 당연한거겠죠? 이럴때 module.exports라는 문법을 사용해서 여러 파일(모듈)들을 만들고 최종적으로는 한 파일에서 모든 모듈을 불러와 실행하게됩니다. npm에 설치한 모듈들의 코드들또한 module.exports를 사용하는모습을 볼수있습니다. 또 module.exports에는 숫자,문자열,객체,배열,함수등등 사실상 변수에 들어가는거라면 뭐든지 넣어서 다른코드에서 쓸수가 있는데 예시를 보여드릴게요 // a.js const data = "Hello World"; module.exports = data; // b.js const rece.. 2020. 8. 27.
ES6 화살표함수 1.화살표함수는 함수이름이 없는 익명함수 (x, y) => x + y; // 선언됐지만 이름이 없어 사용할법이 없다 const add = (x, y) => x + y; // 이렇게 익명함수는 변수에 할당할수있다 console.log(add(1, 3)); // 4 setTimeout(() => { console.log('arrow function'); // 또는 이렇게 함수를 인자로 넣어줘야할때 주로 화살표 함수를 사용한다 }, 0); 익명함수는 이런식으로 사용할수있습니다. 그리고 같은 함수라도 여러가지 방법으로 쓸수있는데 let mul1 = (a, b) => { return a * b; }; let mul2 = (a, b) => (a * b); let mul3 = (a, b) => a * b; conso.. 2020. 8. 9.
ES6 const,let 비구조화할당 템플릿문자열 1. 변수 선언자let,const 먼저 let을 설명하려고하는데요, 이제 ES6부터는 거의 var을 안씁니다. 아래는 var의 스코프와 let의 스코프를 비교하는 코드인데요, { var a = 3; } console.log(a); //3 { let b = 3; } console.log(b); //ReferenceError: b is not defined 이렇게 var은 함수스코프를 가지고, let은 블록 스코프를 가지기 때문에 {} 밖에서 변수를 출력할때 var a는 출력이 되고 let b는 사라졌기때문에 출력이 안되는걸 알수있습니다. 다른 언어에서 변수를 선언할때랑 완전히 같아요 const 또한 let과 같은 블록 스코프를 가지지만 상수라는 이름 그대로 값이 한번 할당되면 절대로 다시 재할당할수없습니다.. 2020. 8. 8.
자바스크립트 Closure 클로저란 클로저는 내부함수가 자신이 속해있는외부함수의 변수등을 가져와 사용하는걸 말합니다. 이렇게 말해서는 이해가 안가기도 하는데요, 간단한 예제와 함께 설명드리겠습니다. outFunc가 외부함수, 그 안에있는 inFunc함수가 내부함수입니다. 여기서 내부에있는 inFunc가 실행될떄 외부함수인 outFunc의 변수인 a를 출력하는데요 이런식으로 내부함수는 외부함수의 변수를 가져와 사용할수있습니다. 간단하죠? 물론 이게 클로저의 끝은 아닙니다. 클로저는 외부함수의 실행이 끝났어도 내부함수를 통해 외부함수의 변수등에 계속 접근할수있습니다. 이번에도 예제와 함께 설명드릴게요. 이런식으로 리턴으로 내부함수를 받아놓으면 외부함수가 종료된 후에도 외부함수의 변수에 접근할수 있는것입니다. 아래는 활용 예시들을 보여드릴게요... 2020. 4. 4.