길용의 개발 발자취 길용의 개발 발자취

function counter() { let count = 0; function increment() { count++; } function decrement() { count--; } return { increment: increment, decrement: decrement }; } const counter1 = counter(); const counter2 = counter(); counter1.increment(); //1 counter2.decrement(); //-1 클로저는 쉽게 말해 함수를 클래스로 사용하는 것이다. 위 경우 count 변수엔 오직 increment와 decrement 메서드로만 접근할 수 있으며 counter1.count로 직접 접근하면 undefined가 리턴된다. 그렇..

다른 언어에서 대부분 쓰이는 선언 방식과 달리, js에선 함수를 변수에 할당하는 '함수 표현식' 으로도 함수를 정의할 수 있다. 함수를 선언문으로 작성할 경우 호이스팅되어 함수 선언 전에도 이를 사용 가능하다. 이는 장점이자 단점인데, 함수가 서로를 참조하는 경우 호이스팅을 활용하면 간단하게 작성할 수 있지만 반대로 함수가 호출되기 전 해당 함수 내부의 변수가 아직 정의되지 않아 오류가 발생할 수 있따. 호이스팅과 관련 오류 방지를 위해 표현식 방식으로 작성되는게 추천된다.

요약 1.객체 메서드로 화살표 함수 쓰면 안됨 (this가 해당 객체가 아닌 전역 객체를 가리킴) 2.메서드 내부에 함수에서 클래스 변수에 접근하려면 화살표 함수를 써야함 (상위 this를 상속받음) function으로 작성한 메서드를 화살표 함수로 바꾸니 에러가 났다. 이는 위 코드에서 this는 family 객체가 아닌 전역 객체를 참조하고 있기 때문이다. 전역 객체는 말 그대로 어디서든 참조 가능한 객체로, 우리가 자주 사용하는 console.log, process.argv, module.exports 뿐만 아니라 __filename, __dirname같은 전역 변수까지 지니고 있다. 원래라면 global.console.log와 같이 사용해야되겠지만 global은 편의상 생략 가능하게 되어있다. j..

js에서 null의 타입을 체크하면 object라고 출력된다 이는 과거 typeof 함수에 null 체크 기능을 빼먹어서(...) 이를 수정하기엔 typeof(null)를 사용하는 수많은 코드들이 존재했기에 수정하지 않는다고 한다 ㅡㅡ undefined는 정상적으로 뜬다 console.log(typeof 42); // "number" console.log(typeof "hello"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" console.log(typeof {}); // "object" console.lo..

옵저버 패턴은 객체의 상태 변화를 관찰하는 옵저버(관찰자)를 통해 모듈이나 객체간의 의존성을 낮추는 디자인 패턴이다 function arrivPackage(ticket, callback) { checkPackageIntoDatabase(ticket, function(err) { if (err) return handleError(err); PackageEvent.emit('arrived'); }); } PackageEvent.on('arrived',()=>emailMessage()); PackageEvent.on('arrived',()=>emailNaver()); PackageEvent.on('arrived',()=>emailSlack()); PackageEvent.on('arrived',()=>email..

// CJS 방법 module.exports = { ... } // 모듈 내보낼 때 const utils = require('utils'); // 모듈 가져올 때 // ESM 방법 export.default =()=> { ... }; // 모듈 내보낼 때 import utils from 'utils'; // 모듈 가져올 때 기존의 require는 하나의 객체에 함수나 변수를 복사하여 전역변수처럼 사용했다. 이에 import는 원본 파일을 참조하는 함수를 정의하여 export한다. 만약 메인함수에서 export한 변수의 값을 1초뒤에 변경하도록 하고, 이를 require/import한 함수에서 값을 변경하기 전/후로 값을 출력해보면, CJS에선 (원본을 복사해서 왔기에) 변경된 값이 적용되지 않은 반면 E..

문자나 숫자, bool, null 등 원시 타입 변수는 콜 스택에만, 배열, 객체, 함수 등 참조 타입 데이터는 메모리 힙에 저장되고, 그 주소가 콜 스택에 추가로 저장된다. 변수 a에 10이란 값을 저장할때, 스택에 10이란 값을 저장한 뒤 변수 a가 이를 가리키게 한다. a의 값을 20으로 바꾸면 20이란 값을 찾아 이를 가리키게 한다. (JS 특성상 변수 a는 원시타입에서 참조타입으로 변경될수도 있기에 이렇게 한 듯 하다.) 반면 참조 타입의 값은 힙에 저장되고, 스택엔 주소만 저장한다. 변수 b에 [1,2,3] 배열을 선언하고 c=b를 하면, 둘은 같은 주소를 가리키게 된다. 그렇기에 이때 b의 값을 바꾸면 c의 값도 변경된다. 이것이 티폴트로 원시 타입 변수는 기본 복사가, 함조 타입 변수는 얕..

JS는 싱글 스레드 언어이지만, 이벤트 루프 방식을 통해 비동기 함수 기능을 제공한다. 1.함수는 스택에 쌓여 실행된다. JS는 싱글 스레드이므로, 만약 긴 시간을 요구하는 작업이 스택에 들어간다면 웹 페이지는 몇초동안 렌더링이 막혀 클릭 조차 불가능할 것이다. 2.웹페이지는 setTimeout과 같은 기능을 제공한다. 만약 setTimeout(console.log(”a”), 2000)이란 코드를 작성했다면 웹페이지는 2초동안 console.log(”a”)라는 명령어를 지니고있다가 이후 callback queue로 이를 전송한다. 3.만약 스택이 빌 경우 = 다른 코드를 수행 가능한 경우, event loop는 callback 큐의 명령어들을 스택으로 옮겨 실행한다. 쉽게 말해 오랜 시간이 걸리는 작업은..