[북스터디] 모던 자바스크립트 Deep dive

모던 자바스크립트 Deep dive 북스터디 발표자료입니다.

var는 "함수레벨스코프" "의도치 않은 호이스팅" "의도치 않은 변수 재할당" 과 같은 단점이 있어 대체로 쓰지 않는 것을 권장한다. ES6부터 이러한 var의 단점을 보완한 키워드 let과 const가 나왔다. 그럼에도 var를 쓰게 되는 경우가 있다면 아래 3가지

값(value)은 표현식(expression)이 평가(evaluate)되어 생성된 결과이다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.아래 코드 처럼 10 + 20 이라는 표현식이 평가되어 숫자 값 30을 생성한다.리터럴 을 사용해 값을 생성할 수도

자바스크립트 엔진은 코드를 파싱하고 해석하면서 리터럴과 토큰을 실제 메모리에 저장한다. 하지만 그 단위가 너무나 작기 때문에 메모리 사용량을 크게 증가시키지 않아 영향을 주지 않는다. 자바스크립트 엔진은 이처럼 메모리 사용량을 최적화 하고 성능을 향상시키기 위해서 작은

데이터 타입(data type)은 값의 종류를 말한다.자바스크립트(ES6)는 7개의 타입을 제공한다. 7개의 데이터 타입은 원시 타입(Primitive type)과 객체 타입(object/reference type)으로 분류할 수 있다.image데이터 타입에 따라 확보

자바스크립트가 동적타이핑 언어이기에 갖게 되는 이점은 아래와 같다.유연성과 편의성: 동적 타이핑은 변수나 값의 타입을 미리 선언하지 않아도 되므로 코드 작성이 간편합니다. 변수의 타입 변환 또한 자동으로 이루어지기 때문에 타입 변환에 대한 별도의 작업이 필요하지 않습니

writed by hanryu1109연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리 타입, 지수 연산 등을 수행해 하나의 값을 만든다.연산의 대상을 피대상자(operand)라 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다

자바스크립트는 동적 타이핑 언어로써 데이터 타입의 유연성을 제공하기 위해서 느슨한 비교와 엄격한 비교를 따로 나누어 지원한다. 느슨한 비교(==)는 두 피연산자의 "값"만을 비교하지만 엄격한 비교(===)는 "값"과 "데이터타입" 두가지를 동시에 비교한다.자바스크립트에

자바스크립트는 블록문을 하나의 실행단위로 취급단독으로 사용가능, 제어문이나 함수정의할 때 일반적으로 사용문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않음1) if~else문자바스크립트는 if~else문과 switch문으로 두가지 조

writed by wnsdlf25개발자가 의도적으로 값의 타입을 변환하는 것개발자의 의도와는 상관없이 표현 식을 평가하는 도중에 자바스크립트 엔진에 의해 변환되는 것기존 변수 값을 재 할당하여 변경하는 것이 아닌 자바스크립트 엔진에 의해 피 연산자의 값을 암묵적 타입

writed by dikum98자바스크립트의 객체는 키(key)와 값(value)로 구성된 프로퍼티(Property)들의 집합이다.자바스크립트에서 원시값을 제외한 모든 값은 객체로, 객체를 복사하면 값 자체가 아닌 주소가 복사된다.자바스크립트의 함수는 일급 객체이므로

(.) 점 연산자를 사용하는 경우는 객체의 프로퍼티 이름이 식별자 규칙을 따르는 경우 (예: objectName.propertyName)이고… 대괄호 연산자를 사용하는 경우는 프로퍼티 이름이 변수에 저장되어 있거나, 계산된 결과를 통해 프로퍼티에 접근해야 할 때 주로

우리는 앞서 자바스크립트 엔진은 코드의 값이 "할당"되는 실행 시점에 해당 값의 데이터 타입 을 보고 그에 맞는 크기의 메모리를 할당 한다고 했다.(동적 타이핑) 이렇게 중요한 데이터 타입은 총 7가지 종류(숫자,문자열,불리언,undefined, null, symbol

writed by hanryu1109스코프(유효범위)var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다.스코프는 변수 그리고 함수와 깊은 관련이 있다.ex)함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸

