Javascript ES6+

메모리 Memory

Javascript란

변수 Variable

변수이름짓기 Naming

데이터 타입 Data Type

Number

String

Boolean

null 과 undefined 타입

객체 타입(Object)

값 과 참조의 차이

상수변수 const

타입 확인법

연산자

\+(더하기), -(빼기), \*(곱하기), /(나누기), %(나머지 몫), \*\*(지수, 거듭제곱)\*\*거듭제곱은 es7 부터 도입 전에는 Math.pow라는 함수 사용숫자와 문자열을 더하면 문자열로 반환한다.

\+(양), -(음), !(부정)\+, 숫자가 아닌 타입들을 숫자로 변환하면 어떤값이 나오는지 확인할 수 있음

할당 연산자

주의 할 점a++ 필요한 연산을 하고, 그 뒤 값을 증가시킴\++a 값을 먼저 증가하고, 필요한 연산을 함

\> 크다< 작다\>= 크거나 같다<= 작거나 같다

참조: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

동등 비교 연산자 값이 같음 != 값이 다름 값과 타입이 둘다 같음 !== 값과 타입이 다름 obj1 , obj2 는 키와벨류가 같지만 메모리 주소는 각자가지게 되기 때문에 같을 순 없다. 하지만 오브젝트 안에 있는 키를 검사 해보면 값과 타입은 같기때문에 obj1

코드의 흐름을 개발자가 제어 하는 것특정한 조건 일 때 만 원하는 코드를 실행하도록 만들수 있다.반복적으로 동일한 코드를 수행 할 수 있는 코드

if(조건) { }if(조건) { } else {}if(조건1) { } else if(조건2) {} else {}조건식? 참인경우:거짓인경우조건문을 간결하게 사용이 가능하다.if else if else if else if ... else 와 같은 역할정해진 범위안의 값

for(변수선언문; 조건식; 증감식) { }해당하는 조건이 맞을 때 까지 코드 블럭을 반복한다.무한루프 💩for (;;) {}변수선언문조건식의 값이 참이면 { } 코드블럭을 수행증감식을 수행조건식이 거짓이 될때까지 2번과 3번을 반복함반복문을 특정한 조건에 그만두고

제어문에서 자주 쓰이는 연산자&& 그리고|| 또는! 부정(단항연산자에서 온것)!! 불리언값으로 변환 (단항연산자 응용버전)

어플리케이션에서 각각의 작은 일들을 수행하는 것특정한 일을 수행하는 코드의 집합함수를 잘 작성하는것이 좋은 프로그래밍의 시작함수를 사용하면 재사용도 가능하고, 가독성도 높고, 유지보수성도 쉽게 될 수 있다.중복되는 코드가 있다면 함수로 만들어서 사용하는 것이 좋다.함수

함수이름 자체는 함수를 가리키고있는 변수와 동일하다.함수의 이름을 어딘가에 할당한다는 것은 함수를 가리키고있는 메모리 주소를 복사해서 할당하는것과 동일하다.

매개변수의 기본값은 무조건 undefined매개변수의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장됨매개변수 기본값 Default Parameters a = 1, b = 1

매개변수의 기본값은 무조건 undefined매개변수의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장된다.매개변수 기본값 Default Parameters a = 1, b = 1전달된 인자에 대한 정보가 들어있다.배열처럼 사용이 가능하다. index0

function name() { }const name = function () { }const name = () => { }생성자 함수 const object = new Function();ex

함수가 일반 객체 처럼 모든 연산이 가능 한 것함수의 매개변수로 전달함수의 반환값할당 명령문동일 비교 대상인자로 함수를 받거나 (콜백 함수)함수를 반환하는 함수를 고차 함수전달된 action은 콜백함수이다.전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는 것이

함수내부에서 외부로부터 주어진 인자의 값을 변경하는 것은 💩상태변경이 필요한 경우에는, 새로운 상태를(오브젝트, 값) 만들어서 반환해야 한다. ✨원시값 - 값에 의한 복사 <- 값 자체가 복사되기때문에 큰 문제는 없다.객체값 - 참조에 의한 복사 (메모리주소)

