자바스크립트 핵심 가이드

ES6부터 let과 const가 도입되었고, 필요에 따라서 변수를 정의하는 것이 용의해졌다.이 포스트에서는 var, const, let의 차이점을 다뤄볼 것이다.var키워드로 선언된 변수는 함수 스코프의 종속된다. 반면 for 루프내에서 var 키워드로 변수를 선언하면

ES6에서 뚱뚱한 화살표(⇒)를 사용해서 함수를 선언하는 방법인 화살표 함수가 처음 도입되었다. ES5에서 일반적으로 함수를 선언하는 방법은 다음과 같았다.이는 화살표 함수 문법으로 바꾸면 다음과 같다매개변수가 하나만 있으면 괄호를 생략하고 다음과 같이 쓸 수도 있다.

ES6에서 뚱뚱한 화살표(⇒)를 사용해서 함수를 선언하는 방법인 화살표 함수가 처음 도입되었다. ES5에서 일반적으로 함수를 선언하는 방법은 다음과 같았다.이는 화살표 함수 문법으로 바꾸면 다음과 같다매개변수가 하나만 있으면 괄호를 생략하고 다음과 같이 쓸 수도 있다.

ES6 이전에는 함수 인수의 기본값을 설정하는 것이 쉽지 않았다. 다음 예를 살펴보자.예제의 함수는 city, country, continent 세 가지 인수를 취한다. 함수 본문에서 country 또는 continent가 정의되지 않았는지 확인하고, 정의되지 않은 경

