맨동이

자바스크립트 this 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 자바스크립트는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자 this 를 제공한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 생성된다. 여기서 this가 가리키는 값, this 바인딩은 함수 호출 방식에 의해 동적으로 결정이 된다. 더보기 바..

자바스크립트 엔진은 함수 정의를 평가하여 함수 객체를 생성할 때 함수 정의 방식에 따라 함수를 constructor 와 non-constructor 로 구분한다. constructor : 함수 선언문, 함수 표현식, 클래스 non-constructor : 메서드(ES6 메서드 축약 표현), 화살표 함수 밑의 예제로 보면 메서드를 인정하는 범위를 구분할 수 있다. // 일반함수 정의: 함수선언문, 함수표현식 function one() {} const two = function() {}; // 프로퍼티 x의 값으로 할당된 것은 일반 함수로 정의된 함수와 같다. 메서드로 인정X const test = { x: function() {} }; new one(); // -> one {} new two(); // -..

일급 객체 일급 객체는 4가지 조건을 만족하는 객체를 말한다. 더보기 1. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 2. 변수나 자료구조(객체,배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 4가지 조건을 모두 만족하는 일급 객체이다. // 1. 함수는 무명의 리터럴로 생성 가능 const increase = function(num) { return ++num; }; const decrease = function(num) { return --num; }; // 2. 함수는 객체에 저장이 가능 const predicates = { increase, decrease }; // 3. 함수는 매개변수에..

스코프 체인과 렉시컬 스코프 스코프 체인 함수는 중첩될 수 있으므로 힘수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다. 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라 한다. 모든 스코프는 위의 그림과 같이 하나의 계층적 구조로 연결된다. 항상 최상위 스코프는 전역 스코프이다. 이처럼 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다. 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 자바스크립트 엔진은 절대 하위 스코프로 내려가면서 식별자를 검색하지 않는다. 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조할 수 있지..

Scope 스코프(유효범위) 는 , 자바스크립트를 포함한 모든 프로그래밍 언어의 중요한 개념이다. function add(x,y) { //매개변수는 함수 몸체 내부에서만 참조할 수 있다. //매개변수의 스코프는 함수 몸체 내부이다. console.log(x,y) //2 5 return x + y; } add(2,5); // 매개변수는 함수 내부에서만 참조할 수 있다. console.log(x,y); // ReferenceError: x is not defined 모든 식별자는 자신이 선언된 위치에 의해 자신이 유효한 볌위, 다른 코드가 자신을 참조할 수 있는 범위가 결정된다. 이 유효 범위가 바로 스코프이다. 즉 스코프는 식별자가 유효한 범위를 말한다. let x = 'global'; function c..

Reduce 메서드란? reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환한다. map과 forEach 와는 조금 다른 누산값을 곁들인 메서드이다. 문법 // reduce const array1 = [10, 20, 30, 40]; array1.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => { return 다음누산값; }, 초기누산값); reduce 메서드 자체의 반환값은 100이 된다. 1. 콜백 함수 콜백 함수의 첫 번째 파라미터는 reduce 메서드에서 이 콜백 함수가 동작할 때 return 하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 것이다. 배열의 요소를 다 돌고 마지막 콜백 함수가 동작한 이후의 return..

넷스케이프 커뮤니케이션즈와 마이크로소프트가 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 추가하고, 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 이러한 문제점을 방지하기 위해 자바스크립트의 표준화가 필요했다. 버전 출시 연도 특징 ES1 1997 초판 ES2 1998 ISO/IEC 16262 국제표준과 동일한 규격 사용 ES3 1999 정규 표현식, try...catch ES5 2009 (HTML5와 함께 출현한 표준안) JSON, strict mode, 접근자 프로퍼티, forEach, map, filter, reduce, some, every ES6 2015 let/const, 클래스, 화살표 함수, 템플릿 ..

자바스크립트로 웹 개발을 할 때, 데이터를 저장하고 싶은데 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 로컬 스토리지 vs. 세션 스토리지 이 두 개의 차이점은 데이터가 어떠한 범위 내에서 얼마나 보존되느냐에 있습니다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지고, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 ..

ES11 에서 추가된 기능들에 대해서 알아보겠습니다. 1. Optional Chaining(?.) 2. globalThis 3. Nullish coalescing Operator(??) 4. Dynamic import 5. BigInt 6. String.prototype.matchAll 7. Promise.allSettled 1. Optional Chaining (?.) 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다. const data = { user: { name: 'foo', getName() { retu..

async & await란? async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다. async & await 기본 문법 async function 함수명() { await 비동기_처리_메서드_명(); } 함수의 앞에 async 라는 예약어를 붙입니다. 그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙입니다. 여기서 주의하셔야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다. 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하..