상우의 개발일지 상우의 개발일지

JavaScript/3주차-데이터타입, 실행컨텍스트, this

• 9. 상황에 따라 달라지는 This

  JavaScript/3주차-데이터타입, 실행컨텍스트, this 2023. 5. 26. 17:12

  다양한 상황에서 다른 의미를 가진 This 실행 컨텍스트. 실행할 코드에 제공활 환경정보를 모아놓은 객체. - 그 객체 안에는 3가지가 존재한다. ✓ VariableEnvironment ✓ LexicalEnvironment ✓ ThisBindings 런타임 : 코드가 들어가는 그 시간 자바스크립트에서는 두가지 환경이 있다. 1.노드(node.js) 2. 브라우저 전역 환경에서 this는 => 노드에서는 global 객체이고, 브라우저에서는 Window 객체이다. 함수와 메소드 : 함수는 스스로 독립적으로 수행될 수 있으나, 메소드는 항상 종속적이다. 어떤 객체가 메소드를 시켜줘야 한다. 함수 : this가 전역개체이고, 메소드는 this가 호출의 주체이다. case1. 함수 호출 주체를 명시할 수 없기 ..

  Read More
• 8.Outer Environment Reference (3주차 -9)

  JavaScript/3주차-데이터타입, 실행컨텍스트, this 2023. 5. 26. 09:08

  Outer Environment Reference (=outer) 스코프 : 식별자에 대한 유효범위를 의미, 변수가 어디까지 영향을 미치는지에 관한 것 스코프 체인 : 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 outer는 현재 호출된 함수가 선언될 당시(이 말이 중요해요!)의 LexicalEnvironment를 참조해요. 참조한다는 말이 어려우면, 그 당시의 환경 정보를 저장한다. 정보로 이해해도 괜찮습니다. 예를 들어, **A함수 내부에 B함수 선언 → B함수 내부에 C함수 선언(Linked List)**한 경우 어떻게 될까요? 결국 타고, 타고 올라가다 보면 **전역 컨텍스트의 LexicalEnvironment를 참조**하게 됩니다. 항상 outer는 오직 자신이 선언된 시점의 Le..

  Read More
• 7. Record와 호이스팅

  JavaScript/3주차-데이터타입, 실행컨텍스트, this 2023. 5. 25. 19:39

  실행 컨텍스트 : 객체에 담기는 정보 실행 컨텍스트는 3가지가 있다. 1. Variable Environment, 2. Lexical Environment, 3. This Binding 1. Variable Environment (VE) 현재 컨텍스트 내의 식별자 정보(record) = VE, LE var a = 3 일때, var a 가 식별자 정보. (3은 변수) 또한 외부환경 정보(outer)도 갖고있다. 정리 : VE는 두가지를 가지고 있다. 식별자정보(record)와 외부환경정보(outer) 식별자정보(record) : Environment Record 외부환경정보(outer) : Outer Environment Reference 2.Lexical Environment (LE) 기본적으로 Vari..

  Read More
• 6. 실행 컨텍스트(스코프, 변수, 객체, 호이스팅), 콜 스택

  JavaScript/3주차-데이터타입, 실행컨텍스트, this 2023. 5. 25. 17:41

  실행컨텍스트 : 실행할 코드에 제공할 환경정보를 모아놓은 객체 실행컨텍스트의 역할 3가지 1. 호이스팅 (hoisting) : 선언된 변수를 위로 끌어올림 2. 외부 환경 정보 구성 3. this 값 설정 콜 스택 스택(Stack)과 항상 비교되는 것은 큐(Queue) Stack : Last In, First Out = LIFO (마지막에 들어온게 처음으로 나간다.) Queue: First In, First Out = FIFO (처음으로 들어온게 처음으로 나간다) 콜 스택에서는 스택(Stack) 방식을 따른다. 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 그 객체. 즉, 동일 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명한 ‘스택’..

  Read More
• 5. null과 undefined

  JavaScript/3주차-데이터타입, 실행컨텍스트, this 2023. 5. 25. 17:06

  null과 undefined 1. undefined 자바스크립트에서 undefined가 나오는 경우 3가지 변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 .이나 [ ]로 접근하려 했는데, 해당 데이터가 존재하지 않는 경우 function인데 return 문이 없거나 호출되지 않는 함수의 실행 결과 undefined 예시 (1) 값을 대입하지 않은 변수에 접근 var a; console.log(a); (2) 존재하지 않는 property에 접근 var obj = { a: 1 }; console.log(obj.a); // 1 console.log(obj.b); // 존재하지 않는 property에 접근 // console.log(b); // 오류 발생 (3)..

  Read More
• 4. 불변 객체 (깊은 복사 얕은 복사)

  JavaScript/3주차-데이터타입, 실행컨텍스트, this 2023. 5. 25. 16:40

  이름을 변경하는 함수 이름을 변경하는 함수, 'changeName'을 정의 입력값 : 변경대상 user 객체, 변경하고자 하는 이름 출력값 : 새로운 user 객체 특징 : 객체의 프로퍼티(속성)에 접근해서 이름을 변경 var user = { name: 'jake', gender: 'male', }; // 객체의 속성을 복사하는 변경 방법 var changeName = function (user, newName) { var newUser = user; newUser.name = newName; return newUser; }; var user2 = changeName(user, 'sangwoo'); if (user !== user2) { console.log('유저 정보가 변경되었습니다.'); } con..

  Read More
• 3. 변수 선언과 데이터 할당 (참조형 데이터)

  JavaScript/3주차-데이터타입, 실행컨텍스트, this 2023. 5. 25. 11:30

  변수 선언과 데이터 할당 참조형 데이터는 기본형 데이터와는 달리, 변수 할당 과정에서 obj1을 위한 별도 공간이 필요하다. 즉, 참조형 데이터는 변수 할당 과정에서 객체의 변수 (프로퍼티)가 별도로 존재한다. 기본형 데이터 (Number, String, Boolean, null, undefined, Symbol), 불변 참조형 데이터 (Object의 하위요소 - Array, Funtion, Data, RegExp, Map, WeakMap, Set, WeakSet), 변함 그냥 이렇게 생각하면 쉽다. a: 1, b: 'bbb'를 key-value pair 로 생각했을 때 변수영역에 우선 변수이름 넣고 데이터영역에 key값 순서대로, obj1을 위한 별도공간에 value값 순서대로 넣고 데이터영역의 주소를..

  Read More
• 2. 변수 선언과 데이터 할당 (기본형 데이터)

  JavaScript/3주차-데이터타입, 실행컨텍스트, this 2023. 5. 25. 11:21

  변수 선언과 데이터 할당 var str; // 변수 선언 str = 'test!' // 변수 할당 (=이 있으면 할당, assignment) var str = 'test!' // 변수 선언과 할당을 붙여 쓴 방식 메모리에 데이터를 할당하는 방식은, 변수 선언과 변수 할당을 나눠놓은 첫번째 방식으로 한다. 즉, 변수영역과 데이터영역을 나눠놓는다. 위 표에서, 변수 영역에는 var str 셋팅을 먼저 해야함 왼쪽부터 변수영역에 데이터 빈 곳을 채워줘야함. 변수이름과 데이터를 쓰고, 데이터영역에서 빈곳을 찾아 데이터값을 쓰고, 변수영역의 데이터에는 데이터영역에 할당된 주소를 입력함. 만약, 주소 5002에 다른 데이터가 이미 입력되어 있다면 그 다음주소인 5003이 'test!'데이터의 주소값이다. 순서대로 ..

  Read More