ECMA (에크마)

https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

ECMA 혹은 EC
JS를 표준화문서이다.

그래서 EC6 같은것을 앞으로 보게 될 것이다.

EC6 부터 최신 브라우저들을 지원하기 시작했다. 그래서 EC6을 중요한 변환점이라고 이야기한다.

npm init -y
npm install parcel-bundler -D

npm run dev

ES6

import from, export

자바스크립트는 세미콜론없이 작성가능 한줄에 여러개 작성을 위해서는 세미콜론을 넣어야함

• typeof

null과 undefined 차이는 null은 의도적으로 아무값도 넣지 않은 것이다.
typeof를 사용하지 안고 따로 getType함수를 만든이유는 typeof 실행시 정확하게 우리가 원하는 타입을 구하기 힘들기 때문이다.

이렇게 문자열을 잘라서 type만 출력할수도 있다.

하지만 getType함수는 이곳에만 정의되었기 때문에 다른 파일에서는 사용 불가능하다.

이것을 개선하기 위해서

getType.js 파일을 만들고 거기에 함수를 작성해서 내보내기가 가능해진다.

그래서 위와 같이 import from을 사용해서 가지고 올 수 있다.

이때 중요한것은 getType.js라는 파일에서 가지고 온다는 것을 명시해주어야 한다.

연산자

• 산술 연산자

• 할당 연산자

• 비교 연산자, 논리 연산자

http://guswnsxodlf.github.io/javascript-equal-operator

놀랍게도 ==와 ===가 다르다.
==은 타입이 다를때 강재로 타입을 바꾸어서 비교하고 ===은 우리가 알던 비교연산자다.

참고로 불일치 연산자도 이렇게 생기었다.

더 놀라운점은 이런 꺽쇄는 또 <== 같은게 없다. 그래서 위의 연산은 숫자와 아스키 값의 비교이다.

그외의 논리연산자도 존재한다.

삼항 연산자

도 사용가능하다

if else

일단 파일을 만들어주자.

위와 같이 if ~ else if ~ else 구문을 사용할 수 있다.

switch

switch 문도 사용가능하다.

반복문

이런식으로 addEventListener도 추가해보았당

변수 유효범위

보다 싶이 if 문 밖으로 가면 에러가 뜬다.

그런데 var을 사용하면 함수 범위안에서는 어디서든 사용할 수 있다. 그렇다보니 var은 에러가 나기 쉽다. 그래서 가급적 사용하지 말라고하는 것이다.

형변환

예를 들어서 동등연산자(==)을 사용하면 강제로 형변환이 이루어져서 형변환이 된다. 하지만 가급적 동등연산자는 쓰면 안된다.

명확한 거짓 값 몇가지를 제외하고 모든것들이 참이다.

대표적으로 문자열이 그런류이다.
NaN은 숫자 + undefined 하면 뜬다.

JS 함수

보통 함수 종류는 기명, 익명 함수, 화살표 함수 세가지가 있고
매개변수를 없애고 그냥 arguments 라는 키워드로도 받을 수 있다.

화살표 함수

화살표함수는 위와 같이 생기었는데 화살표함수는 진짜 축약의 축약을 할 수 있다는 특징이 있다.

만약 아래와 같이 중괄호 안에 작성하면 반환이 안된다.

const doubleArrow2 = x => {x * 2}

객체 데이터 반환을 원한다면 소괄호로 한 번 중괄호를 감싸주어야 한다

const doubleArrow2 = x => ({name: "tonyhan18"})

IIFE즉시실행함수

대충 이렇게 만들자마자 쓰고 버리는 함수를 구지 이름을 붙이지 않고 사용하는 방법이다.

위와 같이 함수를 소괄호로 묶고 뒤에 소괄호를 추가로 넣어주는 것으로 만들어진 함수를 바로 실행할 수 있게 된다.

유일한 단점은 이 함수 바로 이전에 있던 코드의 끝에는 반드시 세미콜론이 찍혀있어야 한다.

이와 유사하게 두번째 방법과 같이 사용도 가능하다.

호이스팅(Hoisting)

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

위와 같이 익명함수로 작성했는데 오류가 뜬다.

반면 가명 함수로 쓰면 에러 없이 정상 실행된다.

js 엔진에서는 함수가 실행될 수 있는 최상단으로 올라가서 실행된다는 호이스팅이라는 개념이다. 이러한 점은 함수가 앞으로 복잡해짐에 따라서 함수가 직접적으로 만들어진 부분은 최하단에 선언해 주어야 한다. 그래야 함수 로직을 구지 않보고 기능만 확인할 수 있기 때문이다.

타이머 함수

// 타이머 함수
// setTimeout(함수, 시간): 일정 시간 후 함수 실행
// setInterval(함수, 시간): 시간 간격마다 함수 실행
// clearTimeout(): 설정된 Timeout 함수를 종료
// clearInterval(): 설정된 Interval 함수를 종료

의 종류가 존재한다.

