[Javascript] 실행 컨텍스트 복습

소스코드의 평가와 실행- 소스코드 평가 - 실행 컨텍스트 생성 - 변수, 함수 등의 선언문 실행 -> 렉시컬 환경의 환경 레코드에 등록 - 소스코드 실행 (런타임) - 실행에 필요한 정보를 렉시컬 스코프에서 검색 실행 컨텍스트의 역할1. 코드 실행 순서 관리 - 실행 컨텍스트 스택으로 관리 - 현재 실행 중인 코드의 실행 순서를 변경 가능(ex 함수 호출에 의한 실행 순서 변경) 2. 스코프 관리(식별자 관리) - 렉시컬 환경으로 관리 - 선언에 의해 생성된 모든 식별자를 스코프를 구분하여 등록 - 스코프는 중첩 관계에 의해 스코프 체인을 형성 -> 상위 스코프로 이동하며 식별자 검색 가능 실행 컨텍스트 스택> 코드의 실행 순서를 관리> 소스코드 평가 -> 실행 컨텍스트 생성 -> 실행 ..

• format_list_bulleted FE/Javascript
• · 2025. 9. 7.
• textsms

[Javascript] this 복습

this 개념- 자신이 속한 객체, 자신이 생성할 인스턴스를 가리키는 식별자 (자기 참조 변수)- this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.- 자바스크립트 엔진이 암묵적으로 생성함 호출 방식에 따른 this 바인딩1. 객체 리터럴 → 메서드를 호출한 객체를 가리킨다const circle = { radius: 5, getDiameter() { return 2 * this.radius; }}console.log(circle.getDiameyer()); // 10 2. 생성자 함수 → 생성자 함수가 생성할 인스턴스를 가리킨다function Circle(radius) { this.radius = radius;}Circle.prototype.getDiameter = function(..

• format_list_bulleted FE/Javascript
• · 2025. 8. 4.
• textsms

[Javascript] 프로토타입 복습

프로토타입 개념- 자바스크립트는 프로토타입을 기반으로 상속을 구현 -> 코드 재사용에 용이- 생성자 함수는 동일한 프로퍼티(메서드 포함) 구조를 갖는 객체를 여러 개 생성할 때 유용- 생성자 함수에서 this로 할당된 프로퍼티,메서드는 인스턴스가 생성될때 할당된다.// 아래 Circle 생성자 함수의 getArea는 모든 인스턴스가 가지는 메서드 이므로 메모리 낭비가 됨function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; }}// 프로토타입을 이용한 getArea 중복 제거// 모든 인스턴스는 getArea 메서드를 공유함function Circle..

• format_list_bulleted FE/Javascript
• · 2025. 7. 29.
• textsms

13. 모던 자바스크립트 Deep Dive(스코프)

⛅ 스코프란?스코프는 변수와 함수에 깊은 관련이 있다.모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효범위가 결정되는데, 이를 스코프라고 한다.스코프 => 식별자가 유효한 범위!!자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙!자바스크립트 엔진은 코드를 실행할 때 코드의 문맥을 고려함스코프라는 것이 없다면 프로그램 전체에서 동일한 변수의 이름은 하나밖에 사용하지 못하게 됨!스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자 사용 가능!(스코프 == 네임스페이스)이때 var 키워드는 같은 스코프내에 중복 선언이 가능하기때문에 유의해야함! 👀// 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할것인지를 결정/..

• format_list_bulleted FE/Javascript
• · 2024. 12. 8.
• textsms

12. 모던 자바스크립트 Deep Dive(함수)

⛅ 프로그래밍 언어의 함수란?일련을 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행단위로 정의한 것용어매개변수: 함수 내부로 입력을 전달 받는 변수인수: 입력반환값: 출력함수의 실행은 함수의 정의와 함수의 호출을 통해 이루어진다.자바스크립트의 함수는 객체 타입의 값이다.⛅ 함수를 사용하는 이유함수는 코드의 재사용이라는 측면에서 매우 유용함유지보수의 편의성 증가코드의 신뢰성 증가코드의 가독성 향상⛅ 함수 리터럴함수 리터럴의 구성요소함수 이름매개변수 목록함수 몸체함수는 객체지만 일반 객체와는 다르다.(호출 가능, 고유한 프로퍼티를 가짐)⛅ 함수 정의정의 방식함수 선언문: function add(x,y){...}함수 표현식: var add = function (x,y){...}Function 생성자 함..

• format_list_bulleted FE/Javascript
• · 2024. 12. 7.
• textsms

11. 모던 자바스크립트 Deep Dive(원시 값과 객체의 비교)

⛅ 원시타입 vs 객체타입&nbsp변경 가능 유무메모리 공간에 저장되는 값변수 할당 방식원시 타입변경 불가능실제 값 저장참조 값 저장(값에 의한 전달)객체 타입변경 가능참조 값 저장참조 값 복사(참조에 의한 전달)⛅ 원시 값변경 불가능한 값 === 한번 생성된 원시 값은 읽기 전용원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아님!원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리에 저장되어있던 원시값이 변경되는 것이 아닌 새로운 메모리 공간에 저장한 값을 가리키는 것 => 메모리 공간의 주소가 바뀌는 것임변수가 참조하던 메모리 공간의 주소를 변경하는 것을 불변성 이라고 함// 메모리 공간을 확보한뒤 kim이 저장되고,// name이라는 식별자는 kim이 저장된 메모..

• format_list_bulleted FE/Javascript
• · 2024. 12. 6.
• textsms