[JavaScript] 실행 컨텍스트
2022. 11. 5. 19:15
프로그래밍 언어/JavaScript
실행 컨텍스트(Execution Context) 란? 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체이다. 전역 코드 : 전역 영역에 존재하는 코드 함수 코드 : 함수 영역에 존재하는 코드 일반적으로 실행할 코드는 전역 코드와 함수 내 코드이다. 자바스크립트 엔진이 코드를 실행하기 위해 필요한 모든 정보를 하나의 객체로 묶어 놓은 것이다. 실행 컨텍스트 생성 과정 1. 실행 컨텍스트 생성 2. 스코프 체인의 생성과 초기화 실행 컨텍스트가 생성된 이후 가장 먼저 스코프 체인의 생성과 초기화가 실행된다. 이때 스코프 체인은 전역 객체의 레퍼런스를 포함하는 리스트가 된다. 3. 변수 객체화 실행 스코프 체인의 생성과 초기화가 종료하면 변수 객체화가 실행된다. 변수 객체화는 변수 객체에 변수, 매개변수와 인..
[JavaScript] 변수 선언 방식 (var/ let/ const)
2022. 11. 5. 18:15
프로그래밍 언어/JavaScript
var / let / const 란 무엇인가? JavaScript 에서 변수 선언 시에 사용하는 예약어(키워드) 예약어(키워드) : 컴퓨터 프로그래밍 언어에서 이미 문법적인 용도로 사용되고 있기 때문에 식별자로 사용할 수 없는 단어들 1. var ES6(ECMAScript6) 이전에 변수 선언 방식이다. 변수 선언 및 초기화 후에 값을 재할당할 수 있다. 동일한 변수명으로 중복 선언이 가능하다. 예시) // 첫 번째 변수 선언 + 초기화 var a = 10; console.log(a); // 결과값: 10 // 값 재할당 a = 20; console.log(a); // 결과값: 20 // 두 번째 변수 선언 + 초기화 var a = 30; console.log(a); // 결과값: 30 // 세 번째 변..
[JavaScript] Primitive Type(원시 타입) 과 Reference Type(참조 타입)
2022. 11. 5. 17:59
프로그래밍 언어/JavaScript
자바스크립트의 자료형은 크게 원시 타입 과 참조 타입 으로 나뉜다. 원시 타입 (Primitive Type) 모두 하나의 값을 담고 있다. 값 자체에 대한 변경이 불가능(immutable) 하다. 예시) let myString = "hello"; myString[0] = 'B'; // 원시 타입이기 때문에 Bye 로 변경 불가능. 오류는 Throw 되지 않는다. console.log(myString); // bye 변수에 데이터를 재할당할 수 있다. 예시1) 문자열을 담고 있던 변수에 다른 문자열을 담을 수 있다. let myString = "hello"; myString = "bye"; // 재할당 가능 console.log(myString); // bye 예시2) 문자열을 담고 있던 변수에 숫자를 담..
[JavaScript] 자바스크립트 언어의 특징
2022. 11. 5. 17:54
프로그래밍 언어/JavaScript
자바스크립트의 특징 자바스크립트는 컴파일 언어이다. (자바스크립트는 코드 실행 전 코드 평가 과정을 거친다. 이 과정에서 선언된 모든 식별자에 대한 정보를 미리 수집해 메모리에 매핑시키는데, 이로 인해 코드 실행 시 호이스팅 문제가 발생한다.) 자바스크립트는 Lexical-Scoped 언어이다. (자바스크립트에서 함수 선언 시점에 스코프가 생겨나며, 함수를 선언하는 순간 함수 내부의 변수들은 자기 스코프로부터 가장 가까운 곳(상위 스코프에서) 에 있는 변수를 계속 참조하게 된다. 자바스크립트의 이런 특성으로 인해 생성되는 함수는 모두 클로저 함수라고 말할 수 있다.) 자바스크립트는 dynamically-typed 언어이다. (자바스크립트는 코드 실행 시점에 변수의 타입이 결정되고 변수 타입에 해당하는 메..
[Algorithm] 이진 탐색(Binary Search)
2022. 9. 24. 20:44
알고리즘/개념
들어가며 개발자의 길을 걸은 이후 프로젝트 요구사항에 따른 기능 구현에만 초점을 맞추어 공부를 진행해왔었습니다. 그때그때 문제가 발생할 때마다 구글링을 통해 어떻게든 문제를 해결했습니다. 그러나 그마저도 다른 사람들이 해결한 방법을 적용하는 것에 급급할 따름이었습니다. 문제 해결력을 키우고 싶어 알고리즘을 공부해야 겠다고 느끼게 되었고, 이 포스팅이 바로 그 시작점입니다. 회사 생활을 하는 탓에 매일 포스팅을 올리지는 못하겠지만 앞으로 학습한 개념들을 하나씩 정리하며 포스팅할 계획입니다. 알고리즘은 개념 학습에만 그치면 겉핥기 학습 밖에 되지 않습니다. 직접 문제를 풀어보는 게 매우 중요하므로 백준 문제 풀이 또한 포스팅할 계획입니다. 여러 블로그 글을 참조하며 공부하고 정리한 내용이니 약간의 오류가 있..
JavaScript와 Iterator
2020. 11. 23. 15:17
프로그래밍 언어/JavaScript
ES2015에서 Iterable Protocol이 추가되었습니다. Iterable Protocol에는 2가지 형태가 존재하는데, iterable과 iterator가 있습니다. Iterable iterable은 객체의 멤버를 반복할 수 있는 객체입니다. iterable은 자바스크립트 객체의 요소들에 대해 반복되는 행동(예를 들어, for .. of 구문에서 어떤 값들이 루프를 돌고 있는가)을 정의할 수 있도록 해줍니다. JavaScript에서 객체가 iterable하기 위해서는, object에는 [@@iterator] 메서드가 구현되어 있어야 합니다. 따라서 임의로 우리가 객체를 만들고 iterable하게 만들고 싶다면, object 프로퍼티에 Symbol.iterator를 추가해야 합니다. 객체는 반드시..
Node와 Element
2020. 11. 22. 16:49
프로그래밍 언어/JavaScript
HTML / XML 문서는 브라우저 안에서 DOM 트리로 표현됩니다. 태그는 요소 노드가 되고 트리 구조를 형성합니다. 문자는 텍스트 노드가 됩니다. 이 외에 HTML 내의 모든 것은 DOM을 구성합니다. 심지어 주석까지도 말입니다. HTML 안의 모든 것들은 (심지어 그것은 주석이더라도) 노드이고, 이 노드들이 모이고 서로 연결되어 DOM을 구성하고 있습니다. 노드의 종류 노드 타입은 총 12가지인데, 실무에서 주로 다음 네 가지 노드를 다룹니다. DOM의 '진입점'이 되는 문서(document) 노드 HTML 태그에서 만들어지며, DOM 트리를 구성하는 블록인 요소 노드(element node) 텍스트를 포함하는 텍스트 노드(text node) 화면에 보이지는 않지만, 정보를 기록하고 자바스크립트를 ..
왜 forEach 메소드는 children 속성에 대해 동작하지 않을까?
2020. 11. 21. 23:45
시행착오
이벤트 핸들러 함수에서 어떠한 DOM 요소의 자식 요소들에 접근하기 위해서 .children 을 사용합니다. const parentElement = document.querySelector('.parent'); console.log(parentElement.children) parentElement.children.forEach(function (entry) { console.log(entry); }); 위에서 작성한 코드에서 parentElement.children 은 자식 DOM 요소들이 담긴 리스트를 반환하기 때문에, 당연히 배열의 forEach 메소드를 사용하여 각각의 요소에 접근하여 어떤 동작을 수행할 수 있을 것이라고 생각하였습니다. 하지만 다음과 같은 에러 메세지를 콘솔 창에 빨간 글씨로 출..