민규의 개발블로그

호이스팅에 대해 설명하기 앞서서 아래 코드의 결과는 무엇 일가?? 결괏값이 undefined라 예상하는 사람도 있겠지만 정답은 2다. 이유는 아래에서 설명하겠다. 자바스크립트 엔진은 코드를 인터프리팅하기 전에 컴파일한다. 컴파일레이션 단계 중에는 모든 선언문을 찾아 적절한 스코프에 연결해주는 과정이 있는데(렉시컬 스코프의 핵심) 변수와 함수 선언문 모두 코드가 실제 실행되기 전에 먼저 처리된다고 보면 된다. var a; // 선언문 a = 2; // 대입문 첫째 구문은 선언문으로 컴파일레이션 단계에서 처리된다. 둘째 구문은 대입문으로 실행 단계까지 내버려둔다. 따라서 아까 위의 코드는 이렇게 실행된다. 이 과정을 비유적으로 말하면 변수와 함수 선언문은 선언된 위치에서 코드의 꼭대기로 '끌어올려' 진다. ..

스코프는 두 가지 방식으로 작동하는데 그 중 하나를 '렉시컬 스코프'라고 부른다. 렉시컬 스코프란 개발자가 코드를 작성할 때 함수를 어디에 선언하는지에 따라 정의되는 스코프를 말한다. 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 컴파일러는 첫 단계를 전통적으로 토크나이징 또는 렉싱이라 불리는 작업으로 시작하는데 렉싱 단계에서는 모든 확인자가 어디서 어떻게 선언됐는지 파악하여 실행 단계에서 어떻게 확인자를 검색할지 예상할 수 있도록 도와준다. 렉시컬 스코프를 속이는 두 가지 방식이 있는데 eval( )과 with다. eval( )은 하나 이상의 선언문을 포함하는 코드 문자열을 해석하여 렉시컬 스코프가 있다면 런타임에 이를 수정한다. with는 객체 참조를 하나의 ..

스코프 스코프는 어디서 어떻게 변수를 찾는가를 결정하는 규칙의 집합이다. 변수를 검색하는 이유는 변수에 값을 대입(LHS 참조)하거나 변수의 값을 얻어오기(RHS 참조) 위함이다. LHS 참조는 대입 연산 과정에서 일어난다. 스코프와 관련된 대입 연산은 '=' 연산자가 사용되거나 인자를 함수의 인자로 넘겨줄 때 일어난다. 자바스크립트는 일반적으로 '동적' 또는 '인터프리티' 언어로 분류하나 사실은 '컴파일러 언어'다. 전통적인 컴파일러 언어의 처리 과정에서는 프로그램을 이루는 소스 코드가 실행되기 전에 보통 3단계를 거치는데, 이를 '컴파일레이션'이라고 한다. 컴파일러 이론 토크나이징/렉싱 문자열을 나누어 '토큰'이라 불리는 의미 있는 조각으로 만드는 과정이다. ex) var a = 2; 는 var, a..

문과 표현식 자바스크립트에서의 문은 문장, 표현식, 어구, 연산자는 구두점/접속사에 해당된다. 자바스크립트에서 모든 표현식은 단일한, 특정한 결괏값으로 계산된다. 3 * 6은 표현식이다. 두 번째 줄 역시 표현식이며, 세 번째 줄 b도 표현식이다. a, b 표현식 모두 당시 변수들에 저장된 값으로 평가되므로 b 역시 18이 된다. 이 세줄은 각각 표현식이 포함된 문이다. var a = 3 * 6, var b = a 두 문은 각각 변수를 선언하므로 '선언문'이라 한다. a = 3 * 6나 b = a는 '할당 표현식'이라고 한다. 세 번째 줄은 b가 표현식의 전부지만 이것만으로도 완전한 문이다. 일반적으로 '표현식 문'이라고 일컫는다. 표현식의 부수 효과 표현식은 순수하고 독립적이지만 부수 효과를 일으킬 수..

암시적 변환 암시적 강제변환은 부수 효과가 명황하지 않게 숨겨진 형태로 일어나는 타입변환이다. 명시적 강제변환의 목적(코드를 명확하게, 이해할 수 있게 작성함)과는 반대라는 사실에 유해하다는 인식이 있지만 "You Don't know JS" 책에서는 다른 관점에서 설명한다. 이 책에서는 암시적 강제변환은 많은 장점이 있지만 몇 가지 단점 때문에 무조건 나쁘다라고 단정하진 말자는 주의다. 암시적 강제변환으로 지저분한 코드를 감추고 코딩에 도움이 될 수 있다. 문자열 숫자 처음 알게 된 배열 덧셈 간단히 말하면 + 연산의 한쪽 피연산자가 문자열이면(어떤 과정을 거쳐 문자열이 되면) +는 문자열 붙이기 연산을 한다. 피연산자중 하나가 객체라면, 먼저 이 값에 ToPrimitive 추상 연산을 수행하고, 다시 ..

값 변환 어떤 값을 다른 타입의 값으로 바꾸는 과정이 명시적이면 '타입 캐스팅', 암시적이면 강제변환이라고 한다. 자바스크립트에서는 명시적 강제변환과 암시적 강제변환이 있다. 이 둘의 차이는 '명시적 강제변환'은 코드만 봐도 의도적으로 타입변환을 일으킨다는 사실이 명백함, '암시적 강제변환'은 다른 작업 도중 불분명한 부수 효과로부터 발생하는 타입변환이다. 내가 작성한 코드를 협업할 때 같은 팀 개발자가 보고 어떻게 받아들일지 신경써야 하기 때문에 배운다 생각한다. 추상 연산 ToString 문자열이 아닌 값 -> 문자열 변환 작업은 ToString 추상 연산 로직이 담당한다. 내장 원시 값은 본연의 문자열화 방법이 정해져 있다. ex) null > "null", undefined> "undefined"..

자바스크립트에는 네이티브라는 내장 함수(객체)가 있다. 가장 많이 쓰는 것들은 아래와 같다. String( ) Number( ) Boolean( ) Array( ) Object( ) Function( ) RegExp( ) Date( ) Error( ) Symbol( ) -ES6에서 추가됨 이들은 생성자처럼 사용할 수 있지만 실제로 생성되는 결과물은 객체 래퍼다. 내부 [[Class]] typeof가 'object'인 값 등에는 [[Class]]라는 내부 프로퍼티가 추가로 붙는다. 이 프로퍼티는 직접 접근할 수 없고 Object.prototype.toString( )라는 메서드에 값을 넣어 호출함으로써 존재를 볼 수 있다. ex) Object.prototype.toString.call([1,2,3]) //..

"You Don't know JS" 를 참고 하여 작성한 글입니다. 자바스크립트의 값 타입과 작동방식 공부 후 정리 구멍 난 배열 아래의 코드에서 a [1]는 undefined가 되지만 명시적으로 a [1] = undefined라 세팅한 것과는 다르다. 배열 인덱스는 숫자인데, 배열 자체도 하나의 객체여서 키/프로퍼티 문자열을 추가할 수 있다.(배열의 length는 증가하지 않는다.) 그런데 키로 넣은 문자열 값이 표준 10진수 숫자로 타입이 바뀌면, 마치 문자열 키가 아닌 숫자 키를 사용한 것 과 같은 결과가 나오는 점을 주의해야 한다! 유사 배열 JS에서는 문법이 자유롭다 보니 배열이 아닌데 배열 인척 하는 것이 있고 이 것을 유사 배열 객체 혹은 유사 배열이라고 부른다. 유사 배열은 배열의 메소드를..