모던 자바스크립트 튜토리얼 정복하기

모던 자바 스크립트 튜토리얼을 3개월 이내에 (더 빠르게 정복하는 것을 목표로 한다.) 정복하려 한다.본문에 써져 있는 내용을 그대로 가져오는 것이 아닌 내가 이해한, 혹은 이해하기 쉬운 방향으로 정리하려 한다.그러면 나중에 다시 정독을 하더라도 빠른 시간 내에 쉽게

소개 : https://ko.javascript.info/intro앞부분에는 자바스크립트란 무엇인가 개념정리를 했다.2) 매뉴얼과 명세서 : https://ko.javascript.info/manuals-specifications명세서: 어떤 내용을

앞전의 파트 1의 소개 부분의 남은 파트들은 코드 에디터들과 콘솔을 통해 에러를 알아보는 것들에 대한 내용이라 정리를 생략했다.

자바스크립트 기본 단원의 2단원은 [코드구조]로 세미콜론(;)의 쓰임과 주석처리, 주석처리의 단축키에 대해 다뤘다. 정독 했으나 정리는 불필요하다고 생각되어 링크 첨부로 대체한다. 파트1) 자바스크립트 기본 - 2) 코드구조

앞전의 4단원은 변수와 상수에 관한 내용으로 기억할만하다고 생각한 내용을 간략하게 요약하고 넘어간다. (해당 본문 링크: https://ko.javascript.info/variables) 변수명을 짓는 규칙으로 변수명 맨 앞에 숫자를 두면 안된다. 예약어 (ex.

7) 형변환 : https://ko.javascript.info/type-conversions문자형으로의 변환함수나 연산자에 전달되는 값들이 자동으로 적합한 자료형으로 변환되는 것을, 혹은 적합한 자료형으로 변환시키는 것을 (ex. String(값), Numb

학창시절 수학에 맥을 못춰서 지금도 수학이라면 별로 달갑지 않다. 나한테 계산을 시키는 것도 아니고 단순히 연산자 설명이 있지만 거부감이 드는 파트였다. 거부감과는 별개로 내용은 물론 유익하며 이해하기 쉬우면서도 상세하게 설명 되어 있고 필수로 알아야 할 내용이다!!매

9) 비교 연산자 : https://ko.javascript.info/comparison 비교 연산자는 수학에서 쓰이는 것과 같이 >, =, <= 가 있고 같다는 의미로 ==, ===, 같지 않다는 의미로 !=, !== 가 있다. 비교 연산자의 반환 값은 Bo

뜸했다. 읽은 내용들을 블로그에 정리해가며 공부하려 하니 전체 내용을 정리하려 들어서 시간이 너무 오래걸려 내용을 읽으면서 모르는 부분들만 노트에 정리 그 정리 내용을 다시 옮기는 방식으로 학습 방법을 바꿨다.그동안은 노트에 내용을 적을 시간이 안 돼 일단 내용을 쭉

논리연산자 파트 링크: https&#x3A;//ko.javascript.info/logical-operators논리연산자에는 ||(OR), &&(AND), !(NOT) 이렇게 세 연산자가 있다. Boolean 타입만을 다룰 것 같은 논리연산자지만 피연산자로 Boolea

앞부분의 멘트들이 줄어들었죠? 조급함을 느낀 것입니다.null 병합 연산자 '??' 파트 링크 : https&#x3A;//ko.javascript.info/nullish-coalescing-operator최근 추가된 문법으로 구식 브라우저는 폴리필이 필요하다.null

While과 for 반복문 링크 : https://ko.javascript.info/while-for 이터레이션 (iteration) : 반복문이 한 번 실행되는 것을 iteration이라고 한다. 세 번 반복문이 돌아가면 해당 반복문이 세 번의 이터레이션을 만드는

switch문 링크: https&#x3A;//ko.javascript.info/switch각 case 마다 break; 를 쓰지 않으면 switch 조건에 부합하는 case를 만난 후에도 나머지 case들 까지 전부 실행된다.코드가 같은 case문은 한데 묶을 수 있습

함수 파트 링크 : https&#x3A;//ko.javascript.info/function-basics함수의 주요 용도중 하나는 중복 코드 피하기이다. 변수는 연관되는 함수내에 선언, 전역 변수는 되도록 사용하지 않는 것이 좋다. 다만, 프로젝트 전반에 사용되는 데이