이것을 실재 사용해보자. setTimeout함수에 익명의 함수를 넣고 3000(= 3000 밀리세컨드 = 3초)을 입력하면 파일이 실행되고 3초후에 tonyhan18이 출력된 것을 확인할 수 있다.

이것을 사용하기 위해 h1으로 되어 있는 Hello World를 긁어왔다. 그리고 화살표함수로 clearTimeout이 되도록 timer을 인수로 넣었다. 그랬더니 3초 전에 클릭했더니 콘솔에 아무것도 뜨지 않는 것을 확인할 수 있었다.

이번에는 setInterval을 사용했는데 누적으로 콘솔창에 출력되지만 clearInterval로 중간에 이것을 멈출 수 있었다.

콜백(call back)

위와 같이 timeout은 실질적으로 우리가 출력을 원하는 문자열이 나오지 않았음에도 불구하고 Done! 이 먼저 출력된것을 확인할 수 있다. 하지만 만야겡 우리는 timeout이 먼저실행된다음에 Done!이 나오기를 원하면 어떻게 해야할까?

위와 같이 함수 자체를 인수로 넘기고 setTimeout에 실행을 보장하고자 하는 함수를 넣어서 tonyhan18 이후에 Done!이 나온 것을 확인할 수 있다.

그래서 콜백함수는
1. 함수의 인수로 사용되는 함수이고
2. 실행 위치를 보장해주는 함수이다.

클래스

위와 같이 tonyhan을 출력하면 객체 내용이 출력되는 것을 확인할 수 있다.

멤버함수를 출력하면 위와 같이 되는 것도 확인할 수 있다.

그래서 이런식으로 객체를 작성했다고 하자. 그러면 너무 불편하다 매번 객체를 일일히 만들어주어야 하니까 말이다. 그래서 이것을 하나로 묶어주기 위한 방법을 확인해보자.

자바스크립트 클래스는 원래의 클래스와 조금 차이는 있지만 확인해보자.

위와 같이 함수를 선언하고 함수 멤버로 매개변수를 넣고... 그리고 변수에 new 라는 키워드로 하나의 객체 데이터를 생성해서 객체를 만들 수 있게 된다.

하지만 new도 불편하다면 {}를 사용해서 생성할 수 있다. 이러한 간단한 문자로 데이터를 만드는 것을 리터럴 방식이라고 한다.([], {}, "" 도 리터럴 방식)

이렇게 new로 생성된 객체를 가지고 있는 변수를 인스턴스라고 부른다.

또한 위와 같은 방식으로 prototype을 이용함 함수를 추가할 수도 있다.

실재로 함수가 정상적으로 작동하는 것도 확인할 수 있다.

주의 가급적 JS의 클래스가 될 함수의 이름은 대문자로 시작해주자. 이를 pascal case로 작성된 이름이고 이는 곧 생성자 함수라는 것을 의미한다.

나는 이걸 바꾸어줄때 Ctrl + Shift + L을 이용해서 전체선택한다음 이름을 바꾸어 주었다.

this

일반(Normal) 함수는 호출 위치에 따라 this 정의!
화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의!

우선 normal과 같은 경우 함수가 호출되는 tonyhan.normal() 부분에서 tonyhan 객체가 바로 this를 의미하게 된다.

하지만 화살표함수의 경우 코딩하는 환경에 따라서 다양한 것을 지칭할 수 있다. 그래서 무엇인지 알 수 없기 때문에 undefined가 뜬것이다. 즉 arrow함수는 호출위치에 상관없이 화살표함수가 선언된 함수 범위 안에서 this가 정의된다.

이번에는 아래 wolf 부분에서 tonyhan의 함수들을 할당하고 있다. 즉 호출하는게 아닌 normal과 arrow에 있는 데이터가 wolf 객체에 있는 변수에 데이터가 할당되고 있는 것이다.

결국 출력은 위와 같이 가명 함수는 wolf가 출력되지만 화살표함수는 undefined가 된것이다.

이와 유사하게 prototype을 사용시 위와 같이 결과가 나왔다.

이번에는 위와 같이 작성했는데 undefined 된것을 확인할 수 있다.

반대로 화살표 함수를 사용했는데 위와 같이 정상 출력된 것을 확인할 수 있다. 어째서일까? 이건 setTimeout이라는 함수가 timeout 안에 정의되어 있기 때문에 가능한 일이다. 그래서 앞으로 setTimeout과 같은 콜백함수를 사용하는 함수를 이용할때는 화살표함수를 사용하자

ES6 Classes

ES6 의 클래스를 보기 전에 객체 데이터를 보자 이전 시간에는 normal:function() 식으로 작성했지만 실재 개발할때는 function을 없애도 된다.

이번에는 이전에 만든 User 객체 데이터를 클래스로 바꾸어보자. 알려주지만 자바스크립트 클래스는 다른 언어를 따라한 것이다.

클래스로 위에서 만들었던 부분을 바꾸었다. 정상작동하는 것을 확인할 수 있다.

상속

상속을 받을경우 extends 키워드를 사용하면 된다.

그리고 부모클래스의 생성자 호출을 위해 super을 사용하면된다.