Develop/JavaScript

1. 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 아래의 코드에서 보이는 것처럼 myNumber 는 23이라는 값을 식별할 수 있다. var myNumber = 23; 이 때, 23 이라는 값을 직접 저장하는 것이 아닌, 이 값을 참조 하고 있는 메모리 주소를 기억해야 한다. 즉, 식별자는 메모리 주소에 붙여진 "이름" 이라고 생각을 해주면 좋을 것 같다. 2. 변수 선언 자바스크립트는 메모리 직접 제어를 통해 발생할 수 있는 에러를 방지 하기 위해서 개발자의 접근을 허용하지 않습니다 . 그렇기 때문에, 10 + 20과 같은 값을 재사용 하기 위해서는 이를 변수에 저장해서 사용을 합니다. 이러한 변수를 사용 하기 위해서는 우선적으로 선언이 이루어지는데, 선언을 한다는 것은 값을 저장..

2021. 8. 17.

Develop/JavaScript

1. ES5의 리스트 순회 일반적인 프로그래밍 언어와 같이 숫자라는 "키"로 순회 하였습니다. const list = [1,2,3]; for ( var i = 0; i < list.length; i++ ) { console.log(list[i]); } 2. ES6의 리스트 순회 ES6 에서는 가독성을 위해 for of의 사용을 권고합니다. 하지만 일반적인 경우와는 달리 "키"가 없는데, 어떤 방식으로 순회를 하는걸까요? // 훨씬 간결하고, 선언적인 순회 방법 const ( const val of list ) { console.log(val); } 3. [ Array, Set, Map ] 을 통해 알아보는 이터러블 & 이터레이터 3-1 이터러블 & 이터레이터 이란? - 자바스크립트의 [ 배열, 객체, 맵..

2021. 8. 9.

Develop/JavaScript

들어가기전에 정규식은 특정 문자열을 찾고, 이를 특정한 내용을 바꿀 때 "매우 매우" 유용하게 사용됩니다. 실제로 정규식을 사용 하고는 싶었으나 ! 이해가 어려워서 미루고 있던 도중 강의를 만나게 되어 ! 정리를 하게 되었습니다. 1. 정규식 생성하기 정규식의 생성은 아래와 같이 "//" 로 감싼 뒤, 변수에 담아두는 방식과 const regExp = /abc/; 다음과 같이 생성자를 이용하여 만들 수 있습니다. const regExp = new RegExp("abc"); 2. 정규식 사용법 특수 문자 특수문자는 \(백슬래쉬)를 앞에 붙여 줌으로써, 특수문자가 그대로 사용 될 수 있도록 해야합니다. const regExp1 = /\*/; const regExp2 = /\?/; 플래그 조금 더 섬세한 패턴..

2021. 8. 3.

Develop/JavaScript

실행 문맥(Execution Context)란? 소스코드를 실행하는데 필요한 환경과 결과를 관리하는 영역입니다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로 컨텍스트를 실행 및 관리합니다. 식별자와 스코프는 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨택스트 스택으로 관리합니다. 소스 코드의 타입 ECMAScript는 소스코드를 4가지 타입으로 구분합니다. 1) 전역 코드 - 전역에 존재하는 소스코드를 말합니다. 전역에 정의된 함수, 클래스 등의 내부코드는 포함 X - 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성합니다. 2) 함수 코드 - 함수 내부에 존재하는 소스코드를 말합니다. 함수 내부에 중첩된 코드는 포함 X - 지역 스코프를 생성하..

2021. 7. 19.

Develop/JavaScript

머릿말 "let과 var의 차이는 스코프에 있다" 정도는 알고 있었지만, 어떠한 원리로 다르게 작동하는지 알지 못했습니다. 그러던 도중, "코드종" 님의 영상과 최근 보고 있는 "모던 자바스크립트 Deep Dive" 의 내용을 합쳐 보다 깊게 설명 해보고자 글을 작성하게 되었습니다. 스코프 1-1. var var의 스코프는 "함수" 로 정의가 됩니다. function print_t() { { var t = "안녕 나는 t"; } console.log(t) // 안녕 나는 "t" } 그렇기 때문에, 함수 -> "중괄호" 내부에서 t를 선언 하더라도, "t" 의 값이 출력이 됩니다. 1-2. let 반면에 let은 블록 레벨 스코프로 정의가 되어있습니다. function print_t() { { var t ..

2021. 7. 14.

Develop/JavaScript

This 란? This의 값은 함수를 "호출하는 방법"에 의해 결정된다. 호출 방법과 무관하게 This 를 고정 시키려면 "bind" 를 사용하면 된다. 여기서 꼭 기억 해야 하는 것은 "누가 호출을 했는지?" 이다. 예시 및 설명 someone.whoAmI() someone.whoAmI() 를 출력하면, 그 결과는 donghyeon이 출력된다. 그 이유는 someone이라는 함수가 "whoami"를 출력 했기 때문이다. myWhoAmI 이번에는 someone.whoAmI() 를 전역 변수인 myWhoAmI에 담아서 출력을 했다. 이 것을 브라우저에서 작동 시키면, window 객체가 출력이 되는데 그 이유는 글로벌은 윈도우에 의해 호출 되기 때문이다. btn btn의 이벤트로 호출을 하면? 역시 버튼에..

2021. 7. 14.

Develop/JavaScript

[1] 자바스크립트의 This 자바스크립트의 함수는 일급 객체 이기 때문에 "This"를 자기 자신이라 부르기에 모호하다. 그래서 어떤 객체에 호출 되는지에 따라서, This의 의미가 달라진다. 이렇게 This는 동적으로 결정 되기 때문에 우리는 이것을 Binding 된다고 말할 수 있다. [2] 자바스크립트의 구동 자바스크립트는 다음과 같은 방식으로 작동이 되는데, 실행 문맥 단계에서 바인딩을 한다. [3] This Binding Rules [1] 기본 바인딩 가장 기본적인 방법은 단독 실행 하는 것이다. 함수를 단독 실행 할 때는 기본적으로 전역객체에 바인딩이 된다. 따라서, 브라우저 환경 속에서는 window 객체에 바인딩 된다. 노드의 전역 객체는 Global 이므로, Global 객체에 바인딩이..

2021. 7. 2.

Develop/JavaScript

자바스크립트 엔진 자바스크립트 엔진을 대표하는 것은 구글의 V8이 있다. Memory Heap : 메모리 할당이 일어나는 곳 Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳 콜스택 자바스크립트는 싱글 스레드로 작업을 처리한다. 즉, 1개의 콜스택만을 가지고 작업을 처리 한다는 것이다. 콜스택은 이름에서 볼 수 있듯이, 스택의 구조를 가져 먼저 들어간 작업이 늦게 처리 되는 구조를 가지고 있다. 그리하여, 아래의 코드의 결과는 세번째 -> 두번째 -> 첫번째 순서로 출력 될 것이다. function first(){ second(); console.log("첫번째"); } function second(){ third(); console.log("두번째"); } function third(){..

2021. 6. 27.