# javascript deep dive

75개의 포스트

javascript의 단축 평가

javascript modern deepdive의 9장 내용입니다. 4개월전에 공부했던 내용인데 복습할겸 정리해봤습니다. 단축 평가 논리 연산 결과를 결정하는 피연산자를 타입 변환 없이 그대로 반환하는 것을 뜻합니다. 평가 도중에 결과가 확정된 경우 나머지 평가 과정을 생략합니다. 논리곱 (&&) 논리곱은 피연산자 모두 true일 경우 true를 반환하는데 hello는 true이고 hi가 논리 연산의 결과를 결정하기 때문에 hi를 반환하게 됩니다. 논리합 (||) 논리합은 피연산자중 하나만이라도 true인 경우 true를 반환하는데 hello가 true이고 hello가 논리 연산의 결과를 결정하기 때문에 hello를 반환하게 됩니다. 단축평가의 장점 if문 대체 단축평가 사용시 객체가 null or undefined 경우에 에러를 발생시키지 않음 ES11 이후 대체 0이나 ""도 false로 평가되어서 단축 평가를 사용할때에

3일 전
·
0개의 댓글
·

[7장] 연산자

안녕하세요. 멋쟁이사자처럼 11기 유소정입니다. 이번주는 7장 연산자에 대해 공부해보겠습니다. 예제 7-1에서 3 > 5를 봅시다. 3과 5는 피연산자입니다. > 는 연산자입니다. 그리고 3 > 5는 피연산자와 연산자로 이뤄진 연산자 표현식입니다. 이전에 배웠는데 표현식은 값으로 평가될 수 있는 문입니다. 피연산자는 값으로 평가될 수 있는 표현식입니다. 연잔자는 하나 이상의 표현식을 대상으로 하나의 값을 만듭니다. 7.1 산술 연산자에 대해 보겠습니다. 산술 연산자는 이항 산술 연산자와 단항 산술 연산자로 나눌 수 있습니다. 이상 산술 연산자는 +,- 등입니다. 1 + 2 처럼 피연산자가 2개 필요합니다. 값 변경, 즉 부수 효과는 없습니다. 1 + 2로 인해 어떤 피연산자도 값이 변하지 않기 때문입니다. 하지만 1 + 2 자체는 새로운 값을 생생합니다. 단항 산술 연산자는 1++처럼 피연산자가 1개입니다. 이는 부수 효과가 있습니다. ++나 --가 암묵적 할당을 하기

2023년 6월 3일
·
0개의 댓글
·
post-thumbnail

45. 프로미스

프로미스가 생겨난 이유 > 전통적인 콜백 패턴의 단점을 보완하기 위해 > ES6에서 비동기 처리를 위한 전통적인 콜백 패턴의 단점을 보완하기 위해 프로미스를 도입했다. 1. 콜백 패턴의 단점 콜백 헬 에러처리의 한계 1) 콜백 헬 콜백 헬이 발생하는 이유 비동기 함수 내부에 비동기로 동작하는 함수는 비동기 처리 결과를 외부로 반환하거나 상위 스코프의 변수에 할당할 수 없기 때문에 비동기 결과를 전달한 콜백 함수를 통해 처리해야한다. 왜? 비동기 함수는 태스크 큐에 대기하고 있다가 콜 스택이 비면 콜 스택으로 이동하여 실행되기 때문에 상위 함수가 종료될 때까지 기다려야하기 때문 비동기 함수는 비동기 처리 결과를 외부에 반환할수도, 상위 스코프의 변수에 할당할수도 없다. 이에 대한 예시를 살펴보자. 예시1 비동기 함수의 반환값을 변수에 저장하는 경우 get 함수가 호출되면 GET 요청을 전송한 뒤 o

2023년 3월 4일
·
0개의 댓글
·
post-thumbnail

42. 비동기 프로그래밍

1. 동기 처리와 비동기 처리 실행 컨텍스트 스택 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성 함수 실행 컨텍스트는 실행 컨텍스트 스택 (콜 스택)에 푸쉬되고 함수 코드가 실행 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거 된다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 예제코드와 실행 컨텍스트 Untitled 싱글 스레드 방식 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 잇는 싱글 스레드 방식 시간이 걸리는 태스크가 있을 경우 블로킹(작업 중단)이 발생 동기와 비동기 동기 처리 실행 순서대로 처리 장점 : 실행 순

2023년 3월 4일
·
1개의 댓글
·
post-thumbnail

Javascipt Deep Dive / 들어가며

