Javascript Deep dive (完)

연산자는 하나 이상의 표현식을 대상으로 한다.연산자 산술, 할당, 비교, 논리, 타입, 지수연산 등을 수행해 하나의 값을 만든다.피연산자는 값으로 평가될 수 있는 표현식이어야한다.피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.서두

반복문은 조건식의 평과 결과가 참인 경우 코드블록을 실행하고, 그 후 조건식을 다시 평가하여 실행 여부를 결정한다.위 반복문의 정의를 상기하면 구구단 함수가 어떻게 작성되는지 어렵지 않게 느껴질 것이다.만약 코드블럭을 탈출하지 않기 원한다면, continue를 사용할

parseInt,parseFloat 함수를 사용하는 방법 (문자열만 사용 가능)(+) 단항 산술 연산자를 이용하는 방법( \* ) 산술 연산자를 이용하는 방법!부정 논리 연산자를 두 번 사용하는 방법

자바스크립트를 구성하는 원시 값을 제외한 함수,배열,정규표현식 값은 객체다.원시 타입은 하나의 값만 나타내지만 객체 타입은 다양한 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다.또한 원시 값은 변경 불가능한 값이지만 객체는 변경 가능한 값이

객체 리터럴은 평가될 때마다 객체를 생성한다. 따라서 person1 변수와 person2 변수가 가리키는 객체는 다른 메모리에 저장된 별개의 객체이기에 false이다.하지만 프로퍼티 값을 참조하는 name은 값으로 평가될 수 있는 표현식이다. 두 표현식 모두 원시 값

함수는 객체지만 일반 객체와는 다르다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 그리고 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 갖는다.함수 선언문함수 표현식Function 생성자 함수화살표 함수

2번째 예제에서 에러가 발생하는 이유는 자바스크립트 엔진이 암묵적으로 수행하는 세미콜론 자동 삽입 기능에 의해 함수 선언문이 끝나는 위치, 즉 함수 코드 블록의 닫는 중괄호 뒤에 ";"이 암묵적으로 추가되기 때문이다.(아래와 같음)즉시 실행 함수도 일반 함수처럼 값을

//for문에서 선언한 i는 전역 변수다. //이미 선언된 전역 변수 i가 있으므로 중복 선언된다.for(var i = 0; i < 5; i++){ console.log(i) // 0 1 2 3 4}console.log(i) // 5

브라우저 환경에서 전역 객체는 window이므로 브라우저 환경에서 var 키워드로 선언한 전역 변수는 전역 객체 window의 프로퍼티다.전역 객체 window는 웹페이지를 닫기 전까지 유효하다. 따라서 브라우저 환경에서 var 키워드로 선언한 전역 변수는 웹페이지를

for문의 변수 선언문에서도 var 키워드로 선언한 변수 또한 전역 변수가 된다.이처럼 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다.코드 내에서 어떤 의미로 0.1을 사용했는지 명확히 알기 어렵기 때문에 가독성이 좋지 않다. 또한 세율을 의미하는 0.1은 쉽

