자바스크립트 개념 5가지 정리 - 추가 중
1. 렉시컬 스코프(적정 스코프)
- 출처 : https://eun-ng.tistory.com/16
[JS] 6. 함수 스코프 & 블록 스코프 & 렉시컬 스코프
GitHub - yjs03057/33-js-concepts: 모든 자바스크립트 개발자가 알아야 하는 33가지 개념 모든 자바스크립트 개발자가 알아야 하는 33가지 개념. Contribute to yjs03057/33-js-concepts development by creatin..
eun-ng.tistory.com
- 중첩된 함수 그룹에서 내부 함수가 상위 범위의 변수 및 기타 리소스에 액세스 할 수 있음 의미
- 함수를 어디에 선언하는 지에 따라 상위 스코프 결정 -> 함수를 어디서 호출하는지가 아니라 어디에 선언하는 지에 따라 결정
- 자바스크립트는 렉시컬 스코프를 따리기에 함수를 선언한 시점에서 상위 스코프 결정
- 예제의 pilot 함수는 전역에 선언, piolt 함수의 상위 스코프는 전역 스코프, 따라서 전역 변수 captin의 값인 'maverick' 두 번 출력
let captin = 'maverick';
function navy() {
let captin = 'rooster';
pilot();
};
function pilot() {
console.log(captin);
}
navy(); //maverick
pilot(); //maverick
2. 실행 컨텍스트
- 출처 : https://eun-ng.tistory.com/62
[JS] 실행 컨텍스트, 호이스팅, 함수 선언문과 함수 표현식
실행 컨텍스트(Execution Context) 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성
eun-ng.tistory.com
- 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보를 모아놓은 객체
- 동일한 환경에 있는 코드 실행 시 필요한 환경 정보를 모아 컨텍스트 구성하고 이를 콜스택에 쌓아 올림
- 실행 컨텍스트는 전역 공간이 생성될 때, 함수가 호출 될 때 생성
- 코드 실행 시, 전역공간이 활성화 되면서 전역 컨텍스트가 생성되고 함수 호출 순서대로 콜스택에 실행 컨텍스트가 쌓이는 것을 확인
// ----------------------(1)
var pilot = 'maverick';
function fighterPlane() {
function tomCat() {
console.log(pilot); //undefined
var pilot = 'iceman';
}
tomCat(); // --------(2)
console.log(pilot); //maverick
}
fighterPlane(); // --------------(3)
console.log(pilot); //maverick
3. 이벤트 루프
- 출처 : https://ko.javascript.info/event-loop
이벤트 루프와 매크로태스크, 마이크로태스크
ko.javascript.info
* 출처 : https://meetup.toast.com/posts/89 (더 자세히 설명)
자바스크립트와 이벤트 루프 : NHN Cloud Meetup
자바스크립트와 이벤트 루프
meetup.toast.com
- 이벤트 루프는 태스크가 들어오길 기다렸다가 태스크가 들어오면 이를 처리, 처리할 태스크가 없는 경우에는 잠드는 끊임없이 돌아가는 자바스크립트 내 루프
- 자바스크립트 엔진을 활성화하는 태스크
1) 외부 스크립트 <script src="...">가 로드될때 이 스크립트를 실해하는 것
2) 사용자가 마우스를 움직일 때 mousemove 이벤트와 이벤트 핸들러를 실행하는 것
3) setTimeout에서 설정한 시간이 다 된 경우 콜백함수 실행
4) 기타 등등
- 세부 사항 :
1) 엔진이 특정 태스크를 처리하는 동안엔 렌더링이 일어나지 않음, 태스크를 처리하는 시간이 길지 않으면 문제 없음
처리가 끝나는 대로 DOM 변경을 화면에 반영하면 되기 때문
2) 태스크 처리에 긴 시간이 걸릴 경우 브라우저는 태스크를 처리하는 동안 발생한 사용자 이벤트 등의 새로운 태스크들 처리 하지 못함(가끔 만나는 응답 없는 페이지가 이에 해당)
//예제 1
<body>
<div id="progress"></div>
<script>
//1
let i = 0;
function count() {
do {
i++;
progress.innerHTML = i;
} while (i % 1e3 != 0);
if (i < 1e7) {
setTimeout(count);
}
}
count();
<script>
</body>
//예제 2
<script>
function delay() {
for (var i = 0; i < 100000; i++);
}
function foo() {
delay();
bar();
console.log('foo!'); // (3)
}
function bar() {
delay();
console.log('bar!'); // (2)
}
function baz() {
console.log('baz!'); // (4)
}
setTimeout(baz, 10); // (1)
foo(); //결과 bar! -> foo! -> baz!
</script>
4. 프로미스
- 출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
자바스크립트 Promise 쉽게 이해하기
(중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법
joshua1988.github.io
- 프로미스는 자바스크립트 비동기 처리('특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행')에 사용되는 객체
- 주로 서버에서 받은 데이터를 화면에 표시할 때 사용
- 프로미스 3가지 상태
1) 대시 : 비동기 처리 로직이 아직 완료되지 않은 상태
2) 이행 : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
3) 실패 : 비동기 처리가 실패하거나 오류가 발생한 상태
//promise 추가 전 ajax 코드
function getData(callbackFunc) {
$.get('url 주소/products/1', function(response) {
callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
});
}
getData(function(tableData) {
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});
//promise 추가
function getData(callback) {
// new Promise() 추가 - 대기 상태
return new Promise(function(resolve, reject) {
$.get('url 주소/products/1', function(response) {
// 데이터를 받으면 resolve() 호출 - 이행 상태
resolve(response);
});
});
}
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) { //이행 상태
// resolve()의 결과 값이 여기로 전달됨
console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});
// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) { //실패 상태
console.log(err); // Error: Request is failed
});
5. 프로토타입
- 출처 : https://poiemaweb.com/js-prototype
Prototype | PoiemaWeb
자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게
poiemaweb.com
- 프로토타입 : 객체를 상속할 때 사용