Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

자바스크립트 개념 5가지 정리 - 추가 중 본문

과거 프로그래밍 자료들/Javascript&typescript

자바스크립트 개념 5가지 정리 - 추가 중

평부 2022. 7. 21. 15:00

 

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

- 프로토타입 : 객체를 상속할 때 사용

 

저작자표시 비영리 변경금지

'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글

Let's Get IT 자바스크립트 프로그래밍 - 로또 번호 맞추기  (0) 2022.07.22
Let's Get IT 자바스크립트 프로그래밍 - 숫자야구(아웃 추가, 시도 횟수 추가)  (0) 2022.07.22
Let's Get IT 자바스크립트 프로그래밍 - 카드 짝 맞추기  (0) 2022.07.20
slice, concat, forEach + 원본을 바꾸는 매서드, 바꾸지 않는 매서드  (0) 2022.07.20
Let's Get IT 자바스크립트 프로그래밍 - 텍스트 RPG  (0) 2022.07.20
'과거 프로그래밍 자료들/Javascript&typescript' Related Articles more