https://www.google.com/url?sa=i&url=https%3A%2F%2Fvelog.io%2F%40broccolism%2F%25EB%2593%259C%25EB%2594%2594%25EC%2596%25B4-%25EC%2599%2584%25EB%258F%2585-%25EB%25AA%25A8%25EB%258D%2598-%25EC%259E%2590%25EB%25B0%2594%25EC%258A%25A4%25ED%2581%25AC%25EB%25A6%25BD%25ED%258A%25B8-Deep-Dive-%25EC%258A%25A4%25ED%2584%25B0%25EB%2594%2594-%25ED%259B%2584%25EA%25B8%25B0&psig=AOvVaw0x1vpiO2J6XuW8qDXPgOx6&ust=1673343272380000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCNjF2cyXuvwCFQAAAAAdAAAAABAM![](https://velo

2023년 1월 9일
·
0개의 댓글
·
post-thumbnail

모던 자바스크립트 Deep Dive 15. let, const 키워드와 블록 레벨 스코프

1. var 선언의 문제점 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. 함수 레벨 스코프 var 키워드는 함수 외부, 코드 블록 내에서 선언해도 모두 전역 변수가 된다. 변수 호이스팅 var 키워드로 변수를 선언하면 -> 할당문에 의해 끌어 올려진 것처럼 동작한다. 2. let 키워드 변수 중복 선언 금지 let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다. 블록 레벨 스코프 모든 코드 블록(함수, if문, for문, while문, try/catch문 등) 지역 스코프로 인정하는 블록 레벨 스코프를 따른다. 전역에서 지역 변수를 참조할 수 없다. let foo = 1; // 전역 변수 { let foo = 2; // 지역 변수 let bar = 3; // 지역 변수 } console.log(foo); // 1 console.log(bar); // 에러가 뜬다. 변수 호이스팅

2023년 1월 4일
·
0개의 댓글
·
post-thumbnail

[ TIL 67 | JavaScript Deep Dive ] 17. 생성자 함수에 의한 객체 생성

17.1 Object 생성자 함수 생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 인스턴스 : 생성자 함수에 의해 생성된 객체 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환 빌트인 생성자 함수 String, Number, Boolean, Function, Array, Date, RegExp Promise 등 리터럴로 생성하는 것이 더 간편 17.2 생성자 함수 17.2.1 객체 리터럴에 의한 객체 생성 방식의 문제점 객체 리터럴로 객체를 생성하면 단 하나의 객체만 생성해야하기 때문에 비슷한 객체를 여러 개 생성할 때 비효율적임 17.2.2 생성자 함수에 의한 객체 생성 방식의 장점 생성자 함수는 객체(인스턴스)를 생성하기 위한 템플릿처럼 작동하여 구조가 동일한 객체 여러 개를 간편하게 생성 가능 new 연산자와 함께 호출하면 생성자

2022년 12월 14일
·
0개의 댓글
·
post-thumbnail

[ TIL 66 | JavaScript Deep Dive ] 16. 프로퍼티 어트리뷰트

16.1 내부 슬롯과 내부 메서드 ECMAScript에서 사용하는 의사 프로퍼티(pseudo property), 의사 메서드(pseudo method) 실제로 동작하지만, 개발자가 접근할 수 없음 자바스크립트 엔진의 내부 로직 일부 내부 슬롯, 내부 메서드에 한하여 간접적으로 접근 가능 16.2 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 프로퍼티를 생성할 때 프로퍼티 어트리뷰트는 기본값으로 자동 정의됨 getOwnPropertyDescriptor 메서드 프로퍼티 디스크립터 객체를 반환 프로퍼티 디스크립터 : 프로퍼티 어트리뷰트 정보를 제공 매개변수 첫번째 : 객체의 참조 두번째 : 프로퍼티 키 getOwnPropertyDescriptors 메서드 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립터 반환 16.3 데이터 프로퍼티와 접근자 프로퍼티

2022년 12월 14일
·
0개의 댓글
·
post-thumbnail

[ TIL 65 | JavaScript Deep Dive ] 15. let, const 키워드와 블록 레벨 스코프

15.1 var 키워드로 선언한 변수의 문제점 15.1.1 변수 중복 선언 허용 var 키워드로 선언된 변수는 동일 스코프 내에서 중복 선언을 허용한다. 15.1.2 함수 레벨 스코프 함수 레벨 스코프 : 함수의 코드 블록만을 지역 스코프로 인정 의도치 않게 변수값이 변경되는 부작용 발생 15.1.3 변수 호이스팅 var 키워드로 선언한 변수는 변수 호이스팅에 의해 변수 선언문 이전에 참조할 수 있다. (let, const는 아님) 15.2 let 키워드 15.2.1 변수 중복 선언 금지 let 키워드로 선언한 변수를 중복 선언하면 문법 에러가 발생 15.2.2 블록 레벨 스코프 블록 레벨 스코프 : 모든 코드 블록을 지역 스코프로 인정 15.2.3 변수 호이스팅 let 키워드 (와 const 키워드)로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 변수

