
자바스크립트 ES6에서 배열은 프로토타입 메서드 map, filter, reduce를 가진다.
배열이 아니더라도 이터러블이라면 사용할 수 있는 함수형 map, filter, reduce 함수를 구현해본다.

## map

수집할 값 정보를 파라미터 함수 `f`에게 완전히 위임한 고차함수 map을 구현해보자.
이터러블을 순회하며 함수 `f`를 실행한 값을 배열에 넣어 리턴하도록 하면 된다.

```js
const map = (f, iter) => {
	let res = [];
	for (const a of iter) {
		res.push(f(a));
	}
	return res;
}

map(p => p.name, products)
map(p => p.price, products)
```

## 이터러블 프로토콜을 따른 map의 다형성

```js
document.querySelectorAll('*').map(el => el.nodeName);
```

위 코드에서 `querySelectorAll`의 리턴값인 `NodeList`는 배열을 상속받지 않았기 때문에
map 함수가 없다고 뜨고, 에러가 뜬다. 그럴 땐 위에서 정의한 map 함수를 쓰면 된다.

```js
map(el => el.nodeName, document.querySelectorAll('*'));
```

제너레이터가 반환하는 이터레이터를 순회하는 것도 가능하다.

```js
function *gen() {
	yield 2;
	if (false) yield 3;
	yield 4;
}

map(a => a*a, gen());
```

최근 ECMAScript의 헬퍼 함수들이 이터러블 프로토콜을 기반으로 만들어지고 있어 앞으로 호환성도 좋아질 예정이다.

### 자료구조 Map 써보기

기존의 `Map` 자료구조를 사용해 새로운 map을 만들 수도 있다.

```js
let m = new Map();
m.set('a', 10);
m.set('b', 20);

new Map(map(([k,v] => [k, v*2]), m));
```

## filter

이터러블에서 조건에 맞는 원소만 걸러내는 함수형 `filter`를 만들어본다.
전체적인 구현 방식은 `map`과 비슷한데, `f(a)`가 `true`인 값만 걸러내면 된다.

```jsx
const filter = (f, iter) => {
	let result = [];
	for (const a of iter) {
		if(f(a)) result.push(a)
	}

	return result;
}
filter(p => p.price > 3000, products);
```

## reduce

reduce는 **값을 순회하면서 하나의 값으로 누적해 축약**하는 함수이다.
reduce는 영어로 '졸이다'는 뜻도 있는데, 여러개의 값을 졸여서(누적해서) 하나의 결과값을 생성한다고 생각하면 이해가 편하다.
이 함수는 **보조함수(1번째 파라미터)에 어떻게 축약할지를 완전히 위임**한다.

배열의 모든 원소를 더하고 싶을 때 `reduce`를 쓰지 않고 구현한다면 아래와 같다.

```js
const nums = [1,2,3,4,5]

let total = 0;
for(const n of nums) {
	total += n;
}
```

이제 `reduce`를 사용해 리팩토링해보자.
자바스크립트 내장 `reduce`에서는 `acc`를 생략할 수도 있으니 만약 `acc`가 생략되었다면 자동으로 첫번째 요소를
두번째 파라미터를 기본값으로 변환하도록 한다.

```js
reduce(add, 0, [1,2,3,4,5]); // 15
// =(add(add(add([0,1]), 2), 3).... 을 반복하는 것임

const add = (a, b) => a+b;

reduce(add, [1,2,3,4,5]);   // 이렇게 온다면 자동으로
reduce(add, 1, [2,3,4,5]);  // 첫번째 요소를 기본값으로 변환해 계산한다.

const reduce = (f, acc, iter) => {
	if(!iter) {
		iter = acc[Symbol.iterator]();
		acc = iter.next().value;
	}
	for (const a of iter) {
		acc = f(acc, a)
	}
	return acc;
};
```

커스텀한 `reduce` 함수는 가장 먼저 3번째 파라미터(이터레이터)가 있는지 확인하고, 없을 경우
`acc`에서 자기 자신 이터레이터를 꺼내오고, 그 `이터레이터.next()`의 값을 `acc`로 지정한다.

