모던 자바스크립트: 동작원리 & 함수 다루기

모던 자바스크립트란?

JS는 시간이 지나며 유용한 기능이 추가되고 발전하는데 ECMA international에서 이를 관리한다.

새로운 내용이 추가될 때마다 ES1, ES2, ~, 로 출시중이다.

웹 브라우저는 최신버전을 항상 완벽하게 지원하지는 못한다.

따라서 현시점에서 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 스크립트를 모던 자바스크립트라고 부르게 되었다.

---

자바스크립트의 동작원리

-데이터 타입의 특징과 종류

유연한 데이터 타입: 상황에 따라 타입이 변할 수 있음. (연산 등)
추가된 데이터:
- Symbol: 유일한 값
    `const user = Symbol('this is a user');`
    이런식으로 사용한다~
    어떤 값과 비교해도 false를 반환한다.
- BigInt: 엄청 큰 수
    Int로 표현할 수 있는 안전한 수의 범위는  `2**53 - 1` ~ `-(2**53 - 1)`이다.
    이 이상을 표현할 때 BigInt를 사용하면 된다.typeof 연산자

-typeof 연산자

-불린인 듯 불린 아닌 불린같은 값

조건문의 조건부에서는 불린타입이 아닌 값도 불린형으로 평가된다.    
*falsy: `false, null, undefined, NaN, 0, ‘’` 

-And와 OR의 연산방식

And, Or 연산자는 좌우의 값 중 하나를 선택하여 반환한다.    

왼쪽값이 ture면 오른쪽, false면 왼쪽 값을 반환함.   
*And가 Or보다 우선순위가 높다!

-null 병합연산자

??로 null이나 undefined 값을 가려낼 수 있다.
`const example1 = null ?? 'I';
const example2 = undefined ?? 'love';
const example3 = 'Codeit' ?? 'JavaScript';`

-변수와 스코프    

var, val은 Hoisting 문제가 있음 (선언문 윗 코드에서 변수를 사용가능한 문제)
또한 변수의 중복 선언 및 함수에서만 스코프를 인식해 지역변수로 사용되는 문제가 있는데,

let과 const에서는 코드블록에서도 스코프를 구분함.

---

함수 다루기

-함수를 만드는 방법

함수 선언: function 함수명 () {}

함수 표현식: const 함수명 = function () ⇒ {}

함수 선언은 호이스팅 문제 및 스코프 문제가 있음.
장단점이 있으니 잘 구분해서 사용하자~

-이름이 있는 함수 표현식

-기명 함수 표현식:

함수 내부에서 함수를 호출 할 경우(재귀함수 등) 이름을 명시하여 그 이름을 사용한다.

-즉시 실행 함수 (IIFE)

`(function()    {실행부}    )();`    

함수 부분을 ()로 감싼 뒤 ()를 붙이면 선언과 동시에 실행된다. (외부 재사용 불가)
주로 프로그램 초기화 기능에 많이 활용된다고 한다.
~~재귀함수를 딱 한번만 사용할 때 사용할 수 있겠지만 굳이..?~~

-값으로서 함수

함수는 여러 프로퍼티를 갖는 객체이다.

어디에서나 할당되고 사용될 수 있다. (배열 객체 등)
콜백 함수: 파라미터로 들어간 함수
고차 함수: 함수를 리턴하는 함수 `함수명()()`로 즉시 고차함수 호출도 가능

-Parameter

함수 선언시 넣는 값은 파라미터

함수 호출 시 넣는 값은 아규먼트

기본값을 넣으면 아규먼트가 전달되지 않은 경우나 undefined인 경우에도 기본값이 사용됨.

-Arguments

함수 내에선 `arguments` 라는 객체를 사용할 수 있다.

호출시 전달한 아규먼트를 이로 접근할 수 있다.

-Rest parameter

`function 함수명(…arg){}` 로 사용

기본적으로 Arguments와 같이 동작하지만 배열 형태로 편하게 사용할 수 있다.

함수 선언시 함수 파라미터 끝에 …arg를 사용하여 나머지 arguments만을 다룰 수 있다.

-Arrow Function

`const 함수명 = () ⇒ {}`

파라미터가 하나일 경우 ()는 생략가능.

{}와 함께 return도 생략 가능.

*arguments 객체가 없음.

-What is this?

객체에서 함수를 사용할 경우 this로 호출한 객체를 지정할 수 있음

*arrow function에서는 this 사용불가