JS 기본문법

얕은복사 vs 깊은복사

스코프(블록범위, 함수범위)

재귀함수(recursion)

콜백함수(callback)

다른함수의 매개변수로 전달되어 수행되어지는 함수

call by *

@값에 의한 복사@로 함수 내에서 매개 변수 값을 변경 시켜도 영향이 미치지 않음 @원시 타입@을 매개 변수로 넘겼을 때 발생

call by reference

주소에 대한 복사로 함수 내에서 매개변수 내 값을 변경시키면 원본 데이터에도 영향을 받음 @객체 타입@을 매개변수로 넘겼을 때 발생

Object.getOwnPropertyDescriptors -> 객체의 상세설명 확인가능

객체에 저장된 값이 함수인경우 -> 메서드 this -> 메서드에서 객체 내부의 속성값을 접근할 수 있는 지시자

Number

---

대표적인 Number 상수 값

Number.MAX/MIN_VALUE

지수로 표기되는 양수 최대/최소 값

Number.MAX/MIN_SAFE_INTEGER

안전하게 표기되는 최대 양수/최소 음수 값

Number.POSITIVE/NEGATIVE_INFINITY

무한대 양수/음수 값

Number.NaN

수학적으로 정의되지 않거나 표현할 수 없는 값으로 해석될 수 있는 숫자 데이터

지수표기법

let billion_1 = 1000000000 // 10억 let billion_2 = 1e9 // 1 + 0 9개 let us = 1e-6; // 왼쪽으로 6번 소수점 이동

형 변환(Number -> String)

1. toString();
2. String(a);
3. a+"";

자리수 표현

1. toFixed(a); // 소수의 자리 수 길이를 제한(소수 몇째자리 까지)
2. toPrecision(a); // 정수와 소수의 자리 수를 합한 길이로 제한

Number 자료형 확인

1. Nan인지 확인 -> Number.isNan()
2. 무한대인지 확인 -> Number.isFinite()

정수와 실수형 변환(String → Number)

1. parseInt(string);
2. parseFloat(string);

String

---

문자열 접근

str.charAt(idx) == str[0] charCodeAt(idx) == 아스키 코드 변환 시 코드 번호

문자열 검색

index : indexOf(), lastIndexOf() boolean : includes(), startsWith(), endsWith()

문자열 변환

toUpperCase(), toLowerCase()

문자열 치환

replace(기존, 치환) : 처음 만나는 기존 요소의 문자열 치환 정규표현식 : replace(/l/gi, "i") -> /치환문자열/g(전체)i(대소문자구분x)

문자열 추출

slice(start, end) // 음수도 가능 substring(start, end) // end, start 위치 바뀌어도 됨 substr(start, length)

문자열 분할

split(””) → 문자마다 분할

split(””, 3) → 문자마다 분할 + 앞의 3개만 가져옴

문자표기

Line feed : \\n Carriage return : \\r Backslash : \\\\ Tab : \\t Unicode : \\u{}

Array

---

배열의 실체

JS에서 배열은 다른 언어에서 말하는 일반적인 배열이 아닌 Hash 기반의 객체

메모리가 연속적인 밀집 배열(dense array)가 아닌 비 연속적인 희소 배열(sparse array)

배열 여부 확인

isArray()

배열 추가/삭제/병합

push(), pop(), shift(), unshift()

splice() // 원본 배열 조작

let fruits = ["apple", "orange", "melon"];

fruits.splice(1) // orange, melon
fruits // apple

let fruits = ["apple", "orange", "melon", "strawberry"];

fruits.splice(1,1) // orange
fruits // apple, melon, strawberry
fruits.splice(1,1, "mango") // melon
fruits // apple, mango 

slice()

let fruits = ["apple", "orange", "melon"];

fruits.slice(1) // orange
fruits // apple, orange, melon

fruits.slice(1, 2) // orange
fruit.slice(-2) // orange, melon

concat()

let fruits = ["apple", "orange", "melon"];

frutis.concat("strawberry") // apple, orange, melon, strawberry

배열 탐색

indexOf() → 앞에서 부터 탐색 하고 인덱스 추출

lastIndexOf(), 뒤에서 부터 탐색 하고 인덱스 추출

includes() → 값 포함 여부 확인

배열 변형

sort(), reverse(), join()

배열 반복문

1. 일반적인 for 문
2. for( let fruit of fruits) { console.log(fruit); }
3. for( let key in fruits ) { console.log(fruits[key]); }

고차함수

---

하나 이상의 함수를 매개변수로 취하거나 함수를 결과로 반환하는 함수

매개변수로 전달되는 함수는 콜백 함수

