JavaScript 44

10. this (전역공간 this, 함수 this, 메서드 this)

1.this(정의, 활용방법, 바인딩, call, apply, bind) - 다른 객체지향 언어에서의 this는 클레스로 생성한 인스턴스 - JS에서는 this가 어디에서나 사용될 수 있음 1. 상황에 따라 달라지는 this 우리가 하고있는것은 실행 컨텍스트임을 잊지 말자. ✔ VE ✔ LE ✔ ThisBindings - 1. this는 실행 컨텍스트가 생성될 때 결정됨. 즉, this는 함수를 호출할 때 결정된다. - a. 전역공간에서의 this - 1. 전역 공간에서 this는 전역 객체를 가리킨다. - 2. 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환) 를 각각 가리킨다. 우선 확인해보자. - 브라우저에서는 아래와 같이 확인할 수 있다. 검색창에 cons..

JavaScript/3주차 2023.05.24

9. outer

1. LE - outer - 주요 용어 - 1. 스코프 - a. 식별자에 대한 유효범위를 의미 - b. 대부분 언어에서 존재 - 2. 스코프 체인 - a. 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해 나가는 것 - 3. outer - 스코프 체인이 가능토록 하는 것(외부 환경의 참조정보) 외부 환경의 참조 정보라는 말에 집중 ◎스코프체인 1. outer는 현재 호출된 함수가 선언될 당시(중요!) 의 LE를 참조 2. 예를 들어, A함수 내부에 B함수 선언 → B함수 내부에 C함수 선언(Linked List) 한 경우 3. 결국 타고, 타고 올라가다 보면 전액 컨텍스트의 LE를 참조 하게 됨 4. 항상 outer는 오직 자신이 선언된 시점의 LE를 참조, 가장 가까운 요소부터 차례대로 접근 가능 ..

JavaScript/3주차 2023.05.24

8. record와 호이스팅 2 (함수의 호이스팅)

함수 정의 방식 ( 3) - 함수 선언문 //함수 선언문, 함수명 a가 곧 변수명 //function 정의부만 존재, 할당하는 명령이 없는 경우 function a() { /*....*/} a(); //실행 ok - 함수 표현 - 익명 함수 표현식 //함수 표현식, 정의한 function을 별도 변수에 할당하는 경우 // 1. 익명함수표현식 : 변수명 b가 곧 변수명 (일반적 case이다) var b = function () {/*...*/} b(); //실행 ok - 기명 함수 표현식(쓸일이 별로 없다) // 2. 기명 함수 표현식 : 변수명은 c, 함수명은 d // d()는 c() 안에서 재귀적으로 호출될 때만 사용 가능하므로 사용성에 대한 의문 var c = function d () {/*...*/..

JavaScript/3주차 2023.05.24

7. record와 호이스팅 1

실행 컨텍스트 객체의 실체 (=담기는 정보) - 1. variableEnvironment(VE) - 현재 컨텍스트 내의 식별자 정보(=record)를 갖고 있다. - 1. var a = 3 - 2. 위의 경우, var a를 의미 - 외부 환경 정보(=outer)를 갖고 있다. - 선언 시점 LexicalEnvironment 의 snapshot - 2. LexicalEnvironment(LE) - VariableEnvironment와 동일하지만, 변경사항을 실시간으로 반영. - 3. ThisBinding - this 식별자가 바라봐야할 객체 VE vs LE - 이 두가지는 완벽하게 동일, 그러나 스냅샷 유지여부가 다르다. - 1. VE : 스냅샷 유지 O - 2. LE : 스냅샷 유지 X , 실시간으로 변..

JavaScript/3주차 2023.05.24

6. 실행 컨텍스트 및 콜 스택 소개

자바스크립트에서의 실행 컨텍스트란 - 스코프, 변수, 객체, 호이스팅 - 실행할 코드에 제공할 환경 정보 들을 모아놓은 객체 - 1. 선언된 변수를 위로 끌어올리구요 = 호이스팅(hoisting) - 2. 외부 환경 정보를 구성하구요. - 3. this 값을 설정해요 =>이런 현상들 때문에 JS에서는 다른 언어랑은 다른 특징들이 나타난다. 1. 컨텍스트? - 스택을 이해해야함. 콜 스택 (call stack) - 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체 (△자신이 만든 코드) - 코드의 순서를 보장. - LIFO 컨텍스트 구성 - 구성 방법 - 1. 전역 공간 - 2. eval() 함수 - 3. 함수(우리가 흔히 실행컨텍스트를 구성하는 방법) 실행 컨텍스트 구성 예시 코드 //..

