by Kyojin Hwang
작업이 순차적으로 실행되며, 앞의 작업이 완료되어야 다음 작업이 실행됩니다.
따라서 작업 시간이 길어질 경우 전체 실행이 지연됩니다.작업이 동시에 실행되며, 현재 작업이 끝나지 않아도 다른 작업을 진행할 수 있습니다.
주로 네트워크 요청이나 파일 읽기 등에서 사용되며, 성능과 응답성을 높일 수 있습니다.Blocking : 작업이 끝날 때까지 다른 작업이 대기해야 하는 방식입니다.
특정 코드가 실행 중일 때, 해당 작업이 완료될 때까지 프로그램의 흐름이 멈추며, 이후의 코드가 실행되지 않습니다. 주로 동기(Sync) 방식
에서 나타나며, 작업이 오래 걸릴 경우 전체 응답성이 저하됩니다.
Non-Blocking : 작업이 끝날 때까지 기다리지 않고, 바로 다음 작업을 실행하는 방식입니다.
특정 코드가 실행되는 동안에도 다른 코드가 동시에 실행될 수 있어 프로그램이 멈추지 않습니다. 주로 비동기(Async) 방식
에서 나타나며, 서버 요청, 파일 읽기 등 시간이 오래 걸리는 작업에 많이 사용되어 효율성을 높입니다.
콜백지옥이란?
해결방법
개념
작동 방식
개념
작동방식
장점과 단점
예시코드
<ul id="parent">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const parent = document.getElementById('parent')
// 부모 요소에만 이벤트 리스너를 추가
parent.addEventListener('click', (event) => {
// 클릭한 요소가 li 요소인지 확인
if (event.target.tagName === 'LI') {
console.log(`Clicked on: ${event.target.textContent}`)
}
})
</script>
개념
작동방식
함수 선언형(Function Declaration)
함수 표현식(Function Expression)
스코프 개념
스코프란 변수(식별자)에 접근할 수 있는 유효한 범위를 뜻합니다.
스코프 종류
지역스코프
스코프체인
var
let
const
특징 | 일반 함수 | 화살표 함수 |
---|---|---|
this 바인딩 방식 |
동적으로 바인딩 (호출 시점) | 정적으로 바인딩 (상위 스코프의 this 참조) |
arguments |
arguments 객체 사용 가능 |
arguments 객체 생성되지 않음 (상위 스코프의 arguments 참조 가능) |
prototype |
prototype 프로퍼티 존재 |
prototype 프로퍼티 없음 (생성자 함수로 사용 불가) |
new 키워드 사용 |
생성자 함수로 사용 가능 | 생성자 함수로 사용 불가 |
간결한 문법 | function 키워드를 사용하여 선언 |
function 대신 => 사용하여 간결한 문법 제공 |