개발 언어/Javascript (20) 썸네일형 리스트형 자바스크립트에서 클래스의 진실 이 글에서는 ES6 이후로 사용할 수 있는 class 문법이 아닌, 자바스크립트에서 클래스가 가지는 체계와 개념을 중점적으로 설명합니다. 클래스는 특정 자료 구조를 분류하는 용도로 사용됩니다. 예를 들면, Vehicle 클래스와 Car 클래스는 서로 상속관계로서, Vehicle은 엔진 등의 추진 기관과 사람 등을 운송하는 기능을 함께 정의합니다. Car는 Vehicle의 기반 정의를 상속 받아 정의하여 세분화한 것입니다. 다형성은 부모 클래스에 뭉뚱그려 정의된 작동을 자식 클래스에서 좀 더 구체하하여 오버라이드 (재정의)하는 것을 의미합니다. 그렇다면 자바스크립트 (이하 JS)에는 클래스가 존재할까요? 단도직입으로 말해서 아닙니다. 많은 개발자들이 적어도 외관상으로는 클래스처럼 생긴 구문을 제공하여 클래.. 자바스크립트에서 객체란 객체는 선언적 형식과 생성적 형식, 두 가지로 정의합니다. var obj = { key: value, } // 리터럴 형식 var obj2 = new Object(); // 생성자 형식 obj2.key = value; 두 형식 모두 결과적으로 생성되는 객체는 같습니다. 유일한 차이점은 리터럴 형식은 한 번의 선언으로 다수의 key - value 쌍을 프로퍼티로 추가할 수 있지만, 생성자 형식은 한 번에 한 프로퍼티만 추가할 수 있다는 것입니다. 이전에 자바스크립트 (이하 JS)의 타입의 종류를 말씀드린 적이 있습니다. null undefined boolean number string object symbol 여기서 object와 symbol을 뺀 나머지 5가지 타입은 단순 원시 타입입니다. 여기서 명확히.. 자바스크립트에서 this란 this를 둘러싼 오해 this는 모든 함수 스코프 내에 자동으로 설정되는 특수한 식별자입니다. this는 어떤 식으로도 함수의 렉시컬 스코프를 참조하지 않습니다. function foo() { var a = 2; this.bar(); } function bar() { console.log(this.a); } foo(); // error foo()와 bar()의 렉시컬 스코프 사이에 어떤 연결 통로를 만들어서 bar가 foo의 내부 스코프에 있는 변수 a에 접근하게 하고 싶지만 그건 불가능합니다. this는 작성 시점이 아닌 런타임 시점에 바인딩되며 함수 호출 호출 당시 상황에 따라 콘텍스트가 결정됩니다. 렉시컬 스코프가 함수 선언문 위치가 중요하다면 this 바인딩은 오로지 어떻게 함수를 호출했느냐에 .. 자바스크립트에서 클로저란 클로저는 렉시컬 스코프에 의존해 코드를 작성한 결과로 그냥 발생합니다. 여기서, 렉시컬 스코프란 개발자가 코드를 작성할 때 함수를 어디에 선언하는지에 따라 정의되는 스코프입니다. 모든 코드에서 클로저는 생성되고 사용됩니다. function foo() { var a = 2; function bar() { console.log(a); // 2 } bar(); } foo(); 함수 bar()는 렉시컬 스코프 검색 규칙을 통해 바깥 스코프의 변수 a에 접근할 수 있습니다. (이 경우에는 RHS 참조 검색) 여기서 클로저의 마법이 발생하는 것입니다. 선언된 위치 덕에 bar()는 foo() 스코프에 대한 렉시컬 스코프 클로저를 가지고 foo()는 bar()가 나중에 참조할 수 있도록 스코프를 살려둡니다. 즉, b.. 자바스크립트에서 호이스팅이란 a = 2; var a; console.log(a); 다음의 결과값은 undefined가 아니라 놀랍게도 2입니다. console.log(a); var a = 2; 이 코드의 결과값은 undefined입니다. 이런 결과가 나오는 이유는 호이스팅 때문입니다. 호이스팅은 선언문을 끌어올리는 동작입니다. var a;는 선언문이고 a = 2는 대입문입니다. 따라서, 맨 위의 코드는 var a;가 호이스팅에 의해서 가장 위로 끌어올려지므로 2가 출력됩니다. 하지만, var a = 2;는 다릅니다. var a = 2;를 자바스크립트 (이하 JS) 엔진은 var a;와 a = 2;로 나누어서 처리합니다. 여기서, 선언문인 var a;만 맨 위로 끌어올려지므로 var a; console.log(a); a = 2; JS.. 자바스크립트에서 함수, 블록 스코프란 직전 게시물에서 언급한 것처럼 스코프는 컨테이너 또는 바구니 역할을 하는 일종의 '버블'이며 변수나 함수가 그 안에서 선언됩니다. 이 컨테이너는 경계가 분명하게 중첩되고, 그 경계는 개발자가 코드를 작성할 때 결정됩니다. 함수 기반 스코프 스코프 안에 있는 모든 변수와 함수는 그 스코프에 속합니다. function foo(a) { let b = 2; function bar() { ... } let c = 3; } foo()의 스코프 버블은 변수 a, b, c와 함수 bar를 포함합니다. 즉, 스코프 안에 있는 모든 변수와 함수는 그 스코프 버블에 속합니다. 함수 스코프는 모든 변수가 함수에 속하고 함수 전체에 걸쳐 사용되며 재사용됩니다. 일반 스코프에 숨기 스코프를 이용해 변수와 함수를 숨기는 방식을 사.. 자바스크립트에서 스코프란 스코프란 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데는 잘 정의된 규칙이 필요한데, 바로 이런 규칙을 일컫습니다. 컴파일러 이론 자바스크립트 (이하 JS)는 일반적으로 동적 언어 또는 인터프리터 언어로 분류하나 사실은 컴파일러 언어입니다. JS 엔진은 전통적인 컴파일러 언어에서 컴파일러가 하는 일의 상당 부분을 우리가 아는 것보다 세련된 방식을 처리해줍니다. 전통적인 컴파일러 언어의 처리 과정에서는 소스코드가 실행되기 전에 보통 3단계를 거치는데, 이 과정을 컴파일레이션이라고 합니다. 여기서 컴파일의 자세한 과정은 배보다 배꼽이 더 클 수 있으므로 생략하도록 하겠습니다. JS 엔진이 기존 컴파일러와 다른 점은 JS 컴파일레이션을 미리 수행하지 않아서 최적화할 시간이 많지 않다는 것입니다. 보통.. 자바스크립트에서 특징적인 문법 정리 문과 표현식 문 (statement)과 표현식(expression)을 같은 의미라고 넘겨버리는 개발자가 많습니다. 하지만, 자바스크립트 (이하 JS)에서 두 용어는 다릅니다. 문은 문장, 표현식은 어구, 연산자는 구두점/접속사로 비유할 수 있습니다. let a = 3 * 6; let b = a; b; 여기서 3 * 6은 표현식입니다. 2, 3번째 줄 역시 표현식입니다. 또한, 이 세 줄은 각각의 표현식이 포함된 문입니다. 1, 2번째 줄은 변수를 선언하는 문이므로 선언문이라고 합니다. 만약, let과 같이 변수를 선언하는 부분이 빠졌다면 할당 표현식이라고 합니다. 3번째 줄 같은 경우는 표현식 문이라고 합니다. 모든 문은 완료 값을 가집니다. 이를 확인할 확실한 방법은 브라우저 개발자 콘솔 창에 타이핑해.. 이전 1 2 3 다음