TIL 33 (2020.09.02) JS Scope, Object, Class

백은진·2020년 9월 4일
0

TIL (Today I Learned)

목록 보기
33/106
post-custom-banner

Scope

Blocks and Scope

블록은 중괄호 { }로 둘러싼 부분이다.

아래와 같은 코드 예시가 있을 때,
city 변수는 블록 바깥에서 선언되었고
logCitySkyline 변수는 블록과 같은 라인에서 선언되었다.

const city = 'New York City'

const logCitySkyline = () => {
  let skyscraper = 'Empire State Building';
  return 'The stars over the ' + skyscraper + ' in ' + city;
}

console.log(logCitySkyline())

Global Scope

위의 예에서 "city 변수"는 중괄호 바깥에서 선언되었기 때문에, 글로벌 스코프에 정의된다.

Block Scope

중괄호 {} 내에서 선언된 변수는 블록 스코프에 정의된다.
이런 변수는 로컬 변수라고 불리기도 한다.

Scope Pollution

글로벌 변수를 정의할 때, 이 변수는 global namespace를 갖게 된다.
(이 global namespace 덕분에 변수가 프로그램 어디에서나 재사용될 수 있는 것이다.)

글로벌 변수 (블록 바깥에서 정의된 변수)가 여러 개 선언되면,
global namespace도 다수 생성되면서 잠재적인 오류 위험성이 증가하게 된다.

이런 일을 방지하려면, 글로벌 스코프보다 지역 스코프를 더 사용하는 것이 좋다.

Advanced Object

The this Keyword

한 객체 내에서 각자 다른 블록 내에 위치한다면, 그 값을 불러올 때 this라는 키워드가 필요하다.
(this는 global object(전역 객체)이기 때문에 다른 블록에 있는 값을 불러올 수 있다.)

아래의 예에서 console.log(this.dietType)가 아닌 console.log(dietType)라고 했다면,
ReferenceError가 발생한다.

const goat = {
  dietType: 'herbivore',
  makeSound() {
    console.log('baaa');
  },
  diet() {
    console.log(this.dietType);
  }
};

goat.diet(); 
// Output: herbivore

Arrow Functions and this

그러나 화살표 함수의 경우 this 키워드가 작동하지 않는다.

따라서 this를 사용할 때는 화살표 함수가 아닌 일반 함수식을 사용하자.

Getter

객체에서 내부 프로퍼티를 get하거나 return하는 메소드를 Getters라고 부른다.

Getter 메소드의 장점은 다음과 같다.

  • Getters can perform an action on the data when getting a property.
  • Getters can return different values using conditionals.
  • In a getter, we can access the properties of the calling object using this.
  • The functionality of our code is easier for other developers to understand.

Setter

객체에서 이미 존재하는 프로퍼티의 값을 재지정하는 메소드를 Setters라고 부른다.
set 키워드를 사용한다.

Class

해당 과에서는 다음과 같은 내용을 배웠다.

  • Classes are templates for objects.
  • Javascript calls a constructor method when we create a new instance of a class.
  • Inheritance is when we create a parent class with properties and methods that we can extend to child classes.
  • We use the extends keyword to create a subclass.
  • The super keyword calls the constructor() of a parent class.
  • Static methods are called on the class, but not on instances of the class.
profile
💡 Software Engineer - F.E
post-custom-banner

0개의 댓글