2022년 12월 13일
·
1개의 댓글
·
post-thumbnail

[ TIL 64 | JavaScript Deep Dive ] 14. 전역 변수의 문제점

14.1 변수의 생명 주기 14.1.1 지역변수의 생명 주기 지역변수의 생명주기는 함수의 생명주기와 일치한다 변수 호이스팅 호이스팅은 스코프를 단위로 동작한다 변수 선언이 ‘스코프’의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징 함수 내부로 이동하게 되면 코드 평가가 시작됨 var x이므로 ‘global’로 할당한 전역 변수 x는 함수내부의 지역변수 x로 재선언되고 undefined가 할당됨 x = ‘local’이라는 할당문이 아직 실행되지 않았기 때문에 undefined인 것! 전역 변수가 아니라 지역 변수를 참조하기 때문! 14.1.2 전역 변수의 생명 주기 var 키워드로 선언한 전역 변수의 생명주기는 전역 객체의 생명 주기와 일치 var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 된다 14.2 전역 변수의 문제점 암묵적 결합 모든 코드가 전역 변수를 참조하고 변경

2022년 12월 13일
·
0개의 댓글
·
post-thumbnail

[ TIL 60 ] JavaScript Deep Dive 13. 스코프

13.1 스코프란? 식별자가 유효한 범위 모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정 스코프를 통해 어떤 변수를 참조해야할 것인지 결정 (스코프는 곧 렉시컬 환경이다) 13.2 스코프의 종류 전역 : 코드의 가장 바깥 영역 전역 변수는 전역 스코프를 갖음 지역 : 함수 몸체 내부 지역 변수는 지역 스코프를 갖음 변수는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정 13.2.1 전역과 전역 스코프 전역 변수는 전역 스코프를 갖음 전역 변수는 어디서든지 참조할 수 있음 13.2.2 지역과 지역 스코프 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효 13.3 스코프 체인 스코프가 게층적으로 연결된 것 변수 참조 시 현재 스코프에서 시작하여 상위 스코프 방향으로 이동하며 변수를 검색 13.3.1

2022년 12월 6일
·
0개의 댓글
·
post-thumbnail

[ TIL 59 ] JavaScript Deep Dive 23. 실행 컨텍스트

1. 실행컨텍스트 자바스크립트의 동작 원리를 담고 있는 핵심 개념 코드가 실행되기 위해 필요한 환경 1) 소스코드의 타입 소스코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다름 | 소스코드의 타입 | 설명 | | --------------- | ------------------------------------------------------------ | | 전역코드 | 전역에 존재하는 소스코드 | | 함수코드 | 함수 내부에 존재하는 소스코드 | | eval 코드 | 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 | | 모듈 코드 | 모듈 내부에 존재하

2022년 12월 6일
·
0개의 댓글
·
post-thumbnail

Javascript Deep Dive - 변수

변수 호이스팅에 의한 값의 할당 자바스크립트에서 변수선언은 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅(variable hoisting)이라고 한다. 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다. >변수의 선언과 값의 할당을 하나의 문장으로 단축 표현해도 자바스크립트 엔진은 변수의 선언과 값의 할당을 2개의 문으로 나누어 각각 실행한다. 따라서 변수에 undefined가 할당되어 초기화되는 것은 변함이 없다. 💡Tip > 변수의 호이스팅이 진행되면 런타임시 순차적으로 소스코드가 실행될 때, 런타임 전에 이미 실행되었기에 다시 실행되지는 않는다

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

배열

목표 27장의 내용을 최대한 이해하고 정리하기 > 27. 배열 27-1. 배열이란? 배열은 여러 개의 값을 순차적으로 나열한 자료구조이다. 배열이 가지고 있는 값 하나하나를 요소(element) 라고 부른다. 자바스크립트의 모든 값(원시 값, 객체, 함수, 배열 등)은 배열의 요소가 될 수 있다. 배열의 요소는 자신의 위치를 나타내는 0 이상의 정수인 인덱스(index) 를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용한다. 접근할 때에는 대괄호 [ ] 를 사용한다. 배열은 길이를 나타내는 length 프로퍼티를 갖는다. 자바스크립트에 배열이라는 타입이 존재하지 않는다. 배열은 객체 타입이다. 27-2. 자바스

2022년 4월 23일
·
0개의 댓글
·
post-thumbnail

ES6 함수의 추가 기능

