정리/JavaScript (7) 썸네일형 리스트형 [JS] 클로저 렉시컬 스코프란?JS 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는데 이를 렉시컬 스코프라 한다. 함수의 상위 스코프는 함수를 어디서 정의했느냐에 따라 결정되므로 함수를 어디서 호출하는지는 함수의 상위 스코프 결정에 어떠한 영향을 주지 못한다. 즉, 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않는다. 함수 객체의 내부 슬롯렉시컬 스코프가 가능하려면 함수는 자신의 상위 스코프를 기억해야 한다. 이를 위해 함수는 자신의 내부 슬롯에 상위 스코프의 참조를 저장한다. 이때 자신의 내부 슬롯에 저장된 상위 스코프의 참조는 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 가리키는데 함수 객체를 생성하는 시점은 상위 함수가 실행되고 있는 .. [JS] 실행 컨텍스트 실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다. 각 실행 컨텍스트는 해당 코드 블록이 실행되는 동안 필요한 모든 정보를 담고 있다. 이 정보에는 변수, 함수, 객체 등의 정보를 담고 있으며 코드의 실행이 이루어질 때 해당 컨텍스트에 따라 변수의 범위 및 값이 결정된다. 실행 컨텍스트 동작 과정 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 콜 스택에 쌓아 올린다. 가장 위에 쌓여있는 실행 컨텍스트와 관련 있는 코드들을 실행하여 전체 코드의 환경과 순서를 보장한다. var a = 1;function outer() { function inner() { console.log(a); // undefined var.. [JS] 이벤트 루프 JS는 Single Thread 언어 JS는 싱글 스레드 방식으로 동작한다.싱글 스레드란 기본적으로 한번에 하나의 작업만을 수행할 수 있다는 것이다. 하지만 JS는 비동기 처리가 가능하다. 싱글 스레드 언어인데 어떻게 비동기 코드가 실행될 수 있을까? 브라우저의 구조 브라우저에는 JS 엔진만 있는 것이 아니라 Web API, 콜백 큐, 이벤트 루프 등도 있다.JS 엔진JS 엔진에는 Memory Heap과 Call Stack이 있다.Memory Heap : 데이터를 만들 때(변수 선언 및 할당) 저장되는 공간이다.Call Stack : 함수를 실행할 때마다 쌓이는 공간으로, 함수 실행 순서를 제어한다.Web APIJS 엔진 자체가 제공하지 않는 브라우저에서 제공하는 API다.DOM API, setTime.. [JS] JSON JSON이란? JavaScript Object Notation의 줄임말로 자바스크립트 언어의 문법을 빌려서 만들어진 데이터 포맷이다. 서버와 클라이언트 간에 자료를 주고받으려면 양쪽 컴퓨터 모두 이해할 수 있는 형식을 사용해야 하는데 이때 JSON이 필요하다. 자료 표현 방식으로는 JSON 이외에 XML, CSV 등이 있는데 작성하기가 어렵고 용량이 커서 현재는 JSON을 많이 사용하고 있다. JSON의 특징 1. 텍스트로만 구성되어 있어서 서버와 클라이언트 사이에서 주고받을 때 빠르게 전송된다. 2. 프로그래밍 언어나 플랫폼에 대해 독립적이어서 C언어나 자바, 파이썬 등 많은 언어에서 사용할 수 있다. 3. 자바스크립트 사용자라면 누구나 알고 있는 표기법을 사용하므로 읽기도 쉽고 필요에 따라 자바스크립.. [JS] 단축 평가 && 연산자 &&연산자는 왼쪽 피연산자가 falsy값일 때 왼쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 오른쪽 피연산자를 반환한다. null && 'Dog'; // null 'Cat' && 'Dog'; // 'Dog' || 연산자 ||연산자는 왼쪽 피연산자가 falsy값일 때 오른쪽 피연산자를, 왼쪽 피연산자가 truthy값일 때 왼쪽 피연산자를 반환한다. null || 'Dog'; // 'Dog' 'Cat' || 'Dog'; // 'Cat' 단축 평가 &&연산자와 ||연산자는 이와 같이 특정 조건을 검사하고 피연산자의 평가 결과를 그대로 반환하는데 이를 단축 평가라고 부른다. 단축 평가 표현식 평가 결과 true || any true false || any any true && any any .. [JS] var, let, const의 차이 var의 특징과 한계 1. 함수 레벨 스코프만을 가지며, 블록 스코프는 지원하지 않는다. → 함수 레벨 스코프 이외에 생성한 변수는 모두 전역 변수가 되어 의도치 않은 변수 충돌이 발생할 수 있다. function foo() { var x = "Function-level scope"; } if (true) { var y = "Block-level scope"; } foo(); console.log(x); // 에러: 함수 스코프 외부에서 변수에 접근할 수 없음 console.log(y); // 접근 가능, "Block-level scope" 출력 2. 중복 선언이 가능하며, 같은 변수 이름으로 여러 번 선언해도 오류가 발생하지 않는다. → 변수 값이 덮어 씌워지는 현상이 일어날 수 있다. var x = .. [JS] Scope 스코프란? 모든 식별자(변수, 함수 등)는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효 범위가 결정되는 데 이를 스코프라고 한다. 전역 스코프 코드 전체에서 접근할 수 있는 가장 넓은 스코프다. 전역 스코프에서 선언된 변수는 코드의 어디에서나 사용할 수 있다. var global = 10; // 전역 스코프 변수 function foo() { console.log(global); // 전역 스코프 변수에 접근 가능 } foo(); console.log(global); // 전역 스코프 변수에 접근 가능 지역 스코프 특정 함수나 블록 내에서 변수가 정의되고 사용될 수 있는 스코프다. 지역 스코프에서 선언된 변수는 해당 함수나 블록 내에서만 유효하며, 외부 스코프에서는 접근할 수 없다.. 이전 1 다음