본문 바로가기

JavaScript

[JavaScript] 자바스크립트 클로저 클로저란 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이다. 풀어서 말하자면 함수가 생성된 당시의 외부 변수를 기억해, 생성 이후에도 계속 접근할 수 있게 해주는 기능을 말한다. 외부 함수의 실행이 끝나 외부 함수가 소멸해도 내부 함수는 외부 함수의 변수에 접근이 가능하다. JS의 코드적으로 보자면 아래처럼 비공개 변수를 가질 수 있는 환경에 있는 함수 정도가 되겠다. var makeClosure = function() { var name = 'hello'; return function () { console.log(name); } }; var closure = makeClosure(); closure(); // 'hello'; 클로저를 사용하는 상황 - 현재 상태를 유지하고 변경된 최신 상태를 유지.. 더보기
[JavaScript] 자바스크립트 this this값 함수가 호출되었을 때 그 함수가 속해 있던 객체의 참조. - 메서드 내에서 현재 객체를 참조 - 모든 함수에서 사용가능 - 함수가 호출되어 실행되는 시점에 this값이 결정됨 런타임에 따라 결정되며, 컨텍스트에 따라 가리키는 객체가 달라짐. 전역 컨텍스트에서 현재 객체인 전역 객체를 가리킨다. 웹브라우저에서는 window객체가 된다. 이벤트 처리기 안에서 이벤트가 발생한 요소 객체(이벤트 처리기가 등록된 객체)를 가리킨다. document.body.onclick = function() { console.log(this); } //body클릭 시, 엘리먼트가 출력됨 함수 내부에서 최상위 레벨 코드에서 호출하면 전역 객체를 가리킨다. function func() { console.log(this).. 더보기
[JavaScript] 실행 컨텍스트와 호이스팅 실행 컨텍스트란 코드를 실행하는데 필요한 환경 정보(코드 실행에 영향을 주는 조건이나 상태)를 모아놓은 객체를 말한다. 자바스크립트가 식별자 결정을 효율적으로 하기 위해 사용하는 수단이다. - 전역 컨텍스트: 브라우저가 스크립트를 실행할 때 생성. 모든것을 관리하는 환경으로, 페이지가 종료되면 사라짐. 안에 환경 레코드를 포함한다. - 함수 컨텍스트: 함수 호출 시 생성. 함수 실행이 마무리되면 사라짐. 자바스크립트 엔진이 코드를 실행할 때, 호출 스택(call stack)에 실행 컨텍스트를 push한다. 코드 내에서 함수를 호출할 때마다 호출 스택에 실행 컨텍스트가 push된다. 자바스크립트는 싱글 스레드로 작업을 처리하는데, 따라서 호출 스택에 쌓인 컨텍스트를 위에서부터(=가장 최근 들어온 것부터) .. 더보기
[JavaScript] 스코프(scope) 스코프란 현재 실행되는 컨텍스트를 뜻한다. 자바스크립트의 변수나 함수는 선언 될 때 그 위치에 따라 스코프를 가지며, 참조하는 대상을 찾기 위한 규칙이다. 예를 들어보자. 서로 다른 범위에 이름이 동일한 2개의 변수 x가 선언되어있을 때, x의 값을 콘솔에 출력하려고 한다. 이 때 현재 맥락에서 두 개의 x 중 어느 쪽을 참조하는지 알기 위해 필요한게 스코프라고 할 수 있다. var x = 'global'; function localFunction(){ var x = 'local'; console.log(x); //지역 스코프. local이 출력됨 } localFunction(); console.log(x); //전역 스코프. global이 출력됨 전역 스코프와 지역 스코프 자바스크립트는 함수 레벨 스코.. 더보기
[JavaScript] 자바스크립트 Window 객체 Window객체란 웹 브라우저의 창(window)을 나타내는 전역 객체. 모든 객체가 소속된 최상위 객체로 브라우저 요소, JS엔진, 모든 변수를 담고 있다. 전역 변수가 저장되는 위치가 된다. *대표적인 window 메서드 몇가지 window.open(url) 새 창 열기. 여는 방식 등을 추가로 설정 가능 window.close() 현재 창 닫기 window.setTimeout(function, time) 일정 시간 후 함수 실행 모든 객체는 window에 소속되어 있기 때문에 JS코드 작성 시 window는 생략하고 작성할 수 있다. //아래 두 코드는 같다. window.document.querySelector(body); document.querySelector(body); Window 객체의 .. 더보기
[JavaScript] 자바스크립트에서 Ajax 사용하기 Ajax란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)의 약자. 웹서버와 비동기로 통신해 웹페이지를 동적으로 갱신하는 프로그래밍 기법을 칭하는 말. 이름에 XML이 들어있지만 요즘은 XML보다 JSON을 주로 사용한다. 특징 - 페이지의 새로고침 없이 서버에 요청이 가능 - 따라서 전체 페이지가 아닌 페이지 일부분만 업데이트 할 수 있음 - 서버로부터 데이터를 받고 작업 수행 JavaScript에서의 사용 1. XMLHttpRequest 객체를 이용 const request = new XMLHttpRequest(); 생성자로 XMLHttpRequest 객체를 생성 후, open() 과 send() 메서드를 사용해 요청. onreadystatechange 이벤트.. 더보기
[JavaScript] 프로미스(Promise) 정리 프로미스(Promise)란? 자바스크립트에서 비동기 처리에 사용하는 클래스 객체. 비동기 작업의 완료 또는 실패를 나타내, 순차적인 실행이 필요할 때 복잡한 콜백 중첩없이 깔끔하게 코드를 작성할 수 있게 해준다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다. 프로미스의 상태(state) - 대기(pending): 이행도 거부도 하지 않은 초기 상태. new Promise() 생성자를 호출했을 때 대기 상태가 된다. - 이행(fulfilled): 처리 성공 후 완료된 상태. resolve()를 호출했을 때 이행상태가 된다. - 거부(rejected): 처리 실패된 상태. reject()를 호출했을 때 거부 상태가 된다. 프로미스 객체 생성 생성자를 통해 객체를 생성해서 사용한다. const p.. 더보기
[JavaScript] 자바스크립트에서 정규표현식 사용하기 정규 표현식 정규 표현식(regular expression)은 문자열의 일정한 패턴을 표현하는 규칙이다. 짧게는 정규식이라고도 부른다. 자바스크립트에서는 RegExp 객체와 RegExp메서드, 문자열 메서드를 이용해 정규표현식을 사용할 수 있다. 정규식 만들기 두가지 방법이 있다. 1. 정규식 리터럴 사용 const reg = /ab+c/; 2. RegExp 객체의 생성자 함수 호출 const reg = new RegExp("ab+c"); 정규식 패턴 작성 시, 정해진 규칙에 따라 패턴을 작성한다. 정규 표현식 내용 정리 일반 문자(리터럴 문자) 문자 설명 유니코드 문자 문자 그 자체. (단, ^, $, \, ., *, +, ?, (, ), {, }, |는 정규 표현식 내에서 메타 문자로 사용되므로 제외.. 더보기

티스토리툴바