[객체:기본 이어서]

arrow function 이 나온 배경 this는 런타임 시 결정 됨

생성자 함수의 경우

  function User(name) {
    this.name = name
  }

이라고 한다면

User(“aaa”) 이런식으로 하면 안되고
new User(“aaa”)
new를 붙여줘야 해당 객체가 만들어진다.

function(par, par2, …)
필수 파라미터를 넘기고, 그 외에는 optional하게 넘기고
옵션을 어떻게 설정하느냐에 따라서 어떤 방식으로 쓸지를 결정할 수도 있다.
함수 overriding이 안되고, overwriting이 되버리기 때문에
위와 같은 기법으로 많이 쓴다.

  let user = {}; // 주소 정보가 없는 사용자<br>
  alert(user.address.street); // TypeError: Cannot read property 'street' of undefined<br>


과 같은 경우 

  console.log(user.address && user.address.street || 'a')

이런식으로 찍어보면
둘다 없다 치면 ‘a’가 출력된다.
alert( user?.address?.street ); // undefined 에러가 발생하지 않습니다.
이런 방식으로 간단하게 쓰면 undefined로 출력하여 검지할 수 있다.

[자료구조, 자료형]

Math.floor 버림
Math.ceil 올림
여기서 주의할 것은 -1.1 버림은 -2 가 되고 올림은 -1이 된다는 음수의 경우
자바스크립트에서 숫자형 연산은 생각보다 난해하다 (주의)

문자열은 재밌는게 배열이 아니지만 배열처럼 쓸 수 있다.

  var a = 'abc'<br>
  a[0] // a 가 된다.<br>

string에 indexof 함수도 지원해준다.

string 안에 right라는 함수를 만들 수 있다.
string.right 를 쓸 수 있다.
array.remove도 만들 수 있다.

object에 뭘 만들 수 있는데… 그러면 다 쓸 수 있고
근데 문제 될 수 있으니 웬만하면 안쓰는게 좋다.

mdn 을 보는 방법

“새 배열을 반환한다.” 는 문구가 있으면 해당 배열은 그대로고 새로운 배열을 만드는 것이고
이런 문구가 없으면 그 원본 배열을 바꾸는 것이다.
이 문구를 잘 보면서 써야 한다.

배열에서..

var arr = [];
arr.length = 1000000; 으로 넣어주면
arr를 출력해보면 백만이 됨
실제 길이가 바뀜. 그런데 그만큼 메모리를 차지하는 것은 아님.

  • filter는 반드시 return true를 써줘야함.

  • sort 정렬은 유니코드에 따라 정렬하는 거기 때문에 제대로 잘 안되고
    비교연산으로 만들어주는게 낫다.
    배열함수의 경우 많이 쓰게 될 것이다 써보면 생각보다 어렵지는 않다.

  • reduce() 어렵지만 여러가지 많은 것을 할 수 있다.

object

object에
object.key
object.value

  • for .. of 는 array에만 되는데
    object의 경우 key, value를 참조해서 for 문 돌려도 됨

  • 구조분해 할당
    배열, 객체의 경우 모두 가능..
    객체의 경우는 key값에 대응해줘야함.

  • date
    커스텀한 형식으로 붙이기 위한 예외처리를 해줘야 함.
    한달을 더해야하냐, 30일을 더해야하냐…
    moment에 있는 걸로 쓴다고 함.

  • JSON OBJECT 임.
    parse를 하는데 오류가 난다. key value 모두 “” 묶여있는지 확인
    toJSON 함수 통해 만들 수 있음.

  • 전개 문법
    …arg
    이 경우 arg를 배열로 만들어준다.
    이렇게 안쓸 경우는
    argument[0], … 이렇게 표시하지만 얘는 배열은 아님
    이 두개의 가장 큰 차이는 Array.prototype 의 함수를 온전히 쓸 수 있냐 없냐의 차이는

  • 변수의 유효범위 클로저
    일단 변수 호출을 보고 싶으면 (어디 어떤 애가 호출 된건지 보고 싶으면) console.trace를 쓰는게 좋다.

  • 함수 내의 함수
    클로저의 대표적인 것은 함수 즉시 실행 () 얘

  • ‘var’는 블록단위에서만 접근 가능

  • 전역 객체 : window
  • var로 선언한 것은 delete가 안됨