console.log(Object.getOwnPropertyDescriptor(person,'name')//{value:"Lee", writable: true, enumerable: true, configurable: true}person 객체의 firstName과 l

const obj = { foo } ;obj.foo(); // obj//생성자 함수로서 호출const inst = new foo(); // inst내부 메서드 \[Call]을 갖는 함수 객체를 callable이라 하며, 내부 메서드 \[Construct]를 갖는 함수

// proto는 Object.prototype 객체의 접근자 프로퍼티다.// 함수는 Object.prototype 객체로부터 proto접근자 프로퍼티를 상속받는다.console.log(Object.getOwnPropertyDescriptor(Object.prototy

Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는 프로토타입 Circle.prototype으로부터 getArea 메서드를 상속받는다.Circle 생성자 함수가 생성하는 모든 인스턴스는 Circle.prototype에 의해 하나의 getArea를

따라서 strict mode는 즉시 실행 함수로 감싼 스크립트 단위로 적용하는 것이 바람직하다.

// string 생성자 함수에 의한 String 객체 생성const strObj = new String("Lee"); // String {"Lee"}// string 생성자 함수를 통해 생성한 strObj객체의 프로토타입은// String.prototype이다.con

console.log(circle.getDiameter()); // 10일반 함수 호출메서드 호출생성자 함수 호출Function.prototype.apply/call/bind 메서드에 의한 간접 호출

전역 코드 : 전역에 존재하는 소스코드를 말하며 전역에 정의된 함수, 클래스 등의 내부코드는 포함되지 않는다.함수 코드 : 함수 내부에 존재하는 소스코드를 말한다. 함수 내부에 중첩된 함수,클래스 등의 내부 코드는 포함되지 않는다.eval 코드 : 빌트인 전역 함수인

function outerFunc(){ const x = 10; function innerFunc(){ console.log(x); // 10 } innerFunc();}outerFunc();outer 함수를 호출하면 outer 함수는 중첩 함수 inner

클래스 내의 모든 코드에서는 암묵적으로 strict mode가 지정되어 실행되며 strict mode를 해제할 수 없다.클래스는 함수로 평가된다.constructor는 클래스 내에서 1개만 존재할 수 있다.constructor는 생략할 수 있다.constructor를

obj.f() // 10var bar = obj.fbar() // undefined : undefined인 이유는 x가 전역변수로 존재하지 않기 때문이다.new obj.f() // f{}ES6의 메서드는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고

예를 들어, 메모리 주소 1000에서 시작하고 각 요소가 8바이트인 배열을 생각해보자.인덱스가 0인 요소의 메모리 주소 1000 + 0 8 = 1000인덱스가 1인 요소의 메모리 주소 1000 + 1 8 = 1008인덱스가 2인 요소의 메모리 주소 1000 + 2

Number 표준 빌트인 객체인 Number는 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. Number 생성자 함수 Number 생성자 함수에 인수를 전달하지 않고 new 연산자를 함께 호출하면 [[NumberData]]내부 슬롯에 0을 할당한

Math 표준 빌트인 객체인 Math는 수학적인 상수와 함수를 위한 프로퍼티,메서드를 제공한다. Math는 정적 프로퍼티와 정적 메서드만을 제공한다. Math 프로퍼티 Math.PI 원주율을 반환한다. Math 메서드 Math.abs 인수로 전달된 숫자의 절대값

Date 표준 빌트인 객체인 Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수이다. Date 생성자 함수 Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖는다. new Date() Date 생성

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.ES6 이전의 순회 가능한 데이터 컬렉션, 즉 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 각자 나름의

Set 객체는 중복되지 않는 유일한 값들의 집합(Set)이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. 중복을

대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만 웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML,CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다.이를 위

1

DOM 조작은 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것을 말한다. 이때 리플로우와 리페인트가 발생되므로 DOM 조작은 성능 최적화를 위해 주의해서 다루어야 한다.Element.prototype.innerHTML 프로퍼티는 sett

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 예를 들어 클릭,키보드입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다.만약 어플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶

DOM 요소는 저마다 기본 동작이 있다. 예를 들어 a요소를 클릭하면 href 어트리뷰트에 지정된 링크로 이동하고 checkbox 또는 ratio 요소를 클릭하면 체크 또는 해제된다.이벤트 객체의 preventDefault 메서드는 이러한 DOM 요소의 기본 동작을 중

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다.이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜스택)에 푸시되고 함수코드가 실행된다.함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거된다.다음 예제의 fo

promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스(Promise 객체)를 생성한다.ES6에서 도입된 promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다.Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를

ES6에서 도입된 제네레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수다.일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 즉 함수 호출자는 함수를 호출한 이후 함수 실행을 제어할 수 없다.제네레이터 함수

제네레이터를 사용해서 비동기 처리를 동기 처리처럼 동작하도록 구현했지만 코드가 장황해지고 가독성이 나빠졌다. ES8에서는 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await가 도입되었다.async/await는

에러가 발생하지 않는 코드를 작성하는 것은 불가능하다.따라서 에러는 언제나 발생할 수 있다.발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.try ...catch문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다.이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다.자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되

Webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러개)의 파일로 번들링 하는 모듈 번들러다.Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없다.그리고 여러 개의 자바스크립트 파일을

자바스크립트 Deep dive 1회독을 2달여 기간만에 끝마쳤다. ✌중간에 취업하신 스터디원과 스터디를 만들어준 스터디장님께서 끝까지 자리에 남아 다독여주셔서 무사히 완독할 수 있었던 것 같다.스터디 시작 전, 무작정 인강을 구매하고 따라치던 때가 있었다.~의 강의가