# Modern JavaScript

juheesvt

💡 해당 글은 모던 자바스크립트 튜토리얼을 보고 재정리한 글입니다 자바스크립트 기본 변수와 상수 var, let, const를 사용해 변수를 선언할 수 있다. 선언된 변수엔 데이터를 저장할 수 있다. let – 모던한 변수 선언 키워드 var – 오래된 변수 선언 키워드, 잘 사용하지 않음, ( let과의 미묘한 차이점 존재, scrope 차이) const – let과 비슷하지만, 변수의 값을 변경할 수 없음 변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 함 자료형 자바스크립트에는 여덟 가지 기본 자료형이 존재 숫자형 : 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용. (정수의 한계 → $±2^{53}$) bigint : 길이 제약 없이 정수를 나타낼 수 있음 (끝에 n) string : 빈

dnwndalsrl

14.1 변수의 생명 주기 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 그리고 언젠가 소멸한다. 즉 변수는 생성되고 소멸되는 생명 주기가 있다. > # 14.2 전역 변수의 문제점 암묵적 결합 전역 변수를 선언한 의도는 전역, 즉 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이며, 이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용하는 것이다. 즉 변수의 스코프가 크면 클수록 코드의 가독성이 나빠지며 위험성도 높아진다 긴 생명 주기 전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 기간 소비하고, 전역 변수의 상태를 변경할 수 있는 시간도 길고 기회도 많다. 스코프 체인 상에서 종점에 존재 전역 변수는 스코프 체인 상에서 종점에 존재한다. 즉 전역 변수의 검색 속도가 가장 느리다 네임스페이스 오염 자바스크립트의 가장 큰 문제점중

dnwndalsrl

13.1 스코프란? 유효범위라는 의미이다. 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고, 함수 몸체 외부에서는 참조할 수 없듯이. 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프라고 한다. > # 13.2 스코프의 종류 코드는 전역과 지역으로 구분할 수 있으며, 변수는 자신이 선언된 위치에 따라 전역 스코프, 지역 스코프를 갖는다. > # 13.3 스코프 체인 함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다. 스코프가 계층적으로 연결된 것을 스코프 체인이라 한다. > # 13.4 함수 레벨 스코프 지역 스코프를 다른 말로 정리하면, 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 의미로 정리가 된다. 함수 몸체만이 아니라 모든 코드 블록이 지역 스코프를 만든다는 특성을 블록 레벨

dnwndalsrl

12.1 함수란? 함수는 자바스크립트를 정확히 이해하고 사용하기 위해 피해갈 수 없는 핵심 중의 핵심이다. 수학의 함수가 입력을 받아 출력을 내보내듯이, 함수도 마치 재료를 투입받아 제품을 생산하는 기계와 같다. > # 12.2 함수를 사용하는 이유 함수는 필요할 때 여러 번 호출 가능하다. 즉 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하기 때문에, 코드의 재사용이라는 측면에서 매우 유용하다. 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높이는 효과가 있다. 함수는 객체 타입의 값이므로, 이름(식별자)을 붙일 수 있다. 변수와 마찬가지고 자신의 역할을 잘 설명해야하는 이름으로 작성해야 코드의 가독성을 향상시킨다. > # 12.3 함수 리터럴 자바스크립트의 함수는 객체 타입의 값이다. 따라서 함수도 함수 리터럴로 생성할 수 있다. 함수 리

dnwndalsrl

11 원시 타입과, 객체 타입 자바스크립트가 제공하는 데이터 타입은 크게 원시 타입과 객체 타입으로 구분한다. 그 둘의 차이점은 원시 값은 변경 불가능한 값 이지만, 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장되지만, 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달되지만, 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달한다. > # 11.1 원시 값 11.1.1 변경 불가능한 값 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다 변수와 값은 구분해서 생각해야한다. 즉 각자의 의미를 생각해서 봤을때 변경 불가능한 것은 변수가 아니라 값에 대한 진술이다. 아래의 예시를 보고 상수와 변경 불가

dnwndalsrl

