소소해서 소중한 일상

호출 스택은 동기 코드를 담당하고, 이벤트 루프는 비동기 코드를 담당한다 백그라운드 background 는 타이머를 처리하고 이벤트 리스너를 저장하는 공간이다 타이머 함수가 실행되면 백그라운드에서 시간을 재다가 지정 시간이 되면 콜백 함수를 태스크 큐로 보낸다 태스크 큐 task queue 는 실행될 콜백 함수들이 대기하고 있는 공간이다 큐 queue 는 우리말로 '줄' 이라는 뜻이다 태스크 큐에 먼저 들어온 함수부터 실행된다 다만 태스크 큐도 함수를 직접 실행하지 않는다 함수는 호출 스택에서만 실행된다 호출 스택에 들어와야 함수가 호출(실행) 된다고 생각하면 된다 태스크 큐에서 호출 스택으로 함수를 이동시키는 존재가 바로 이벤트 루프 이다 호출 스택 호출 스택은 바닥이 막히고 천장은 뚫린 하나의 통이다..

블록 스코프와 함수 스코프 모든 변수는 스코프 scope, 범위 가 있다 var 은 함수 스코프, let 은 블록 스코프이다 함수 안에 선언된 변수는 함수 바깥에서는 접근할 수 없다 이처럼 함수를 경계로 접근 가능 여부가 달라지는 것을 함수 스코프(함수만 신경씀) 라고 한다 함수 스코프를 다르게 말하면 함수를 끝날 때 함수 내부의 변수도 같이 사라진다고 할 수 있다 var 는 함수 스코프라서 if 문 안에 들어 있어도 if 문 바깥에서 접근할 수 있다 let 은 블록 스코프(블록을 신경씀) 이다 블록은 if 문, for 문, while 문, 함수에서 볼 수 있는 중괄호 ({ })를 의미 블록 바깥에서는 블록 안에 있는 let 에 접근 할 수 없다 let 뿐만 아니라 const 도 블록 스코프를 가진다 블..

동기 synchronous 는 앞선 작업이 완전히 끝난 후에 다음 작업이 실행되는 것 비동기 asynchronous 는 앞선 작업이 끝나지 않았는데도 다음 작업이 실행되는 것 setTimeout( ) 타이머 함수 중에서 가장 자구 사용하는 setTimeout( ) 함수는 지정한 시간 뒤에 코드가 실행 첫 번째 인수로 콜백함수, 두 번째 인수는 밀리초 단위이므로 초에 1000을 곱함 setTimeout(함수, 밀리초); 첫 번째 인수에 넣는 함수를 외부에서 가져올 수 있다 setTimeout( ) 함수를 비동기라고 하는 이유는 setTimeout( ) 뒤에 나오는 코드를 더 먼저 실행하기 때문 setTimeout( ) 에 넣은 함수는 동기 코드가 모두 실행되고 난 뒤 실행 setInterval( ) 자바스..

프로그래밍에서 함수 function 는 특정한 작업을 수행하는 코드를 의미 함수 선언하기 이름이 없는 함수는 특별히 익명 함수 anonymous function 이라 한다 함수를 상수에 대입하지 않고 function 뒤에 함수의 이름을 넣는 방식을 함수 선언문 이라한다 함수를 상수나 변수에 대입하는 방식을 함수표현식이라 한다 화살표 기호를 사용한 함수는 화살표 함수 arrow function 이라 한다 function() {}; () => {}; function 이름 (){실행문} 이름 = function(){실행문} () => {실행문} // 또는 () => 반환식 함수 호출하기 함수를 사용하는 행위를 프로그래밍에서는 호출한다 call 고 표현한다 함수 이름에 ( )를 붙이면 함수가 실행된다 retur..

반복문 컴퓨터는 반복 작업을 하는데 효과적이다 모든 프로그래밍 언어는 반복 작업을 처리하는 반복문을 가지고 있다 조건문과 더불어서 가장 많이 쓰는 문이다 while 문으로 반복해서 출력하기 while(조건식) 실행문 while(조건식) { 실행문1; 실행문2; 실행문3; } while 문은 조건식이 참일 동안 반복해서 실행문을 실행 실행문의 여러 개라면 중괄호로 묶어도 된다 if 문과 같은 이유로 실행문의 식이 하나이더라도 중괄호로 묶는 것을 권장한다 프로그래밍할 때는 무한 반복되는 상황을 방지해야 한다 변수 i 를 선언하고, 조건식을 작성하면 된다 실제로 프로그래밍할 때는 변수에 첫 번째 값으로 1 보다는 0을 많이 넣는다 프로그래밍에서는 숫자를 0부터 세기 때문이다 for 문으로 반복해서 출력하기 f..

