모던 자바스크립트의 특징
가상 DOM을 이용하는 라이브러리/프레임워크를 사용
- 실제 DOM을 효율적으로 업데이트 하기 위한 기법데이트 하기 위한 기법
- 실제 DOM을 미리 메모리 상에서 가상으로 만들어 두고, UI 업데이트를 가상 DOM에서 먼저 처리하는 방식
패키지 관리자를 사용
- 라이브러리나 도구를 쉽게 설치, 관리, 업데이트, 제거할 수 있게 해주는 도구
- 의존성 관리와 버전 관리
- ex) node package manager(npm), yarn, pip(python), gem(ruby), composer(php), ...
ES6(ECMAScript 2015) 이후의 문법을 사용
- let, const
- arrow function
- template literal : `${ }`
- 분해할당
- 기본 매개변수
- for ... of 구문 추가 (Iterable 데이터를 순차 방문)
- 모듈 시스템 (import, export)
- 클래스 개념 추가 ( 이전에는 prototype )
- Promise
- Map, Set
- Rest, Spread 연산자
모듈 번들러(module bundler)를 사용
- 여러 모듈을 하나의 번들로 묶는 번들링 과정을 처리해주는 도구
- ex) Webpack, Rollup, Parcel, ...
트랜스파일러(transpiler)를 사용
- 한 프로그램 언어로 작성된 소스 코드를 다른 프로그래밍 언어로 변환하는 도구
- 언어 간 변환, 버전 호환성,
- ex) typescript를 순수 js로 바꾸어주는것
- ex) babel(class같이 순수js에서 지원되지 않는 문법을 js로 변환해주는 도구)
SPA(Single Page Application)로 작성
자바 스크립트 작성 및 실행
REPL(Read-Eval-Print-Loop)
- 간단한 코드를 테스트할때 사용
- node.js 내부에 탑재된 프로그램
자바스크립트 파일 실행
브라우저를 이용해서 실행
- script 태그를 이용해서 external, internal, inline 방식으로 사용
JavaScript
정식 명칭 => ECMAScript
표현식(expression)
-
값을 생성하거나 반환하는 코드
-
리터럴 = 값 자체
- 숫자
- 문자열
- 참/거짓
- 배열
- 키-밸류
문장(statement)
하나 이상의 표현식으로 구성되며, 대부분의 경우 세미콜론으로 끝남
키워드(keyword)
특정 동작을 정의하거나 예약어로 사용되어 특정 기능을 수행하는 단어들
변수 이름이나 함수 이름으로 사용할 수 없음
식별자(identifier)
변수, 함수, 클래스, 모듈 등의 이름을 정의하는데 사용
- 문자, 숫자, 달러 기호, 밑줄을 사용할 수 있음
- 문자, 달러 기호, 밑줄로 시작해야 함 ( 단, 숫자로는 시작할 수 없음 )
- 예약어는 식별자로 사용할 수 없음
관례
- 클래스 이름은 항상 대문자로 시작
- 변수, 함수, 속성, 메서드 이름은 항상 소문자로 시작
- 여러 단어로 구성된 식별자는 각 단어의 첫 글자를 대문자로 표현(Camel Expression)
자료형
원시 자료형
- null - "값이 없음"을 나타내는 데이터 타입
- undefined - 변수는 선언되었지만 값이 할당되지 않은 상태
- boolean - 참, 거짓
- number - 숫자(정수, 실수, Infinity, -Infinity, NaN)
- BigInt -
-2^253~2^253-1범위 밖의 숫자를 표현 - string - 문자열
- Symbol - 고유하고 변경 불가능한 원시 값 -> 주로 객체 속성의 고유한 식별을 위해 사용
- 내용과 관계없이 고유한 값을 생성함
- ex)
abc == abc이면 true지만,Symbol("abc") == Symbol("abc")면 false를 반환함.
객체 타입
build-in 타입 : object, arrays, dates, map, set, promises, ...
user-defined 타입
Map vs Object
키 타입 | 모든 값 문자열, Symbol
삽입 순서 | 유지 유지되지 않을 수 있음
반복 지원 | 직접 지원 직접지원 x(Objects.keys 활용)
성능 | 나은 성능 상대적으로 느림
동적 타이핑(dynamic typing) 지원
변수에 데이터가 대입되는 시점에 변수의 자료형이 결정됨.
var i = 10; 와 같이 변수를 선언할 때 데이터 타입을 지정하는 것이 아닌 할당되는 시점에 값에 따라 변수의 데이터 타입이 결정됨.
var을 사용하면 변수 할당 시점에 데이터 타입이 결정되므로 정상적으로 동작함. -> 타입 체크가 어려울 것 같기도하고.. 잘 모르겠네요
var, let, const
var - 재선언, 재할당 가능
let - 재선언 불가능, 재할당 가능
const - 재선언, 재할당 불가능
- var는 미리 선언가능, let, const의 경우는 초기화 이전까지 tdz(temperally dead zone)에 위치하고, 접근할 수 없음.
Hoisting
객체(변수, 함수)의 선언을 메모리에 미리 올려두어 런타임 오류를 방지하는 기능.
연산자
/ : 나누기 연산자
% : 나머지 연산자
- 나머지 연산의 경우 왼쪽 피연산자의 부호를 따라감
+: 문자열 결합 연산자
파이썬 처럼 문자열에 인덱스 사용가능
후위 연산자, 전위 연산자
동등 연산자(값), 일치 연산자(값, 타입) :==,=== Object.is()를 이용한 비교 추천함
자료형 변환
강제 자료형 변환 -> String(), Number(), Boolean()
변환가능 여부는 == 연산자가 아닌 isNaN() 메서드를 이용하여 판단하기
== NaN은 무조건 false를 반환함
결합 연산자를 사용하여 숫자 + 문자를 하게 되면 문자열 타입으로 자동 형변환됨.
+가 아닌 다른 연산자를 사용하면 문자열을 숫자로 자동 변환
!! : 부정연산자를 두번 사용하게되면 Boolean()과 동일한 기능
Javascript의 함수
- 변수에 할당을 할 수 있음(함수 변수, 익명 함수 표현식)
let add = function(x,y) {return x+y};
함수 변수
익명 함수 표현식- 기명 함수 표현식
let sum1 = function add(x,y) {return x+y};
let sum2 = sum1;
console.log(sum1(10, 20)); // 30
console.log(sum2(10, 20)); // 30
console.log(add(10, 20)); // add is not defined
// 함수 외부에서는 함수 이름으로 사용할 수 없으나, 재귀 호출에서 사용할 수 있음.
함수 선언문으로 정의한 함수는 js 내부에서 함수 이름과 함수 변수 이름이 동일한 함수 표현식으로 자동 변경됨.
function add(x,y) { return x+y; }
==
let add = function add(x,y){ return x+y; }- Function() 생성자 함수를 이용
-> 동적으로 함수를 만들어야하는 경우에 사용됨.
let add = new Function('x','y','return x+y');함수의 활용
1. 함수를 다른 함수의 인자로 전달
- 콜백같은건가?
let click = function(fname){
fname();
};
let loginButtonClick = function() {
console.log("로그인 되었습니다.");
};
let logoutButtonClick = function() {
console.log("로그아웃 되었습니다.");
};
click(loginButtonClick);
click(logoutButtonClick);- 함수를 다른 함수의 리턴값으로 활용(일급 객체)
-> 동작은 미리 정의하고, 동작을 강제할때 주로 사용함. 일종의 생성자 느낌으로 사용
function multiplier(factor){
return function(number){
return number * factor;
};
}
const double = factor(3);
double(3) // 9
double(4) // 12함수의 종류
1. 콜백 함수(callback function)
개발자가 코드를 이용해서 명시적으로 호출하는 함수가 아니고,
개발자는 단지 함수를 등록하기만 하고,
어떤 이벤트가 발생하거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수
이벤트 핸들러 -> 특정 이벤트가 발생했을 때 실행되는 함수
<input type="button" />
- 즉시 실행 함수(immediately invoked function, 자기 호출 함수)
함수 정의와 동시에 바로 실행하는 함수
익명 함수 표현식을 괄호로 둘러싼 후 바로 호출(실행)할 수 있도록 괄호 쌍을 추가
( function (name) {console.log(${name}즉시 실행됩니다.); )({이곳에 매개변수});}
- 화살표 함수(arrow function)
const add1 = function(a,b) {return a+b;};
console.log(add1(2,3));
const add2 = (a,b) => {return a+b;};
console.log(add2(2,3));
// 화살표 함수 본문이 결과를 반환하는 구분으로 되어 있는 경우, 중괄호와 return 키워드를 생략 가능.
const add3 = (a,b) => a+b;
console.log(add3(2,3));
//매개변수가 하나인 경우, 매개변수를 감싸고 있는 소괄호도 생략이 가능
const add4 = x => x+4;
console.log(add4(2));
// 객체를 반환하는 경우 반환 객체를 소괄호로 감싸야 함
const add5 = (x,y) => {return {result: x+y};};
console.log(add5(2,3));반복문 종류
0. 직접 참조
1. for-loop
2. for in (인덱스를반환)
3. for of (값을 반환)
4. for each(이터레이터를 활용) 값, 값+인덱스 둘 중 선택해서 사용가능
-> 개별 요소를 콜백함수로 전달
객체
key-value형태
key는 기본적으로 문자열 타입, 그리고 symbol타입을 허용
json으로 사용할 경우에는 ""을 필수로 필요함.
내부에서만 사용하는 객체의 경우 ""을 생략가능
value로 함수를 할당가능.
객체 내부의 요소에 접근할때는 this를 사용함.
1. for of 사용불가(iterable한 객체가 아니기 때문, Objects.keys()를 사용하면 가능)
2. for each도 of와 마찬가지로 Objects.keys()를 사용하면 가능
3. for in 사용가능(키를 가져와 접근하는 방식으로)
시간측정방법
1. iterative 방식에서는 앞뒤로 시간 측정 코드를 삽입.
2. recursive 방식에서는 어려움.
-> 함수를 호출하는 부분에서 시간 측정 코드를 추가
let start = performance.now();
console.log(factorial_loop(10));
let end = performance.now();
console.log(`실행시간:${(end-start).toFixed(10)}ms`);위와 같이 작성하면 코드를 반복적으로 사용해야하는 번거로움 발생
-> 함수를 인자로 받는 시간측정 함수를 작성 (closure 현상 발생)
-> AOP의 원리와 동일(기존 함수의 변경없이 기능 확장 가능)
참고: Case Style
- Snake Case: _ 로 단어를 연결(Snake_Case)
- Kebab Case: - 로 단어를 연결(Kebab-Case)
- Camel Case: 시작은 소문자, 이후 단어의 첫 글자를 대문자로(camelCase)
- Pascal Case: 대문자로 시작, 이후 단어의 첫 글자를 대문자로(PascalCase)
