본문 바로가기

이론/Frontend74

JavaScript의 스코프 - 1 (Scope of JavaScript) 이번 시간에는 자바스크립트의 스코프(Scope) 개념에 대해 알아보겠습니다. 스코프는 변수가 어디에 저장이 되는지, 이후에 이 변수를 어떻게 찾을지를 정하는 규칙입니다. 변수를 제대로 사용하려면, 어떻게 스코프가 정의되는지 그 규칙을 아는 것이 매우 중요합니다. 먼저 자바스크립트가 변수를 어떻게 다루는지부터 살펴보겠습니다. 컴파일러 이론 자바스크립트는 얼핏 보기엔 인터프리터 언어처럼 보이지만, 사실은 컴파일러 언어에 속합니다. 대중적인 오해와 달리, Javascript는 인터프리트 형태 자바가 아니다. 간단히 말하면, Javascript는 프로토 타입 기반 객체 생성을 지원하는 동적 스크립트 언어이다. - MDN 문서 'JavaScript에 대하여' 中 자바스크립트 엔진 중 하나인 라이노(Rhino) 엔.. 2021. 4. 11.
Jest 기본 사용법 TDD 북스터디를 진행하며 실습 개념으로 라이브 코딩을 하게 되었는데, 이때 Jest를 사용하여 테스트 케이스를 작성하게 되었습니다. 문제는 Jest를 사용해 본 경험도 없었고, 테스트 케이스를 작성하는 행위도 거의 해본적이 없어 코딩을 하는 시간보다 헤매는 시간이 훨씬 많았습니다. 모르는 것은 차근차근 배워나가자는 마음으로 테스트 프레임워크인 Jest의 기본적인 사용법을 정리해보았습니다. 설치 npm 명령어를 통해 jest를 설치해줍니다. npm install --save-dev jest 또는 yarn을 사용하셔도 좋습니다. 공식문서에서는 yarn을 사용하기 때문에 yarn으로 설치하시는 것을 권장드리지만, 어떤걸 사용하셔도 상관없습니다. yarn add --dev jest 준비 먼저 테스트 할 대상의.. 2021. 4. 3.
JavaScript의 문법 (Grammar of JavaScript) 자바스크립트가 동작하게 코드를 작성하는 것은 어렵지 않습니다. 그러나 정확한 문법을 알고, 온갖 자바스크립트적 허용이 주는 혼란에 빠지지 않고 코드를 작성할 수 있는 것은 별개의 문제입니다. 이번 글에서는 이러한 불분명한 코드들을 걷어내기 위해 JS의 문법에 대해 알아봅니다. - 문과 표현식 흔히 어떤 JS 코드를 지칭할때 문(statement)과 표현식(expression)을 혼용해서 많이 사용합니다. 그러나 둘의 단어가 다르듯 서로 가리키는 대상도, 범위도 분명히 다른 용어입니다. 그렇다면 어떻게 다른지 예시를 통해 살펴보겠습니다. var test = 123 + 456; 위 코드에서 문과 표현식은 어떻게 찾을 수 있을까요? 자바스크립트에서 문은 완성된 하나의 코드 뭉치를 의미합니다. 영어 문법에서도 .. 2021. 3. 30.
JavaScript의 강제변환 - 3 (Coercive Type Conversion of JavaScript) 이번 포스팅은 강제변환의 마지막, 암시적 강제변환의 차례입니다. 말 그대로 변환 과정이 명확하게 보이지 않는 타입 변환들이 이 암시적 변환에 속합니다. 대부분의 코드에서 이러한 암시적인 타입 변환은 읽는 사람에게 혼란을 줍니다. 따라서 이해하기 쉬운 코드를 작성하기 위해서라면 암시적 강제변환만큼은 피해야 한다는 말도 적지 않습니다. 분명 틀린 말은 아니지만, 그렇다고 암시적 변환이 정말 나쁜 자바스크립트의 언어적 결함이라는 의견에는 100% 동의하기 어렵습니다. "버그가 아니라 기능입니다." 라는 말도 있듯이, 이번 시간에는 암시적 강제변환과 그를 어떻게 활용할 수 있는지 알아보겠습니다. 문자열 숫자 + 연산자는 숫자끼리의 덧셈이라는 목적과 문자열끼리의 접합이라는 두 가지 기능을 오버로드한 연산자입니다... 2021. 3. 9.
JavaScript의 강제변환 - 2 (Coercive Type Conversion of JavaScript) 이전 시간에는 강제변환을 이해하기에 앞서 값변환에 대해 정리하였습니다. 이번에는 명시적 강제변환에 대해 알아보겠습니다. 명시적 강제변환 명시적 강제변환은 상대적으로 덜 복잡합니다. 적혀있는 코드가 어떤 타입으로 변할지 눈에 바로 보이고, 그 결과를 혼동할 일이 거의 없습니다. 더군다나 자바스크립트의 명시적 강제변환은 다른 정적 타입 언어에서의 관례와 패턴을 충실하게 따르고 있기 때문에 별다른 논쟁거리도 없고 쉽게 받아들일 수 있습니다. 문자 그대로 이해하시면 되겠습니다. 문자열 숫자 먼저 문자열과 숫자의 변환입니다. 서로 간의 타입 변환을 위해 String()과 Number()을 사용합니다. 여기에 new 키워드가 붙으면 새로운 객체 래퍼를 생성하는 구문이겠지만, 키워드 없이 사용되면 타입 변환에 이용된.. 2021. 3. 5.
JavaScript의 강제변환 - 1 (Coercive Type Conversion of JavaScript) 자바스크립트에서는 프로그래머가 의도했건, 그렇지 않건 강제적 타입변환이 일어납니다. 누군가에겐 유용한 기능일수도 있고 누군가에겐 언어 자체가 잘못 설계된 부작용처럼 느껴질수도 있지만 어떤 상황에서 강제변환이 일어나는지 정확히 알아보고 이해해서 이용해 보는 것이 목표로 잡고 공부해봅니다. 값 변환 어떤 값을 다른 타입의 값으로 바꾸는 과정에서 명시적으로 일어나면 타입 캐스팅이라고 부르고, 암시적으로 일어나면 강제변환이라고 부릅니다. 그러나 많은 사람들이 이러한 용어를 뭉뚱그려 강제변환이라고 사용하는 경향이 있기 때문에, 여기선 암시적 강제변환과 명시적 강제변환이라고 부르겠습니다. 암시적과 명시적을 구분하는 방법은 간단합니다. 타입변환만을 의도한 코드를 작성했다면 명시적 강제변환이고, 의도와 상관없이 타입변.. 2021. 3. 2.