TWIL(200805-200807) - Scope, Closure, 테스트 주도 개발, 객체 지향 JavaScript

Rameau·2020년 8월 9일
0

코드스테이츠 pre

목록 보기
5/6

매일 TIL을 쓰겠다는 다짐을 계속 지키지 못하고 있다.
다음 주부터는 아예 하루 일과 중 블로깅하는 시간 1시간을 고정해 놓아야 할 것 같다.

수요일부터 금요일까지 배운 내용을 복습 겸 간략하게 정리해보기로 했다.

This Week I Learned

1. Scope

스코프는 '변수 접근 규칙에 따른 유효 범위' 를 말한다. 변수는 정해진 환경 안에서 사용이 가능한데, 그래서 각각의 변수는 각각의 유효한 활동 범위를 지니고 있다. JavaScript는 기본적으로 함수가 선언되는 동시에 자신만의 스코프를 가진다.

전역 스코프(Global scope) :
변수가 함수 바깥이나 중괄호 ({}) 바깥에 선언되었다면, 전역 스코프에 정의된다고 한다. 전역 변수를 선언하면 코드 모든 곳에서 변수를 사용할 수 있지만, 두 개 이상의 변수 이름이 충돌하는 경우가 생길 수 있기 때문에 항상 지역변수로서 변수를 선언하는 것이 좋다.
지역 스코프(Local Scope) :
코드의 특정 부분에서만 사용할 수 있는 변수를 지역 스코프에 선언했다고 하며, 이들을 '지역 변수'라고 부른다. 지역 변수는 함수 내에서 전역 변수보다 높은 우선순위를 가진다.

  • 안쪽 스코프에서 바깥쪽 스코프에 접근하는 것은 가능하나, 그 반대는 불가능하다.
  • 지역 스코프에는 함수 스코프와 블록 스코프라는 두 가지의 지역 변수가 존재한다.

함수 스코프(Function Scope) :
말 그대로 함수 내에서 변수를 선언하면, 그 함수 바깥에선 해당 변수에 접근할 수 없다는 것을 의미한다.
블록 스코프(Block Scope) :
블록은 중괄호{}를 말한다. 중괄호 내에서 변수를 선언하면, 이 변수들은 중괄호 내에서만 접근이 가능하다.

  • JavaScript는 기본적으로 함수 단위의 스코프(var 키워드)를 가지지만, let이나 const(재정의, 재선언 불가능)로 선언해줘서 블록 단위로 스코프를 구분해주는게 더 바람직하다.

2. Closure

이해하기 어려운 개념이었다. 하지만 스코프를 제대로 이해했다면 이미 클로저의 핵심 원리는 파악했다고 보면 된다.

클로저(Closure) :
외부 함수의 변수에 접근할 수 있는 내부 함수
함수 내부에 함수를 작성할 때마다 클로저는 생성된다.
안쪽 스코프에서 바깥쪽 스코프에 접근하는 것이 가능하다는 것이 스코프의 원리였고, 이와 동일한 개념을 함수 단위로 설명한 것을 클로저라고 보면 된다.

  • 주의할 점은 외부 함수의 변수에 접근할 수 '있는' 내부 함수라는 것이지, 반드시 접근한 것이 확인이 되어야만 클로저가 되는 것은 아니다. 접근할 수 있는 가능성이 있다면 클로저 함수라고 봐야 한다.(어렵다..)

3. 테스트 주도 개발(TDD)

테스트빌더 과제를 수행하면서 익혔던 개념이다.

TDD(Test-driven Development) : 코드를 작성하기 전에 테스트를 먼저 작성하는 방법론
장점 : 테스트를 먼저 작성하기 때문에 이미 어느 정도 바람직한 결과에 대한 고민이 끝난 상태에서 개발을 진행하게 된다. 따라서 버그가 적어지고, 기획에 도움이 된다.
단점 : 속도가 느려진다(...) 하지만 완전한 TDD를 실천할 순 없더라도 자동화된 테스트를 작성하는 것은 기본 중의 기본이다!

유닛 테스트 : 프로그램의 작은 유닛(함수)들이 잘 돌아가는지 확인하는 테스트

  • Assertion(주장) : 코드가 이런 방식으로 작동해야 한다고 이야기하는 주장 코드
  • Matcher : 주장 코드의 실행 결과

4. 객체 지향 JavaScript

정말정말 이해하기 어려웠던 '클래스'라는 개념의 등장에 멘붕이 왔고, 아직도 제대로 이해했는지 확신이 들지는 않는 파트다. 실습이 많이 필요할 것 같다.

객체 지향 프로그래밍 : 하나의 모델이 되는 '청사진'을 만들고 그걸 바탕으로 한 객체(object)를 만드는 패턴의 프로그래밍

클래스(Class) : '청사진'이라고 생각하면 된다.
클래스는 함수(function)로 정의할 수도 있고, 키워드(class)로 정의할 수도 있다. 클래스는 첫글자를 대문자로 쓰자!
인스턴스(Instance) : 청사진으로 바탕으로 한 '객체'라고 생각하면 된다. 'new' 키워드를 통해 만들 수 있다.

  • 클래스엔 '속성''메소드'를 정의를 하고, 인스턴스에서 활용한다.

  • 이 파트는 직접 활용할 수 있을 정도로 완전한 이해를 아직 못한 관계로 MDN 링크를 남기는 것으로 갈무리하고 다시 공부한 후 수정할 예정이다.
    객체 지향 자바스크립트 개요

Note

  • 어렵고 새로운 개념들이 많았지만, 그 때문인지 여러 개념을 동시에 적용해야 했던 지난주보단 직관적인 문제들이 많아서, 오히려 접근하는 속도는 더 빨라졌던 것 같다. 코스 초반부(지금도 초반부지만..)에 코드스테이츠에서 학습 성향 검사를 했는데, 그 때 추상적인 개념의 이해보다 실용적 접근이 좋다고 선택했던 것 같은데 아닌 것 같다(...) 차라리 어려운 개념을 머리 빠지게 공부해서 이해한 후에 그걸 바로 적용하는 것이 더 쉬웠다.
  • 클래스와 인스턴스의 개념은 아무래도 직접 적용해봐야 이해가 더 될 것 같아서 예제를 조금 더 찾아보고 공부해볼 것이다.
profile
개발하고 싶다!

0개의 댓글