클래스 클래스 class 는 객체를 생성하기 위한 템플릿(서식)으로, ES2015에서 추가되었습니다 함수를 객체로 생성하는 방법 객체를 동적으로 생성한다는 것은 객체를 미리 만들어 두지 않고 필요할 때마다 생성한다는 뜻이다 객체를 반환하는 함수를 만들면 되는데, 이런 함수를 공장 함수 (factory function) 라고 한다 함수를 호출할 때는 함수 이름 앞에 new를 붙인다 new 를 붙여 호출할 때마다 새로운 객체가 생성 function Monster(name, hp, att) { this.name = name; this.hp = hp; this.att = att; } const monster1 = new Monster('슬라임', 25, 10); const monster2 = new Monste..

변수 특정한 값을 잠시 저장 값을 저장하고 저장한 값을 불러올 수 있게 하는 것이 변수 (variable) 변수를 만드는 행위는 선언 (declaration) 한다고 표현 변수는 let, const, var 세가지가 있다 let 변수명 = 식; 변수를 선언함과 동시에 값을 대입하는 행위를 초기화 (initialization) 라고 한다 변수 선언문은 항상 결과 값이 undefined 로 출력된다 변수명과 값은 컴퓨터의 메모리에 저장된다 메모리를 초기화 (변수의 초기화와는 다름) 하면 메모리에 저장되어 있던 변수도 같이 사라진다 웹브라우저를 새로고침하면 메모리가 초기화된다 변수를 선언할 때 변수에 값을 대입하지 않아도 된다 값을 대입하지 않은 변수를 입력하면 undefined 가 출력된다 이미 선언한 변수..

기본 문법 배우기 코드 작성 규칙 세미콜론 ; 자바스크립트는 하나의 명령이 끝날 때 세미콜론을 붙여도 되고, 붙이지 않아도 된다 한 줄에 여러 명령을 넣을 때는 명령마다 세미콜론을 붙여 그 다음 명령과 구분 해야한다 세미콜론을 붙이는 것은 에러를 방지하는 좋은 습관 주석 다른 사람이 작성한 코드를 볼 때 코드를 이해하기 어려운 경우 유용 주석 (comment) 은 사람만 알아볼 수 있도록 (컴퓨터는 무시하고 넘어감) 설명을 작성한 부분 코드 실행에 영향을 미치지 않음 한줄 주석 // 주석에 적고 싶은 내용 여러줄 주석 /**/ // 주석에 넣고 싶은 내용 console.log("Hello!"); /* 주석에 넣고 싶은 내용 */ 들여쓰기 코드를 작성할 때 들여쓰기는 통일하는 것이 좋다 들여쓰기 만으로도 ..

Hello, JavaScript 콘솔을 console REPL 이라고 합니다. Read (입력)을 받아, 이를 Eval (평가) 하고, 결과를 Print (출력) 한 뒤, 다시 프롬프트가 나타나서 새로운 입력을 기다리는 과정을 Loop (반복) 합니다. 흔하게 발생하는 에러 Uncaught ReferenceError consle is not defined console 입력중에 오타 (consle, comsole 등) Uncaught TypeError console.lg is not a function console은 제대로 입력했으나 log 에서 오타 Uncaught SyntaxError missing ) after argument list 따옴표를 제대로 입력하지 않았을 때 Uncaught Synta..

JavaScript Function 화살표 함수 () => {} vs function () {} const double = function (x) { return x * 2; }; console.log('double: ', double(7)); // 14 const doubleArrow = (x) => x * 2; //const doubleArrow = x => x * 2; () 매개변수가 1개면 생략 가능 console.log('double: ', doubleArrow(7)); // 14 객체를 반환 할 시, ({name: huisu}) IIFE 즉시실행함수 Immdiately-Invoked Function Expression const a = 7; function double() { console.l..