### reduce로 products의 모든 가격을 더한다면

```jsx
reduce((total, curr) => total + curr.price, 0, products)
```

## map+filter+reduce 중첩 사용과 함수형 사고

1. `map`으로 가격을 뽑는다
2. `filter`로 특정 금액(3만원) 이하의 상품만
3. `reduce`로 모든 가격의 합을 구한다

이 때 `filter`, `map`의 순서를 바꿔도 결과는 동일하다.

```js
const add = (a, b) => a+b;
	reduce(
		add,
		map(p => p.price,
			filter(p => p < 30000, products)
	)
)
```

좀 더 함수형으로 생각하려면 `add` 다음 파라미터(`curr`)나 `map`의 두번째 파라미터(타겟 arr)가 숫자가 있는 배열로 평가되도록 코드를 작성하면 된다.

```js
reduce(
	add,
	// 숫자 배열로 평가되도록
)
```

*참고: 인프런 [함수형 프로그래밍과 Javascript ES6+](https://www.inflearn.com/course/functional-es6)*

배열이 아니어도 사용할 수 있는 map, filter, reduce 함수형으로 만들어보기

자바스크립트 함수형 프로그래밍: map, filter, reduce


## 제너레이터와 이터레이터

자바스크립트에서는 **어떤 값이든 이터러블이면 순회할 수 있다**. 제너레이터로는 어떤 상태, 값이든 이터러블하게 만들 수 있다(다형성).

제너레이터란 이터레이터이자 이터러블을 생성하는 함수, **이터레이러를 리턴하는 함수**다.
일반 함수 앞에 *를 붙여 만들 수 있다.

```js
function *gen() {
	yield 1;
	yield 2;
	yield 3;
	return 100; // done: true일때 undefined 대신 value가 되는 값. 순회되진 않는다.
}
let iter = gen();
log(iter.next());

for (const a of gen()) // 도 가능
    console.log(a)
```

`iter[Symbol.iterator]() == iter)`의 값은 true다. 제너레이터는 잘 만들어진 이터레이터를 리턴하기 때문이다.

## odds: 주어진 이터러블에서 홀수만 뽑아내기

```js
// 무한하긴 하지만 내가 제너레이터를 평가할때만 돌아가므로 브라우저가 뻗지 않는다.
function *infinity(start=0) {
	while (true) yield start++;
}
```

주어진 `start`에서부터 무한대의 값을 담은 이터레이터를 반환하는 제너레이터 `infinity`는 위처럼 구현할 수 있다.
만약 제너레이터 없이 1부터 무한대의 값을 담은 배열을 만드려고 했다면 브라우저가 멈췄을 것이다.
그러나 위 코드처럼 제너레이터로 만들면 값은 무한하지만 값을 평가할때만 돌아가므로 브라우저가 뻗지 않는다.

이터러블을 순회하며 주어진 `l`에서 멈추는 제너레이터 `limit`과 `l`까지의 홀수를 담은 이터레이터를 반환하는 제너레이터
`odds`는 아래와 같이 구현할 수 있다.

```js
// iter를 받아서 iter를 돌다가 l을 만나면 멈춘다.
function *limit(l, iter) {
	for (const a of iter) {
		yield a;
        if (a==l) return;
	}
}
limit(4, [1,2,3,4]);

function *odds(l) {
	for (const a of limit(l, infinity(1))) {
		if (a % 2) yield a;
	}
}

let oddIter = odds(10) // max 값
```

`odds`는 위에서 만든 `limit`과 `infinity`를 활용해 구현하였다.

## 조합성 있는 코드 만들기

이터러블 프로토콜을 따르면 조합성 있는 코드를 작성할 수 있다.
이전 장에서 본 `for…of`외에도 전개 연산자, 구조 분해, 나머지 연산자 등등을 활용하기 좋다.

```js
log([...odds(10)]) // 스프레드해 바로 배열로 만들기: [1 3 5 7 9]

const [head, ...tail] = odds(5); // 구조분해, 나머지 연산자 활용
console.log(head) // 1,
console.log(tail) // [3, 5]
```

*참고: 인프런 [함수형 프로그래밍과 Javascript ES6+](https://www.inflearn.com/course/functional-es6)*


이터레이터를 생성하는 제너레이터를 잘 활용하면 조합성 높은 코드를 짤 수 있다.

자바스크립트 함수형 프로그래밍: 제너레이터와 이터레이터


ES6에는 이전 방식에 없던 새로운 리스트 순회법이 생겼다.

## for...of의 등장

자바스크립트의 Array, Map, Set 자료구조는 `for of`로 내용물을 순회할 수 있다.

```js
const str = '12345'
const arr = [1,2,3]
const map = new Map([['first', 1], ['second', 2], ['third', 3]]);
const set = new Set([1,2,3])

for (const a of arr) {
	console.log(a)
}
```

그러나 인덱스로 원소에 접근할 수 있는 배열과 달리 Map과 Set 데이터는 `map[1]`, `set[2]` 이런 식으로 인덱스를 활용해 요소를 호출할 수 없다.
즉, `for of` 내부 문법이 자료구조별로 다르다는 것을 추측할 수 있다. `for of`의 내부 동작은 `Symbol.iterator`로 알아볼 수 있다.

## JS 자료구조로 알아보는 이터레이터 프로토콜

**JS의 배열, Map, Set는 이터러블/이터레이터 프로토콜을 따른다.** 이 자료구조들은 `[Symbol.iterator]` 메서드를 모두 가지고 있다.
각각 콘솔에 프린트해보면 아래와 같은 결과가 나온다.

```js
set[Symbol.iterator]() // SetIterator {1,2,3}
map[Symbol.iterator]() // MapIterator {'first'=>1, 'second'=>2, 'third'=>3}
arr[Symbol.iterator]() // Array Iterator {}
```

- Iterable: 이터레이터를 리턴하는 `[Symbol.iterator]()`를 갖는 값
- Iterator: `{value, done}` 객체를 리턴하는 `next()`를 갖는 값
- **이터러블/이터레이터 프로토콜: 이터러블을 for…of, spread(전개 연산자)와 함께 동작하도록 한 규약**

```js
let setIterator = set[Symbol.iterator]();
setIterator.next(); // {value: 1, done: false}
setIterator.next(); // {value: 2, done: false}
setIterator.next(); // {value: 3, done: false}
setIterator.next(); // {done: true}
```

즉, **for of 구문을 실행하면 그 이터레이터를 순회하며** 값을 보여준다!
`map.keys()` 도 맵의 키만 담긴 MapIterator를 반환한다.

## 사용자 정의 이터러블

아래의 코드로 이터러블을 커스텀할 수 있다.

```js
const myIterable = {
	[Symbol.iterator]() {
		let i = 4;
		return {
			next() {
				return i == 0 ? {done: true} : { value: i--, done: false}
			},
			[Symbol.iterator]() {
				return this;
			} // next()외에도 자기 자신을 리턴함으로써 언제든 이어서 iterate하게
		}
	}
}
let myIterator = myIterable[Symbol.iterator]()
```

위와 같이 자기 자신을 리턴하는 이터레이터를 잘 만들어진 이터레이터(well-formed iterator)라고 한다.
잘 만들어진 이터레이터를 받아 이어서 iterate할 수 있다.
JS의 순회가 가능한 대부분 라이브러리나 브라우저 web api들은 이 이터러블/이터레이터 프로토콜을 따른다.

*참고: 인프런 [함수형 프로그래밍과 Javascript ES6+](https://www.inflearn.com/course/functional-es6)*

for of는 Array, Map, Set과 같은 이터러블 객체의 이터레이터를 활용해 동작한다.

자바스크립트 함수형 프로그래밍: 이터레이터 프로토콜


2023년을 맞아 유인동 님의 인프런 [함수형 프로그래밍과 Javascript ES6+](https://www.inflearn.com/course/functional-es6) 강의를 듣기 시작했습니다.
자바스크립트 ES6가 나오면서 함수형 프로그래밍 스타일로 코딩을 더 간편하게 할 수 있게 도와주는 규약이나 기능이 추가되었는데요.
한번 배워보겠습니다!

## 평가와 일급

- 평가: **evaluate**, 값을 계산하는 것
(e.g. `1`을 평가하면 `1`, `2+3`을 평가하면 `5`, `10/2`를 평가하면 `5`가 된다.)
- 일급: 값으로 다룰 수 있다, 변수에 담을 수 있다, 함수의 파라미터로 사용될 수 있다, 결과로 사용될 수 있다.

### 일급 함수

- **함수를 값으로** 다룰 수 있는 함수
- 함수가 일급 함수다 = 조합성과 추상화의 도구로 함수를 사용할 수 있다는 뜻
- **함수의 파라미터로 함수를 제공**하거나 **함수가 함수를 반환**할 수 있다.

```js
function greet(helloFunc, name) {
	console.log(helloFunc()+ name);
}

greet(console.log('hi!'), 'haeun')
```

위 코드를 보면 `greet` 함수의 파라미터로 함수인 `console.log('hi')`를 넣을 수 있다. 이 경우 `greet` 함수는 일급 함수이다.

## 고차 함수

고차 함수란 **함수를 값으로 다루는 함수**를 말한다. 아래 예시의 `reduce`, `apply1`, `times`가 고차 함수다.

```js
const apply1 = f => f(1)
const add2 = a => a+2

apply1(add2); // apply1(a=> a+2)은 곧 a가 1이 되므로 3

const times = (f, n) => {
    let i = -1;
    while (++i < n) f(i)
}

times(a => log(a+10), 3) // a=>log(a+10)을 3번 반복한다. 이때 a는 i이므로 10,11,12가 결과가 됨
```

고차 함수는 함수를 만들어 리턴하며, 이때 클로저를 만들어 리턴하는 함수기도 하다.
아래의 예시에서 `addMaker` 함수는 함수이자 `a`를 기억하는 클로저다.
함수가 만들어지던 때의 환경인 `a`와 그 자체의 객체 `b => a+b`를 기억한다.

```js
const addMaker = a => b => a+b;
const add10 = addMaker(10)

console.log(add10) // b => a+b
console.log(add10(5)) // 15
```

평가란 값을 계산하는 것이고 일급함수란 함수를 값으로 다룰 수 있는 함수다.

자바스크립트 함수형 프로그래밍: 함수형 자바스크립트 기본기


## 서론

많은 개발자분들이 C++나 파이썬, 자바로 알고리즘 테스트를 준비합니다.  
하지만 이 경우는 백엔드 개발자가 많고, 요즘엔 많은 회사들이 프론트엔드 직군을 뽑을 때 
알고리즘 테스트 언어를 자바스크립트로 제한하죠. 

그래서 프론트엔드 개발자라면 실무 능력치도 키울 겸 자바스크립트로 코딩테스트를 준비하는게 좋아보입니다.  
다른 언어들보다 유저가 적은 만큼 문제와 best practices를 찾기 힘든 건 사실이지만요.  
오늘은 제가 자바스크립트로 알고리즘 문제를 풀어보면서 느낀 것과 배운 것을 적어보겠습니다.

## 자바스크립트 숫자 배열 정렬하기

```JavaScript
const arr = [1, 20, 3, 100, undefined]
console.log(arr.sort())     // 이 때의 값은?
```

위 코드에서 주석에 찍히는 배열은 어떤 모습일까요?  
배열의 원소를 올림차순으로 배열해 `[undefined,1,3,20,100]`일까요? 

정답은 `[1, 100, 20, 3, undefined]`입니다.  
자바스크립트 배열 기본 `sort()` 메서드는 파라미터로 콜백함수를 넣어주지 않을 경우, 
**배열 내 숫자를 문자열로 변환하고, UTF-16의 문자 순서대로** 배열을 정렬하기 때문입니다.  
그리고 모든 undefined는 배열의 뒷부분으로 정렬됩니다. 

그러면 자바스크립트에서 배열을 유니코드 말고 다른 기준으로 정렬하려면 어떻게 해야할까요?  
`Array.sort()` 의 옵셔널 파라미터인 `compareFn` 즉 **콜백함수**를 넘겨주면 됩니다.

`Array.sort()`는 `compareFn(a,b)`의 **리턴값**에 따라 배열의 원소를 정렬합니다.  
`compareFn(a,b)`의 리턴값이 0보다 크면 `b,a`  
`compareFn(a,b)`의 리턴값이 0보다 작으면 `a,b`  
`compareFn(a,b)`의 리턴값이 0이면 a와 b의 순서를 유지합니다.  
코드로 짜보면 이렇습니다.

```JavaScript
function compareFn(a, b) {
  if (a가 b보다 앞으로 와야하는 경우) {
    return -1;
  }
  if (b가 a보다 앞으로 와야하는 경우) {
    return 1;
  }
  
  return 0;
}
```

이렇게 **두 원소를 비교해 경우에 따라 -1과 0, 1을 반환하도록** 함수를 짜면  
커스터마이징된 정렬을 수행할 수 있게 됩니다.  
이 때 1,0만 반환하거나 -1,0만 반환한다면 정렬이 제대로 되지 않는다는 점 유의하세요!

문자열 배열 말고 숫자 배열의 원소를 비교할 땐 위 공식을 이용해 
a에서 b를 빼거나 b에서 a를 빼도록 하면 됩니다.  
a-b가 음수면 a가 b보다 앞으로 오고, 양수면 뒤로 정렬되는 거죠.  
(원소 중 `Infinity`, `NaN`이 없어야합니다.)

```JavaScript
const arr = [1, 20, 3, 100, undefined];

// 1: 함수 표현식
arr.sort(function (a,b) {
  return a-b;
})

// 2: 화살표 함수
arr.sort((a, b) => a-b)
```

이렇게요!



자바스크립트로 알고리즘 문제 풀때 주의해야할 것들

자바스크립트로 코딩테스트 준비하기


모던자바스크립트 Deep Dive 1장을 읽으며 정리합니다.

## 자바스크립트란

프로그래밍 언어로써 기본 뼈대를 이루는 `ECMAScript`와 브라우저가 별도로 지원하는 
클라이언트 사이드 Web API(DOM, BOM, Canvas, `XMLHttpRequest`, `fetch`, SVG, Web Storage 등)을 아우르는 개념입니다.
웹 브라우저에서 동작하는 유일한 프로그래밍 언어입니다. 또 개발자가 별도의 컴파일을 하지 않는 인터프리터 언어입니다.
인터프리터 언어의 경우 한줄씩 바이트코드로 변환하고 즉시 실행합니다. 
마지막으로 **명령형/함수형/프로토타입기반 객체지향 프로그래밍**을 지원하는 멀티 패러다임 프로그래밍 언어입니다.

## 자바스크립트가 표준화된 이유

마이크로소프트 등 여러 회사들이 자사 브라우저에서만 동작하는 기능을 추가하면서, 크로스 브라우징 이슈가 생기기 시작했습니다.  
그래서 자바스크립트 표준사양인 **ECMAScript**가 출시됐습니다. 
각 브라우저 제조사들은 ECMAScript 사양을 준수해 브라우저에 내장될 JS 엔진을 구현합니다.

### 자바스크립트 성장의 역사

초창기 자바스크립트는 웹페이지의 보조적인 기능만 수행했습니다.  
하지만 시간이 변하면서 점점 자바스크립트의 역할이 많아졌고, 서버의 일을 클라이언트가 하게 되기도 했습니다.  
JS의 발전에서 중요했던 기술들은 크게 `Ajax`, `jQuery`, V8 JS Engine, `Node.js`, SPA 프레임워크들이 있는데요.

Ajax(Asynchronous JS and XML)는 **자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능**입니다.  
Ajax 이전에는 화면이 전환될 때마다 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했는데요. 
변경하지 않아도 되는 부분의 HTML 코드를 서버로부터 다시 전송받기 때문에 불필요한 데이터 통신을 해야했습니다.

`jQuery`는 DOM을 쉽게 제어하게 해준 JS 라이브러리이고, V8 JS 엔진은 과거 웹 서버에서 수행되던 로직들이 클라이언트(브라우저)로 많이 이동하게 된 계기가 되었습니다.
`Node.js`는 구글 V8 JS 엔진으로 빌드된 JS 런타임 환경입니다. 원래는 브라우저의 JS 엔진에서만 동작하던 자바스크립트를 브라우저 밖으로 독립시켰습니다.  
덕분에 서버 사이드를 개발할 때에 JS를 쓸 수 있게 되었습니다. 마지막으로 앵귤러, 리액트 등 여러 SPA 프레임워크들이 등장했습니다.

모던자바스크립트 Deep Dive 1~3장

자바스크립트의 표준화와 발전 역사


`position:fixed` 인 nav 바의 3단 햄버거(한자 '석 삼')를 클릭하면 블로그 카테고리 리스트가 뜨되, 스크롤 시 그 아래로 지나가지 않게 하기

## 방법

JS의 ```toggle()```을 사용하면 된다.

## Toggle

![toggle](/images/blog/2203/toggle.png)

MDN 문서를 읽어보면 toggle()은 DOMTokenList(HTML Element의 classList 등)의 메소드다. 
그 리스트에 파라미터(토큰)가 있는지 확인하고, 없으면 추가한 뒤 true를 리턴한다.

예를 들어 ```HTMLElement.classList.toggle('show')``` 을 하면 HTMLElement 의 클래스 목록에 'show'가 있는지를 확인하고, 있으면 true, 없으면 추가하고 true를 리턴한다.

## HTML

```html
<div id="threeBarNav" class="container" hidden onclick="clickNav(this)">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
</div>
```

## JS

```js
function clickNav(x) {
    x.classList.toggle("open");
    const nav = x.parentNode
    nav.classList.toggle("open")
}
```

그래서 햄버거 바를 만들때도 js onclick에 toggle()를 넣어서 `classList.toggle` 하게 하면 된다.  
그리고 open이면 그에 맞는 css를 적용해주면 끝이다!


JS toggle로 고정된 네비게이션 햄버거 바 만들기


## 서론

이 글은 ‘코어 자바스크립트(정재남 저)’라는 책의 내용을 바탕으로 합니다.
책에는 더 자세한 예제와 설명이 되어 있으니 책을 꼭 읽어보시길 바랍니다.

## 자바스크립트의 데이터 타입

JS의 데이터타입은 **기본형(primitives values), 참조형(Object types)** 데이터로 나뉩니다. 
기본형의 경우 **숫자, 문자열, 불리언, null, undefined** 등을 포함합니다. 
참조형 데이터는 **객체, 배열, 함수** 등을 포함합니다.

기본형, 참조형 데이터의 차이는 할당이나 연산 시 기본형은 **값이 담긴 주솟값**을 바로 복제하는 반면, 
참조형은 값이 담긴 **주솟값들로 이루어진 묶음을 가리키는 주솟값**을 복제한다는 것입니다.

## 기본형 데이터의 할당, 연산 처리 과정

```javascript
var str = ‘abc’;
```

1. 비어 있는 변수 공간을 확보하고 식별자(변수명)를 str으로 지정
2. 메모리의 빈 공간에 문자열 ‘abc’를 저장
3. 변수 중 str라는 식별자를 검색
4. ‘abc’ 문자열의 주소를 str의 메모리 주소 공간에 대입 (= 변수 str이 ‘abc’의 메모리 주소를 가리키게 함)

Q. 왜 값을 변수 영역에 바로 대입하지 않나요?
A. 만약 값을 변수에 바로 대입할 경우 ‘abc’를 저장하는 변수가 5000개 있다면 ‘abc’를 값으로 하는 변수 5000개를 만들고, 5000개의 메모리를 확보해야합니다. 
그러나 ‘abc’의 메모리 주소를 변수에 대입하는 방식을 사용하면 메모리에 한번만 ‘abc’를 넣기 때문에 메모리를 절약할 수 있습니다.

## 문자열 데이터를 변환할 경우 (& 가비지 컬렉터 & 불변값)

```javascript
var str = 'abc';
str = str + 'def';
```

Q. 그럼 문자열 ‘abc’에 ‘def’를 붙이려는 경우엔 메모리 내 ‘abc’가 ‘abcdef’로 변하나요?

A. 이런 경우에는 ‘abcdef’라는 문자열을 새로 만들어 별도의 메모리 공간에 저장하고, 그 주소를 str에 새로 연결하게 됩니다. 
그 후 ‘abc’ 데이터는 자기 주소를 저장한 변수가 하나도 없어 **가비지 컬렉터**의 수거 대상이 됩니다.

=> 그렇기 때문에 기본형 데이터는 **불변값(Immutable)**이라는 특성을 갖습니다. 
메모리 공간 내에서 **한번 만들어진 데이터(!=변수의 값)**는 가비지 컬렉팅을 당하지 않는 한 영원히 변하지 않습니다.

## 참조형 데이터의 할당

지금까지 기본형 데이터를 보았다면 객체로 이루어진 참조형 데이터들은 어떻게 할당될까요? 
책 ‘코어 자바스크립트’에서는 임의의 변수 영역/ 데이터 영역(메모리)을 구분해 이해를 돕습니다.

```javascript
var obj = {
   a:1,
   b:'bbb'
};
```

1. obj라는 변수가 존재하지 않으니 변수 영역의 빈 공간을 찾아 그 공간의 식별자를 obj로 지정
2. 메모리에 obj의 프로퍼티(a,b)를 넣어야하는데 obj객체가 여러 프로퍼티를 가지고 있으니 별도의 변수 영역을 마련하고 그 영역의 주소를 obj의 값으로 지정
3. 별도의 변수 영역에 각각의 프로퍼티 값을 식별자로 지정하고 그 값을 데이터 영역에 지정
=> obj가 a,b를 담는 변수 영역을 가리키고, a,b를 담은 변수 영역은 각각 1, ‘bbb’라는 값을 가지는 데이터 영역을 가리키게 됨.

---------------------------------------

## 객체를 복사한 뒤 값을 바꾼다면?

```javascript
var obj1 = {c:10, d: 'ddd'};
var obj2 = obj1;
obj2.c = 20;

console.log(obj1, obj2); 
````

이 코드를 실행하면 obj2의 프로퍼티의 값을 바꿨는데 obj1의 프로퍼티의 값까지 바뀌어버립니다. 왜일까요?

그건 바로 저 코드가 obj2가 **참조하는 데이터의 값을 바꾸는 것**이기 때문입니다. 
obj1를 복사해 obj2 객체를 만드는 것은 사실상 obj1가 참조하고 있는 주소값을 똑같이 참조하는 객체를 만드는 행위입니다. 
그래서 데이터 변경 후에 obj2와 같은 데이터를 참조하고 있던 obj1의 값까지 달라져 버린 것입니다.
=> 그렇기 때문에 우리는 변하지 않는, **‘불변 객체‘가 필요**합니다.

---------------------------------------

## 얕은 복사(shallow copy), 깊은 복사(deep copy)

```javascript
function copyObject(target) {
 var result = {};
 for(var prop in target) {
  result[prop] = target[prop]
     }
     return result;
}
```

얕은 복사(shallow copy)란 **for loop를 돌려 바로 아래 단계의 값만 복사**하는 방법입니다. 
중첩된 객체에서 참조형 데이터가 저장된 프로퍼티를 복사할 때 그 주소값만 복사됩니다. 
즉, 얕은 복사를 할 경우 prop(프로퍼티)가 참조형 데이터일 경우 기존 데이터를 그대로 참조하게 됩니다.
 이를 방지하기 위해선 **참조형 데이터가 있을 때마다 얕은 복사를 재귀적으로 수행하는 깊은 복사(deep copy)**가 수행되어야 합니다.

```javascript
var copyObjectDeep = function(target) {                   // 깊은 복사
   var result = {};
   if (typeof target === 'object' && target !== null) {   // target이 객체인 경우
      for (var prop in target) {
      result[prop] = copyObjectDeep(target[prop]);       //재귀적으로 카피
      }
   } else {
      result = target;
   }
   return result;
   }
}            
```


자바스크립트의 데이터타입


원문 링크: [Understanding Javascript Function Executions — Call Stack, Event Loop, Tasks & more](https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec)

자바스크립트 내부 구조를 알아야하는 이유는 '웹 개발'의 범위가 점점 넓어지고 있기 때문이다.  
브라우저 안에서 사용자 상호작용을 담당할 뿐 아니라 컴퓨터 게임, 데스크탑 위젯, 크로스플랫폼 모바일 앱,
이것들을 DB와 연결하기 위해 서버사이드(주로 node.js) 작업까지 포함하곤 한다. (스크립트 언어로서의 거의 모든 것을 수행한다.)

점점 넓어지고, 복잡해지고 있는 JS 생태계 덕분에 자바스크립트 개발자들은
루트 레벨에서 라이브러리나 프레임워크들이 어떻게 동작하는지 알아야한다.

## 콜스택, 힙, 큐

### single threaded single concurrent language

- handles one task at a time or a piece of code at a time.
- has a single call stack which along with other parts like `heap`

#### Call stack

- 프로그램의 함수 호출을 기록하는 자료구조 (함수를 실행하면 스택에 그 함수를 push, 가장 나중에 넣은 걸 pop)
- 재귀적으로 한 함수를 여러번 호출하면 무한 루프가 생긴다. 그렇게 되면 `RangeError: Maximum call stack size excedeed` 에러를 던진다.
(크롬 브라우저의 경우 스택의 제한은 16000 프레임이다.)

#### Heap

- 객체는 힙(메모리의 unstructured region)에 저장된다. 모든 변수, 객체 메모리 분배는 여기서 일어난다. (힙이 ... 배정을 관리하는거임? 아니면 걔네가 다 여기 저장된다는거임)

#### Queue

- 한 자바스크립트 런타임은 한 메시지큐를 포함한다.
메시지큐는 process되어야하는 메시지와 관련되어 실행되어야하는 콜백 함수의 목록이다.
만약 스택이 충분한 용량을 가지고 있으면 메시지는 큐에서 꺼내져서 실행된다.
메시지 프로세싱은 스택이 비워지면 끝난다. 


콜스택, 이벤트 루프와 태스크 등

자바스크립트 함수 실행 이해하기 (콜스택, 이벤트루프, 태스크 등)


## 자바스크립트는 가비지 컬렉티드 언어

자바스크립트는 가비지 컬렉션을 해 메모리를 관리한다.
이전에 할당된 메모리를 앱에서 여전히 사용중인지 주기적으로 검사(추적)해 할당한 메모리 영역이 필요없을 경우 그 영역을 회수한다.
덕분에 개발자들은 메모리 관리를 덜 신경쓸 수 있다.
Garbage collected 언어가 아닌 경우, **메모리를 더 이상 사용하지 않을 때 컴파일러가 메모리를 회수하도록 코드에서 명시**해줘야한다.

자바스크립트에서 변수는 값을 그대로 담고 있는게 아니라, 해당 값을 메모리에 저장하고 그 메모리를 참조한다.

## 자바스크립트의 가비지 컬렉션 알고리즘: mark-and-sweep

1. 루트(roots) 목록 생성 (JS의 `window` 객체 포함, 코드에서 계속 참조되는 전역 변수들)
2. 모든 루트를 검사해 활성화 상태임을 표시
3. roots의 자식들을 재귀적으로 검사해 도달 가능한 자식 객체들을 활성화 상태로 표시.
4. 활성화 되지 않은 메모리 조각은 폐기될 수 있는 것으로 판단하고 메모리 해제 및 OS에 반환

예상치 못한 참조: 더 이상 사용되지 않을 줄 알았지만 활성화 상태 트리에 존재하는 메모리 조각들

## 자바스크립트 메모리 누수의 3가지 형태

1. 우발적으로 생성된 전역 변수
2. 순환 참조하는 경우: 클래스끼리 서로 상속한다던가, 두 모듈이 서로를 참조하는 경우. 이런 경우에는 null을 할당해 연결을 끊으면 된다.


자바스크립트 mark-and-sweep 알고리즘, 메모리 누수의 형태

JAVASCRIPT

'JAVASCRIPT'에 관한 글들을 모아봤어요.