오늘은 전역 변수가 어떤 상황에 위험한지에 대한 부분을 다뤄볼 것인데 가장 먼저는 변수에는 "생명주기"가 있음을 짚고 넘어갈 예정이다.변수에게는 생성되고 소멸되는 생명 주기라는 것이 있다. 이 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히

중복 선언 시 초기화 문 유무에 따라 다르게 동작함초기화 문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작초기화 문이 없는 변수 선언문은 무시된다.var 키워드로 선언한 변수는 중복 선언이 가능var 키워드로 선언한 변수는 오직 함수의

먼저 호이스팅이란 해당 변수 선언문이 자신의 스코프의 가장 선두로 올라가는 현상을 의미하는데 var는 호이스팅 현상과 함께 undefined로 동시 초기화되어 선언문 이전에 참조가 일어나도 오류가 안나지만 let과 const는 참조오류가 난다. 이것이 마치 호이스팅이

자바스크립트의 내부 슬롯(Internal Slot)과 내부 메서드(Internal Method)는 ECMAScript 명세에서 사용되는 개념으로, 엔진이 어떻게 동작하는지를 설명하는 데 사용된다. 이들은 자바스크립트 엔진의 내부 동작 방식을 추상화하여 표현한 것이며,

들어가며... 10장 "객체 리터러" 단원에서는 객체 리터럴에 의한 객체 생성 방식에 대해서 살펴보았는데 객체는 객체 리터럴 이외에도 다양한 방법으로 생성할 수 있다. 이번에는 다양한 객체 생성 방식 중에서 생성자 함수를 사용한 객체를 생성하는 방식에 대해서 살펴보겠

일급 객체 다음 조건을 만족하는 객체를 일급 객체라 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 👉 자바스크