대표적인 배열 조작 메서드

임의 정렬 → sort(callback func)

반복 작업 → forEach(item, index, array)

콜백함수 결과 배열 반환 → map()

조건 만족하는 첫번째 인덱스의 값 반환 → find()

조건 만족하는 값 배열로 반환 → filter()

누적 결과 값 반환 → reduce()

생성자

---

생성자 함수와 new 연산자를 통해 빠른 객체 생성 가능

function FishBread(flavor, price){
	// new 연산자가 빠졌을 경우 new가 선언된 재귀함수 실행
	if(!new.target) {
		return new FishBread(flavor, price);
	}
	this.flavor = flavor;
	this.price = price;
	this.base = "flour";
}

let bread_1 = new FishBread("cream", 1200);
let bread_2 = new FishBread("redbean", 1000);
let bread_3 = new FishBread("milk", 1500);

Collection

---

구조 혹은 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간

자바스크립트에서 제공하는 Collection

• Indexed Collection
• Array, Typed Arrya
• keyed Collection
• Object, Map, Weak Map, Set, Weak Set

Map

---

다양한 자료형의 key를 허용하고 key-value 형태의 자료형을 저장 가능할 수 있는 Collection

Map은 Object 대비 비교하면 다양한 key 사용을 허용하고, 값의 추가/삭제시 메서드를 통해 수행이 필요함

대표 속성 및 메서드

생성자 : new Map()

개수 확인 : Map.size

요소 추가 : Map.set(key, value)

요소 접근 : Map.get(key)

요소 삭제 : Map.delete(key)

전체 삭제 : Map.clear()

요소 존재 여부 확인 : Map.has(key)

.. etc : Map.keys(), Map.vlaues(), Map.entries()

Map 반복문

let recipe_juice = new Map([
	["strawberry", 50],
	["banana", 100],
	["ice", 150],
]);

for(let item of recipe_juice.keys()) console.log(item)

for(let amount of recipe_juice.values()) console.log(amount)

for(let entity of recipe_juice) console.log(entity)

Map ↔ Object 변환

let recipe_juice = new Map([
	["strawberry", 50],
	["banana", 100],
	["ice", 150],
]);

// Map -> Object
let obj = Object.fromEntires(recipe_juice);

// Object -> key-value
let kv = Object.entries(obj);
// key-value -> Map
let map = new Map(kv);

Set

---

value만을 저장하며 중복을 허용하지 않는 Collection

대표 속성(property) 및 메서드(method)

생성자 : new Set()

개수 확인 : Set.size

요소 추가 : Set.add(value)

요소 삭제 : Set.delete(value)

전체 삭제 : Set.clear()

요소 존재 여부 확인 : Set.has(key)

.. etc : Set.keys(), Set.values(), Set.entries()

Set 반복분

let str = new Set("Hello");

console.log(str); // str(5) {"H", "e", "l", "o"}

// for ~ of 구문
for(let item of str) console.log(item);
for(let item of str.keys()) ~
for(let item of str.values()) ~
for(let item of str.entries() ~
	// output :['H', 'H'] ['e', 'e'], ['l', 'l'], ['o', 'o']
		-> **Map과의 호환성을 위해 존재**

Date

---

표준 Built-in 객체로써 날짜와 시간을 위한 속성값과 메서드를 제공하는 객체

생성자 및 대표 메서드

생성자 : new Date()

현재 시간 기준 문자열 : Date()

년월일 정보 얻기 : Date.getFullYear(), Date.getMonth(), Date.getDate()

시분초 정보 얻기 : Date.getHours(), Date.getMinutes(), Date.getSeconds()

년월일 시분초 정보 설정 : Date.set ~

그 외 날짜 정보 얻기 : Date.getDay(), Date.getTime(), Date.getTimezoneOffset()

그 외 날짜 정보 설정 : Date.parse(string)

let date = new Date();
console.log(date.getHours()) // 22
console.log(date.getUTCHours()) // 13

성능측정(benchmark)

벤치마크 측정 대상 함수 전후로 시간을 비교하여 알고리즘 성능 측정

function dateSub(old_date, new_date){
	return new_date - old_date;
}
function getTime(old_date, new_date){
	return new_date.getTime() - old_date.getTime();
}
function benchmark(callback_func){
	let date_1 = new Date("2020-01-01");
	let date_2 = new Date();

	let start = Date.now();
	for(let i = 0; i < 100000; i++){
		callback_func(date_1, date_2);
	}
	return Date.now() - start;
}

console.log("dateSub: " + benchmark(dateSub) + "ms");
console.log("getTime: " + benchmark(getTime) + "ms");