서로 연관 있는 속성(데이터 프로퍼티)과 행동(함수(메소드))을 묶어 주기 위한것순수 데이터 객체 와 상태와 행동 객체 가 있다.밀접하게 관련있는 상태와 행동을 객체로 묶어야 한다.

Object literal { key: value }new Object()Object.create();key - 문자, 숫자, 문자열, 심볼value - 원시값, 객체 (함수)속성, 데이터에 접근apple.name; // 마침표 표기법 dot notationapple'

코딩하는 시점에, 정적으로 접근이 확정된다.동적으로 속성에 접근하고 싶을때 대괄호 표기법 사용한다.추가삭제

키 이름과 참조하고 있는 변수 이름이 동일한 경우에는 축약이 가능하다.

연관된 정보와 함수들을 묶어서 관리 할 수 있다.

비슷한 객체를 반복해서 생성 해야 하는 경우 라면 생성자 함수를 쓰는게 용이하다.특정한 템플릿에 맞게 객체를 쉽게 만들 수 있는 생성자 함수,생성자 함수를 이용하면 정해진 틀 안에서 원하는 객체를 만들 수 있다.생성자 함수를 만들 때 는 맨 앞 글자를 무조건 대문자로

객체를 생성 할 수 있는 템플릿 (청사진, 틀)원래는 프로토타입을 베이스로 하지만 es6부터 클래스를 기반으로 해서 객체지향프로그래밍을 한다.프로토타입보다 사용이 간편하다.클래스를 이용해서 객체를 만들 수 있는데 클래스를 이용해서 만들어진 객체를 인스턴스 라고한다.

클래스의 기본

모든 객체 마다 동일하게 참조 해야 하는 속성이나 행동이 있다면 클래스 레벨의 프로퍼티와 메서드 static을 사용하면 된다.static키워드를 프로퍼티나 메서드앞에 쓸 수 있는데 static이 붙혀진 프로퍼티나 메서드는 만들어진 인스턴스에 포함이 되지 않고 클래스에

필드 인스턴스를 만들 때 초기화가 되어야 한다면 생성자 밖에서 설정 할 수 있다. 접근제어자 -캡슐화 클래스 내부에서 만 사용하고 싶다면 # 을 쓰면 된다.

get, set일반 속성 처럼 접근 하고 싶다면 get 키워드를 사용 하면 되는데 함수지만 즉 고정된 값이 아니라 호출 하는 시점에 데이터를 만들어서 리턴을 하는데 속성에 가깝기 때문에 함수를 수행 한다는 것은 특정한 일을 하기 때문에 get 은 어떤 특정한 일 한다기

클래스 마다 공통된 행동 이나 속성이 있다면 상속을 사용 할 수 있다.추가적으로 필요한게 있다면 함수를 추가 할 수 있다.상속 주의점자식의 생성자를 정의 하는 순간 부모의 필요한 것을 다 받아와야한다.부모의 생성자를 호출 할 때는 super 키워드를 사용한다.super

글로벌 객체가 무엇인지 확인 해보고 싶을 땐 globalThis 호출 하면글로벌 객체 -> 내장 함수를 확인 가능하다.globalThis 와 this 는 전역을 가리킨다. node에선 모듈을 가리키지만,자바스크립트에선 대체적으로 this란 전역 객체를 가리킨다.

Bloolean 이라는 생성자 함수로 만들 수 있다.하지만 객체를 사용하면 메모리를 더 소비 하기 때문에 객체로 사용 하지 않는다.

MDN Number: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number

MDN Math: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

MDN String: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String

MDN Date: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

순수 객체 만으로 나타내기 힘든 정보의 집합체, 객체의 집합체를 나타 낼 수 있는 것이 자료 구조, 즉 배열이다.일반적으로 배열은 동일한 메모리 크기를 가지며, 연속적으로 이어져 있어한다.하지만 자바스크립트에서의 배열은 연속적으로 이어져 있지 않고오브젝트와 유사하다.자

배열 인덱스로 바로 추가 할 경우 곂친 인덱스는 덮어 씌어지고, 기존 값은 사라지게 된다.떨어진 인덱스에 추가하면 중간 배열 인덱스가 비어있게 된다.삭제도 배열 인덱스로 바로 접근하면 삭제된 인덱스 값이 텅 빈 상태로 남게된다.

