Coding/javascript

콜백 함수, 함수 내 화살표 함수의 this를 공부하다가 헷갈려서 검색하여 정리해 보았습니다. 보고나면 이해가 되는데 시간이 지나 헷갈리면 자주 보도록 해야겠습니다. 명시적 바인딩까지 포함하여 정리 다시 한 최신 🔗링크 자바스크립트 this에 대해서 간단하게만 보는 것이 목적이면 이 글을 읽으면 됩니다. 1. this와 실행 문맥 ⚪ 자바스크립트 엔진을 프로그램이 실행을 하면 모든 실행 가능한 코드를 평가해서 ✔ '실행 문맥' 이라는 것을 만듦. ⚪ 이 때 실행 가능한 코드란 전역코드, 함수 코드, eval 코드가 있음. 각각의 실행 가능한 코드별로 실행 문맥이 하나씩 만들어짐. ⚪ 실행 문맥은 렉시컬 환경 컴포넌트, 디스 바인딩 컴포넌트 등 실제 실행에 필요한 컴포넌트들로 이루어져 있는데, 여기에 있는..

개요 실행 컨텍스트는 자바스크립트의 동작원리를 담고 있는 핵심 개념이다. 실행 컨텍스트를 바르게 이해하면 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 1. 소스 코드의 타입 ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분한다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 소스코드의 타입 설명 전역 코드(global code) 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 함수 코드(function code) 함수..

TL;DR 변수는 값을 저장하기 위해 확보한 메모리 공간 그 자체를 의미하거나 그 메모리 공간을 식별하기 위해서 붙인 이름이다. 식별자는 메모리 주소에 붙인 이름이다. 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 값이 담긴 메모리를 가리키는 메모리 주소와 매핑 관계에 있다. 의미상 비슷한 느낌이 강해서 둘이 서로 혼용하는 경우를 많이 볼 수 있다. 1. 변수 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 값의 위치를 가리키는 상징적인 이름 상징적 이름인 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 ..

개요 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위, 즉 다른 코드가 변수 자신을 참조할 수 있는 범위가 결정된다. 변수뿐만 아니라 모든 식별자가 그렇다. 다시 말해, 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 자바스크립트 엔진은 코드를 실행할 때 코드의 문맥을 고려한다. 코드가 어디서 실행되며 주변에 어떤 코드가 있는지에 따라 아래 예제의 ①과 ②처럼 동일한 코드도 다른 결과를 만들어 낸다. var x = 'global'; function foo(){ var x = 'local'; console.log(x); // ① } ..

알고 있지만 쉽게 잊거나 익숙하지 않은 것들은 계속 적어보며 익숙해져보려고 한다. 1. 각종 타입 console.log(typeof 123); // "number" console.log(typeof "123"); // "string" console.log(typeof true); // "boolean" console.log(typeof undefined); // "undefined" console.log(typeof null); // "object" console.log(typeof " "); // "string" console.log(typeof ""); // "string" console.log(typeof {}); // "object" console.log(typeof []); // "object"..

개요 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다. 자바스크립트는 원시 타입인 문자열 타입을 제공한다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 저장된다. 이를 값에 의한 전달(pass by value)이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달(pass by reference)이라 한다. 원시 타..

개요 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 비교 연산자는 if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다. 동등 비교 연산자(==)와 일치 비교 연산자(===)는 이 비교 연산자에 속해있다. 동등 / 일치 비교 연산자 동등 비교(loose equality) 연산자와 일치 비교(strict equality) 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 하지만 비교하는 엄격성의 정도가 다르다. 동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다. 비교 연산자 의미 사례 설명 부수효과 == 동등 비교 x == y x와 y의 값이 같음 X === 일치 비교 x === y x와..

0. 알고있으면 도움되는 사전지식 console.log(Boolean(" ")); // true console.log(isNaN(" ")); // false console.log(Number(" ")); // >>> 0 console.log(typeof " ") // string console.log(Boolean("")) // >>> false console.log(isNaN("")); // >>> false console.log(Number("")); // 0 console.log(typeof "") // string console.log(Boolean([])); // >>> true console.log(isNaN([])); // >>> false console.log(Number([])); // ..

1. 구조 분해 할당 Destructing assignment 구조 분해 할당 구문은 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 하는 표현식 1-1. 배열 구조 분해 1-2. 배열 구조 분해: 기본값 한 변수가 기본 값이 없을 경우(짝이 안 맞는 경우) 기본값 없는 변수에 할당한 값만 할당되고, 나머지(a,b)는 새로 변경되지 않고 기존에 할당된 1,2가 할당된다. let [a=3, b=4, c=5] = [1,2] console.log(a); // 1 console.log(b); // 2 console.log(c); // 5 1-3. 배열 구조 분해: 일부 반환값 무시 1-4. 배열 구조 분해: 바꿔치기 let a = 1 let b = 2 let [c,d] = [b,a] console..

참고로 일반 문자열과 Array, generator는 iterable한 객체이다. Iterator만의 동일한 메서드 사용 가능. 메모장에 있던 거 옮겨 적다보니 더럽게 작성이 됐다. 최대한 쉽게 설명하려고 해봄. 그러다보니 본래 의미가 달라진 경우도 있는 것 같아 감안 부탁. 0. 문자열 특정 위치에 접근 let desc = '안녕하세요.'; console.log( desc[2], ); 주의! 문자열은 배열과 다르게 한 글자만 바꾸는 것은 허용되지 않음. 새로 할당해도 기존 값 안바뀜 desc[4] = '용'; console.log(desc); >>> 안녕하세요. 1. Array.indexof ★★★ str.indexOf(text, index) ★★★ : 문자를 인수로 받아 몇 번째[인덱스]에 위치하는지..