폴리필 사용하기


함수도 객체임..
익명함수 남용은 좋지 않다

new function 함수 자체를 동적으로 생성할 수 있다.

함수가 너무 많아서 너무 실행시간이 길어져서..
실행 시간을 너무 오래 걸려서 에러페이지 뜰 수 있음
setTimeOut안에 넣어서 실행하면 이벤트 큐에 넣겠다는 것이다.

또 콜백함수를 쓸줄 몰라서
setTimeOut으로 대략의 시간을 예상해서 다음으로 실행하게 만들지 말 것

call/apply 를 써서 원서 자동 테스트 쪽에서 사용한다.
결국에 그 함수를 갔다쓰겠다는 것이다.

함수 바인딩
this

[객체 프로퍼티 설정]

프로퍼티 플래그
프로퍼티 설정 막아주는 애들… freeze 같은 애들 있는데 이런 애들은 브라우저 별로 다르기 때문에 잘 보고 쓸 것

get,set은 뷰에서 쓰는 기본 개념이다 정도만

프로토타입
인터넷에 내가 쓰는 객체의 프로토 타입을 찾아볼 순 있지만 거의 뭐 찾아볼일 없음

상속 받은 프로퍼티를 수정할 땐
Array.c = … 이렇게 쓰면 프로퍼티 추가이지 상속받은 애 쓰는 거 아님
Array.proto.c = … 이렇게 써야함.

체이닝…
프로토타입 체이닝, 연쇄적으로 찾아가는 것 가능

Object.create(null) 로 객체 생성할 수 있는데 용법이 다르기 때문에
가끔 있는데 리터럴로 생성하는게 좋음.

[클래스]

클래스는 함수임!
extends 에 대해서..
이게 ecma5 의 표준이 아님.
그래서 prototype을 직접 지정하여서 만드셨음

extends 같은 기능을 쓰려면 웹팩을 가져와서 써야 하고
열줄 코드가 1mb 가 넘을 수 있게 됨..
깔끔한 코드는 이런걸 생각해야 함.

instanceof 를 통해 그 클래스로 만들어진 객체인지를 확인할 수 있음

typeof 로는 Array와 Object 가 비교가 안됐는데
object.prototype.toString() 에 쓰면 가능하다.
object.prototype.toString.call(value) 를 받으면 됨

[에러 핸들링]

이거 쓰면 디버깅이 잘 안되기도 함.
거의 안쓰는 것 같은데, 라이브러리에서 가끔, 정말 필요한데 없는 경우 throw로 에러를 보낸다.

window.onerror 를 쓰면 전역 에러를 조작해줄 수 있음 원서접수에 많이 쓰여있음

커스텀에러 노드에서 많이 쓰임

[프라미스 async, await]

1. 콜백

자바스크립트는 1급함수이다
자바스크립트는 콜백을 함수 개념으로 던짐
c#은 순차 실행에 가까움
자바스크립트는 순차 실행이 안되는게 많음
ajax, dom 컨트롤, 대부분 비동기로 동작함

어떤 함수 중간에 시점을 줘서 그 시점에 함수를 출력해주겠다는 것.
모의 논술이 콜백
콜백 중첩 콜백 엉망진창 보기 정말 어려움

그래서 편하게 쓰기 위해서 만든 것이 promise 임.

2. promise

ie에서 제공안하는데, 폴리필이 있음.
resolve, reject
프라미스 객체가 만들어지고
콜백 두개 생기는 것임.
resolve, reject를 실행시키면 됨