Shallow copy 얕은 복사 -> 객체는 메모리 주소를 전달한다.자바스크립트에서 복사할때는 항상 얕은 복사가 이루어짐!

자바스크립트에선 이터러블 프로토콜 이라고도 한다.Iterable 하다는건 순회가 가능하다는 것심볼정의를 가진 객체나, 특정한 함수가 Iterator를 리턴한다는것은순회 가능한 객체이다 라는걸 알 수 있다.순회가 가능하면 무엇을 할 수 있나? for..of, spread

function 옆에 \* 을 붙여줘야 제너레이터 라는 걸 알려준다.이터러블의 간편 버전yield는 return과 비슷하지만 다음 사용자가 next()를 호출할 때까지 기다렸다가 사용자가 next()호출 해야지 그 다음 코드로 실행이 되어서 순회를 하고 다시 기다렸다가

Spread 연산자, 전개구문모든 Iterable은 Spread 될 수 있다순회가 가능한 모든 것들은 촤르르르륵 펼쳐 질 수 있다func(...iterable)...iterable{ ...obj }EcmaScript 2018

구조 분해 할당 Desturcturing Assignment데이터 뭉치(그룹화)를 쉽게 만들수 있다

안덱스❌, 순서❌, 중복❌

순서❌, 유일한 키를 가지고 있어야함 키만 다르다면 중복가능키, 값으로 구성되어있다.map은 자바스크립트 object랑 유사하기 때문에 대신 사용 되기도 한다.map과object의 차이점은 (map은 사용 할 수 있는 함수들 있지만 object는 없다)

이름은 똑같지만 Symbol을 사용하게되면 유일한 키를 만들 수 있다.

옵셔널 체이닝 연산자 Optional Chaining OperatorES11 (ECMAScript 2020)?.null 또는 undefined을 확인할때

Nullish Coalescing OperatorES11 (ECMAScript 2020)?? null, undefined|| falshy한 경우 설정(할당) 0, -0, ''

export default는 딱 하나만 가지고 올 때 사용한다.export는 받아올때 동일한 이름으로 받아와야하고 이름을 변경 하고 싶다면 as로 사용하면 된다.

Promise(약속)비동기적으로 수행하는 그리고 수행한 결과값을 끝났다고 알려주는 object이다.프로미스 함수들프로미스 병렬처리

JSON: JavaScript Object Notation서버와 클라이언트(브라우저, 모바일) 간의 HTTP 통신을 위한오브젝트 형태의 텍스트 포맷stringify(object): JSONparse(JSON): object

스코프 -> 변수를 참조(접근) 할 수 있는 유요한 범위선언된 위치에 따라 유효 범위가 결정된다.{}블럭 안의 변수는 블럭 안에서만 유효스코프가 존재하는 이유 -> 이름 충돌 방지, 메모리 절약

JavaScript 엔진 백그라운드 프로세서

자바스크립트 엔진이 코드를 실행하기전 변수,함수,클래스의 선언문을 끌어 올리는 것을 말한다.변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮김변수는 선언까지만 호이스팅이되고 초기화는 해당 코드까지 와야지만 초기화가 된다.

모든 객체는 내부에 숨겨진 \[Prototype]을 가지고 있다.객체간 상속을 위해외부에서 직접 접근 불가하다.객체간 상속의 연결고리는 프로토타입 체인으로 연결 되어 있다.

오브젝트는 단 하나의 prototype을 가리킬 수 있다 (부모는 단 하나!)하지만! 여러개의 함수들을 상속하고 싶다!Mixin!

중첩된 함수에서 내부에 있는 함수와 그리고 외부에 있는 상태 렉시컬 환경이 저장 되어 있기 때문에 내부 환경에서 외부 환경 데이터에 접근 할 수 있는 것

this 바인딩자바, C정적으로 인스턴스가 만들어지는 시점에 this가 결정된다.하지만, 자바스크립트에서는 누가 호출하냐에 따라서 this가 달라진다.즉, this는 호출하는 사람(caller)에 의해 동적으로 결정된다.this는 문맥에 따라 이것이 가리키는 것이 달라