본문 바로가기

웹/JavaScript28

실행 컨텍스트 execution context 실행컨텍스트란? 👉🏻 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜 스택에 쌓아올렸다가 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다. 여기서 '동일한 환경', 즉 하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역공간, eval() 함수, 함수 등이 있습니다. 자동으로 생성되는 전역공간과 악마로 취급받는 eval을 제외하면 우리가 흔히 실행컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐입니다. Stack : FILO(First In Last Out), LIFO(Last In First Out) Queue : FIFO(First In First.. 2022. 12. 7.
undefined null 차이점 undefined 사용자가 명시적으로 지정하는 경우 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우 (2-1). 값을 대입하지 않은 변수, 즉 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 (2-2). 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때 (2-3). return문이 없거나 호출되지 않는 함수의 실행 결과 (2-1. 자동으로 undefined 부여) var a; console.log(a); // undefined 값을 대입하지 않은 변수에 접근 (2-2. 자동으로 undefined 부여) var obj = {a:1} console.log(obj.a); //1 console.log(obj.b); //존재하지 않는 프로퍼티에 접근 undefined cons.. 2022. 12. 1.
얕은 복사 VS 깊은 복사 얕은 복사(shallow copy)는 바로 아래 단계의 값만 복사함 중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주솟값만 복사한다는 의미 해당 프로퍼티에 대해 원본과 사본이 모두 동일한 참조형 데이터의 주소를 가르키게 됨 사본을 바꾸면 원본도 바뀌고 원본을 바꾸면 사본도 바뀜 깊은 복사(deep copy)는 내부의 모든 값들을 하나하나 찾아서 전부 복사함 중첩된 객체에 대한 얕은 복사 var copyObject = function (target) { var result = {}; for (var prop in target) { result[prop] = target[prop]; } return result; }; var user = { name: "kyochon", urls: { we.. 2022. 11. 25.
불변 객체를 만드는 간단한 방법 객체의 가변성에 따른 문제점 var user = { name : 'kyochon', gender : 'male' }; var changeName = function(user, newName){ var newUser = user; newUser.name = newName; return newUser; } var user2 = changeName(user,'bbq'); if(user !== user2){ console.lg('유저 정보가 변경되었습니다'); } console.log(user.name, user2.name);// bbq, bbq console.log(user === user2)// true 새로운 객체를 만들면 원본 객체가 원본을 유지하지 못하고 수정이 됩니다. 객체의 가변성에 따른 문제점의 .. 2022. 11. 23.
자바스크립트 변수 복사 비교 기본형 데이터와 참조형 데이터 값 비교 var a = 10; var b = a; var obj1 = {c:10, d:'ddd'} var obj2 = obj1; console.log(b);//10 console.log(obj1.c);//10 console.log(obj2.c);//10 b = 15; obj2.c = 20; console.log(b);//15 console.log(obj1.c);//20 console.log(obj2.c);//20 // a !== b // obj1 === obj2 a !== b obj1 === obj2 기본형과 참조형 데이터의 가장 큰 차이점이다 변수에 할당하기 위해 주솟값을 복사해야 한다. 기본형은 주솟값을 복사하는 과정이 한 번만 이뤄지고 참조형은 한 단계를 더 거친다. .. 2022. 11. 21.
데이터 타입 Primitive Type VS Reference Type 데이터 타입 Primitive Type(기본형) VS Reference Type(참조형) Primitive Type(기본형) : Number, String, Boolean, null, undefined, Symbol Reference Type(참조형) : Object - Array, Function, RefExp, Set/WeakSet, Map/WeakMap... 메모리 동작 방식 Stack Memomory : 변수, 기본형 데이터, 정적 할당 Heap Memory : 참조형 데이터, 동적 할당 기본형 데이터에서 값이 변경되었을 때 var a = 'abc'; a = 'abcd'; 변수 영역의 값은 가르키고 있는 주소를 직접 바꾸게 된다. 참조형 데이터에서 값 재할당 var obj ={ a:1, b:'bb.. 2022. 11. 19.

티스토리툴바