# Modern-Javascript-Tutorial

baedormann

프로퍼티 getter와 setter 객체의 프로퍼티는 두 종류로 나뉩니다. 데이터 프로퍼티(data property) 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티입니다. 데이터 프로퍼티 조작 방법에 대해선 모두 알고 계실 것이라 생각합니다. 접근자 프로퍼티(accessor property) 접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당합니다. 그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보입니다. getter와 setter 접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현됩니다. 객체 리터럴 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있습니다. getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행되고, setter 메서드는 o

baedormann

프로퍼티 플래그와 설명자 객체 프로퍼티 추가 구성 옵션 몇 가지를 알아봅시다. 프로퍼티 플래그 객체 프로퍼티는 값(value) 과 함께 플래그(flag)라 불리는 특별한 속성 세 가지를 갖습니다. writable – true: 값 수정 가능 / false: 읽기만 가능 enumerable – true: 반복문을 사용해 나열 가능 / false: 반복문 사용 불가 configurable – true: 프로퍼티 삭제나 플래그 수정 가능 / false: 프로퍼티 삭제와 플래그 수정 불가능 지금까지 해왔던 '평범한 방식’으로 프로퍼티를 만들면 해당 프로퍼티의 플래그는 모두 true가 됩니다. 이렇게 true로 설정된 플래그는 언제든 수정할 수 있습니다. 자 이제 본격적으로 프로퍼티 플래그에 대해 다뤄봅시다. 먼저 플래그를 얻는 방법을 알아보겠습니다. Object.getOwnPropertyDescriptor

baedormann

화살표 함수 다시 살펴보기 화살표 함수(arrow function)에 대해 다시 논의해보자. 화살표 함수는 단순히 함수를 ‘짧게’ 쓰기 위한 용도가 아니며, 몇 가지 독특하고 유용한 기능을 제공한다. 자바스크립트를 사용하다 보면 저 멀리 동떨어진 곳에서 실행될 작은 함수를 작성해야 하는 상황을 자주 만나게 된다. arr.forEach(func) – func는 forEach가 호출될 때 배열 arr의 요소 전체를 대상으로 실행된다. setTimeout(func) – func는 내장 스케줄러에 의해 실행된다. 기타 등등…. 이처럼 자바스크립트에선 함수를 생성하고 그 함수를 어딘가에 전달하는 것이 아주 자연스럽다. 그런데 어딘가에 함수를 전달하게 되면 함수의 컨텍스트를 잃을 수 있다. 이럴 때 화살표 함수를 사용하면 현재 컨텍스트를 잃지 않아 편리하다. 화살표 함수에는 'this

baedormann

함수 바인딩 사라진 ‘this’ 종종 this 정보가 사라지는 문제가 생길 수 있다. 객체 메서드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다. setTimeout을 사용한 아래 예시에서 this가 어떻게 사라지는지 살펴보자. this.firstName이 "John"이 되어야 하는데, 얼럿창엔 undefined가 출력된다. 이렇게 된 이유는 setTimeout에 객체에서 분리된 함수인 user.sayHi가 전달되기 때문이다. 위 예시의 마지막 줄은 다음 코드와 같다. 브라우저 환경에서 setTimeout 메서드는 조금 특별한 방식으로 동작한다. 인수로 전달받은 함수를 호출할 때, this에 window(Node.js 환경에선 타이머 객체)를 할당한다. 따라서 위 예시의 this.firstName은 **window.firstNa

baedormann

call/apply와 데코레이터, 포워딩 포워딩(forwarding)과 데코레이팅(decorating)에 대해서 알아보자. 코드 변경 없이 캐싱 기능 추가하기 연산 속도가 느리지만 결과는 안정적인 함수 slow(x)를 캐싱하는 예시를 살펴보자 slow() 안에서 캐싱을 처리하지 않고, 래퍼 함수*를 만들어 캐싱 기능을 구현하였다. *래퍼 함수 : 다른 함수를 감싸거나 래핑하여 추가적인 동작을 수행하거나 수정하는 함수 cachingDecorator같이 '인수로 받은 함수의 행동을 변경시켜주는 함수'를 데코레이터(decorator)라고 부른다. 모든 함수를 대상으로* cachingDecorator를 호출 할 수 있는데, 이때 반환되는 것은 캐싱 래퍼이다. 함수에 cachingDecorator**를 적용하기만 하면 캐싱이 가능한 함수를 원하는 만큼 구현할 수 있기 때문에 데코레이터 함수는 아주 유용하

baedormann