함수 표현식 파트 링크 : https&#x3A;//ko.javascript.info/function-expressions자바스크립트에서 함수는 '특별한 동작을 하는 구조'로 취급되지 않고 동작을 나타내는 값으로 취급된다.따라서 값을 변수에 할당하는 것처럼 함수도 할당

크롬으로 디버깅하기 링크 : https&#x3A;//ko.javascript.info/debugging-chrome1) 크롬 데브툴 좌측의 번호(줄번호)를 클릭하면 그 줄이 중단점이 된다.중단점은 말 그대로 자바스크립트가 실행되다가 멈추는 지점을 말한다. 이 중단점을

코딩스티일 링크 : https&#x3A;//ko.javascript.info/coding-style함수명과 파라미터 괄호 사이에 띄어쓰기 X파라미터와 파라미터 괄호 사이에 띄어쓰기 O파라미터 괄호 닫고 같은 줄에 중괄호 열기. (이집션(Egyptian) 스타일)연산자

주석 파트 링크 : https&#x3A;//ko.javascript.info/comments'이 코드는 ~와 ~을 수행한다' 같은 설명형 주석이 많으면 안된다.코드 자체만으로 코드가 무슨 일을 하는지 쉽게 이해할 수 있어야 한다. (알고 있지만 그게 쉽지 않다...)리

닌자코드 파트 링크 : https&#x3A;//ko.javascript.info/ninja-code닌자코드라는 말을 보고 너무 궁금했다... 닌자코드라니 여기저기 숨어서 기능을 하는 코든가?? 라는 생각을 했는데... 굉장한 반어법을 담고 있는 파트였다.닌자코드란 무림

테스트 자동화와 Mocha 링크 : https&#x3A;//ko.javascript.info/testing-mocha테스팅 자동화는 테스트 코드가 실제 동작에 관여하는 코드와 별개로 작성되었을 때 가능하다.테스트 코드를 이용하면 함수를 다양한 조건에서 실행해 볼 수 있

폴리필 파트 링크 : https&#x3A;//ko.javascript.info/polyfills트랜스파일러로 모던 자바스크립트를 구표준을 준수하는 코드로 변환해준다.웹팩과 같은 모던 프로젝트 빌드시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 작동시켜준다.새로운

객체: 기본 챕터의 객체 파트 링크 : https&#x3A;//ko.javascript.info/object자바스크립트의 자료형 중 하나의 데이터(문자열, 숫자 등)만 담을 수 있는 것을 '원시형(primitive type)'이라고 부른다. 객체를 제외한 자료형들이 원

참조에 의한 객체 복사 파트: https&#x3A;//ko.javascript.info/object-copy원시값에는 값들이 그대로 저장, 할당, 복사 되고 객체에는 값들이 참조에 의해 저장되고 복사된다.만약 변수에 객체를 저장하면 객체 그대로 저장되는 것이 아니라 객

가비지 컬렉션 파트 링크 : https://ko.javascript.info/garbage-collection 가비지 컬렉션 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지한다. 더이상 쓰지 않을 것들은 자바스크립트가 메모리 관리를 통해 찾아내서 삭

메서드와 this 파트 링크 : https://ko.javascript.info/object-methods 메서드 위처럼 객체의 프로퍼티에 할당된 함수를 메서드라고 한다. 또 프로퍼티에 바로 함수를 선언하는 방법 외에 이미 선언된 함수를 프로퍼티에 할당하는 방법도

new 연산자와 생성자 함수 파트 링크 : https://ko.javascript.info/constructor-new 생성자 함수 **'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. ** 생성자 함수와 일반 함수는 기술적인

옵셔널 체이닝 '?.' 파트 링크 : https&#x3A;//ko.javascript.info/optional-chaining옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.a 프로퍼티를

심볼형 파트 링크 https://ko.javascript.info/symbol 심볼 자바스크립트는 객체 프로퍼티 키로 문자형과 심볼형만을 허용한다. 심볼(symbol)은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. Symbol()을

