오늘 공부한 내용 요약
( 모던 JavaScript 튜토리얼 복습 )
객체 기본
헷갈렸거나 한번 더 상기시킬 내용
-
객체 프로퍼티에 할당된 함수를 메서드라고 함.
-
메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있는데 매서드 내부에서 this 키워드를 이용하면 객체에 접근가능
-
자바스크립트에선 모든 함수에 this를 사용할 수 있음
-
this값은 런타임때 결정됨
-
함수를 선언할 때 this를 사용할 수 있지만 함수가 호출될 때까지 this값이 할당되지 않음
-
화살표 함수는 자신만의 this를 가지지 않고, 화살표 함수 안에서 this를 사용하면 외부에서 this 값을 가져온다
-
생성자 함수는 일반함수지만 구분짓기 위해 함수이름 첫글자는 대문자임
-
생성자 함수는 반드시 new 연산자와 함께 호출해야 하는데, new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고 마지막엔 this가 반환된다
-
모든 함수는 생성자 함수가 될 수 있음 / 유사한 객체를 여러개 만들때 사용
-
옵셔널 체이닝 문법 ?.은 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행
-
?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에 선택적으로 사용
꼭 있어야 하는 값인데 없는 경우 에러를 쉽게 찾을수 없을 수 있음 -
심볼은 유일한 식별자를 만들고 싶을때 사용
let id1 = Symbol("id");
let id2 = Symbol("id");
alert(id1 == id2); // false- 심볼형 값은 다른 자료형으로 자동적 형변환이 되지 않는다
반드시 반환해야 하는 경우라면 toString()메서드 사용
( Core JavaScript 기본서 )
< 실행 컨텍스트 >
-
스코프란 식별자에 대한 유효범위
스코프를 안에서부터 바깥으로 차례로 검색하는 것이 스코프 체인 -
선언 시점의 LexicalEnvironment를 찾아올라가면 마지막엔 전역컨텍스트의 LexicalEnvironment가 있음
-
각 outerEnvironmentReference는 자신이 선언된 시점의 LexicalEnvironment만 참조하고 있으므로 가장 가까운 요소부터 접근가능
-
여러 스코프에서 동일한 식별자를 선언한 경우, 스코프체인 상에서 가장 먼저 발견된 식별자에만 접근가능하게 됨
-
특정 함수내부에서 어떤 변수를 선언시 전역 공간에서 선언한 동일한 이름의 변수에는 접근할 수 없음. 이를 변수 은닉화라고 함.
-
실행컨텍스트를 생성시
variableEnvironment와 LexicalEnvironment가 동일한 내용으로 구성.
그리고 이 2개는 매개변수명, 변수의 식별자, 선언한 함수의 함수명 등을 수집하는 environmentRecord와 outerEnvironmentReference로 구성되어있음. -
this에는 실행 컨텍스트를 활성화하는 당시에 지정된 this가 저장됨.
함수호출 방법에 따라 값이 달라지는데, 지정되지 않은경우 전역객체가 저장 -
코드 상에서 어떤 변수에 접근하려하면
1. 현재 컨텍스트의 LexicalEnvironment를 탐색해 발견되면 그값 반환 2. 발견 못하면 outerEnvironmentReference에 담긴 LexicalEnvironment를 탐색. 3. 전역컨텍스트의 LexicalEnvironment에서도 찾지 못하면 undefined
과제
- 에러가 발생하지 않게 수정하라
function makeUser() {
return {
name: "John",
ref: this
};
};
let user = makeUser();
alert( user.ref.name );
->
function makeUser() {
return {
name: "John",
ret() {
return this;
}
};
}
let user = makeUser();
alert(user.ref().name); // Johnthis값을 사용할때 객체정의가 되지않아 에러 발생.
2.calculator라는 객체를 만들고 세 메서드를 구현해보기
read()는 프롬프트 창을 띄우고 더할 값 두 개를 입력받습니다. 입력받은 값은 객체의 프로퍼티에 저장합니다.
sum()은 저장된 두 값의 합을 반환합니다.
mul()은 저장된 두 값의 곱을 반환합니다.let calculator = {
sum() {
return this.a + this.b;
}
mul() {
return this.a * this.b;
}
read() {
this.a = +prompt("첫번째 값","");
this.b = +prompt("두번째 값","");
}
};
calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );read안에 prompt값을 숫자형으로 하기 위해 +붙임.
공부 출처
자바스크립트.info
코어 자바스크립트 -정재남- 지음
위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다