JavaScript/3주차 2023.05.24

5. null과 undefined

undefined - 변수의 값이 지정되지 않은 경우 - .이나[ ]로 접근하려 할때, 해당 데이터가 존재하지 않는 경우 - 함수 호출시 return문이 없거나 호출되지 않는 함수를 실행한 경우 null - 용도 : '없다'를 명시적으로 표현할 때 사용 - 주의 : typeof null - object가 나오는 javascript 버그이니 알고 넘어가자. 동등연산자 (==) 를 사용하면 type과 상관없이 일치하면 된다. undefined == null //true 일치연산자(===)를 사용하면 type까지 일치해야한다. undefined === null //false 그래서 일치연산자를 사용하는게 좋다.

JavaScript/3주차 2023.05.24

4. 불변 객체(얕은 복사 , 깊은 복사)

1. 얕은 복사 - 중첩된 객체에 대해서는 완벽한 복사를 할 수 없다. => 중첩된 객체의 경우 참조형 데이터가 저장된 프로퍼티를 복사할 때, 주소값만 복사 - 바로 아래 단계의 값만 복사 (아래 예제 코드) //이런 패턴은 어떨까요? // var copyObject = function (target) { // var result = {}; // //for ~ in 구문을 이용하여, 객체의 모든 프로퍼티에 // //접근할 수 있습니다. // //하드코딩을 하지 않아도 괜찮아요. // //이 copyObject로 복사를 한 다음, 복사를 완료한 // //객체의 프로퍼티를 변경하면 되겠죠? // for(var prop in target){ // result[prop] = target[prop]; // } /..

JavaScript/3주차 2023.05.24

3. 변수 선언과 데이터 할당(참조형 데이터) 변수 복사의 비교

1. 참조형 데이터 - 기본형 데이터의 변수 할당 과정과 차이점 - 객체의 변수(프로퍼티)영역의 별도 존재 여부 참조 카운트가 0인 메모리 주소의 처리 - 참조 카운트 : 객체를 참조하는 변수나 다른 객체의 수를 나타내는 값 - 0인 객체는 더이상 사용되지않으므로 가비지 컬렉터에 의해 메모리에서 제거 2. 변수 복사 비교 var a = 2; var obj1 = { c = 5, b = 'bbb', }; var b = a; var obj2 = obj1; b = 3; obj2.c = 20; => a !== b //기본형 변수 복사의 결과는 다른 값 obj1 === obj2 //참조형 변수 복사의 결과는 같은 값

JavaScript/3주차 2023.05.24

7. 2주차 끝 숙제

문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"] 이고 n이 1이면 각 단어의 인덱스 1의 문자 "u" ,"e" , "a" 로 strings를 정렬합니다. 제한 조건 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 처음에는 아래와 같이 작성했는데, 첫 테스트인 sun, bed, ..

JavaScript/2주차 2023.05.24

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

변수 영역과 데이터 영역을 별도로 저장을 하면 => var str; str = 'test'; - 값을 바로 대입하지 않음으로써 자유롭게 데이터를 변환할 수 있다. - 똑같은 데이터를 여러번 저장해야할 때 효율적으로 데이터를 관리 할 수 있다. 기본형 데이터와 참조형 데이터 - 1. 메모리를 기준으로 생각해보는 두가지 주요 개념 - 변수 vs 상수 - 변수 : 변수 영역 메모리를 변경O - 상수 : 변수 영역 메모리를 변경X - 불변하다 vs 불변하지 않다 - 불변하다 : 데이터 영역 메모리를 변경X - 불변하지 않다 : 데이터 영역 메모리를 변경O - 그림을 보면 알 수 있다. 사용되지 않는 데이터 - > js 가비지 컬렉터 가 관리

JavaScript/3주차 2023.05.24