9장에서는 타입 변환과 단축 평가에 대해 배우는 단계였다. 개발자가 의도적으로 타입을 변환하는 명시적 타입 변환과, 개발자의 의도와 상관없이 암묵적으로 타입이 자동변환되는 암묵적 타입 변환에 대해 알 수 있었으며, 단축 평가를 통해 if문이나 if ... else문을 대체할 수 있는 방법이나 단축 평가를 사용할 시 유용한 패턴들에 대해 알 수 있었다. 이는 코드를 좀 더 가독성있고 효율적으로 짜기에 큰 도움이 될거같다. 10장에서는 객체 리터럴에 대해 배우는 단계이다. 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 모든 것이 객체인만큼 확실하게 짚고 넘어가자. > # 10.1 객체란? 객체는 0개 이상의 프로퍼티로 구성된 집합이며 프로퍼티는 키와 값으로 구성된다. 원시 값을 제외한 나머지 값(함수, 배열, 정규표현식 등)은 모두 객체다 원시 값은 변경 불가능한 값이지만, 객체 타입의 값, 즉 **객체는 변경 가

dnwndalsrl

8장에서는 제어문에 대해 알아볼 수 있는 단계였다. 코딩을 하면서 중요한 조건문, 반복문 등등이 포함되어있는만큼, 제어문을 바르게 이해하면 코딩 스킬에 많은 영향을 주기 때문에 그 만큼 꼼꼼하고 확실하게 이해하면서 넘어가야한다. 9장에서는 타입 변환과 단축 평가에대해 알아가는 단계이다. 지금까지 책을 보면서 "타입 변환" 이라는 단어가 포함된 용어를 많이 봤었는데, 자세한 설명은 이 9장에서 설명해준다고 나와있었다. 부가적인 설명이 제대로 나와있으니 확실히 체크하고 넘어가자. > # 9.1 타입 변환이란? 자바스크립트의 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 이때 의도적으로 값의 타입을 변환하는 것을 명시적 타입변환 또는 타입 캐스팅 이라 한다. 위의 예제처럼 원시 값은 변경 불가능한 값이므로 변경할 수 없다. 즉 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. > # 9.

dnwndalsrl

7장에서는 연산자에 대해 알아볼수있는 단계였다. 지금까지 연산자를 안써온 코드가 없는만큼 엄청 주의깊게봤고, 지수 연산자에대해 처음 알면서도 연산자에는 우선순위가 있다는 점도 처음알았다.(심지어 결합 순서도 있음) 종류가 많아서 모두 기억하기 어렵고 실수하기도 쉽지만 구글링해서 중요한거는 다시 찾아봐야겠다. 8장에서는 제어문에 대해 설명해주는 단계이다. 제일 많이쓰고 중요한 조건문, 반복문 등등이 나오는 장이므로 확실하게 이해하고 넘어가자 제어문이란 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 기본적으로 코드는 위에서 아래 방향으로 순차적으로 실행되지만, 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어 가능하다. 제어문을 바르게 이해하는 것은 코딩 스킬에 많은 영향을 주기때문에 매우 중요하다. > # 8.1 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것이다. 코드 블록 또는 블록이라고 부른다. 단독으로 사

dnwndalsrl

6장에서는 데이터 타입에 대해 알아가는단계였다. 값을 저장하거나 참조할때 확보하거나, 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하거나, 메모리에서 읽어 들인 2진수를 어떻게 해석할지 직접적을 관련이 되어있기때문에 매우 중요한 개념이었다. 7장에서는 연산자에 대해 배우는 단계이다. 연산자를 통하여 값의 생성, 비교, 할당, 연결 등등 다양한 활동이 가능하므로 역시 중요한 단계인거같다. > # 7.1 연산자 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만든다. 연산의 대상을 피연산자라 하며, 피연산자는 값으로 평가될 수있는 표현식 이어야 한다. 즉 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만든다. 라고 말할수있다. > # 7.2 산술 연산자 산술 연사자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불

erica990604

Learned Function Declaration Local variables Outer variables Parameters Function Declaration Function declarations are when you create a function and give it a name. For instance: Local variables A variable declared inside a function is only visible inside that function. For instance: Outer variables It has full access to the outer variable and it can modify it as well. For instance: Parameters It has full access to the outer variable a

dnwndalsrl

