프론트엔드 개발/JavaScript 35

자바스크립트) this

0. this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 단 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 1. this 바인딩이란? 바인딩이란 식별자(변수)와 값(원시 값 또는 객체)을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다. this 바인딩은 this(키워드로 분류되지만 식별자 역할을 한다)와 this가 가리킬 객체를 바인딩하는 것이다. 2. t..

자바스크립트) 클로저 끝장 정리

클로저에 관한 게시글을 읽기 전에 렉시컬 환경, 스코프체인에 관해 알고오시면 도움됩니다! 0. 클로저 - 외부 변수를 기억하고, 이 외부 변수에 접근할 수 있는 함수를 의미한다. - 내부 함수는 외부함수의 지역변수에 접근할 수 있는데, 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는 것 - 함수와 그 함수가 선언되었을 때의 렉시컬환경과의 조합이라고 부르며, 내부 함수가 외부 함수 변수에 접근할 수 있는 자바스크립트 기능을 말한다. // 외부 함수 function closuer() { // 변수 정의 var count = 0; // 내부 함수(클로저) 선언 function inner() { return ++count; } // 내부 함수 반환 return i..

자바스크립트) 실행컨텍스트, 호이스팅, 렉시컬환경, 스코프체인

0. 실행컨텍스트 🔸정의 : 코드를 실행하는데 필요한 환경 정보를 모아놓은 객체 / 자바스크립트가 코드를 실행하기 위해 관리하는 Stack 구조의 실행환경 자바스크립트는 동일한 환경에 있는 환경 정보들을 모은 실행 컨텍스트를 콜스택에 쌓아올린 후 실행하여 코드의 환경과 순서를 보장할 수 있게 됩니다. 스택의 경우 FILO (First In, Last Out) 의 구조이기에 순서를 보장, 콜스택 내부에 쌓인 실행 컨텍스트의 정보를 통해 환경을 보장할 수 있는 것 여기서 환경이란 전역공간이 될 수 있고, 함수 즉 함수 내부의 환경이 될 수 있다. 🔸코드 실행 2단계 1단계(생성단계/소스코드 평가 과정) : 자바스크립트는 소스코드를 실행하기 전에 소스코드 전체를 훑으면서 문제가 없는지 체크하는 과정을 거친다...

자바스크립트) 스코프

0. 스코프 🔸뜻 : 식별자(변수명/함수명/클래스명 등)가 유효한 범위, 식별자(변수이름/함수이름/클래스이름)가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조 될 수 있을지 없을지 결정되는 것 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야할 것인지 결정한다. 따라서, 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 이름이 같은 변수 x가 중복 선언되었다. 전역에서 변수 x를 참조할 때, 그리고 함수 foo 내부에서 변수 x를 참조할 때 이름이 중복된 2개의 변수 중 어떤 변수를 참조(접근)해야 하는가? 자바스크립트는 어떻게 변수를 식별하는 것일까? 변수는 전역 또는 코드 블록(if, for, while, try/catch 등)이나 함수 내에 선언하며 코..

자바스크립트) 함수

0. 함수 0-0) 함수 리터럴 - 자바스크립트 함수는 객체 타입의 값이다. - 따라서 숫자값을 숫자리터럴로 생성하고 객체를 객체리터럴로 생성하는것처럼 함수도 함수리터럴로 생성가능하다. - 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다. - 함수 이름은 함수 몸체 내에서만 참조가능한 식별자다. - 함수 이름이 있는 함수를 기명함수(named function)라 하고, 이름이 없는 함수를 무명/익명 함수(anonymous function)라고 한다. ex) 함수리터럴 생성 예제 // 변수에 함수리터럴 할당 var f = function add(x, y) { return x + y; }; - 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성..

자바스크립트) 객체

0. 자바스크립트에서 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 '모든 것'이 객체다. 원시 값(숫자,문자열,불리언 등)을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다. var person = { name: "Lee", age: 20, }; 객체는 프로퍼티(속성)와 메서드(동작)을 가지며,..