new Function 문법 함수 만드는 방법 세 가지 함수 표현식 함수 선언문 new Function 문법 new Function 문법은 잘 사용되진 않지만, 이 방법 외에는 대안이 없을 때 사용한다. 새로 만들어지는 함수는 인수 arg1...argN과 함수 본문 functionBody 로 구성된다. 인수 두 개가 있는 함수를 직접 만들어 보면서 new Function 문법에 대해 이해해보자. 기존에 사용하던 방법과 new Function을 사용해 함수를 만드는 방법의 가장 큰 차이는 런타임에 받은 문자열을 사용해 함수를 만들 수 있다는 점이다. 서버에서 코드를 받거나 템플릿을 사용해 함수를 동적으로 컴파일해야 하는 경우, 복잡한 웹 애플리케이션을 구현할 때와 같이 아주 특별한 경우에 new Function을 사용할 수 있다. 클로저 함수는 특별한 프로퍼티 **[[Enviro

baedormann

전역 객체 전역 객체를 사용하면 어디서나 사용 가능한 변수나 함수를 만들 수 있다. 전역 객체는 언어 자체나 호스트 환경에 기본 내장되어 있는 경우가 많다. 전역 객체는 브라우저 환경에선 window, Node.js 환경에선 global라고 부른다. = 각 호스트 환경마다 부르는 이름이 다르다. 전역 객체의 이름을 globalThis로 표준화하자는 내용이 최근에 자바스크립트 명세에 추가되었기 때문에 모든 호스트 환경이 이를 따라야 한다. Chromium 기반이 아닌 몇몇 브라우저는 아직 globalThis를 지원하진 않지만, 이에 대한 폴리필(polyfill)을 쉽게 만들 수 있다. (예시는 브라우저 기준으로 window를 사용) 전역 객체의 모든 프로퍼티는 아래와 같이 직접 접근할 수 있다. 브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역

baedormann

오래된 var var 특 1. 블록 스코프가 없다. var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프이다. 코드 블록이 함수 안에 있다면, var는 함수 레벨 변수가 된다. 오래 전의 자바스크립트에선 블록 수준 렉시컬 환경이 만들어지지 않았기 때문이다. 2. 변수의 중복 선언을 허용한다. 3. 선언하기 전에 사용할 수 있다. var 선언은 함수가 시작될 때 처리된다. 전역 변수라면 스크립트가 시작될 때 처리된다. 함수 또는 스크립트 내에서 var로 선언한 변수는 선언 위치와 상관없이 본문이 시작되는 지점에서 정의된다. 이렇게 변수가 끌어올려지는 현상을 '호이스팅(hoisting)'이라고 부른다. 선언은 호이스팅되지만 할당은 호이스팅되지 않는다. 즉, var로 선언한 변수는 범위 내의 어디서든 참조할 수 있지만, 변수에 무언가를 할당하기 전까진

baedormann

변수의 유효범위와 클로저 자바스크립트는 함수 지향 언어이다. > 함수 지향 언어란? > 코드 블록 코드 블록 {...} 안에서 선언한 변수는 블록 안에서만 사용할 수 있다. 용도는 특정 작업을 수행하는 코드를 한데 묶어두는 것이다. 블록 안엔 작업 수행에만 필요한 변수가 들어간다. 예시: 다른 코드블록이라면 let으로 같은 이름을 가진 변수를 선언 가능하다. 이미 선언된 변수와 동일한 이름을 가진 변수를 별도의 블록 없이 let으로 선언하면 에러가 발생한다. if, for, while 등에서도 마찬가지로 {...} 안에서 선언한 변수는 오직 블록 안에서만 접근 가능합니다. if 블록 밖에 있는 alert는 phrase에 접근할 수 없기 때문에 위 예시를 실행하면 에러가 발생한다. 이런 특징은 변수의 유효 범위를 블록 범위, 특히 if 분기문 범위로 한정시킬 수 있어서 아주 유용하

baedormann

나머지 매개변수와 스프레드 문법 상당수의 자바스크립트 내장 함수는 인자의 개수에 제약을 두지 않는다. 예시: Math.max(arg1, arg2, ..., argN) – 인수 중 가장 큰 수를 반환한다. Object.assign(dest, src1, ..., srcN) – src1..N의 프로퍼티를 dest로 복사한다. 이번 챕터에서는 이렇게 임의의(정해지지 않은) 개수의 인자를 받는 방법에 대해 알아볼 것이다. 또한 함수의 매개변수에 배열을 전달하는 방법에 대해서도 알아볼 것이다. 나머지 매개변수 ... 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수엔 제약이 없다. 함수 선언부의 매개변수는 두 개이지만, 함수 호출 시 다섯 개의 인자를 전달했다. 에러가 발생하지 않고, 반환 값은 처음 두 개의 인자만을 사용해 계산된다. 이렇게 여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 ...뒤에 붙여주면 함

baedormann

재귀(Recursion)와 스택(Stack) 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴이다. 문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있습니다. 이때 함수가 자기 자신을 호출할 수도 있는데, 이를 재귀 라고 부른다. 특정 자료구조를 다뤄야 할 때도 재귀가 사용된다. 두 가지 사고방식 x를 n 제곱해 주는 함수 pow(x, n)를 만들어보자. 반복적인 사고를 통한 방법: for 루프 재귀적인 사고를 통한 방법: 작업을 단순화하고 자기 자신(함수)을 호출함 재귀를 이용한 예시에서 pow (x, n)을 호출하면 아래와 같이 두 갈래로 나뉘어 코드가 실행된다. n == 1일 때 명확한 결괏값을 즉시 도출하므로 이를 재귀의 베이스(base)라고 한다. n == 1이 아닐 때 pow(x, n)은 x * pow(x, n - 1)

baedormann

구조 분해 할당 > 구조분해할당이란? 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 > > 반복을 줄이고 코드 가독성이 높아지는 등의 이점이 있다. 배열 분해하기 인덱스를 이용하지 않고도 변수에 이름과 성을 할당했다. split 등과 같은 반환 값이 배열인 메서드를 활용할 수도 있다. 쉼표와 공백을 사용하여 필요하지 않은 요소를 버릴 수 있다. 할당 연산자 우측엔 모든 이터러블이 올 수 있다. 할당연산자 좌측엔 할당할 수 있는 것이라면 무엇이든 올 수 있다. .entries()로 구조분해할당 반복하기(Map에서도 사용 가능) 변수 교환 트릭 '...'으로 나머지 요소 가져오기 배열 앞쪽에 위치한 값 몇 개만 필요하고 이후 나머지 값들은 한 군데에 모아서 저장하는 경우 변수 앞의 점 세 개(...)와 변수가 가장 마지막에 위치해야 한다 기본값 할당하고자 하는 변수의

baedormann

순회(Iteration) '순회(iteration)'에 대해서 알아보자. 쉬운 예시 반복(loop)과 순회(iteration)의 관계로 설명할 수 있다. 위 반복문에서 소괄호 내에는 초기식, 조건식, 증감식이 명시되어 있다. 이에 따라 코드블럭(중괄호 안의 코드)를 '반복'시킨다. 다른 반복문인 while, do...while문도 마찬가지이다. '코드블럭'을 조건에 따라 여러 번 실행하는 것이 반복(loop)이다. 위 예시에서는 초기식에 따라 i의 초기 값은 0이며, 조건식에 부합하면 코드블럭이 실행되고 증감식이 실행되어 i가 1이 된다. 이 때 각각의 실행 한 번을 순회(iteration)라고 할 수 있다. 조금 더 엄밀히 따지면 순회는 컬렉션(collection)의 각 항목(item)을 처리하는 것이다. > 컬렉션(collection) : 여러 데

baedormann

iterable 객체 반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체이다. > 배열을 일반화한 객체? > > 배열과 비슷한 형태와 기능을 가지면서도 내부 구현이 다른 객체. = 반복 가능한 객체(iterable objects) → Array, Map, Set 등은 물론이며 String도 반복 가능 이터러블이라는 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있다. 반대로 이터러블이 아닌 객체는 for...of을 적용할 수 없다. 하지만 이러한 객체가 어떤 것들의 컬렉션(목록, 집합 등)을 나타내고 있는 경우, for..of 반복문을 사용할 수 있다면 컬렉션을 순회하는데 유용할 것이다. 이것을 가능하게 해보자! Symbol.iterator for..of를 적용하기에 적합해 보이는 배열이 아닌 객체를 만들고 이 객체를 이터러블로 만들어보자! 예시의 객체 rang

baedormann

배열과 메서드 배열은 다양한 메서드를 제공한다. 요소 추가·제거 메서드 배열의 맨 앞이나 끝에 요소(item)를 추가하거나 제거 arr.push(...items) – 맨 끝에 요소 추가 arr.pop() – 맨 끝 요소 제거 arr.shift() – 맨 앞 요소 제거 arr.unshift(...items) – 맨 앞에 요소 추가 기본적인 메서드이다. 더욱 다양한 메서드를 알아보자. splice 배열에서 요소를 하나만 지우는 메서드 배열 역시 객체형에 속하므로 프로퍼티를 지울 때 쓰는 연산자 delete를 사용한다면? arr.splice()는 만능 스위스 맥가이버 칼 같은 메서드이다. 이 메서드를 사용하면 요소 추가, 삭제, 교체가 모두 가능하다. 문법은 다음과 같다. 매개변수 1 : 인덱스(index) - 조작을 가할 첫 번째 요소를 가리킴 매개변수 2 : **deleteC

baedormann

문자열 텍스트 형식의 데이터는 문자열에 저장된다. 다른 언어에서 '문자'형(1글자)과 '문자열'형(1글자 이상)을 구분하는 경우가 있는데 자바스크립트는 모두 '문자열' 형태로 저장한다. 또한 자바스크립트의 문자열은 페이지 인코딩 방식에 상관없이 항상 UTF-16 형식을 따른다. 따옴표 문자열은 작은따옴표, 큰따옴표, 백틱으로 감쌀 수 있다. 백틱은 백틱 내에 ${}로 감싸는 방법으로 표현식을 사용할 수 있다(템플릿 리터럴). 또한 여러 줄에 걸쳐 문자열을 작성할 수도 있다. 특수 기호 '\'(backslash character)은 이스케이프 문자(escape character)로도 불리며, 백슬래시로 시작하는 다양한 특수 문자가 있다. 이스케이프 문자는 특정 문자(', ", \ 등)의 기능을 피해 문자 그대로 읽기 위한 용도로 사용된다. 줄 바꿈 문자(newline character) '\n'을 사용하여 줄바꿈 기능을 수행할

baedormann

객체를 원시형으로 변환하기 객체를 연산 또는 출력하면 어떤 일이 일어날까? obj1 + obj2 obj1 - obj2 alert(obj) 이 모든 경우에 자동 형 변환이 일어난다. 객체는 원시값으로 변환되고, 그 후 의도한 연산이 수행된다. 객체는 논리 평가 시 무조건 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 일어난다. 객체 Date끼리 차감하면(date1 - date2) 두 날짜의 시간 차이가 반환된다. 문자형으로의 형 변환은 대개 alert(obj)같이 객체를 출력하려고 할 때 일어난다. ToPrimitive 특수 객체 메서드를 사용하면 숫자형이나 문자형으로의 형 변환을 원하는 대로 조절할 수 있다. 객체 형 변환은 세 종류로 구분되는데, 'hint’라 불리는 값이 구분 기준이 됩니다. 'h

baedormann

심볼형 자바스크립트 객체에서 프로퍼티 키로 사용할 수 있는 타입은 '문자형'과 '심볼형' 두 가지이다. 일반적으로는 문자형을 사용하지만 심볼형을 프로퍼티 키로 사용하는 경우를 알아보자. 심볼 '심볼(symbol)'은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. 변수의 개념을 떠올리면 쉽다. Symbol()을 사용하면 심볼값을 만들 수 있다. 심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다르다. 자바스크립트에선 문자형으로의 암시적 형 변환이 비교적 자유롭게 일어나는 편인데, 심볼형은 자동으로 타입이 변하지 않는다. 문자열과 심볼은 근본이 다르기 때문에 우연히라도 서로의 타입으로 변환돼선 안 되기 때문이다. 자바스크립트에선 '언어 차원의 보호장치(language guard)'를 마련해 심볼형이 다른 형으로 변환되지 않게 막아준다. 심볼을 반드시 출력해줘야 하

baedormann

옵셔널 체이닝 옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 user.address.street를 사용해 주소 정보에 접근하는 코드를 실행할 때 user, address, street 셋 중 하나라도 데이터가 없다면 에러가 발생할 수 있다. 또 다른 사례론 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생한다. 이런 문제들은 && 연산자를 사용하여 해결할 수 있다. 예시: 그런데 AND로 연결하는 방식은 코드가 길어져 가독성이 떨어진다. 옵셔널 체이닝의 등장 ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. user?.address로 주소를 읽으면 아래와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않

baedormann

new 연산자와 생성자 함수 객체 리터럴 {...} 을 사용하면 객체를 쉽게 만들 수 있다. 하지만 유사한 객체를 여러 개 만들어야 할 때에는 'new' 연산자와 생성자 함수를 사용하는 것이 좋은 선택이 될 수 있다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 다만 생성자 함수는 아래 두 관례를 따른다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. 예시: new User(...)를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작한다. 빈 객체를 만들어 this에 할당 함수 본문 실행. this에 새로운 프로퍼티를 추가해 this를 수정합니다. this 반환 예시를 이용해 new User(...)가 실행되면 무슨 일이 일어나는지 살펴 보자. 이제 let user = new User("보라")는 아래 코드를 입력한