객체를 원시형으로 변환하기 파트: https://ko.javascript.info/object-toprimitive 객체를 원시형으로 변환하기 객체끼리 더하거나 빼는 산술 연산을 하거나 alert 메서드로 객체를 출력하면 무슨 일이 발생할까? => 자동 형 변환이

원시값의 메서드 파트 링크 : https&#x3A;//ko.javascript.info/primitives-methods원시값은 객체가 아니다!! 당연히 아니라고 생각하지만 둘의 차이점에 대해서 다루고 있다.원시값은 원시형 값이고 그 종류로는 문자(string), 숫자

숫자형에는 number와 BigInt가 있다. (BigInt는 잘 쓰이지 않아 별도의 챕터에서 다룬다)0을 많이 사용하면 헷갈리기 때문에 e를 사용한다.자바스크립트에서는 숫자 옆에 'e'를 붙이고 0의 개수를 그 옆에 쓰면 숫자 길이를 줄일 수 있다. ex) 1e9 =

문자형 파트 링크 : https&#x3A;//ko.javascript.info/string자바스크립트에서 문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따른다.자바스크립트에서 따옴표의 종류 중 가장 눈에 띄는 것은 백틱(\`\`)이다.백틱으로는 우리가

배열 파트 링크 : https&#x3A;//ko.javascript.info/array순서가 있는 요소들을 저장하기에 객체만으로는 무리가 있다.순서가 있는 컬렉션을 저장할 때는 '배열'이라는 자료구조를 쓴다.배열은 대괄호와 new 생성자를 사용해서 선언할 수 있다.대괄

배열과 메서드 파트 링크 : https://ko.javascript.info/array-methods 요소 추가·제거 메서드 배열의 맨 앞이나 끝에 요소를 추가, 제거하는 메서드는 앞서 push, pop, shift, unshift를 봤다. 위 네가지 메서드 외에

iterable 객체 파트 링크 : https://ko.javascript.info/iterable iterable 객체 반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체로 이터러블 이라는 개념을 사용하면 어떤 객체에든 for~of 반복문을 적용할

맵과 셋 파트 : https://ko.javascript.info/map-set 맵 맵(Map)은 key, value 형태로 값을 저장하는 자료구조로 객체와 차이점이 있다면 맵의 key에는 다양한 자료형이 올 수 있다. 맵에는 다음과 같은 주요 메서드와 프로퍼티가

위크맵과 위크셋 파트 링크 : https://ko.javascript.info/weakmap-weakset 자바스크립트 엔진은 도달 가능한 (그리고 추후 사용될 가능성이 있는) 값을 메모리에 유지한다. (참고: 가비지컬렉션 https://ko.javascript.in

keys(), values(), entries()를 사용할 수 있는 자료구조는 다음과 같습니다. Map Set Array 일반 객체엔 다음과 같은 메서드를 사용할 수 있습니다. Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다. Object.v

구조 분해 할당 파트 https&#x3A;//ko.javascript.info/destructuring-assignment할당 할 값들 중 넘어가고 싶은 것은 빈 칸으로 둔다.할당 연산자 우측엔 배열뿐 아니라 모든 이터러블(반복 가능한 객체)이 올 수 있다.즉, 구조

Date 객체와 날짜 https&#x3A;//ko.javascript.info/datenew Date() 객체는 인수에 여러가지 값이 올 수 있다.인수 없이 호출하면 현재 날짜와 시간이 저장된 Date 객체가 반환된다.new Date(milliseconds) - UTC

JSON과 메서드 : https&#x3A;//ko.javascript.info/jsonJSON.stringify : 객체 => JSONJSON.parse : JSON => 객체JSON 형식에는 작은 따옴표나 벡틱은 사용할 수 없다. 쌍따옴표(")만 사용할 수 있다.주의

재귀와 스택 https&#x3A;//ko.javascript.info/recursionpow (2, 4)를 계산하려면 아래와 같은 재귀 단계가 차례대로 이어진다.pow(2, 4) = 2 \* pow(2, 3)pow(2, 3) = 2 \* pow(2, 2)pow(2, 2

2) 나머지 매개변수와 전개문법 https&#x3A;//ko.javascript.info/rest-parameters-spread여기서 ...c 는 함수 호출 시 들어온 인수들 중 a, b를 제외한 나머지 인수를 담은 배열이다.기존 문법으로는 arguments 문법이