
## 서론

많은 개발자분들이 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 알고리즘, 메모리 누수의 형태

자바스크립트의 가비지 컬렉션


자바스크립트는 브라우저 말고 서버에서도 실행 가능 + JS 엔진이 든 모든 디바이스에서 동작. 브라우저엔 JS 가상머신이라 불리는 엔진이 내장되어있음.
엔진의 종류는 다양하다. (V8: 크롬, 오페라 / SpiderMonkey, Chakra …)

**JS 엔진 동작 기본 원리**
1. 엔진 (브라우저라면 내장 엔진)이 스크립트를 읽는다 (파싱)
2. 읽어들인 스크립트를 기계어로 전환 (컴파일)
3. 기계어로 전환된 코드가 실행됨. 기계어로 전환되었기때문에 실행 속도가 빠름

엔진은 위 단계마다 최적화를 진행함. 심지어 컴파일이 끝나고 실행중인 코드를 감시하면서, 
이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 한다. 이 과정을 통해 스크립트 실행 속도가 더 빨라진다.

**브라우저에서 할 수 없는 일**: 파일 접근 (브라우저 창에 파일을 끌어다두거나 인풋 태그로 선택하는 등 특정 상황에서만 파일 접근 허용)

브라우저에서 실행 전 트랜스파일할 수 있는 언어들의 예시: 타입스크립트(자바스크립트로 트랜스파일 가능)

## 프로토타입이란

아래 두 `doSomething()` 메서드의 차이가 뭘까?

```javascript
Array.doSomething()
Array.prototype.doSomething()
```

여기서 위의 `doSomething()` 메서드는 Array 클래스에서만 작동하고,
아래 메서드는 Array 인스턴스에서만 작동한다.

```javascript
let arr = [1,2,3,4]; // arr is an instance of Array
let arr = new Array(1,2,3,4);
```

위 코드에서 `arr`은 자바스크립트 배열의 인스턴스다. 위 아래 똑같다.  
객체지향 프로그래밍에서는 클래스라는 틀을 기반으로 인스턴스(하나의 예시)들을 만들기 때문에
배열 하나를 만들때는 `new Array()`를 사용해서 만들어주면 된다.

## JS의 프로토타입

자바스크립트는 프로토타입 기반 언어다. 프로토타입을 사용해 객체지향 프로그래밍을 흉내낸다. 이 때
프로토타입은 원형을 뜻한다. 인스턴스는 원형의 **모양대로** 만들어진다. 
`인스턴스 === 원형`이 아님에 주의하도록 하자. 
자바스크립트에서 인스턴스의 메서드는 `Object.prototype.doSomething()`으로 표현한다.
ES6 문법에서는 문법을 좀 더 편리하게 하기 위해 'class'라는 키워드를 도입하였다.

## 클래스

```javascript
function Car(model, brand) {
    this.model = model;
    this.brand = brand;
}
    
let spark = new Car("스파크", "쉐보레");
let avante = new Car("아반떼", "현대");

Car.prototype.ride = function() {
    console.log(`${this.model}이 달립니다`)
};
```

클래스와 객체의 차이는 뭘까?

### 클래스

- 조금 더 연관있는 데이터를 한 데 묶어놓는 컨테이너이자 템플릿, 즉 붕어빵 틀이다.
- 처음 한번만 선언하고 데이터(붕어빵 반죽, 팥)는 들어있지 않다.
- 데이터(fields)와 행동(methods)를 담아 캡슐화를 해 상속과 다형성 등의 특성을 가진다.

### 객체

- 클래스에 데이터를 넣어 만든 인스턴스를 객체라고 한다. 붕어빵 틀에 반죽을 넣고 만든 팥붕 슈붕이 객체인 셈이다.
  
## 프로토타입 확장하기

```javascript
Number.prototype.multiplyTen = function() {
    return this * 10
}

let num = 5;
num.multiplyTen(); // 10
```

위 방식으로 자바스크립트에서 기본으로 제공하는 객체에 사용자 정의 메소드를 개발자가 직접 추가할 수 있다.
그러나 좋은 방식은 아니다. 메서드를 확장할 경우 다른 코드와 충돌을 일으킬 수 있다.
직접 클래스를 작성할 때에만 프로토타입 메서드를 정의하는게 좋다.

## JS Tips

- var는 정의되기 전에 접근할 수 있지만 그 값에는 접근 불가능
- let, const는 정의하기 전에 접근 불가
- 호이스팅: 모든 변수가 실행전 범위 내 상단으로 올라감. var는 정의되기 전에는 undefined, let은 변수가 선언될까지는 TDZ(Temporal Dead Zone비활성구역)에 있어서 오류가 발생
- 기본적으로 const 사용하자. 재할당 필요할 때만 let 사용하자. Var는 ES6에서 절대 사용X
- 디스트럭처링: 배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 하는 JS 표현식
- JS도 제너레이터 있음

## 반복문

- For of 루프/ 객체는 iterable이 아니니까 Object.keys()로 값 가져와서 for of 루프 돌리면 됨
- for in 루프는 순서 없이 객체의 모든 iterable props를 반복. for in 루프는 키 목록을 반환함

## Array 함수

```javascript
- Array.from() 객체를 배열로 받아서 변환(html elements 받아오기 유용)
- Array.from('apple')하면 [a,p,p,l,e]
- Array.of() 전달받은 인수로 배열생성
```

## 스프레드 문법

: 배열 복사본 만들 때 매우 유용

```javascript
const veggie = [1, 2];
const meat = [4, 5];
const menu = [...veggie, 3, ...meat];
// menu = [1,2,3,4,5]
```

## Rest 문법

: ...로 특정한 놈들만 빼고 압축해줌

```javascript
const runners = [1, 2, 3, 4];
const [first, second, ...losers] = runners;
console.log(losers); // 3,4
```


JAVASCRIPT