Web/JavaScript
-
[JavaScript] 배열(Array)과 이터러블(Iterable)Web/JavaScript 2021. 10. 19. 14:47
배열 (Array) 일반적인 자료구조에서의 배열은 '연속된 메모리 공간에 나열된 동일한 타입의 데이터(요소)들의 집합'을 이야기한다. 때문에 배열의 주소만 알고 있다면 해당 배열의 n번째 데이터는 어떤 값인지 O(1)의 속도로 (아주 빠르게) 알 수 있다. 자바스크립트의 배열은 이러한 배열의 특징을 흉내내고 있는 아주 특수한 객체다. const arr = { 0: 100, 1: 123, 2: 129, length: 3 } // arr[0] === 100 // arr[1] === 123 // arr.length === 3 위와 같이 생긴 객체의 프로퍼티에 접근하는 것은 일반적인 배열을 사용법과 똑같다는 것을 알 수 있다. 위와 같이 자바스크립트에서의 배열은 index를 key로 프로퍼티 값에 접근할 수 있..
-
[JavaScript] Event의 이해Web/JavaScript 2021. 8. 15. 19:23
Event 요? 이벤트라고 하면 말 그대로 브라우저 환경에서 '마우스 클릭'이나 '애니메이션이 끝남' 등 브라우저 위에서 발생하는(일어나는) 상황을 말한다. JavaScript를 이용한 웹 개발은 scroll, click, hover 등 수 많은 event에 의해 기능들이 동작하는 Event-Driven 개발이라고도 한다. 기본적으로 브라우저가 지원하는 이벤트들은 여기를 참고하면 좋겠다. Event 등록 이벤트를 등록 하는 방법은 두 가지가 있다. const $myBTN = document.querySelector(".my-button"); $myBTN.addEventListener("click", () => { console.log("버튼이 클릭되었습니다"); }); 1. 일반적으로 많이 사용하는 방법..
-
[JavaScript] 스코프(Scope)와 클로져(Closure)Web/JavaScript 2021. 5. 25. 14:28
스코프(Scope) 호이스팅을 설명하기 전에 스코프에 대한 설명을 먼저 했어야 했는데, 지금이라도 한번 정리 해 봐야겠다. 자바스크립트에서 스코프라는 단어를 많이 접해봤을 것이다. 스코프란 해당 변수에 접근 할 수 있는 범위를 일컫는 말인데, 자바스크립트에서는 Global(전역)과 Local(지역) 두 종류의 스코프가 있다. var name = 'hov'; function print() { var name = 'lee'; console.log(name); } print(); // 출력: lee console.log(name); // 출력: hov 위에서 보면 알 수 있듯, name이라는 동일한 이름을 가진 변수가 각각 독립적으로 불리는 것을 알 수 있다. print() 함수 안에 있는 변수(name)는 ..
-
[JavaScript] 자바스크립트 this의 모든 것Web/JavaScript 2021. 5. 15. 21:12
this란 무엇인가? C++, JAVA 등 다양한 프로그래밍 언어에서도 this가 존재하는데, 여기서 this는 객체 자신을 나타내는 포인터, 레퍼런스다. 하지만 자바스크립트에서 this는 함수의 호출 맥락(Context)를 의미한다. 즉 함수를 어떻게 호출하냐에 따라 this가 가리키는 대상이 달라질 수 있다는 것이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결 시켜주는 역할을 한다. console.log(this); // window function func1() { console.log(this); } func1(); // window 우선 브라우저의 개발자 도구에서 this를 출력 해보면 전역 객체인 window 객체를 출력한다. (node.js에서는 this를 출력하면..
-
[JavaScript] 실행 컨텍스트와 스코프 체인Web/JavaScript 2021. 5. 13. 21:33
실행 컨텍스트(Execution Context)란? context는 한국어로 문맥 이라는 뜻을 가진다. 문맥의 정확한 정의는 그럼 무엇일까? 문맥 어떤 주어진 언어표현이 나타나는 부분과 연관이 되는 언어적인 맥락 또는 환경. (네이버 사전) 즉 실행 컨텍스트는 자바스크립트 코드가 실행되기 위해서 필요한 맥락과 환경을 context라고 한다. 컨텍스트에는 세 가지 종류가 있다. Context의 종류 1. Global Execution Context (전역 컨텍스트) - 코드가 글로벌로 실행이 될 때의 환경 - 자바스크립트는 싱글 스레드 언어이기 때문에 전역 컨텍스트는 딱 하나만 존재 2. Functional Execution Context (함수 컨텍스트) - 함수가 호출이 되어 실행이 될 때 실행되고 있..
-
[JavaScript] 호이스팅 이란?Web/JavaScript 2021. 5. 13. 19:09
호이스팅(Hoisting)이란? 자바스크립트 Parser가 함수를 실행하기 전 함수를 한번 훑는다. 여기서, 함수 안에 필요한 변수 값들을 모두 모아서 유효 범위의 최상단에 선언 하는데, 이를 호이스팅(Hoisting)이라 한다 함수 안 (블록 안 { }) 에서만 유효하고, 실제로 코드가 끌어올려 지는 것이 아니라 자바스크립트 Parser 내부적으로 끌어올려 처리하는 것이다. 때문에 실제 메모리에는 어떠한 변화도 발생하지 않는다. 호이스팅의 대상 1. var 변수 선언 변수 선언의 경우 var에서만 호이스팅이 일어난다. let / const 변수 선언에서는 호이스팅이 발생하지 않는다. 여기서 변수의 선언만 끌어올려지고, 할당은 함께 끌어올려지지 않는다. console.log(hello); // undef..