JavaScript/3주차 14

14. 3주차 끝 숙제

나이든 유저 아래 코드에서 getAged 부분을 작성하면된다. var user = { name: "john", age: 20, } var getAged = function (user, passedTime) { // 여기를 작성해 주세요! } var agedUser = getAged(user, 6); var agedUserMustBeDifferentFromUser = function (user1, user2) { if (!user2) { console.log("Failed! user2 doesn't exist!"); } else if (user1 !== user2) { console.log("Passed! If you become older, you will be different from you in t..

JavaScript/3주차 2023.05.25

13. call apply bind 응용

사용하기전 코드를 살펴보자. function Student(name, gender, school) { this.name = name; this.gender = gender; this.school = school; } function Employee(name, gender, company) { this.name = name; this.gender = gender; this.company = company; } var kd = new Student('길동', 'male', '서울대'); var kd = new Employee('길순', 'female', '삼성'); 여길 보면 똑같이 이름과 성별이 겹친다. 그래서 이 같은것을 따로 빼려고한다. 그때 call을 사용해서 사람이라는 공동 함수로 빼준다. func..

JavaScript/3주차 2023.05.24

12. 명시적 this 바인딩 및 유사배열객체

상황별 규칙을 깨고 명시적으로 지정하는 방법 1.call // 명시적 this binding // 상황별 규칙을 깨고 명시적으로 지정하는 방법 // call, apply, bind // 1. call var func = function (a, b, c) { console.log(this, a, b, c); }; //no binding func(1, 2, 3); //global을 바로보고 있다. //명시적 binding //전역객체를 바라보고 있는 시점에서 명시적 바인딩을 한것 func.call({ x: 1 }, 1, 2, 3); // this , 1, 2, 3 //호출주체가 있는 경우 var obj = { a: 1, method: function (x, y) { console.log(this.a, x, ..

JavaScript/3주차 2023.05.24

11. this 우회방법, 콜백 함수 this, 생성자 함수 this

1. 우회하는 방법 - 1. 변수를 활용하는 방법 내부 스코프에 이미 존재하는 this를 별도의 변수에 할당하는 방법. 예시코드 var obj1 = { outer: function () { console.log(this); //(1) outer //AS-IS (기존) var innerFunc1 = function() { console.log(this); // (2) 전역객체 }; innerFunc1(); //TO-BE (이후) //흐름을 유지하는 this를 찍는것같은 //효과가 있다. var self = this; var innerFunc2 = function () { console.log(self); // (3) outer }; innerFunc2(); } }; //메서드 호출 부분 obj1.outer..

JavaScript/3주차 2023.05.24

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