5장에서는 표현식과 문에 대해 알수있는 단계였다. "값"이라는 용어에 대해 조금 더 알 수 있는 단계였고, 같은거 같으면서도 알게모르게 다른 의미를 가지는 것도 굉장히 많았다. 문과 표현식을 확실하게 구별하고 해석한다면 나중에 코드를 읽고 해석할때 엄청난 도움이 될거같으면서, 이로인해 버그도 줄이고 품질도 높여줄거같다. 6장에서는 데이터 타입에 관한 내용이 나오는 단계이다. 자바스크립트의 모든 값은 데이터 타입을 갖고있다는 사실을 알고있으니, 확실하게 알고 넘어가야할 단계이다. > # 6.1 데이터 타입 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖고 있으며, 원시 타입과 객체 타입으로 분류할 수 있다. 타입에 따라 확보해야할 메모리 공간의 크기도 다르고 메모리에 저장되는 2진수도 다르며 읽어 들여 해석하는 방식도 다르기 때문에, 개발자는 명확한 의도를 가지고 타입을 구별해서 값을 생성해야한다. > # 6.2 숫자 타입

dnwndalsrl

4장에서는 변수의 기본적인 설명과 선언, 할당 방법에 대해 알아보는 단계였다. 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념을 핵심만 딱딱 집어서 알기 쉽게 설명되어있어서 이해가 쉬웠다. 5장에서는 표현식과 문을 통해 "값" 이라는 용어에 대해 남에게 설명 해줄수 있을만큼 딥하게 들어가는 단계인거 같다. 자주 사용할 용어이므로 집중해서 보도록하자 > # 5.1 값 값이란, 표현식이 평가되어 생성된 결과를 말한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수로 저장된다. 아래의 예제를 살펴보자 sum변수에 할당되는 것은 10 + 20이 아니라 10 + 20이 평가된 결과인 숫자 값인 30이다. 즉 값이란 변수에 할당되는 것이다. > # 5.2 리터럴 값은 다양한 방법으로 생성할 수 있는데, 가장 기본적인 방법은 리터럴이다. **사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성

dnwndalsrl

3장에서는 본격적으로 자바스크립트를 다루기 위해 설치환경과, 방법을 알아볼수 있는 단계였다. 이젠 주위 환경이 바뀌어도 개발을 하기위해 필요한 기능들을 손쉽게 다시 설치하고 구축할 수 있을거같다. 4장에서는 이제 자바스크립트의 가장 기초적이면서도 중요한 변수에 대한 설명이 나와있는 단계인거같다. 이제 시작이니만큼 나중에 안 헷갈리게 집중해서 보자 > # 4.1 변수란 무엇인가? 왜 필요한가? 변수는 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념이다!! 컴퓨터는 사람을 모델로 디자인되었기 때문에 사람과 유사하게 동작한다. 사람은 계산과 기억을 모두 두뇌에서 하지만, 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체다. 메모리 셀 하나의 크기는 1바이트(8비트)이며, 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽어 들인다. 각 셀

dnwndalsrl

2장에서는 자바스크립트에 대한 역사와 특징에 대해 알아볼수있는 단계였다. 읽으면서 몰랐던 개념들도 구글링을 통해 둘러보면서 한번씩 읽을 수 있었다.(지금은 참고자료로 링크를 넣어놨지만 나중에 내 블로그에도 개념들을 각각 정리해야겠다) 3장에서는 자바스크립트를 실제로 어떻게 실행하는지 실행 환경과, 방법에 대해 나와있는 단계이다. 이제부터 실습이 들어가는 단계이므로 유심히 볼 수 있도록 하자 > # 3.1 자바스크립트 실행 환경 모든 브라우저와 Node.js는 자바스크립트 엔진을 내장 하고있기때문에 자바스크립트를 해석하고 실행할 수 있다. 하지만 브라우저와 Node.js는 용도가 다르다는 점을 명시하자. 브라우저는 HTML, CSS, Javascript를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만, Node.js는 브라우저 외부에서 Javascript 실행 환경을 제공하는 것이 주된 목적이다. > # 3.2 웹 브라우저

dnwndalsrl

1장에서는 프로그래밍이 무엇인지, 프로그래밍의 목적이 무엇인지에 대해 알 수 있는 장이었다. 우리가 왜 컴퓨터의 관점에서 문제를 사고해야하는지, 컴퓨터는 기계어만 읽을 수 있는데 어떠한 방식으로 우리가 입력한 코드가 컴퓨터에서 기계어로 번역되는지 원초적인 지식을 알 수 있었다. 2장부터는 자바스크립트의 역사부터 특징까지 나와있으니 집중해서 보도록 해보자 > # 2.1 자바스크립트의 탄생 간략하게 **웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어**를 도입의 필요성이 있었는데, 그때 탄생한 것이 자바스크립트이다. 처음에는 보조적인 기능을 수행하기 위한 언어였지만, 현재는 모든 브라우저의 표준 프로그래밍 언어로 자리잡게 되었다 > # 2.2 자바스크립트의 표