ES6 이전에는 템플릿 문자열이라고 부르던 것을 ES6에 와서는 템플릿 리터럴이라고 부르게 되었다. ES6에서 문자열을 삽입하는 방식이 어떻게 변경되었는지 살펴보자.ES5에서는 문자열을 삽입하기 위한 코드를 다음과 같이 작성했다.ES6에서는 백틱(\`)을 사용하여 코드

자바스크립트에는 문자열에 사용할 수 있는 많은 메서드가 있다. 그중 몇 가지를 살펴보자.문자열에서 지정된 값이 처음 나타나는 위치를 반환한다.문자열의 지정된 부분을 새 문자열로 반환한다.문자열 내의 모든 문자를 대문자로 바꾼다.문자열 내의 모든 문자를 소문자로 바꾼다.

MDN은 디스트럭칭을 다음과 같이 정의한다.디스트럭처링 할당 문법은 배열의 값 또는 객체의 소것을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식이다.먼저 객체의 디스트럭처링부터 알아보자.예전에는 객체에서 변수를 생성하려면 다음과 같은 방식으로 코드를 작성

ES6는 새로운 유형의 루프인 for of 루프를 도입했다. 이를 어떻게 사용하는지 살펴보자.배열의 각 원소에 대해 반복하려면 보통 다음과 같이 구형하곤 했다.이것은 매 반복 시 i가 fruits.length보다 작은 i의 값을 1씩 증가시키는 일반적인 루프이다. i가

ES6는 새로운 유형의 루프인 for of 루프를 도입했다. 이를 어떻게 사용하는지 살펴보자.배열의 각 원소에 대해 반복하려면 보통 다음과 같이 구형하곤 했다.이것은 매 반복 시 i가 fruits.length보다 작은 i의 값을 1씩 증가시키는 일반적인 루프이다. i가

MDN은 스프레드 문법을 다음과 같이 설명한다.스프레드 문법을 사용하면 0개 이상의 인수 또는 원소가 예상되는 위치에서 배열 표현식 또는 문자여로가 같은 이터러블 항목을 확장하거나 0개 이상의 키/값 쌍이 예상되는 위치에서 객체 표현식을 확장할 수 있다.여기서 …이 바

이번 장에서는 ES6에서 객체 리터럴 표기법이 얼마나 다양하게 개선했는지 살펴보자.다음과 같은 코드가 있다고 하자.이 코드를 사용하여 객체 리터럴을 만들고 싶다면 일반적으로 다음과 같이 할 것이다.ES6에서는 다음과 같이 단순화할 수 있다.변수들의 이름이 코드 내의 속

ES6에서 심벌이라는 새로운 원시 자료형이 추가되었다. 심벌은 무엇일까? 그리고 어떤 역할을 하는 것일까?심벌은 항상 고유하며 객체 속성의 식별자로 사용할 수 있다.다음과 같은 코드를 통해 심벌을 생성할 수 있다.심벌은 항상 고유하다고 했는데, 같은 값을 가진 새로운

MDN에서는 클래스를 다음과 같이 설명한다.클래스는 일차적으로 자바스크립트의 기존 프로토타입기반 상속에 대한 문법적 설탕이다. 클래스 문법이 자바스크립트에 새로운 객체 지향 상속 모델을 도입하는 것은 아니다.클래스를 살펴보기 전에 프로토타입 상속을 먼저 다시 복습해보자

자바스크립트는 동기적으로 작동한다. 즉, 각 코드 블록이 이전 블록 이후에 실행된다.잠시 다음과 같은 코드를 보자.이 예에서는 fetch를 사용하여 어떤 URL에서 데이터를 가져온다.(이해를 돕기 위해 그러는 것으로 가정)동기 코드의 경우, 우리는 fetch 작업이 실

자바스크립트는 동기적으로 작동한다. 즉, 각 코드 블록이 이전 블록 이후에 실행된다.잠시 다음과 같은 코드를 보자.이 예에서는 fetch를 사용하여 어떤 URL에서 데이터를 가져온다.(이해를 돕기 위해 그러는 것으로 가정)동기 코드의 경우, 우리는 fetch 작업이 실

MDN에서는 프록시를 다음과 같이 정의한다.프록시 객체는 기본 작업(예 : 속성 조회, 할당, 열거, 함수 호출 등)에 대해 사용자 지정 동작을 추가로 정의하는 데 사용된다.프록시를 생성하는 방법은 다음과 같다.target은 객체, 함수, 다른 프록시 등 무엇이든 가능

세트란 어떠한 자료형의 값이든 각 원소를 고유하게 저장하는 객체이다.마지막 부분에서 “Dad”를 다시 추가하려고 했지만, Set는 고유한 값만 가질 수 있기 때문에 동일하게 유지됨을 볼 수 있다.Set을 계속 사용해보면서 어떤 메서드들이 있는지 살펴보겠다.코드를 보면

ES2016에서는 두 가지 기능이 새롭게 도입되었다.Array.prototype.includes()지수 연산자(\*\*)includes() 메서드는 배열에 특정 원소가 포함되어 있으면 true를 반환하고 그렇지 않으면 false를 반환한다.includes()에 인덱스를

ES2017에서는 많은 멋진 기능이 새롭게 도입되었다. 두 장에 걸쳐 살펴보겠다.문자열 끝 부분 또는 시작 부분에 패딩을 추가할 수 있다. 각각 padEnd()와 padStart()를 쓴다.여기서 패딩으로 6을 지정했는데 두 경우 1개의 공간만 확보된 이유는 무엇일까?

ES2017에서 anync await 키워드를 이용한 새로운 프로미스 작업 방식이 도입되었다.새로운 문법을 살펴보기 전에 프로미스를 사용하는 일반적인 방식을 간단히 리뷰해보자.이것은 깃허브 API로 특정 깃허브 사용자에 대한 정보를 가져와서 콘솔에 출력하는 매우 간단한

Array.prototype.flat()은 지정한 깊이까지 배열을 재귀적으로 평면화한다. 깊이 인수가 지정되지 않으면 1이 기본이다. Infinity로 지정하면 모든 중첩 배열을 평면화할 수 있다.Array.prototype.flatMap()은 .flat()과 동일한

ES202에는 새롭고 흥미로운 변경 사항이 많이 포함되어 있다.현재 모든 브라우저가 이러한 기능을 지원하는 것은 아니므로 최신 버전의 크롬 또는 파이어폭스를 사용하여 예제를 테스트하는 것이 좋다. 해당 기능이 지원되지 않는 프로젝트에서 사용하려면 바벨같은 컴파일러가 필

타입스크립트가 자바스크립크 개발자에게 필수적인 기술은 아니지만, 대규모 프로젝트에서 팀으로 작업하는 경우 매우 유용하다고 할 수 있다.이미 알고 있듯이 자바스크립트는 강타입 언어가 아니므로 변수 선언 시 자료형을 정의할 필요가 없다.이 때문에 더 유연하고 다른 자료형의