프로토타입 체인 me 객체의 프로토타입은 Person.prototype이고, Person.prototype의 프로토타입은 Object.prototype이다. 프로토타입의 프로토타입은 언제나 Object.prototype이다. 자바스크립트는 객체의 프로퍼티(메서드

1️⃣ 객체지향프로그래밍(OOP)에 대해서 자세하게 설명해주세요. OOP는 개발 패러다임 중 하나로, 현실 세계의 개념과 객체를 모델링하여 프로그램을 구축하는 방법이다. 각 객체는 객체 고유의 특징이나 성질을 나타내는 "속성=프로퍼티"과 객체의 기능을 나타내는 "메소드

Strict Mode가 무엇인가? 오류를 줄이기 위해 엄격하게 자바스크립트 코드를 작성하도록 허용하는 모드이다. 문법적 오류, 잠재적인 오류에 대해 명시적인 에러를 발생시킨다. Strict Mode에 대한 조언 전역에 strict mode를 적용하지 말자. stri

writed by hanryu1109 1. 자바스크립트 객체의 분류 표준 빌트인 객체 (Native objects or Built-in objects or Global Objects) ECMAScript 사양에 정의된 객체 애플리케이션 전역의 공통 기능을 제공 자바스크립트 실행 환경(브라우저 또는 Node.js 환경과 관계없이 언제나 사용)...

this란 무엇이며 왜 쓰는가? this를 왜 쓰는지에 대해서 이해하기 위해서는 먼저 객체에 대해서 다시 한번 생각해 보아야 한다. 객체란 상태를 나타내는 "프로퍼티"와 동작을 나타내는 "메서드"를 하나의 논리적인 단위로 묶는 자료구조이다. 동작을 나타내는 메서드

writed by dikum98 🤔 실행 컨텍스트의 생성과 식별자 검색 과정 전역 객체 생성 전역 코드 평가 (pre-populated) 전역 실행 컨텍스트 생성 전역 렉시컬 환경 생성 (스코프와 식별자 관리) 전역 환경 레코드 생성 객체 환경 레코드 생성 (var) 선언적 환경 ...

클로저의 정의 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다. 🤔 렉시컬 환경이 뭐였더라?? 렉시컬 스코프는 아는데... 렉시컬 환경 렉시컬 환경은 실행 컨텍스트의 컴포넌트이다. 변수, 함수 선언 및 스코프 체인에 대한 정보를 저장하는 역할을 수행한다

ES6 이전의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 아래 코드를 보자. 함수 표현식으로 정의하고 1을 리턴하는 함수 foo 이다. 그냥 foo()로 쓰면 일반 함수를, new 연산자와 같이 호출하면 생성자 함수를, 새로운 객체를 선언할 때 메서드로 호출

여러 개의 값을 순차적으로 나열한 자료 구조배열이 가지고 있는 값을 요소라고 한다자바스크립트의 모든 값은 배열의 요소가 될 수 있다.배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다.배열은 객체지만 일반 객체와는 구별된다.배열의 장점은 처

writed by hanryu1109원주율을 PI 값을 반환한다.Math.abs 메서드는 인수로 전달된 숫자의 절대값을 반환한다.절대값은 반드시 0 또는 양수이어야 한다.Math.round 메서드는 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다.Math.

표준 빌트인 객체인 Date는 날짜와 시간(연, 월, 일, 시, 분, 초, 밀리초)을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수다.현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정된다.UTC(협정 세계시) : 국제 표준시로 GMT(그리

정규 표현식(Regular Expression, 줄여서 Regex 또는 Regexp)은 문자열에서 패턴을 찾거나 조작하기 위해 사용되는 형식 언어이다. 정규 표현식은 문자열 검색, 대체, 추출 등 다양한 작업에 유용하며, 다양한 프로그래밍 언어와 텍스트 편집기에서 지원

표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 기존에 string은 원시값이다. 원시 값은 객체가 아닌 값처럼 간주되는데 new 연산자와 함께 호출할 경우 해당 원시값을 활용한 프로퍼티와 메서드를 제공할 수 있는

writed by <a href="심벌은 변경 불가능한 원시 타입의 값입니다. 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용합니다.프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값입니다.심벌 값은 Symbo

DOM 조작이란 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다. DOM 조작에 의해 새로운 DOM을 추가하거나 삭제하게 되면 리플로우와 리페인트가 발생한다.Repaint : 웹 페이지의 렌더링 엔진이 해당 엘리먼트의 새로운 스타

writed by hanryu1109🔥 용어 설명이벤트 핸들러: 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 이때 이벤트가 밸생했을 때 호출될 함수를

writed by johan자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 함수를 실행할 수 있는 창구가 단 하나이며, 2개 이상의 함수를 동시에 실행할 수 없다는 것을 의미한다.이처럼 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글

Ajax란? 지난 시간에는 자바스크립트는 싱글 스레드 언어인데 어떻게 멀티 스레드 언어인 것처럼 비동기적으로 동작하는지에 대해서 배웠었다. 그 원인은 브라우저 자체에서 지원하는 이벤트 루프라는 원리 떄문에 가능하다는 것을 다시 상기시켜보면 좋을 것 같다. 이 Asyn

자바스크립트에서 비동기 작업을 다루기 위한 객체비동기 작업을 더 효율적으로 다룰 수 있게 해준다.전통적인 콜백 패턴이 가진 콜백지옥의 가독성 문제와 에러 처리가 곤란하다는 단점을 보완비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를 외부로 반환하거나 상위 스코

ES6에서 도입된 제너레이터란 함수인데 특수한 함수이다. 어떤 특수한 동작을 한느냐? 바로 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다는 특징을 가진 함수이다. 일반 함수라면 함수 외부에서 값을 주입받은 매개변수로 함수 내부에서 어떤 로직을 실행시킨 뒤 얻은