본문 바로가기

자바스크립트

DOM과 BOM DOM(Document Object Model) 웹페이지를 자바스크립트로 제어하기 위한 객체 모델(문서에 대한 모든 내용을 담고 있음) 텍스트 파일의 문서를 브라우저가 이해할 수 있는 구조로 구성한 것 → HTML 요소의 관계를 반영하여 모든 노드들을 트리구조로 구성한 것 HTML뿐 아니라 다양한 마크업 언어를 제어하기 위한 모델, 문서의 구조화된 표현으로 프로그래밍 언어가 DOM구조에 접근해 문서 구조, 스타일 등을 변경할 수 있도록 함 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다. 웹에서 발생하는 수많은 이벤트(Event)는 모두 자바스크립트의 객체, 이런 Document 객체(요소)로 구성된 하나의 웹 페이지는 Window를 최상위로 하는 트리를 생성, 각각의 이벤트(객체)..
자바스크립트 Scope와 Closure 스코프(Scope) Scope(스코프) : 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것 블록 레벨 스코프 : 대부분 프로그래밍 언어, (let, const) 함수 레벨 스코프 : 자바스크립트, 함수 내부 전체에서 유효한 식별자 상위스코프 : 함수가 호출되는 시점에 결정(동적 스코프) 함수가 정의되는 시점에 결정(정적 스코프, 렉시컬 스코프) → 자바스크립트 함수는 태어나면서 내부슬롯에 상위 스코프 참조를 저장 함수 호출 → 실행 컨텍스트 생성, 실행 컨텍스트 스택 → 렉시컬 환경 생성 →실행 컨텍스트 스택에서 팝, 제거 Closure(클로저) 두 개의 함수로 만들어진 환경 으로 이루어진 특별한 객체의 한 종류 ..
[JS] this와 bind 자바스크립트 this란? this : 함수가 객체 안에서 사용될 때 그 객체를 참조할 수 있는 키워드 함수 내에서 함수 호출 맥락(context)를 의미(함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라짐 = this가 어떤 obj에 binding 됨) js의 함수는 객체, 일급객체(1. 변수나 데이터에 저장, 2. 함수의 인자로 전달 3. 함수의 반환값으로 전달) bind : 함수가 호출될 때마다 this가 결정되는 것을 바인딩 된다고 표현 바인딩 종류 기본바인딩 특정 객체의 메서드가 아니라 함수를 호출하면, 해당 함수 내부 코드에서 사용된 this 는 전역객체에 바인딩 함수일 때 this는 전역객체에 바인딩 - 브라우저 환경에서는 window(엄격 모드일때는 undefined), 노드..
자바스크립트 비동기 처리 -callback, promise, async/await 콜백(Callback) 인자로 받아들인 함수를 다시 호출하는 기능을 callback 즉 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있음 callback hell : 콜백함수가 늘어나면 늘어날 수록 코드의 깊이가 늘어나 더이상 헤어날 수 없다는 자조성 용어 코드 관점에서 콜백함수는 중첩으로 들여쓰기(nesting)가 반복되어 가독성이 떨어짐 각 콜백함수에서 에러 핸들링을 해주어야 함, 에러처리를 하지 않으면 어디서 에러가 발생한지 알기 어려움 콜백의 문제 신뢰성 : 콜백은 제어권의 주체가 바뀜, 콜백 내부에서 예외처리는 가능해도 비동기요청-콜백함수 흐름은 제어가 어려움 이에 Promise가 등장,..
[JS] Hoisting과 변수 선언 3가지 방법(var, const, let) 자바스크립트 변수 선언 3가지 방법 요약 var은 함수 스코프, let, const는 블록스코프(c와 비슷) var은 재선언 가능, let, const는 불가능 let은 재할당 가능, const는 불가능(const는 선언과 동시에 초기화) var (function scope) 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때까지 undefined 값 var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주 Hoisting: 자바스크립트 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작 변수 선언만 이루어지며 undefined로 할당됨 let (block scope) let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언 ho..

티스토리툴바