promise = 함수 실행
promise.then = 그 다음 함수
promise.then = 그 다음 함수
이런 식으로 콜백 hell 을 방지할 수 있다.
근데 실제 사용해보면 쉽지는 않단다.
그러므로 잘 찾아서 써보는 걸 추천

fetch라는 애가 있는데 ajax임 정말 단순하게 쓸 수 있는.
fetch는 promise 임.
그냥 fetch를 통해서 callback 을 할 수 있다.
.then으로 체이닝을 해야 한다.

catch, then은 계쏙 연쇄 반응을 일으킬 수 있다.

한번에 여러개를 가져와서 그걸 쓰겠다. promise.all
jQuery에서 $when(안에 두개의 $.ajax) 두개를 한꺼번에 받는 것임
하고 .then() 이런식으로…
두개 합쳐서 한번에 가져와 이게 이제 되는 것이다 옛날엔 api 만들어줬음
js에선 promise all이라는 애가 있음

promise.race 언제쓸지 모르겠음

프라미스 화 굳이..

비동기적인 실행이 가능한 이유.
마이크로 태스크 큐

마지막에 .catch 를 넣어주면 에러 잡을 수 있음 안넣주면 에러뜸

3. async, await

async는 그냥 쓴다고 달라지는건 없는데 await를 안에 쓰려면 써야 함
중요한건 awiat
async로 감싸는 순간 그 함수가 promise가 된다.

await를 쓰면 .then이 없어짐
바로 다음줄 실행 됨.
await는 윈도우에서 실행 안됨

[제너레이터와 비동기 이터레이터]

이건 어따 쓸지 아직까지 모르겠음
랜덤 문자열 발생? 차라리 딴거 쓰는게 낫지

[모듈]

minify
uglify 최대한 작게 만들겠다는 것임.
name, value, key 를 a,b,c 로 치환 해버림
그러면 디버깅 할 때 어려워짐
js.map 파일
uglify 과정에서 어떤 변수가 뭘로 맵핑 됐다는 것을 표시해주는 파일
=> min.js 파일이 만들어짐
용량 줄이는 것과
노출 안되는 것에 목적이 있다.
그래도 알 사람은 안다.

스크립트에 defer 속성을 주면
무시하고 넘어감.
script load를 빠르게 해줌

[기타]

자바스크립트의 한계를 뛰어넘은게
2008, 2015년이 1,2단계
여전히 막강함.
많이 알아둘수록 나쁠게 없음

proxy 는 가로채기의 의미
뷰가 이거 썼음.
getter, setter가 모양이 바뀌었구나 정도 알면 됨

  • Eval
    vue에서도 eval을 써서 그 안에서 실행시키는 코드를 사용한 듯

  • curry
    log를 찍을 때, 에러에 대한 로그..
    어떤 단계에서 로그를 찍을 지 결정이 필요함.
    log(a name, b name, c name);
    ==> log(a name)(b name)(C name);
    나눠서 분할 연산을 함으로써 어디서 문제가 생겼는지 trace 할 수 있음

    lodash 를 쓰면 알아서 이렇게 바꿔줌 curried..

  • DOM 시작
    [문서]
    META 네임은 잘 안씀 다양한 플랫폼 정보를 담고 있는 것임
    언어, LOCALE, 호환 정보 등.
    B2B에서는 거의 쓸일 없음, 중요치 않으니까 유저가 정해져 있으니까

    innerHTML html 콘텐츠

    ie에서는 tbody를 안만들어줌

    jQuery 가장 중요한 것은
    셀렉터를 잘 만들어내는 것이 관건이다.
    dom 트리 생각해서 셀렉터 만드는 것이 중요

    굉장히 많은 메서드가 있는데 이 것은 jQuery 공부하는게 제일 좋다.

    애니메이션은 jquery나 bootstrap을 쓰기.