dnwndalsrl

알고리즘 문제를 풀면서 자바스크립트에 대한 동작원리나, 이해가 부족한 상태로 접근을 하니까 오류가 발생해도 찾지 못하는 상황이 빈번하게 발생하였다. 문제도 문제지만, 자바스크립트를 기초부터 다시 시작하여 보다 더 확실하게 이해하기위해 모던 자바스크립트 Deep Dive를 통해 시작하려한다. (주변에서 추천이 많았음..) > # 1.1 프로그래밍이란? 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 이다. 커뮤니케이션을 하기전 요구되는 것이 문제 해결 능력 이다. 해결해야 할 문제를 명확히 이해한 후 적절한 문제 해결 방안을 정의할 필요가 있기 때문 즉 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사

erica990604

Learned Variables let,var,and const Variables A variable is a "names storage" for data. We can use variables to store goodies, visitors, and other data We can declare multiple variables in many different ways but have to consider eradability. Let When the value is changed, the old data is removed from the variable We can also declare two variables and copy data from one into the other Var In order scripts, you may also find another keyword "var" ins

gawon1224

📌 4.1 변수란? 💡 (js를 해석하고 실행하는)자바스크립트 엔진이 10 + 20을 어떻게 계산할까? 컴퓨터에선 CPU - 연산, 메모리 - 데이터 기억 이렇게 역할이 나누어져있다 (+) 연산을 하기 위해 10과 20(피연산자)를 메모리에 저장함(2진수로 저장됨) 연산 후 결과값인 30도 메모리에 저장함 그치만 문제 : 연산해서 만든 값인 30을 재사용할 수 없음! -> 재사용하고 싶다면 30이 저장돼있는 메모리 주소를 통해 30이저장된 메모리 공간에 직접 접근 해야함 -> but 이건 오류 발생 가능성 높음 위험함 & 동일한 코드를 실행해도 실행될 때마다 값이 저장될 메모리 주소는 변함 => js는 개발자의 직접적인 메모리 제어를 허용 x 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 / 그 메모리 공간을 식별하기 위해 붙인 이름 즉 값의 위치를 가리키는 상징적인 이름 컴파일러/인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환

cjh0120

배열 함수는 여러개가 있다. 그중 나는 map을 가장 많이 사용하고있고, sort와 reduce를 보니 나중에 응용 가능성이 보여 작성하기로했다. > Sort란?! 쉽게말해 배열 재정렬이라고 생각하면된다. sort 자체를 쓰면 문자 정렬을 해준다 하지만 배열에 숫자를 넣게되면 순서가 뒤죽박죽으로 나와 함수를 이용해 사용해야한다. <img src="https://velog.velcdn.com/images/cjh0120/post/c11e37

cjh0120

ES란 ? ECMASCRIPT의 약어 뜻하며 자바스크립트의 표준 규격을 나타내는 용어. 뒤에 숫자는 버전을 뜻하는데 ES5(2009년) ES6(2015년) ES11(2020년)출시하였습니다. ES5와 ES6 사이에는 시간 차이가 있는데요.(6년) 많은 기능들을 추가되었습니다. 실무에서는 ES6+(ES6 이후, 모던 자바스크립트) 이상을 요구하고 있습니다. > ES5 ES6의 차이점 & ES6 추가된 사항 키워드 변경 ES5 에서 쓰이는 var 키워드 는 함수 레벨 스코프를 갖고있으며 재할당 기능하였다. 그래서 변수의 중복 선언이 가능하고 자신도 모르게 선언했던 변수명을 또 사용할 경우 로직에 문제 생긴다 그래서 ES6에서는 var를 권장하지 않고 let과 const를 사용한다. Arrow fucntion 자바에서 흔히 쓰이는 람다식이랑 똑같이 사용한다. 화살표 함수는 함수를 간결하게 나타낼수 있으며 가독성이 매우 올랐다. 화살표 함수는 매개변수가 하나 일