기억 휘발 방지소

이번 글에서는 JavaScript의 이벤트 루프에 대해 정리해보려고 한다. javascript.info에서는 이벤트 루프를 다음과 같이 설명하고 있다. 이벤트 루프는 태스크가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고 처리할 태스크가 없는 경우엔 잠드는, 끊임없이 돌아가는 자바스크립트 내 루프 이벤트 루프의 동작방식을 대충 그려봤다. 자바스크립트에서 함수를 호출하게되면 Call Stack에 쌓인다. 쌓인 역순으로 실행하게 된다. setTimeout, AJAX 또는 DOM event 함수를 실행하면 Call Stack에서 Web API로 보내고 정해진 시간 등이 지나면 Task Queue로 보내게 되고 순차적으로 쌓인다. Task Queue에 쌓인 Callback들은 Call Stack이 비었을 ..

REPL은 Read Evaluate Print Loop의 약자로 터미널에서 명령을 입력할 수 있는 Windows의 터미널이나 Unix/Linux의 쉘과 같은 컴퓨터 환경을 나타낸다. 다음 명령을 입력하여 실행시킬 수 있다. $ node > 터미널 창에 node를 입력하면 REPL 환경으로 접속할 수 있다. REPL 환경에서 간단한 연산도 가능하다. 연산 말고도 변수, 함수도 사용할 수 있어 다양한 테스트가 가능하다. 종료할 때에는 Ctrl + C를 두 번 입력하거나 Ctrl + D 혹은 .exit를 입력하면 REPL 환경에서 나올 수 있다.

호출스택이란? 호출 스택은 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에 어떤 함수가 호출되어야하는지 등을 제어한다. MDN 호출 스택은 스택이라는 단어에서 알 수 있듯이 LIFO(Last In First Out) 구조이다. 호출되는 모든 함수는 호출 스택에 추가되고 추가되는 역순으로 실행되는 구조이다. 예제 function a() { b(); console.log("aaa"); } function b() { c(); console.log("bbb"); } function c() { console.log("ccc"); } a(); 위의 코드를 실행했을 때 결과는 어떻게 나올까? 정답은 아래와 같다. ccc bbb aaa 위 코드는 다음과 같이 실행된다. 호출스택은 아..

1. Array.from() MDN에서 Array.from()을 다음과 같이 정의한다. Array.from() 메서드는 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만든다. const set = new Set([1, 2, 3]); const arr = Array.from(set); console.log(set); console.log(arr); 결과 Set(3) { 1, 2, 3 } [ 1, 2, 3 ] 2. Spread Operator Spread Operator는 ES6의 문법으로 배열이나 문자열과 같은 반복가능한 객체를 하나씩 펼쳐서 리턴한다. ... 와 같이 점 3개로 표현한다. const set = new Set([1, 2, 3]); const arr = [...s..

함수 선언식 함수 선언식은 흔히 아래와 같은 형태로 작성한다. function 함수이름() {...} summarizeUser라는 함수를 선언하는 예제이다. let name = "Kim"; let age = 29; let hasHobbies = true; function summarizeUser(userName, userAge, userHasHobby) { return ( "Name is " + userName + ", age is " + userAge + " and the user has hobbies: " + userHasHobby ); } 함수 이름을 호출하여 사용한다. console.log(summarizeUser(name, age, hasHobbies)); // Name is Kim, age i..

배열을 복사하는 2가지 방법 1. slice() slice()은 MDN에서 다음과 같이 정의한다. slice() 메소드는 어떤 배열의 begin부터 end까지에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. arr.slice(begin, [end]) arr.slice(begin, [end])의 형태로 사용하는데 매개변수 없이 사용하게 되면 원본에 대한 복사본을 반환한다. 코드 const array = [1, 2, 3, 4, 5]; const copiedArray = array.slice(); copiedArray.push(6); console.log("array:", array); console.log("copiedArray:", copiedArray); 결과 array: [ 1, 2, 3, 4, 5..