목표 26장의 내용을 최대한 이해하고 정리하기 > 26. ES6 함수의 추가 기능 26-1. 함수의 구분 ES6 전까지 자바스크립트의 함수는 별다른 구분 없이 일반 함수, 생성자 함수, 객체에 바인딩된 메서드 등 다양한 목적으로 사용되었다. 중요한 것은 ES6 이전의 함수는 사용 목적에 따라 명확히 구분되지 않았다는 점이다. 모든 함수는 일반 함수로서 호출할 수 있고 생성자 함수로서 호출할 수 있고 메서드로도 호출할 수 있다. 어렵게 말하면 모든 함수는 callable이면서 constructor이다. 이는 언뜻 보면 편리한 것 같지만 실수를 유발시킬 수 있으며 성능에도 영향을 미친다. 위 코드와 같이 객체에 바인딩된 함수를 생성자 함수로 호출하는 경우가 흔치는 않지만 문법상 가능하다. 이는 바인딩된 함수가 constructor가 되기 때문에 불필요한 프로토타입 객체를 생성하게 되어 성능에 영향을 미칠 수

2022년 4월 16일
·
0개의 댓글
·
post-thumbnail

상속

목표 25장의 내용을 최대한 이해하고 정리하기 > 25. 클래스 - 상속(extends) ※ 본문의 목차는 책의 목차와 다릅니다. 25-8. 클래스 상속과 생성자 함수 상속 클래스 기반 상속은 기존 클래스를 상속받아 새로운 클래스를 확장(extends)하여 정의하는 것이다. 클래스와 생성자 함수는 인스턴스를 생성할 수 있는 함수라는 점에서 유사하지만 클래스는 상속을 통해 기존 클래스를 확장할 수 있는 문법이 제공되지만 생성자 함수는 제공하지 않는다. 25-9. extends 키워드 상속을 통해 클래스를 확장하려면 extends 키워드를 통해 정의한다. 상속을 통해 확장된 클래스를 서브클래스(위 코드에서는 Lion) 또는 자식클래스이라 부른다. 서브클래스에게 상속된 클래스를 **<s

2022년 4월 9일
·
0개의 댓글
·
post-thumbnail

클래스

목표 25장의 내용을 최대한 이해하고 정리하기 > 25. 클래스(Class) 25-1. 자바스크립트와 클래스 자바스크립트는 프로토타입 기반 객체지향 언어 로 다른 객체지향 언어와 다르지만 객체지향 프로그래밍 능력을 가지고 있다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 언어이다. ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있었다. 하지만, ES6에서 도입된 클래스 는 자바나 C와 같은 클래스 객체지향 프로그래밍 언어와 비슷한 새로운 객체 생성 매커니즘을 제시했다. 그렇다고 ES6 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하는 것이 아니고 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용하도록 만든

2022년 3월 26일
·
0개의 댓글
·
post-thumbnail

클로저

목표 24장의 내용을 최대한 이해하고 정리하기 > 24. 클로저(Closure) 위 코드의 결과는 무엇일까? undefined 또는 10 또는 1 셋 중에 하나가 출력될 것이다. 답은 10이 출력되는데 이는 중첩 함수인 inner 내부에서 외부 함수인 outer의 변수에 접근이 가능하기 때문이다. 이는 클로저(Closure) 와 관련이 있다. MDN에서 클로저를 다음과 같이 정의하고 있다. > 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping) 를 먼저 이해해야 한다. > 24-1. 렉시컬 스코프 **<a href="https://velog.io/@dev0408/modern-javascript-dee

2022년 3월 14일
·
0개의 댓글
·
post-thumbnail

실행 컨텍스트

목표 23장의 내용을 최대한 이해하고 정리하기 > 23. 실행 컨텍스트(execution context) 23-1. 실행 컨텍스트를 왜 알아야 할까? 실행 컨텍스트를 이해하면 다음과 같은 방식을 이해할 수 있다. 자바스크립트가 스코프를 기반으로 식별자와 바인딩된 값을 관리하는 방식 호이스팅이 발생하는 이유 클로저의 동작 방식 태스크 큐(task queue)와 함께 동작하는 이벤트 핸들러, 비동기 처리 방식 23-2. 소스코드의 타입 실행 컨텍스트를 이해하기 전에 알아두어야 할 것이 있다. ECMAScript 사양은 소스 코드를 4가지 타입으로 구분한다. 전역 코드 함수 코드 eval 코드 모듈 코드 소스 코드를 4가지 타입으로 구분하는 이유는 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르기 때문이

2022년 3월 4일
·
0개의 댓글
·
post-thumbnail

this

목표 22장의 내용을 최대한 이해하고 정리하기 > 22. this 22-1. &nbsp; this 키워드 this 키워드를 알아보기 전 객체에 대해 짚고 넘어가야 한다. 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다. 이 때, 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다. 그러기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 자바스크립트는 이를 위해 this라는 특수한 식별자를 제공한다. th

2022년 2월 10일
·
0개의 댓글
·