JS
-
묵혔다 꺼낸 JS - thisJS 2021. 10. 21. 21:56
this란? this는 자바스크립트 실행 컨텍스트가 생성되기 위한 조건 중 하나이며, 일반 객체지향 언어와는 다르게, 자바스크립트에서 this는 런타임때 할당되며 할당 방법에 따라서 this에 들어가는 객체는 달라진다. 그렇다면 this를 할당하는 케이스들을 알아보자. 1. 일반함수 일반함수를 실행시 함수의 this는 window/global 객체가 할당된다. 2. 객체의 프로퍼티로 함수를 할당 후(메서드를 생성 후) 실행하면 this는 프로퍼티를 감싸는 객체가 할당된다. 2 - 1 하지만 메서드 내부에 다시 함수를 작성하고, this를 사용하면 해당 함수의 this에는 window/global이 할당된다. 이를 해결하기 위한 방법으로는 fn함수 내부에 변수를 하나 선언하고 this를 할당 시키거나, E..
-
묵혔다 꺼낸 JS - 클로저JS 2021. 10. 15. 22:36
클로저란? 클로저란 중첩된 스코프영역에 있는 함수를 외부에서 반환받고, 반환받은 중첩된 함수를 통해서 중첩함수의 상위 스코프에 접근할 수 있는 특성을 이야기한다. 말이 조금 복잡한거같은데 코드 조금만보고 금방 이해해보도록하자. 이상한 부분이 느껴진다면 스코프에 대해서 공부했을 때 외부 스코프에서는 내부 스코프에 대해 접근 할 수 없는데 위 코드의 콘솔 결과를 보면 아무 이상없이 clo1 함수의 내부 스코프에 접근하고있다. 이것이 바로 클로저의 특징이다. 더 자세히 설명해보자면 clo1의 리턴하는 것이 값(원시 값)이 아닌 fn1 함수(Function객체)를 리턴하고있다. clo2에는 이 fn1의 객체가 참조되고, clo2를 실행 할 때마다 진짜 함수의 실행은 원본인 clo1함수의 내부인 fn1함수 스코프..
-
묵혔다가 꺼낸 JS - 스코프의 효용성, 블록 스코프, 호이스팅JS 2021. 10. 12. 21:36
스코프의 효용성 먼저 이전 시간까지 스코프의 특성과 역할에 대해서 학습을 하였는데 이번엔 효용성에 대해서 알아보겠다. (스코프가 없다는 가정하에) 1만줄 가량되는 길고 장황한 코드를 모두 읽을 시간은 없고 일은해야한다는 가정하에 내가 특정 함수를 하나 생성하였다고 치자. 그런데 이전에 선언된 줄 모르고 내가 이미 선언된 함수의 이름을 한번 더 선언 하였고, 로직 또한 이미 다 구현한 상태인데 실행해보니 기존의 동작과는 다른 완전히 이상한 프로그램이 되어버린 것이었다. 위의 케이스가 스코프가 가장 필요한 이유 중 하나일 것이다. A라는 함수를 기존에 만들어 놓았지만, 다시 밑에서 A라는 함수를 이전과는 다른 로직으로 한번 더 선언하여 기존의 A함수와 충돌이 생겨버린 것이다. 이럴 때일수록 스코프가 필요할 ..
-
묵혔다가 꺼낸 JS - 렉시컬 스코프JS 2021. 10. 8. 01:38
렉시컬 스코프란? 렉시컬 스코프는 개발자가 함수와 변수를 선언한 후 컴파일 시 컴파일러가 토크나이징(렉싱) 할 때 선언한 함수의 스코프의 영역이 어디부터 어디까지인지, 변수가 어느 스코프에 들어있는지를 정해진 방식으로 만들어진 스코프의 영역이라고 말할 수 있겠다. *렉시컬 스코프 방식은 자바스크립트 뿐만이 아닌 C, JAVA에서도 사용하는 방식이다. 그럼 설명을 코드로 한번 보면서 렉시컬 스코프가 어떤 방식을 가지고 있는지에 대해서 알아보겠다. fn1을 실행 할 때 우리가 예상되는 결과는 40이 나올 것이다. 너무 당연하게 예상이 되지만 우리가 스코프와 자바스크립트 엔진이 되었다는 시선으로 바라보며 생각해보자. 자바스크립트 엔진은 실행되는 제일 안쪽 fn1의 return 하는 a, b가 참조하는 곳이 어..
-
묵혔다 꺼낸 JS - 컴파일러와 스코프JS 2021. 10. 4. 23:08
컴파일러의 기본 동작 (컴파일레이션) 자바스크립트 코드의 동작을 이해하기 위해서는 먼저 컴파일러의 동작 부터 알아야 할 것이다. 컴파일러의 동작은 3가지로 나뉜다. 토크나이징 파싱 코드 생성 1. 토크나이징 우리가 밑에 있는 것 처럼 코드를 작성한다고 예를 들자 var a = 0; 이라고 한줄의 코드를 작성하면 컴파일러는 먼저 이 줄의 코드를 이렇게 분할한다. (토큰화 시킨다.) 'var', 'a', '=', '0', ';' 이러한 키워드 분할이 가능한 이유는 컴파일러의 Lexical Analyzer(어휘 분석기) 덕분에 가능하다. Lexical Analyzer는 우리가 작성한 코드 중 공백, 연산자, 세미콜론, 주석 구문과같은 특수기호들을 만나면 끊어 읽어 하나의 토큰을 만든다. 그리하여 위와같은 결과..
-
묵혔다 꺼낸 JS - 암시적 변환 (==연산자의 비교연산)JS 2021. 9. 29. 16:27
이때까지 나는 자바스크립트 코딩을 하면서 ==연산자를 사용하지 않고 쭉 ===연산자을 사용하였다. 왜 나는 ==을 사용하지 않고, ===을 사용했을까?, 둘은 무엇이 다른가?, ==의 동작되는 원리가 어떠하길레 ===과 다른 결과를 나타낼까? 이에 대한 해답을 찾아내기 위해 오늘은 ==연산자와 ===연산자의 차이점을 알아보고, 글을 적는다. 그럼 지금부터 그 이유를 알아보기 위해 먼저 ==과 ===의 비교 결과의 차이를 알아보자. 결과를 통해서 알 수 있듯, ==연산자는 우리가 생각하는 예상과는 다른 결과를 내어주었지만, ===연산자는 일반적으로 우리가 예상이 가능한 결과를 도출 하였고, 많은 사람들이 원하는 결과가 나온 것을 알 수 있다. 또한 ==은 위의 코드처럼 결과가 비교의 엄격함이 느슨한 뉘앙스..
-
묵혔다 꺼낸 JS - 암시적 변환 (+, -, &&, ||)JS 2021. 9. 28. 22:30
이전에는 Falsey와 명시적 변환에 대해서 알아보았다. 이번 포스팅에는 암시적 변환에 대해서 알아보려 한다. 순서는 이러하다. +, - 연산자의 암시적 변환 불리언 변환, &&과 ||의 비밀 + , - 연산자의 암시적 변환 이전 포스팅에서 +와 -의 명시적 변환에 대해서 포스팅한 글이 있다. +, -연산자의 명시적 변환에 대해 간단히 읽어 보고 오길 추천한다. 명시적인 변환에서는 String 타입 → Number 타입을 + 또는 - 연산자만으로 해결할 수 있었다. 근데 이 +와 -연산자로 어떤 암시적인 변환이 가능할까? 생각보다 가까운 곳에 있을 것이라 생각이 된다. 이러한 코드를 어디선가 한 번쯤은 본 적이 있을 것이다. 코드를 보고 "아, 이런 게 있었지"라고 생각이 나는 사람도 있을 것이고, "잘..
-
묵혔다 꺼낸 JS - Falsey, 명시적 강제 변환JS 2021. 9. 21. 00:40
Falsey Fasley는 boolean타입의 false로 변환이 가능한 false 같은 값을 의미한다. 예를 들면 숫자의 0이나 null, undefined와 같은 값들을 의미한다. 그렇다면 자바스크립트의 false로 변환 가능한 값(Falsey 값)들을 살펴보자. 위의 값들이 모두 false의 값으로 치환이 가능한 값들이다. 나머지의 값들은 모두 true이다. 한 가지 눈에 뜨이는 점은 빈 객체나 빈 배열도 true를 리턴한다. 그리고 new Number()로 빈 값을 넣으면 g변수에 0이 들어가게 될 것 같은데. 왜 g변수에 true가 나올까. falsey의 값으로는 분명 숫자가 0이지만 현재 변수 g에 들어간 것은 Number객체이므로 falsey가 아니라고 할 수 있겠다. 하지만 g의 값을 언박..