본문 바로가기

JAVASCRIPT14

호이스팅 변수 선언의 실행 시점과 변수 호이스팅 console.log(Candy); // undefined var Candy; // 변수 선언문 위의 예제에서 변수 선언문 보다 변수를 참조하는 코드가 앞에 있습니다. 자바스크립트는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(Candy)가 실행되는 시점에는 아직 Candy 변수의 선언이 실행되지 않았으므로 참조 에러가 발생해야 이치에 맞습니다. 하지만 참조 에러가 발생하지 않고 undefined가 출력됩니다. 그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임(runtime)이 아니라 그 이전 단계에서 먼저 실행되기 때문입니다. 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 .. 2023. 7. 13.
구조 분해 할당 구조 분해 할당(destructuring assignment)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다. 배열 구조 분해 할당 const number = [1, 2, 3]; const [one, two, three] = number; console.log(one, two, three); // 1 2 3 변수 one, two, three를 선언하고 number를 구조 분해하여 할당합니다. 이 때 할당 기준은 배열의 인덱스입니다. const [a, b] = [1]; console.log(a, b) // 1 undefined const [c, , d] = [1, 2, 3]; console.log(c, d); // 1 3 const [e, ... 2023. 6. 16.
프로토타입 프로토타입은 비유하자면 생명체의 유전자와 비슷하다는 개념을 가지고 접근하면 이해가 쉽습니다. 상속과 프로토타입 상속(inheritance)은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말합니다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거합니다. // 생성자 함수 function Cookie(chocolate) { this.chocolate = chocolate; } // 프로토타입 추가 Cookie.prototype.addChocolate = function () { return 'Cookie with ' + this.chocolate + ' Chocolates'; } // 인스턴스 생성 con.. 2023. 6. 15.
클로저 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. MDN 렉시컬 스코프 자바스크립트 엔진은 함수를 어디서 호출했는지가 아닌 함수를 어디에 정의했는지에 따라 상위 스코프를 결정합니다. 이를 렉시컬 스코프(정적 스코프)라 합니다. const x = 1; function outer() { const x = 10; inner(); } function inner() { console.log(x); } outer(); // 1 inner(); // 1 위 예시에서 outer 함수와 inner 함수 모두 전역에서 정의된 함수이며 어디서 호출하는지는 함수의 상위 스코프 결정에 어떠한 영향도 주지 못합니다. 즉, 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않습니다. 렉시컬 환경의.. 2023. 6. 9.
단축 평가 논리 연산자를 사용한 단축 평가 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됩니다. 'Red' && 'Blue' // 'Blue' 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환합니다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행됩니다. 첫 번째 피연산자 'Red'는 Truthy 값이므로 true로 평가됩니다. 두 번째 피연산자까지 평가해 보아야 위 표현식을 평가할 수 있기에 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정합니다. 이때 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'Blue'를 그대로 반환합니다. 'Red' || 'Blue' // 'Red' 논리합 연산자는 두.. 2023. 5. 30.
this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있습니다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다. 더보기 바인딩이란 식별자와 값을 연결하는 과정을 의미합니다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것입니다. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것입니다. // 객체 리터럴 const myname = { name: 'iltae', getFullName() { return 'kim' + this.na.. 2023. 5. 29.
async/defer 자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 근본적으로 해결하기 위해 HTML5부터 script 태그에 async와 defer 속성이 추가되었습니다. async와 defer 속성은 src 속성을 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있으며 scr 속성이 없는 인라인 자바스크립트에는 사용할 수 없습니다. async와 defer 속성을 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다. 하지만 자바스크립트의 실행 시점에는 차이가 있습니다. async 속성 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됩니다. 단, 자바스크립트의 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며 , 이때 HTML 파싱이.. 2023. 5. 19.
디바운스와 스로틀 scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생합니다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있습니다. 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법입니다. 디바운스 디바운스(debounce)는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 합니다. 즉, 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 합니다. debounce 함수가 반환한 함수는 debounce에 두.. 2023. 5. 15.
Ajax Ajax(Asynchronous Javascript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. Ajax는 브라우저에서 제공하는 Web API인 XMLHTTPRequest 객체를 기반으로 동작합니다. XMLHTTPRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공합니다. 이전의 웹페이지는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링 하는 방식으로 동작합니다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 합니다. 기존의.. 2023. 5. 9.

티스토리툴바