728x90

개발 & 프로그래밍/JavaScript & TypeScript 7

실행컨텍스트의 이해 - JavaScript

자바스크립트 딥다이브 공부 후 정리한 내용입니다.소스코드자바스크립트의 동작 원리로 소스 코드(전역 코드, 함수 코드, eval 코드, 모듈 코드)는 실행에 앞서 평가 과정을 거치고 코드를 실행하기 위한 준비를 함소스코드의 평가 → 소스코드의 실행소스코드의 평가: 실행 컨텍스트 생성하고 변수, 함수 등의 선언문만 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록함소스코드 실행: 런타임이 시작됨. 소스코드 실행에 필요한 정보, 즉 변수나 함수의 참조를 실행 컨텍스트가 관리하는 스코프에서 검색해서 취득함변수 값의 변경 등 소스코드의 실행 결과는 다시 실행 컨텍스트가 관리하는 스코프에 등록됨실행 컨텍스트 역할코드가 실행 되려면 스코프, 식별자, 코드 ..

this 바인딩 - JavaScript

함수 호출 방식과 this 바인딩렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정하지만 this 바인딩은 함수 호출 시점에 결정됨함수를 호출하는 방식에 따라 동적으로 결정됨일반 함수 호출: 기본적으로 this에는 전역 객체가 바인딩 됨strict mode 가 적용된 일반 함수의 this에는 undefined가 바인딩 됨주의할 점은 메서드 내에서 정의한 어떠한 함수라도 일반 함수로 호출되면 this에는 전역 객체가 바인딩 됨참고할 점은 메서드 내의 일반함수 this 바인딩을 일치 시키려면 this 대신 that을 참조하거나 4번의 방법으로 일치 시킬 수 있음메서드 호출: 객체.연산자() 로 호출하여 마침표(.) 앞에 기술된 메서드를 호출한 객체가 바인딩 됨주의할 점은 메..

this 정의 - JavaScript

this 정의 - JavaScriptthis객체지향 프로그래밍 = 상태를 나타내는 프로퍼티 + 동작을 나타내는 메서드를 논리적인 단위로 묶은 복합적인 자료구조 ⇒ 메서드가 프로퍼티를 변경하기 위해 **자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 함**this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수임this를 통해 프로퍼티나 메서드를 참조 할 수 있음자바스크립트 엔진에 의해 암묵적으로 생성되며, 언제 어디서든 참조 가능함단, this 바인딩은 함수 호출 방식에 의해 동적으로 결정됨// this는 어디서든지 참조 가능함// 전역에서의 this는 전역 객체 window를 가르킴console.log(this); // windowfunction square(numbe..

스코프(scope)와 스코프체인 - JavaScript

자바스크립트 딥다이브 공부 후 정리한 내용입니다.스코프란?모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨⇒ 즉 식별자가 유효한 범위를 뜻함(like.. 전역 변수, 지역변수)⇒ 자바스크립트 엔진이 스코프 체인을 통해 참조할 변수인 식별자를 검색할 때 사용하는 규칙💡 “코드가 어디서 실행되며 주변에 어떤 코드가 있는지”를 렉시컬 환경이라고 함코드의 문맥은 렉시컬 환경으로 이루어짐. 이를 구현한 것이 “실행 컨텍스트”이며, 모든 코드는 실행 컨텍스트에서 평가되고 실행됨💡 var 키워드의 변수는 같은 스코프 내에 중복 선언이 허용됨 → 변수값이 재할당 되는 부작용하지만 let이나 const 키워드의 변수는 같은 스코프 내에서 중복 선언이 허용되지 않음..

함수 호이스팅과 다양한 형태 - JavaScript

함수 생성 시점과 함수 호이스팅console.dir(add); // f add(x, y)console.dir(sub); // undefiend console.log(add(2, 5)); // 7console.log(sub(2, 5)); // TypeError: sub is not a funcitonfunction add(x, y) { return x + y;}var sub = function { return x + y;};함수 선언문, 함수 표현식으로 생성한 함수의 생성 시점이 다름모든 선언문과 동일하게 함수 선언문도 런타임 이전에 자바스크립트 엔진에 의해 함수 객체가 먼저 생성되고, 동일한 이름의 식별자를 암묵적으로 생성한 후 생성된 함수 객체 할당하는 과정을 먼저 수행함⇒ 함수의 호이스팅함..

함수(Function)의 정의 - JavaScript

자바스크립트 딥다이브 공부 후 정리한 내용입니다.함수란?일련의 과정을 문(statement)로 구현하고 코드 블록으로 감싸서 하나의 실행단위로 정의한 것함수는 값이고 여러개 존재할 수 있으므로 식별자인 함수 이름을 사용할 수 있음// 함수 이름 addfunction add(x,y) { // x, y는 **매개변수(parameter)** return x + y; // **반환값(return value)**} // 함수 정의 코드블록// 함수 호출add(2, 5); // 2, 5는 **인수(argumet)**매개변수: 입력 전달 받는 변수, 함수를 정의할 때 선언, 함수 몸체 내부에서 변수와 동일함수 호출시 암묵적으로 생성되고 일반 변수와 동일하게 undefined 로 초기화 된후 인수가 순서대로 할당..

객체(Object)의 정의 - JavaScript

자바스크립트 딥다이브 공부 후 정리한 내용입니다.객체0개 이상의 프로퍼티로 구성된 집합으로 프로퍼티는 키(key) 와 값(value)으로 구성됨함수는 일급 객체이므로 값으로 취급할 수 있고 프로퍼티 값이 함수인 경우 메서드(method)라고 부름자바스크립트의 객체 생성은 클래스를 먼저 정의하고 new연산자와 함께 생성자를 호출할 필요 없이 객체 리터럴을 사용하여 객체를 생성함// 객체 리터럴을 사용하여 객체 생성var person = { name: 'Lee', // 프로퍼티: 객체의 상태를 나타내는 값(data) age: 20, increase: function () { // 메서드: 프로퍼티를 참조하고 조작할수 있는 동작 this.age++; }, fistNa..

728x90