this
상황에 따라 그때 그때 달라질 뭔가를 가르키기 위해서 사용하고 있다
자바스크립트에서의 this는 실행 컨텍스트가 생성될 때 함께 결정됩니다
실행 컨텍스트는 함수를 호출 할 때 생성되므로, this는 함수를 "호출" 할 때 결정된다고 할 수 있습니다.
그래서 어떤 방식(누가) 으로 호출하냐에 따라 값이 달라진다고 하네요.
전역 객체는 실행 컨텍스트에 컨트롤이 들어가기 이전에 생성이 되며 constructor가 없기 때문에 new 연산자를 이용하여 새롭게 생성할 수 없다.
전역 객체는 전역 스코프(Global Scope)를 갖게 된다.
전역 객체는 전역 변수(Global variable)를 프로퍼티로 가지게 된다. 다시 말해 전역 변수는 전역 객체의 프로퍼티이다.
전역 함수는 애플리케이션 전역에서 호출할 수 있는 함수로서 전역 객체의 메소드이다.
전역, 전역객체, 렉시컬 환경, 전역 객체의 렉시컬 환경, 메서드, 함수, 프로퍼티, 할당, 호출
-
전역 객체란 무엇을 의미하는 것 일까요?
전역 객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 Browser-side에서는 window, Server-side(Node.js)에서는 global 객체를 의미한다. (겉 껍질??)
-가장 바깥쪽 객체 -
다른 언어의 객체와 자바스크립트의 객체는 어떻게 다를까요?
객체지향언어는 크게 클래스 기반 객체지향언어, 프로토타입 기반 객체지향언어
클래스 기반 언어는 객체의 형식이 정의된 클래스라는 개념
반대로 프로토타입 기반 언어는 클래스라는 개념이 없다. 클래스 기반 언어의 상속 개념과 다르게, 객체 prototype의 위임 과정을 통해 상속의 과정이 구현된다.
클래스 기반 언어는 틀 자체를 상속시킨다. 상속시킨 틀을 이용해서 객체를 생성한다. 하지만, 프로토타입 기반 언어는 객체들을 prototype으로 연결시킨다. 클래스라는 개념이 없기 때문에, 객체들을 연결 할 수 밖에 없다.
C 동기언어 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식
JS 동기언어 ,비동기작업이 가능한 언어 위에서 아래 순서대로 읽지 않는다. 콜스택에 쌓이는 순서. 실행 중인 코드의 완료여부와 무관하게 즉시 다음 코드로 넘어가는 방식(ex.setTimeout, addEventListne0r, 서버통신(요청,실행대기,보류 등)
- 그렇다면 this는 어떻게 달라질까요? (상황별?)
다른 객체지향 언어에서는 클래스로 생성한 인스턴스를 말한다.
자바스크립트에서는 어디서나 사용될수 있다.
this는 함수를 호출할 때 결정
함수를 호출하기 전 (전역공간)에서 this는 전역 객체를 가리킴 (window, global)
-메서드로서 호출할 때 메서드 내부의 this
함수는 전역객체, 메소드는 자신을 담고 있는 호출의 주체인 객체.
-함수로서 호출할 때 함수 내부의 this : 호출의 주체를 명시할 수 없음
실행컨텍스트를 활성화할 당시 this(주체가 명확한)가 지정되지 않으면 독립적으로 호출된 this는 전역객체(window)
!메서드의 내부라고 해도, 함수로서 호출한다면 this는 전역 객체
this 바인딩은 주변환경은 중요하지 않고, 해당 함수를 호출하는 구문 앞에 점 또는 대괄호가 있는지가 관건.
(다른언어별)
class는 this를 정적으로, class만 바라본다.
자바스크립트에서 class를 선언했을떄 this를 동적, 객체가 바뀌면 경로가 바뀔수있다.
- 함수와 메서드의 차이에 대해서 조금 더 알게된게 있을까요? 지난번에 했던 답과는 어떻게 다를까요?
독립성, 함수는 그 자체로 독립적인 기능을 수행, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행(객체의 프로퍼티가 함수)
호출 구분 기준 . , []
- 책에서 self 변수로 선언을 해서 만들어서 구현하려고 했던 'this'는 어떤 것 때문에 그렇게 구현했을까요?
메서드 내부의 독립된 함수선언은 this를 전역변수로 받는데, self를 통해서 this를 호출하는 객체를 가리키게한다. - 다시 함수와 메서드의 차이를 말씀해주세요
- 프로퍼티에 할당, 메서드로서의 호출을 설명해주세요
자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해줍니다.
객체에 할당된 함수(메소드)를 호출하면 주어진 동작을 수행합니다. - "this 가 주는 인상"이라는 개념을 본인이 생각한대로 아는만큼 작성해주세요.
독립했을때는 큰 세상을 바라보고, 부모안에서 클 때는 조부모보다는 아닌 부모 먼저 바라본다.
제어권, 콜백함수, 고차함수, 콜백지옥
함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념입니다
함수의 매개변수를 통해 다른 함수의 내부로 인자로서 전달되는 함수를 콜백 함수라 하며, 함수의 외부에서 콜백함수를 전달받은 함수를 고차함수라고 한다."
위처럼 공통된 하나의 로직을 분리해서 공통화 하는 행위를 '추상화'
추상화를 하면, 단순하게 공통적인 부분을 줄이는 정도가 아니라, 개념들간의 계층이 생기는데 이것을 추상화 단계라고 합니다. 그리고 이러한 추상화 단계는 코드를 관리하고 설계하는데 좋은 기준이 됩니다.
<자바스크립트는 동기적이다. 호이스팅이 된 이후부터 코드가 작성한 순서에 맞춰서 하나하나 실행된다.
콜백이 콜백을 부르고 **
가독성이 떨어진다. 디버깅시 찾기 힘들다.
콜백함수를 인자로 넘겨 받은 '코드'는 콜백 함수를 필요에 따라 적절한 시점에 실행
콜백함수는 다른 코드)함수 또는 메서드_에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수. 콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적정한 시점에 실행
콜백함수 This
콜백함수로 어떤 객체의 메서드를 전달하더라도, 그 메서드는 메서드가 아닌 함수로 호출된다
this는 전역객체를 바라본다.
- 프로그래밍의 제어권이라는 것은 무엇을 말하는 걸까요?
콜백함수가 인자로 넘어가게 되는 순간, 호출주체인 사용자가 제어권을 갖게 되는것이아니라. 제어권은 호출한 코드로 제어권이 넘어간다. 코드는 자체적으로 내부 로직(ex.3초 뒤)에 의해 콜백함수를 적절한 시점에 실행한다. feat.스펀지밥 알람시계
-함수가 함수를 콜백하고 있다.(아 이게 안되는게 많은가보구나 정도로) - 콜백 지옥이란 뭘까요?
콜백함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 지옥인 경우
비동기적 작업을 수행할때 많이 발생한다. 가독성이 떨어지고, 디버깅시 찾기 힘들다.
값의 전달 순서가 아래에서 위쪽으로 - 추상화란 뭘까요?
공통된 하나의 로직을 분리해서 공통화 하는 행위를 '추상화'
단순하게 공통적인 부분을 줄이는 정도가 아니라, 개념들간의 계층이 생기는데 이것을 추상화 단계라고 합니다. 그리고 이러한 추상화 단계는 코드를 관리하고 설계하는데 좋은 기준이 됩니다.
-ex.하나 하나의 고양이가 아닌 전체 고양이의 형태, 특성을 구현해 놓은 것
클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다.
클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다. 의도치 않은 상태의 변경을 막기 위해은닉한고, 특정 함수에게만 상태 변경을 허락하여 상태를 안전하게 변경한다.
클로저는 메모리를 계속 가지고 있기 때문에 관리가 필요하다.
렉시컬 스코프 : JS엔진은 함수를 실행(호출)된곳 보다 정의했는지에 따라 상위 스코프를 결정한다.
outer의 실행컨텍스트가 사라져도 inner는 outer의 렉시컬환경을 참조한다.
11:40
개념중 와닿으 셨던것
동기 비동기
블로킹 논블로킹
클로저
메모리가 부족해서 안된다거나, 네트워크통신상 뭔가 안된다, DB에서 뭔가 안된다.
코딩테스트 접근법
호출한다 = 복사해온다
if for 구문 검사 코딩테스트
개념을 이해를 못하더라도 넘어가면서 하자, 실전에 들어가면 피부로 와 닿지는 않는다.
node.js. Crud프로젝트, 서버를 직접 만들어보는것
언어는 언어대로, 할만한것들을 찾아보자
실전프로젝트 -> 남들이 하는건 다하고, 남들이 안 할만한것 하나더
ex.(crud + 테스트코드를 많이 짯다)
자신만의 무기를 겸비
개발방법, 테스트코드방법, 기술적인방법 등
윗 기수들 중 잘한것들 깃허브를 참고, 아키텍쳐나
주특기 복.붙 나쁘지않음. 너무 나쁘게 생각하지말고, 고칠줄 모르고 무턱대고 복붙은 ㄴㄴ
복붙해도 코드분석하기, 프로젝트가 달라지면 복붙한 코드도 변형이 올수밖에없음 그래서 잘 알아야함
코드를 보고 어떻게 디버깅할지, 어떤 동작을하는지, 어디서 오류가 나는지를 매니저님은 물어보신다고함 왜 코드를 썼는지
회사 다니면서도 사이드프로젝트를 (모르는사람과) 하면서 공부를 하신다고 합니다.
20:00
큰 목표는 동기와 비동기까지 알게되는 것
클로저는 사실 지금 우리에게 많이 필요는 없지만(당장 사용하기 어려움, 함수형 프로그래밍에 사용) 어떤 아이디어인지 알정도면 괜찮. 좌절 ㄴㄴ
THIS와 callback은 나중에도 자주 도움이 될 것 같음.
실행콘텍스트가 이해가 안되면 좀 더 보는것도 -> 동기 비동기에 좀 더 도움이됨
----this
추상화 = 공통적인 특성을 하나로 뽑아서 정의해 놓는것
객체를 정의하고 실제로 만들어쓰는건 객체지향프로그램에서 많이 볼 수있다.
this는 앞으로 생성될 개체를 가리킨다.객체지향프로그램에서는
04.0에서 this 관련된 예시 문법
JS에서 어디서 호출을 하던지 this를 찍으면 뭐가 나오던지 나온다.
-this가 찍히는 환경(스코프나, 실행중인 상황, 다양한 규칙)
에 따라서 어떻게 나오는지를 알아보는게 이번장에 !!주제!!
----콜백함수
클로저나 다른 걸 어렵다고한다면 나중에 보라고하겠지만, 실행컨텍스트나 콜백함수는 어떻게해서든 이해를 하고 넘어가야한다. 함수형 프로그램과 관련된 큰 기둥같은 주제.
계단식으로 실력이 향상되기에 반복해서 보면 갑자기 이해될수있다.
배열은 콜백함수가 많이 쓰인다. forEach 3번째 예시
2번 이상 쓰거나 반복된다면 함수로 써줘야한다=> 추상화 계층. 재사용이 용이함, 가독성이 좋아짐, 나눠지면 여러명이 작업을 나눌때 쉽다.
프레임워크와 라이브러리를 구분하는것은 제어권이다.
----클로저
프레임워크를 자주 사용하게되는데 남이 짠 코드를 나중에 보게될텐데, 코드를 볼때 사전지식이 있다면 해석하기 쉬워짐. 수정할 떄 도움이 됨.
브라우저 : 문서 이벤트, 인터페이스
3.4 정도까지는 프론트하시는분들은 더 공부했으면 좋겠다. + API
Node는 Http, 프로토콜
공지사항
내일 배울 동기와 비동기는 바로 알아야하는 내용. 가장 중요한 개념. 숙제가 없는 이유
내용을 이해해야함, 1,2,3,4일차는 5일차를 이해하기 위해서 배운 것이라 생각.
막히는 것이 있다면 찾아서 보면 좋고 동기.비동기는 꼭 이해해야함.
1,2,3,4에서 많이 얘기가 나왔던 부분들을 훝어보는것도 괜찮다.
