✅ 목표 사용자 정의 객체를 이터러블 프로그래밍 하는 것이 무언인지 알아보자! 👋 Map함수를 통해 이터러블 프로그래밍 내장 된 Map 함수 미리 내장된 Map함수를 통해 이터러블 프로그래밍 가능 , 사용 가능 이터러블 프로그래밍 👋 Set함수를 통해 이터러블 프로그래밍 👋 클래스를 통해 이터러블 프로그래밍 Model, Collection 사용 Collection 제너레이터 사용 전 Collection 제너레이터 적용 Class에 이터러블로 순회할 수 있도록 적용함 👋 Product, Products - 메서드를 함수형으로 구현하기 👍 느낀점 사용자 정의로 객체를 만들어서 이터러블 즉, 함수형 프로그래밍을 하는 방법을 학습하게 되었습니다. 이번 기회에 학습한 내용을 업무에 적용해 봐야겠습니다. 참고 👋 Map함수를 통해 이터러블 프로그래밍 내장 된 Map 함수 이터러블 프로그래밍 👋 Set함수를 통해 이터러블 프로그래밍 👋 클래스를 통해 이터러블 프로그래밍 Model, Coll…

✅ 목표 객체를 이터러블 프로그래밍으로 작업한다는 것은 어떤 의미 일까? 👋 L.values() 구현 기존 values() 는 즉시 배열로 만들어 놓고 시작함 L.values() 필요한 만큼만 배열로 만들어서, 추출해 사용(코드 평가를 지연) 즉, 밑에 에서 2개만 꺼내기 때문에 에서 2개만 배열로 만들어서 사용 또한, 객체 값이 많아 지거나, 로직이 복잡할 경우에는 밑에 코드가 위의 코드보다 유리함 👋 L.entries() 구현 지연적인 함수를 구현하게 되면, 어떤 값이 들어오던지 간에 이터러블 프로그래밍 가능 👋 L.keys() 구현 👋 어떠한 값이든 이터러블 프로그래밍으로 다루기 이터러블로 이터러블 프로그래밍 가능 객체를 제너레이터를 이용해, 이터레이터로 만들어서 이터러블 프로그래밍 가능 어떤 제너레이터든 이터레이터로 만들어서 이터러블 프로그래밍 가능 👋 object 함수 만들기 다형성이 넓음 reduce하나로 Object 함수 만들기 참고 을 통해 m을 만든후, 하게되면…

✅ 목표 안전한 코드 합성이란 무엇인지 알아보자! 👋 map으로 안전하게 합성하기 안전하지 않은 합성 함수 정의한 함수를 합성하여 사용할 때, 밑에 코드에서 인자는 무조건 숫자가 들어와야 함 숫자가 아닌 값이 들어오면, 값이 안나옴 즉, 안전하지 않음 안전한 합성 함수 그러나 에 합성한 함수를 넣어주면, 합성 함수 인자에 숫자가 아닌 값이 들어와도 이 나오지 않음 👋 find 대신 L.filter 써보기 find사용 문장식으로 복잡하게 표현 만약에 안에 이 가 없다면 밑에 코드 결과는 를 던지게 됨 L.filter 사용 한 표현식으로 간단하게 표현 가능 안전한 코드 작성 가능 함수 합성 순서 변경 가능 시간 복잡도 더 빠름 👍 느낀점 나도 업무를 하면서 특정 함수를 작성할 때, 하나의 상황만 고려해 함수를 작성하는 경우가 많았다. 이번 학습을 통해, 내가 지금까지 작업한 것들이 얼마나 위험한지 알게 되었으며, 추상화 즉 코드의 안정성에 대해 깊게 생각해 보는 시간이였다. 참고 👋 …

Reduce함수 제대로 사용하기 목표 명령형 코드에서 함수가 만능이라고 생각하고 작성하는 습관을 지우자! Map 함수로 Reduce 제대로 사용하기 명령화 reduce 콜백함수로 들어오는 는 너무 구체적인 값들이 들어옴 그래서 함수명을 짓기도 애매하고, 재사용 되기 어려움 추상화 을 통해 배열로 결과를 만들어서 의 인자에 들어오는 값들의 타입을 동일하게 만듬 즉, 에 복잡한 함수를 쓰는 것보다 을 사용해서 하나의 타입 코드를 사용해서 간결하고 재사용되기 쉬운 코드를 사용하는것이 함수형 프로그래밍에 적합함 또한, 함수 조합성 측면에서도 유리함 Map, Filter 함수로 Reduce 제대로 사용하기 1 Reduce에서 모든 로직 사용 코드가 깔끔해 보이는 거지, 사실 로직 측면에서는 조심스러움 또한, 로직을 추가 할 때, 복잡함 Map, Filter 함수 이용 간결한 함수를 통해 조합해 나아가는 성격 특정 로직이 추가되어도 복잡하지 않음 Map, Filter 함수로 Reduce …

이터러블 프로그래밍 학습 목표 이터러블 프로그래밍 혹은 리스트 프로세싱에 익숙해지자 🧐홀수 N개 꺼내서 더하기 명령형 코드 함수형, 이터러블 프로그래밍(List Processing)으로 코드 변경 를 함수를 통해 변경 값 변화 후, 변수 할당을 함수를 통해 변경 를 함수를 통해 변경 축약 및 합산을 함수를 통해 변경 참고 - while문을 range함수로 변경 🧐 추억의 별 그리기 🧐 추억의 구구단 느낀점 기존에 당연하게 작성하고 있던 명령령 코드를 함수형 코드로 변경하는 학습을 통해, 더욱더 가독성과, 성능 적인 측면에서 좋은 코드를 작성해 보는 학습을 하였습니다. 조금 더 연습을 통해, 실무 또는 프로젝트에서 막연하게 사용했던 명령형 코드를 함수형 코드로 변경하여 유지보수 좋은 코드를 작성하는 연습을 해야 겠습니다. 참고 목표 🧐홀수 N개 꺼내서 더하기 명령형 코드 함수형, 이터러블 프로그래밍(List Processing)으로 코드 변경 참고 - while문을 range함…

‘지연적인 함수’를 병렬 적으로 목표 상황에 따라 지연적이지 않을 때를 대비하는 함수 작성 지연된 함수열을 병렬적으로 평가하기 JS가 동작하는 환경인 브라우저, NodeJS에서는 비동기 I/O로 동작함 비동기 I/O는 싱글 스레드로 동작함으로, CPU 점유를 효율적으로 할 수 있음(최신 트렌드) JS가 싱글 스레드로 동작하고 있기 때문에 JS가 병렬적인 일들을 할 일이 없다고 생각하는 경향이 있음 그러나, JS가 로직을 제어 할 때 비동기적으로 싱글 스레드를 제어 할 뿐인지 얼마든지 병렬적인 처리는 필요함 예를 들어 NodeJS에서 데이터를 요청하는 쿼리를 병렬적으로 실행해, 한 번에 결과 값을 얻는 경우도 있고 NoSQL DB를 사용할 때, 여러개 Key를 가지고 많은 결과를 한 번에 처리 하는 경우도 있음 또는 NodeJS에서 이미지 처리를 할 때, 실제로 NodeJS가 직접 처리하는 것이 아닌, 네트워크나 기타 I/O로 작업을 보내…

‘지연적인 함수’에 Proimse 사용할 수 있도록 코드 추가 목표 지연적인 함수에서 상황에도 사용할 수 있도록 코드 수정 상황에 따라 지연적이지 않을 때를 대비하는 함수 작성 L.map, map, take 함수를 Promise에서도 사용하도록 밑에 코드에서는 값을 받게되면 정상적으로 동작하지 않음 L.map 함수에서 Promise 값 사용할 수 있도록 변경 Take 함수에서 Promise 값을 꺼낼 수 있도록 변경 다양한 경우에도 동작 함 L.filter, Take에 Kleisli Composition 적용 Filter함수에서 지연성과 Promise를 함께 지원할려면, Kleisli Composition을 활용해야 함 밑에 코드 처럼 Filter함수에 들어오는 값이 Promise이기 때문에 아직은 동작하지 않음 L.filter 지연성과 Promise를 만족하기 위한 수정 Take 함수에서 Promise를 만족하기 위한 수정 사용 Promise에서 값이 reject을 반환했을 …

🤫 ‘값’으로써 Promise 목표 값으로써 Promise의 의미를 알아보자 함수 합성 관점에서 Promise의 의미를 알아보자 Kleisli Composition 규칙 관점에서의 Promise의 의미를 알아보자 위의 개념을 학습한 뒤에, reduce함수를 리팩토링 해보자 값으로서의 Promise 활용 함수가 제대로 작동될려면, 인자 와 가 동기적으로 값을 확인할 수 있어야 함 즉, 비동기 상황이 일어나지 않는(일급 값이 아닌) 값이 들어와야 함 = 가 아닌 값이 들어와야 함 만약 인자 자리에 시간이 지난 후, 값이 들어오면 어떻게 될까? 정상적인 연산 불가 그러면 어떻게 하면 위의 코드를 정상적으로 동작하게 할 수 있을까? go1함수를 일반 코드 평가와 Promise를 값으로 코드 평가 하는 함수를 동일한 상황에서 사용할 수 있도록 코드 수정 함수 합성 관점에서 Promise Promise는 비동기 상황에서 함수 합성을 안전하게 해주는 도구 비…

🤫 callback과 Promise 목표 방식을 살펴봄 는 어떤점이 다른 것인지 살펴봄 함수형 프로그래밍과 연관되어서, 가 어떤 가치를 가지고 어떻게 다른지, 어떻게 활용해야 하는지 살펴봄 JS에서 비동기 동시정 프로그래밍을 하는 방법 2가지 오랫동안 사용했던 패턴 를 기반으로 한 을 통해 함수를 합성하는 방법과 와 함께 사용하는 방법 CallBack Promise 적용 Promise를 만들어서 return함 한다는 의미가 중요함 CallBack과 Promise의 가독성 차이 함수를 연속적으로 실행시켰을 때 발생 특히, CallBack함수의 깊이가 계속 깊어지기도 하고, 코드 가독성면에서도 떨어짐 비동기를 값으로 만드는 Promise 일반적으로 CallBack함수와 Promise 함수의 차이가 코드 가독성 부분도 있지만, Promise가 CallBack과 다른 점은 일급으로 비동기 상황을 일급 값으로 다룬 다는 점이 가장 중요하게 다름 Promis…

flatten함수 함수 : 1차원 배열로 만들어주는 함수 L.flatten 함수 구현 배열의 깊이와 상관없이 특정 배열 안에 있는 값을 iterator로 리턴하는 함수 yield * 을 통해 L.flatten 함수 구현 은 과 같음 L.flatten 함수 사용 L.flatten을 통해 즉시 코드 평가하는 flatten함수 구현 L.deepFlat 깊은 Iterable을 모두 펼침 flatMap Map과 Flatten함수를 동시에 하는 함수 최신 JS 문법에 추가됨 기본적으로 JS가 지연적으로 동작하지 않기 때문에, 함수가 등장함 기본 JS에서 제공하는 flatMap사용 이 함수도 마찬가지로, 배열을 다 만들어 놓고 그 다음 함수 실행 L.flatMap 함수 구현 즉시평가, flatMap구현 2차원 배열 다루기 이터러블 중심 프로그래밍 실무적인 코드 느낀점 다양 함수형 프로그래밍을 구현해보고, 또 실무적으로 사용하는 연습을 하였습…

queryStr 함수 만들기 객체를 Query String으로 만드는 함수 pipe함수 적용 지연성 함수 적용 보다 이 높은 함수 밑에 함수는 배열이 아닌 곳에서도 사용 가능 지연성 함수 적용 find 함수를 통해 결과를 만들어 내는 함수 특정 조건을 만족하는 값 중 첫 번째 값만 꺼내는 함수 find함수 아쉬운점 filter함수 코드 실행시 users에 있는 값들을 다 순회하게 됨 그래서 를 호출하여, 내부 조건에 만족하는 값을 함수를 통해 추출하도록 변경 L.map을 통해 기존의 map함수 간결하게 만들기 이 때, 함수 사용 pipe함수 적용 L.filter을 통해 기존의 filter함수 간결하게 만들기 이 때, 함수 사용 L.map, L.filter에 For문 적용 느낀점 기존에 사용하던 함수들을 지연적으로 구현하는 학습을 통해, 함수의 확장을 경험하는 시간을 가졌습니다. 또한 원하는 값을 추출하기위해 지연적으로 구현한 함수를 사…

이터러블 중심 프로그래밍에서의 지연 평가 Lazy Evaluation 코드가 필요하기 전까지 미루었다가, 정말 코드 평가가 필요할 때 실행 제때 계산법 느긋한 계산법 제너레이터/이터레이터 프로토콜을 기반으로 구현 나중에 코드 평가하고 진행 L.map 지연성을 가진 함수 구현 제너레이터/이터레이터 프로토콜기반으로 구현 코드 평가를 미루는 성질을 가지고, 평가를 순서를 조작 가능함 L.filter 지연성을 가진 함수 구현 제너레이터/이터레이터 프로토콜 기반으로 구현 range, map, filter, take, reduce 중첩 사용 이터레이터를 이용해서 코드 평가를 하고 코드를 실행시켜서 훨씬 더 빠른 코드를 만듬 단순히 문을 사용했는데 문의 내부 구조인 를 이용해 코드의 효율을 높일 수 있음 문을 대체하는 코드로 변경함 큰 차이는 아니지만, 조금 더 빠르게 동작함 즉시 코드 평가하는 함수로 문제 해결 range함수를 통해 0,…9 배열을…

Take 특정 범위까지 배열로 리턴하는 함수 take함수 안에서 range, L.range 함수 효율성 마찬가지로 L.range와 range 효율성 차이발생 일반 range함수는 특정 범위까지 배열을 만들고 나서 take 함수 진행 하지만 L.range는 배열을 만들지 않고 take의 첫 번째 인자인 5개의 값만 가진 배열을 만듬 take함수에 curry 적용 느낀점 다시 한번 함수형 프로그래밍에 대한 장점을 알게되었다. 정말 효율성이 너무 좋은 것 같다. 제대로 학습해서 실무에서 무조건 적용해야 겠다. 참고 take함수 안에서 range, L.range 함수 효율성 take함수에 curry 적용 느낀점 참고

Range 함수 Range 함수 실행 후, 모든 값을 더하는 함수 함수로 를 전달하기 전에, 이미 에서 코드가 평가되어 로 리턴됨 사실 가 작동하기 전까지는 로 리턴된 배열은 필요한 상태가 아님 가 순회를 시작하고 하나의 값으로 데이터를 축약 할 때, 그 때 가 필요한 것 느긋한 L.Range 코드 평가시 내부 문은 실행하지 않음 가 실행 했을 때, 문이 실행됨 즉, 밑에 는 배열상태로 있지 않음() 에서 해당 값들이 필요할 때, 문이 작동하면서 하나씩 코드가 평가됨 에서는 Array을 만들지 않고 reduce가 돌면서 하나씩 값을 꺼내는 방식임 ex) 문이 돌면서 으로 값을 꺼냄 Reduce 내부 함수를 통해 Range와 L.Range 비교 위 는 reduce를 실행했을 때, 를 만들고 → 를 만들고 그리고 순회하면서 로 값을 얻어서 축약 함 그런데 같은 경우 reduce를 실행 했을 때, 를 만들고 → iterator가 자기 자신을 리턴하는 Iterable이고 해당하…

지금까지 학습한 함수들 총 수량 구하기 총 금액 구하기 리팩토링 해보기 , 내부에 map 함수 인자에 전달하는 부분을 제외하고는 동일한 코드 현재, 함수 실행 후 실행하는 과정이 특정 도메인(products)에 의존하고 있음 결국 , 은 특정 도메인(products)을 위한 코드 임 추상화 레벨을 높여, 많은 곳에 사용할 수 있도록 리팩토링 진행 커링을 이용해 더 리팩토링 해보기 다른 도메인에서도 사용 함수형 프로그래밍으로 HTML로 출력하기 를 통해서 HTML 랜더링 템플릿 리터럴을 통해서 동적으로 표현 이라는 함수를 통해 다양한 곳에서 사용 가능 를 통해 HTML을 하나의 문자열로 합침 느낀점 이번 학습을 통해 함수형 프로그래밍으로 HTML을 출력하는 내용을 학습하면서 추상화가 높다는 의미가 어떤 것인지 다시 한번 알게 되었다. 결국 코드를 재 사용할 수 있는 범위가 높을 수록 효율적이고 생산적으로 일 할 수 있다는 것도 깨닫게 되었다. 더 제대로 학습해서 실무…

함수형 프로그래밍에서는 코드를 값으로 많이 사용함 어떠한 함수가 코드인 함수를 받아서, 평가하는 시점을 원하는 대로 다룰 수 있기 때문에 코드의 표현력을 높일 수 있음 중첩된 코드를 가독성 높일 수 있음 즉시 함수들과 인자를 전달해서 값을 바로 평가해서 사용 Go 라는 함수를 만들어서 실제로 코드의 표현력과 가독성을 높여보자 라는 함수를 만들어 사용하게 되면 에서 로 코드가 평가됨 즉, 인자를 받아서 하나의 값으로 축약해 나아가는 개념 Go를 사용하여 읽기 좋은 코드로 만들기 기존 코드 함수 사용 위에서 아래로 가독성 있게 코드를 변경할 수 있음 여러번 호출되는 함수를 하나의 함수로 만들어보자(Pipe) 함수를 리턴하는 함수 여러번 호출되는 함수를 하나의 함수로 만듬 밑에 3개의 함수를 축약하는 하나의 함수를 만들어주는 함수가 함수의 역할 Pipe 함수 설계 함수를 리턴하는 함수 내부에서 함수를 사용함 인자를 받아서 함수를 통해 내부 함수를…

Map, filter, Reduce 정리 함수형 프로그래밍 사고 products에서 가격이 20,000만원 미만인 가격을 합치고 싶다고 치면 함수의 첫번 째 인자로 들어오는 라는 함수를 통해, 두 번째 인자에 배열 안의 값들이 합산됨 즉, 밑에 코드를 보면, 두 번째 인자에 20,000원 미만의 값들이 배열로 들어와야 한다고 생각해야 함 filter함수를 통해 20,000원 미만의 상품을 배열로 하는 코드를 작성하면 됨 정리 머리 속으로 미리 어떠한 결과가 올지 생각을 하고, 그 결과 값이 배열이라면 배열을 리턴하는 함수를 적절하게 사용해야 함 밑에서 위로 올라오면서 코드가 동작되기 때문에, 밑에서 위로 코드를 읽어야 함 느낀점 함수형 프로그래밍적인 사고를 조금이나마 알게 되었다. 또한 이렇게 코드를 중첩으로 사용하면서도 가독성 좋게 코드를 짤 수 있음에 놀라웠다. 또한 API를 통해 얻어지는 특정 데이터를 모델링 하기 쉬울거라는 생각도 들었다. 참고 Map, filter, Red…

하나의 값으로 누적 하는 예시 기본 Reduce 사용 예시 는 재귀적으로 인자로 들어온 함수를, 계속 실행하면서 하나의 값으로 만들어야 함 Reduce 함수 내부 구조 누적 값을 인자로 받지 않았을 경우 JS에서는 위의 인자중 값이 들어오지 않아도 값이 축적되도록 구현되어 있음 누적하는 값이 함수 인자로 들어오지 않았을 경우 내부에서 를 만들어서 배열의 첫 번째 값을 셋팅 단순히 으로 접근하지 않고, 내부 원리로 초기값을 셋팅 Reduce 사용 예시 느낀점 Reduce함수 내부 구조 코드를 직접 구현하면서 Reduce 함수의 작동원리를 알게 되었음, 또한 Reduce함수를 통해 다양한 값을 추출할 수 있다고 생각함 참고 하나의 값으로 누적 하는 예시 기본 Reduce 사용 예시 Reduce 함수 내부 구조 누적 값을 인자로 받지 않았을 경우 Reduce 사용 예시 느낀점 참고

명령형 코드의 Filter 함수 filter 함수 이터러블을 받아서(순회를 하면서) 특정 함수를 인자로 받아, 함수 조건에 맞는 대상만 filter처리 후 return 진행 filter 함수 사용 내부(밑에 배열)에 있는 다형성은 인자로 들어오는 보조함수로 지원을 받고 외부의 경우 이터러블 프로토콜을 따르는 것으로 다형성을 지원 받을 수 있음 그래서 filter역시도, 많은 다형성을 갖을 수 있음 느낀점 Filter 함수 내부 구조를 알게 되었고 이터러블 프로토콜을 따르는 함수를 순회를 통해, Filter함수 적용해서 다양한 로직을 만들 수 있을 거라는 생각이 들었다. 참고 명령형 코드의 Filter 함수 filter 함수 filter 함수 사용 느낀점 참고

Map함수의 구조 함수형 프로그래밍에서는 와 값으로 소통하는 것을 권장 는 보조 함수를 넣어서 사용 값을 통해 다른 곳에서 사용 이름만 추출 Map 함수 사용X Map함수 사용O 가격만 추출 Map 함수 사용X Map함수 사용O 이터러블 프로토콜을 따른 map의 다형성 1 일반 Map함수는 Array만 순회 가능 은 를 상속받은 객체가 아니기 때문에 map함수를 사용할 수 없음 하지만 밑에서 만든 Map함수는 이터러블도 사용 가능 이 이터러블 프로토콜을 따르기 때문에 밑에 사용 가능 즉, 밑에 작성한 함수는 배열 뿐만아니라 이터러블 프로토콜을 따르는 것들도 순회가 가능함 또한 제너레이터에서도 사용 가능 제너레이터 안에 코드 문장도 사용 가능 중요 웹 API도 ECMAScript의 이터러블 프로토콜을 따르고 있기 때문에, 다양한 조합성을 갖을 수 있음 클래스, 프로토타입의 뿌리로 가진 카테고리 안에 있는 값만 사용할 수 있는 것보다, 위의 방법이…

제너레이터 Iterator이자 Iterable을 생성하는 함수 Iterator를 return하는 함수 또한 Well-Formed-Iterator임(Iterator를 리턴하는데 그 것이 자기 자신과 동일) 그래서 순회 가능 순회를 할 때 문장으로 표현 가능 —> 이렇게되면 JS에서 제너레이터 내부 문장을 통해 순회할 수 있도록 만들 수 있음 —> 즉, 다양한 값들을 제너레이터를 통해서 순회할 수 있도록 할 수 있음 주의 사항 제너레이터에 return값을 명시할 수 있지만 순회할 때에는 나오지 않음 제너레이터를 통해 홀수만 순회하는 코드 작성 for…of, 전개 연산자, 구조 분해, 나머지 연산자 Iterable, Iterator 프로토콜을 지키고 있는 것들을 통해 사용자 정의 이터레이터 활용 느낀점 제너레이터를 통해 순회할 수 있도록 코드를 작성할 수 있더나느 사실과 일반적인 순회가 아닌 특정 조건을 부여해 순회가 가능하다는 사실이 재밋게 다가왔…

Iterable 구현, Iterable/Iterator 프로토콜 정의 적용 Well-Formed Iterator 잘 구현된 는 메서드를 실행한 이후에 문을 들어가면 그 이후에 값이 순회되어짐 그러나 위에서 구현한 는 그렇지 못함 Iterator가 자기 자신을 반환하는 메서드를 가지고 있을 때 이라고 할 수 있음 기존에 사용자 정의로 만든 Iterable에 코드 추가 어디에서든 를 만들었을 때 이전까지 진행되었던 자신의 상태에서 메서드를 호출 했을 때 다음 값이 나올 수 있도록 가능함 즉 이것이 다른 곳에서도 Iterator, Iterable 프로토콜을 따르고 있음 전개 연산자 전개 연산자도 Iterable, Iterator 프로토콜을 따르고 있음 느낀점 이터러블이 무엇인지, 이터레이터가 왜 있어야 하는지 그리고 문이 작동되는 원인 등 모르는 것 을 알게 되었다. 처음에는 익숙하지 어렵다고 느껴졌지만 천천히 공부를 하니 조금씩 이해가 가기 시작하였다. JS 함수형 프로그래밍관련 …

1. 평가와 일급 평가 가 계산 되어 을 만드는 것 일급 으로 다룰 수 있다 에 담을 수 있다. 로 사용 될 수 있다. 로 사용 될 수 있다. 2. 일급 함수 를 으로 다룰 수 있다. 조합성과 추상화의 도구 (원하는 시점에 코드를 평가해서 다른 변수에 사용할 수 있음) 3. 고차 함수 으로 다루는 함수를 인자로 받아서 실행하는 함수 함수를 만들어서 리턴하는 함수 를 만들어 리턴하는 함수 4. 느낀점 그냥 코드를 작성하는 행위가 코드 평가라는 사실을 알게되었다. 사실 맨처음에 평가라는 단어에 익숙하지 않았지만 학습하면서 평가라는 단어에 익숙해졌다. 그리고 일급함수의 특징을 고려해 다양한 코드를 작성할 수 있겠다라는 생각이 들었다. 또한 클로저를 하기위해 일급함수를 통해 할 수 있다는 사실을 알게되었다. 아직 많이 생소하지만 그래도 기본을 확실히 다져지는 느낌이다. 참고 1. 평가와 일급 평가 일급 2. 일급 함수 3. 고차 함수 함수를 인자로 받아서 실행하는 함수 함수를 만들어서 …

이미 JS에서는 변수 선언 시 를 사용하고 있었는데, 왜 굳이 또는 변수를 사용해야 할까? 이를 정확하게 알기 위해, 변수의 선언 및 할당 과정, 호이스팅, 스코프를 알아 한다. 🧐 변수란? JS에서 는 하나의 값을 저장하기 위해 확보한 또는 하기 위해 붙인 이름을 말한다. JS는 매니지드 언어(Maaged Language)이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고, 참조할 필요가 없기 때문에 변수를 통해 안전하게 값에 접근이 가능하다. 변수명(식별자)인 는 변수 값이 아닌 메모리 주소를 기억하고 있다. 변수명을 사용하면, JS 엔진이 변수명과 Mapping된 메모리 주소를 통해 거기에 저장된 값()를 반환한다. 이처럼 변수에 값을 저장하는 것을 할당(assignment, 대입, 저장)이라 하며, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다. 그리고 변수명을 JS 엔진에게 알리는 것을…

1. 바이너리 비트 연산자 개요 왼쪽과 오른쪽에 피 연산자가 있는 2항 연산자 왼쪽과 오른쪽 피연산자 값을 비트로 변환하여 연산함 비트로 연산하므로 처리 속도가 빠름 2. 비트 OR연산자 연산자 기호 : 피연산자 한쪽이라도 1이면 1로 처리 3. 비트 AND 연산자 연산자 기호 : 피연산자 한 쪽이라도 0이면 0이 되고 양쪽이 모두 1이면 1이 됨 4. 비트 XOR 연산자 연산자 기호 : 피연산자 양쪽 값이 같으면 0이 되고 하나만 1이면 1이 됨 1. 바이너리 비트 연산자 2. 비트 OR연산자 3. 비트 AND 연산자 4. 비트 XOR 연산자

1. 개요 바이너리(Binary) 데이터 처리를 다룸 4개 섹션 비트 연산자 ArrayBufer TypedArray DataView 2. 비트, 바이트 값 표현의 기본 단위는 바이트(Byte) 1바이트는 8비트(Bit)이며 1비트 값은 0 아니면 1 비트 연산은 연산 속도가 빠름 정수 연산만 가능, 소수 연산 불가 JS의 비트 연산 범위 4바이트, 32비트 -2의 32승 ~ 2의 32승 -1 3. 2진수 연산 아래는 사인 부호가 없는 형태임 비트 값은 비트가 1일 때의 값, 2^n승 누적 값은 9번 미트에서 해당 비트까지 전부 1일 때의 값 4. 사인 비트 양수, 음수 부호를 나타내는 비트임 7번 비트가 0이면 양수이고, 1이면 음수 4바이트는 31번 비트가 사인 비트 MSB: Most Significatn Bit 양수 표현 형태와 값 7번(MSB) 비트가 0이며, 최댓값은 127 5. 음수 표현 MSB인 7번 비트 값이 1임 누적값은 6번 비트의 누적 값 -127에 -1을 더함 …

1. Symbol.asyncIterator 는 에 대응하는 이면 비동기로 반복을 실행 함 은 12개임 와 차이 를 호출하면 인스턴스를 생성하여 반환함 생성한 인스턴스의 를 호출하면 형태로 반환하며 이 값을 의 파라미터 값으로 사용함 로 반복함 와 제너레이터 함수 반복 1. Symbol.asyncIterator

1. await Syntax 표현식 함수 안에 작성함 는 선택임 표현식이 오브젝트 이면 의 파라미터 값을 반환함 표현식이 오브젝트가 아니면 표현식의 평가 결과를 반환함 에서 가 발생했을 때 에러에 대처하는 형태임 를 사용한 형태 를 사용한 형태 가 아닌 값을 반환하는 형태 2. for-await-of Syntax 함수에서 사용할 수 있음 동기 반복에서 사용할 수 있지만 일반적으로 비동기 반복에서 사용 1. await 2. for-await-of

1. async/await 개요 비동기 환경에서 실행하지만 실행이 끝나야 다음을 실행함 즉, 실행은 비동기이고 실행 순서는 동기 임 키워드가 아니며 이 키워드 개념이며 함수라고 부름 는 키워드(키워드 나름대로 기능을 가지고 있음) 2. async 함수 비동기 함수를 뜻하며 오브젝트를 생성하여 반환함 함수가 호출되며 인스턴스를 반환함 함수의 값을 처리하려면 을 함수 호출에 연결하여 작성 함수에서 가 발생하면 로 처리 됨 1. async/await 개요 2. async 함수

1. 형태 2.실행자의 파라미터에 함수 이름 작성 3.파라미터 위치로 성공/실패 처리 4.실행자에 , 순서로 작성 5. 의 핸들러 함수에서 사용할 값을 인스턴스에 저장 6. 인스턴스 반환 1. 형태 2.실행자의 파라미터에 함수 이름 작성 3.파라미터 위치로 성공/실패 처리 4.실행자에 , 순서로 작성 5. 의 핸들러 함수에서 사용할 값을 인스턴스에 저장 6. 인스턴스 반환

1. all() 파라미터의 모든 처리를 완료했을 때 의 핸들러 함수를 실행함 형태로 작성 파라미터를 이터러블로 작성함 작성한 순서로 인스턴스 생성 가 발생한 시점에 을 실행 2. race() 에 관계없이 처음 한 번만 을 실행하고 더 이상 실행하지 않음 1. all() 2. race()

1. resolve() 성공(fullfilled) 상태의 인스턴스를 생성하여 반환 형태로 작성함 파라미터 값에 따라 생성 방법이 다름 파라미터에 값을 작성하면 파라미터 값으로 인스턴스를 생성하여 반환 파라미터에 인스턴스를 작성하면 파라미터의 인스턴스의 값을 사용하여 인스턴스를 생성하여 반환 2. thenable 파라미터에 을 작성한 형태 3.reject() 실패(reject) 상태의 Promise 인스턴스를 생성하여 반환함 형태로 작성함 파라미터에 사유를 작성함 을 연결한 형태 를 연결한 형태 1. resolve() 2. thenable 3.reject()

1. then() 성공과 실패 핸들러 함수를 작성함 인스턴스를 반환함 파라미터 첫 번째: 성공일 때 실행될 핸들러 함수 두 번째: 실패일 때 실행될 핸들러 함수 실행자의 에 파라미터 값을 다수 작성하더라도 핸들러 함수는 처음 하나만 사용 함 2. then()의 return 에서 인스턴스를 반환함 값을 반환하지 않음 에서 를 하는 것과 같은 개념임 따라서 형태 처럼 을 연속해서 호출 할 수 있음 값을 에 설정하고 값을 다음 의 파라미터 값으로 넘겨 줌 3. catch() 실패(reject)의 핸들러 함수를 작성함 의 두 번째 파라미터를 작성하지 않고 대신에 를 작성함 문의 표현식 평가 결과를 에 설정함 인스턴스를 반환하므로 처럼 이어서 을 호출할 수 있음 값을 의 파라미터 값으로 넘겨줌 4. finally() 성공, 실패에 관계 없이 파라미터의 핸들러 함수가 실행됨 핸들러 함수에 파라미터가 없음 ES2018부터 지원함 활용 측면이지만 의 같은 코드를 에 …

1. new Promise() 인스턴스를 생성하여 반환함 파라미터 실행자 함수를 작성함 성공, 실패 처리 함수 이름 실행자 코드 스펙 : MDN: Promise chain Promise 오브젝트 형태 1. new Promise()

1. Promise 개요 JS는 기본적으로 로실행 실행이 끝나야 다음 코드를 실행함 는 비동기로 처리(실행)함 코드를 연속으로 처리(실행)하지 않고, 중간에 흐름이 끊어졌다가 연결된 코드를 처리 할 수 있는 환경이 되었을 때 실행함 이를 위한 메커니즘을 갖고 있음 스펙에서 스펙으로 전환 2. Promise 처리 흐름 처리(실행) 흐름 개요 를 실행함 파라미터의 함수를 실행함 를 호출 하지 않음 를 실행 변수에 인스턴스 할당 을 실행하지 않음 마지막 줄의 실행함 실행 의 첫 번째 파라미터 함수 실행 실행 3. Promise 상태 상태는 3가지이며, 하나만 발생함 상태 로 인스턴스 생성 상태 이 종료된 상태를 나타내며 와 상태로 구분 바인딩한 핸들러 함수가 호출됨 : 의 첫 번째 함수 호출 : 의 두 번째 함수 호출 1. Promise 개요 2. Promise 처리 흐름 3. Promise 상태

1. export, import 형태 대상에 키워드 작성 중괄호 에 이름 작성 한 번에 선언 이름 변경 default 전체 2. 변수, 함수, Class 변수, 함수 리스트 형태로 작성 3. as, * 로 이름 변경 로 전체를 4. default 모듈에 가 하나만 있는 것을 명시적으로 나타낼 때 사용 를 리스트 형태로 작성 함수 이름을 작성하지 않은 형태 로 를 1. export, import 형태 2. 변수, 함수, Class 3. as, * 4. default

1. module 스코프 코드는 에서 실행됨 다른 파일에서 모듈의 변수/함수 사용 불가 별도의 스코프를 갖기 때문 에 을 작성하면 별도의 스코프를 갖음 를 사용하여 공유할 수 있지만, 이름이 같으면 대체될 수 있음 상황에 따라 어쩔 수 없이 사용할 때는 이름이 중복되지 않도록 해야 함 2. export 값 유지 한 을 다시 하더라도 값이 대체되지 않고 이전에 한 값이 유지 됨 브라우저에서 실행되는 형태 3. this 참조 글로벌 오브젝트에서 는 오브젝트를 참조 함 로 작성된 파일에서 값은 임 과 에서 1. module 스코프 2. export 값 유지 3. this 참조

1. 접근 및 바탕 일반 적으로 하나의 파일에 다수의 함수, 오브젝트를 작성함 한편, 하나의 파일에 작성하면 사용하지 않는 것도 해야 하며 메모리를 차지하므로 비효율적 ex) 회원 가입(클릭 할 때만 필요한 것) 은 파일을 분리하여 필요한 시점에 필요한 것을 가볍게 사용하려는 목적으로 사용 을 파일이라고 할 수는 없지만 구조 측면에서보면 하나의 파일이 임 파일 확장자로 도 있음 ex) JavaScript modules 파일 기본 함수, 오브젝트를 분리하는 것이 바탕이므로 파일은 되도록 함 2. Module 코드 형태 코드 형태 키워드 외부로 보내 줄 함수, 오브젝트를 선언함 에 파일을 작성하여 랜더링 하지 않음 키워드 로 선언된 파일을 가져와서 오브젝트, 함수를 사용 함 3. html 파일 작성법 파일에 파일을 작성하는 방법 상대 경로, 절대 경로로 작성함 상대 경로는 로 시작해야 함 처럼 경로 없이 작성 불가, 추후 가능할 것으로 생각함 가 디…

1. constructo() 인스턴스를 생성하여 반환함 형태 세 번째 파라미터는 선택임 생성자 함수를 작성함 작성한 함수로 인스턴스를 생성함 트랩 호출 2. apply() 에 작성한 함수를 호출함 형태 통합 핸들러의 트랩 호출 1. constructo() 2. apply()

1. getPrototypeOf() 를 반환 함 이 확장 불가라도 반환함 형태로 작성 의 를 반환 2. setPrototypeof() 에 에 연결된 메소드를 설정함 형태로 작성 3. ownKeys() 의 모든 프로퍼티 키를 배열로 반환함 이거나 오브젝트가 확장 불가라도 반환함 상속 받은 프로퍼티는 제외 함 형태로 작성 4. getOwnPropertyDescriptor() 에서 프로퍼티 디스크립터를 반환함 상속 받은 프로퍼티는 제외 함 형태로 작성 1. getPrototypeOf() 2. setPrototypeof() 3. ownKeys() 4. getOwnPropertyDescriptor()

1. defineProperty() 에 프로퍼티를 추가, 변경함 형태 와 차이 를 반환 2.preventExtensions() 에 프로퍼티 추가 금지를 설정함 형태 3. isExtensible() 에 프로퍼티 추가 가능 여부를 반환함 형태 아래 함수를 실행한 상태이면 false를 반환함 1. defineProperty() 2.preventExtensions() 3. isExtensible()

1. has() 에 이 존재 여부를 반환함 형태로 작성 상속받은 도 검색 핸들러의 트랩 호출 2. deleteProperty() 에서 를 삭제 함 형태 반환 인덱스로 배열 엘리먼트 삭제 1. has() 2. deleteProperty()

1.set() 에 프로퍼티 키와 값을 설정함 를 반환함 로 참조할 오브젝트 작성 핸들러의 트랩 호출 트랩에서 참조 변경 1.set()

1. get() 의 프로퍼티 값을 반환함 의 와 차이 임 에 로 참조할 오브젝트 작성 핸들러의 트랩에서 로 값을 구하는 형태 트랩에서 을 사용한 형태 1. get()

1. Reflect 빌트인 오브젝트 가 없으므로 인스턴스를 생성 할 수 없음 형태로 호출 에러 대응 형태 로 에러 대응 , 를 반환 2. Proy 사용 오브젝트의 함수는 트랩에 1:1로 대응하며 트랩 이름과 함수 이름이 같음 트랩 파라미터와 함수의 파라미터가 같음 오브젝트 형태 1. Reflect 2. Proy 사용

1. construct() 연산자의 트랩임 인스턴스를 생성하여 반환함 트랩이 호출되는 형태 를 실행할 때 호출 2. apply() 함수 호출 트랩임 인스턴스 호출로 트랩이 실행된 형태 임 3. apply() 트랩 호출 트랩이 호출되는 형태 인스턴스 4. ownKeys() 의 트랩임 의 모든 를 배열로 반환함 이거나 오브젝트가 확장 불가라도 반환함 트랩이 호출되는 형태 5. getOwnPropertyDescriptor() 트랩임 프로퍼티 디스크립터를 반환함 트랩이 호출되는 형태 1. construct() 2. apply() 3. apply() 트랩 호출 4. ownKeys() 5. getOwnPropertyDescriptor()

1. getPrototypeof() 의 트랩임 의 을 반환 이 확장 불가라도 을 반환 함 , 처럼 값을 반환하면 트랩 준수 사항 이 확장 불가일 때 와 같은 값을 반환해야 함 2. getPrototypeOf() 트랩 호출 트랩이 호출되는 형태 3. setPrototypeOf() 특징 의 에 두 번째 파라미터를 설정함 의 트랩임 트랩 준수 사항 이 확장 불가 일 때 두 번째 파라미터의 과 로 구한 것과 같아야 함 4. setPrototypeOf() 트랩 호출 트랩이 호출되는 형태 1. getPrototypeof() 2. getPrototypeOf() 트랩 호출 3. setPrototypeOf() 4. setPrototypeOf() 트랩 호출

1. defineProperty() 의 트랩임 에 프로퍼티를 추가하거나 속성값을 변경함 2. defineProperty() 트랩 호출 트랩이 호출되는 형태 3. defineProperty() 트랩 준수사항 일 때 트랩에서 를 반환하여 오브젝트가 확장 불가이면 프로퍼티를 추가 할 수 없음 오브젝트의 프로퍼티가 또는 이면 프로퍼티 값을 변경할 수 없음 4. preventExtensions() 트랩임 오브젝트에 오브젝트의 확장 금지를 설정함 5. preventExtensions() 트랩 호출 트랩이 호출되는 형태 6. preventExtensions() 트랩 준수 사항 오브젝트가 확장 불가 일 때 즉, 결과가 일 때 를 반환하면 , 만 반환할 수 있음 7. isExtensible() 트랩임 의 확장 가능 여부를 반환 함 를 반환하는 오브젝트 상태 8. isExtensible() 트랩 호출 트랩이 호출되는 형태 9.isExtensib…

1. has() 연산자의 트랩임 에 의 존재 여부를 반환함 프로퍼티 값을 로 변환하여 반환함 두 번째 파라미터에 작성 가능 2. has() 트랩 호출 트랩이 호출되는 형태 3. has() 트랩 준수사항 오브젝트에 프로퍼티가 있으면서 오브젝트가 프로퍼티 추가 금지이거나 이면 를 지정하여 반환할 수 없지만 는 지정하여 반환 할 수 있음 강제로 를 반환하지 않고 트랩에서 구한 값을 로 변환하여 반환 함 4. deleteProperty() 연산자의 트랩임 오브젝트의 프로퍼티를 삭제함 연산자는 프로퍼티가 없어도 를 반환하므로 코드처럼 조건을 체크하여 를 반환하면 완전하게 처리할 수 있음 4. deleteProperty() 트랩 호출 트랩이 호출되는 형태 5. deleteProperty() 트랩 준수사항 오브젝트의 프로퍼티가 이면 프로퍼티를 삭제할 수 없으며 에러가 발생함 1. has() 2. has() 트랩 호출 3. has() 트랩 준수사항 4. de…

1. get() 값을 구하는 트랩 : 에서 값을 구함 트랩이 호출되면 엔진이 실행 환경을 분석하여 파라미터 값을 설정 트랩 활용 형태 : 조건 체크 트랩 활용 형태 : 데이터 변경 2. get() 트랩 호출 트랩이 호출되는 형태 3. get() 트랩 준수사항 의 프로퍼티가 디스크립터일 때 또는 이면 반환 값을 변경하여 불가 의 프로퍼티가 악세서 디스크립터일 때 이면 반환 값을 변경하여 불가 1. get() 2. get() 트랩 호출 3. get() 트랩 준수사항

1. set()의 4번째 파라미터 트랩의 4번째 파라미터에 인스턴스가 설정됨 4번째 파라미터에 로 생성한 인스턴스가 설정됨 와 인스턴스 구조 2. set()과 this 트랩에서 는 오브젝트를 참조 함 1. set()의 4번째 파라미터 2. set()과 this

1. set() 프로퍼티를 설정하는 트랩으로 또는 에 프로퍼티(key, value)를 설정 함 트랩을 작성하지 않은 형태 트랩이 호출되면 엔진이 실행 환경을 분석하여 파라밑터 값을 설정 함 2. set() 트랩 호출 아래처럼 값을 할당하면 트랩이 호출 됨 프로퍼티에 값을 할당할 때 인스턴스에 없는 프로퍼티를 설정할 때 인스턴스에 있는 프로퍼티를 설정 할 때 트랩에서 값을 설정해야 함 3. set() 트랩 준수사항 트랩 준수 사항(invariant) 트랩에서 준수 사항을 지키지 않으면 에러가 발생하거나 처리되지 않음 모든 트랩에 준수 사항이 있음 의 프로퍼티가 디스크립터 일 때 또는 이면 프로퍼티 값을 설정할 수 없음 의 프로퍼티가 악세서 디스크립터 일 때 이면 프로퍼티 값을 설정 할 수 없음 1. set() 2. set() 트랩 호출 3. set() 트랩 준수사항

1. new Proxy() 인스턴스를 생성하여 반환 함 첫 번째 파라미터 대상 오브젝트를 작성 Object, Array, Function 등 두 번째 파라미터 핸들러를 작성함 Proxy 형태 Proxy 인스턴스 형태 2. Proxy.revocable() 를 사용할 수 없는 상태로 바꿀 수 있는 오브젝트를 생성, 반환 생성한 오브젝트 구조 1. new Proxy() 2. Proxy.revocable()

1. target 대상 오브젝트 임 등을 사용할 수 있음 형태에서 첫 번째 파라미터에 을 작성함 이렇게 인스턴스를 생성하므로 인스턴스와 이 연결됨 2. trap, handler : 에서 사용하는 용어로 실행 중인 프로그램에 이상이 발생했을 때 실행을 중단하고 사전에 정의된 제어로 전환 가운데 사람이 밥을 받아 자신 앞에 있는 수저를 같이 건네 준다면 에 수저를 건네주는 코드가 필요함 이것이 를 사용하는 목적임 오브젝트에 이 있음 를 핸들러 오브젝트라고 하며 약칭으로 핸들러라고 부름 3. Proxy Trap ES6에는 있었느나 ES7에서 1. target 2. trap, handler 3. Proxy Trap

Proxy 논리 식당에서 3명이 식사 하고 있는 모습에서 왼쪽 사람이 오른쪽 사람 앞의 밥을 가져오려 함 왼쪽 사람이 가운데 사람에게 밥을 달라고 말하고 가운데 사람이 오른쪽 사람에게 말하면 오른쪽 → 가운데 → 왼쪽 순서로 밥을 받을 수 있음 이 모습에서 가운데 사람이 왼쪽 사람의 말을 받아 오른쪽 사람에게 말하고 오른쪽 사람에게 밥을 받아 왼쪽 사람에게 전달 함 이와 같이 는 중간에서 대리 역할을 함 왼쪽 사람이 오른쪽 사람에게 직접 말하고 밥을 받으면 가 필요하지 않음 가운데 사람을 거쳐서 받는 모습을 JS로 표현하면 가 실행되면 의 가 호출되며 에서 의 를 호출하면서 를 파라미터로 넘겨 줌 파라미터에 을 작성하므로 에서 을 알 수 있음 의 이 값을 구해 로 반환하고 로 반환된 값을 에 할당 함 이렇게 가 가운데에서 대리 역할을 함 Proxy 논리

1.Proxy 의 사전적 의미 : 대리, 대신 : 기본 오퍼레이션을 중간에 가로채어 오퍼레이션을 대리, 대신하여 실행함 가로 채어 실행하더라도 전체 괘도를 벗어날 수 없으므로 오퍼레이션을 완전하게 바꿀 수는 없음 그럼 무엇을 대리하고 대신 할까? 2. 기본 오퍼레이션 커피를 주문하는 기본 오퍼레이션은 주문을 받는 카운터로 가서 커피를 주문함, 카운터가 커피를 내려 줌 이 모습을 코드로 표현하면 여기서 중요한 것은 가 가 되는 논리 임 를 호출하면 가 반환되는 근거는 무엇이냐는 것임 3. 기본 오퍼레이션 논리 를 실행하면 “커피”를 구하는 행위를 해야 함 즉, 값을 구하는 메소드가 필요함 이때, 엔진은 기능을 가진 내부 메소드 을 호출함 ES6에 처럼 기본 오퍼레이션을 제공하는 13개의 내부 메소드가 있음 스펙의 기본 오퍼레이션 1.Proxy 2. 기본 오퍼레이션 3. 기본 오퍼레이션 논리

1. this 참조 형태로 호출하면 메소드에서 가 인스턴스를 참조 함 메소드에서 는 메소드가 속한 클래스를 참조함 에서 는 생성하는 인스턴스가 아니라 클래스 오브젝트를 참조 함 2. Generator 클래스의 제너레이터 함수는 에 연결됨, 인스턴스로 호출해야 함 1. this 참조 2. Generator

1. Built-in 오브젝트 상속 빌트인 오브젝트를 상속받을 수 있음 인스턴스가 빌트인 오브젝트의 특징을 갖게 되며 로 빌트인 오브젝트에 접근할 수 있음 키워드로 구현함 코드 프로세스 2. Object 상속 는 클래스가 아니므로 다른 를 상속 받을 수 없지만 상속 받으면 구조가 되는 것을 활용하여 상속을 구현 할 수 있음 상속 로 구조를 만듬 3. Image 오브젝트 상속 오브젝트 상속 코드 오브젝트의 를 호출 , , 오브젝트를 로 참조 속성에 값을 할당 함 4. Audio 오브젝트 상속 오브젝트 상속 오브젝트의 를 호출 , 오브젝트를 로 참조 속성에 값을 할당함 파라미터 값을 받아 속성값을 설정하면 범용 클래스로 사용할 수 있음 1. Built-in 오브젝트 상속 2. Object 상속 3. Image 오브젝트 상속 4. Audio 오브젝트 상속

1. super 키워드 슈퍼 클래스와 서브 클래스에 같은 이름의 메소드가 있으면 서브 클래스의 메소드가 호출 됨 키워드를 사용하여 슈퍼 클래스의 메소드를 호출 할 수 있음 의 형태 2. constructor 호출 서브와 슈퍼에 를 모두 작성하지 않으면 디폴트 가 호출 됨 서브에 작성하지 않고 에만 작성하면 파라미터 값을 로 넘겨 줌 서브에는 작성하고 에 작성하지 않으면 에러가 발생함 서브와 슈퍼에 를 모두 작성하면 서브에서 로 호출해야 함 1. super 키워드 2. constructor 호출

1. 상속 상속은 OOP 기능 중 하나 임 클래스에 다른 클래스를 포함시키는 형태 따라서 포함시킨 클래스의 메소드와 프로퍼티를 내 것처럼 사용 할 수 있음 상속해주는 클래스, 상속 받을 클래스를 부모 클래스, 슈퍼 클래스라고 부름 키워드로 슈퍼 클래스를 참조 상속 받는 클래스를 자식 클래스, 서브() 클래스라고 부름 2. extends 키워드 Syntax : 키워드로 상속을 구현 함 상속 구조 메소드 오버라이딩(Overriding) 1. 상속 2. extends 키워드

1. getter 는 메소드를 호출하여 값을 구함 메소드를 호출 할 때는 처럼 소괄호 를 작성하지만 는 소괄호 를 작성하지 않고 만 작성함 파라미터를 사용 할 수 없음 클래스에 작성하는 방법 2. setter 는 메소드를 호출하여 값을 설정 함 도 처럼 소괄호 를 작성하지 않고 이름만 작성함 클래스에 작성 방법 3. static 메소드 Syntax : 메소드 작성 방법 메소드의 구조적 특징 이 아닌 클래스에 연결되며 생성한 인스턴스에 할당되지 않음 4. 호이스팅 클래스는 호이스팅 되지 않음 , 변수처럼 키워드가 작성된 위치에서 클래스 이름 선언과 오브젝트 생성을 동시에 하기 때문 코드 아래에 클래스가 있지만 를 참조하지 못하므로 에러 발생 코드 앞에서 클래스를 오브젝트로 생성하므로 를 호출할 수 있음 5. new.target 프로퍼티는 함수 또는 생성자가 연산자로 호출된 여부를 반환함 연산자로 를 호출하면 은 를 참조 함수로 호출하면 반환…

1. constructor 는 생성자로 인스턴스를 생성하고 초기화 함 ES5까지는 를 작성할 수 없었으나 ES6부터는 작성 할 수 있음 2. constructor 미작성 를 작성하지 않은 상태에서 연산자로 인스턴스를 생성하면 에 연결된 가 호출 됨 3. constructor 반환 에 을 작성하지 않으면 생성한 인스턴스를 반환 함 에서 , 을 반환 하면 이를 무시하고 인스턴스를 반환 함 에서 를 반환 하면 인스턴스를 반환하지 않고 반환 1. constructor 2. constructor 미작성 3. constructor 반환

1. Class 작성 기준 클래스는 모드에서 실해오디므로 이에 맞추어 코드를 작성해야 함 클래스에 메소드 작성 방법 키워드를 작성하지 않음 메소드와 메소드 사이에 콤마를 작성하지 않음 단 세미콜론 은 작성은 선택임 클래스의 는 임 타입은 별로도 있지 않음 2. Computed Name 메소드 이름을 조합하여 사용 대괄호 안에 조합할 이름을 작성 조합한 결과가 메소드 이름이 됨 3. Class 작성 기준 메소드를 에 연결하여 작성하지 않음 클래스 밖에서 메소드를 에 연결할 수 있음 클래스는 열거할 수 없음 에 메소드 추가 1. Class 작성 기준 2. Computed Name 3. Class 작성 기준

1. Class 선언 Syntax : 대문자 Class는 개념적인 클래스를 뜻하고 소문자 class는 키워드 임 클래스 작성 방법 키워드에 이어 클래스 이름 작성함 이름의 첫 문자는 대문자를 사용 함(개발자들 사이의 관례) 블록 을 작성하고 블록 안에 메소드를 작성함 2. Class 표현식 Syntax : 클래스 작성 방법 변수 이름 이 클래스 이름이 됨 변수에 오브젝트를 할당하는 형태 임 다른 것은 클래스 선언문과 같음 Class 형태 ✅ const, let 사용 기준 사용 : 값이 대체되지 않을 경우(오브젝트의 변경되더라도 오브젝트 대체되지 않는 것도 포함) ex) , , 사용 : 값이 대체되는 경우 ✅ 함수, 메소드 기준 함수 인스턴스를 생성하지 않고 직접 호출 메소드 인스턴스를 사용하여 호출하는 함수로 에 연결되어 있음 클래스에 작성한 함수 에 연결된 빌트인 오브젝트의 에 연결된 함수 1. Class 선언 2. Class 표현식 ✅ const, let 사…

1. JS 객체 지향 프로그래밍 언어 : Object Oriented Programming ECMASciprt 스펙에 OOP라고 작성되어 있음 ECMAScripte is an object-oriented programming language 2. 객체 구성 요소 에서 Object(객체)는 JS Object가 아님 개념적, 사상적 접근 형체, 실체가 없음 행위와 속성으로 객체의 특성을 표현 함 행위 : 먹다, 마시다와 같은 동적인 모습 속성 : 밥을 먹다, 물을 마시다와 같은 행위의 대상이 속성 3. 객체의 구체화 객체를 코드로 구체화하면 객체는 가 됨 행위는 가 됨 속성은 가 됨 클래스에서 메소드와 프로퍼티를 작성함 클래스 자체로는 사용할 수 없으며 인스턴스로 생성해야 사용 할 수 있음 키워드로 클래스를 선언 함, 이 시점에서 를 사용할 수 없음 가 호출되며 파라미터 값을 넘겨 줌 인스턴스를 생성하여 반환하며 에 할당함 이제 인스턴스로 클래스를 사용할 수 있음 인스턴스…

1. WeakSet 오브젝트 오브젝트와 차이 오브젝트만 값으로 사용할 수 있음 등의 프리미티브 타입 사용 불가 개념은 과 같음 만 작성하는 것이 다름 의 참조가 바뀌면 대상 지원 메소드 , , 2. new WeakSet() 인스턴스 생성, 반환 파라미터 대괄호 안에 오브젝트 작성 3. has() 인스턴스에서 의 존재 여부 반환 존재하면 , 아니면 반환 4. add() 인스턴스에 설정 파라미터에 로 설정될 오브젝트 작성 5. delete() 인스턴스에서 와 일치하는 엘리먼트 삭제 삭제 성공이면 반환 삭제를 실패하면 반환 1. WeakSet 오브젝트 2. new WeakSet() 3. has() 4. add() 5. delete()

1. forEach() 인스턴스를 반복하면서 함수 호출 , 등의 함수가 동반되는 메소드 사용 불가 함수에 넘겨주는 파라미터 , , 인스턴스 콜백 함수에서 사용 2. delete() 인스턴스에서 파라미터 갑솨 같은 엘리먼트 삭제 같은 가 있어 삭제에 성공하면 반환 삭제에 실패하면 반환 3. clear() 인스턴스의 모든 엘리먼트를 지움 인스턴스를 삭제하는 것은 아님, 따라서 를 추가할 수 있음 1. forEach() 2. delete() 3. clear()

1. entries() 인스턴스로 이터레이터 오브젝트 생성, 반환 인스턴스에 설정된 순서로 반환 로 반환 2. keys() 가 가 되므로 는 의미가 없음 오브젝트와 맞추기 위한 것 인스턴스의 를 key로 사용하여 이터레이터 오브젝트 생성, 반환 인스턴스에 설정된 순서로 반환 로 반환 3.values() 인스턴스의 로 이터레이터 오브젝트 생성, 반환 인스턴스에 설정된 순서로 반환 로 반환 4. Symbol.iterator() 인스턴스로 이터레이터 오브제트 생성, 반환 와 같음 로 반환 1. entries() 2. keys() 3.values() 4. Symbol.iterator()

1. add() 인스턴스 끝에 추가 사용 형태 함수를 생성하여 로 사용 에 생성한 함수 이름 작성 를 로 사용 2. has() 인스턴스에서 값의 존재 여부를 반환 존재하면 , 아니면 반환 메소드가 없으므로 로 값의 존재 여부를 체크 한 후 존재하면 체크한 값을 값으로 사용 1. add() 2. has()

1.Set 오브젝트 Set 오브젝트는 (값)의 컬렉션 형태로 작성 Set은 대괄호 가 하나 작성한 순서로 전개됨 2. new Set() Set 인스턴스 생성, 반환 파라미터에 값을 작성 프리미티브, 오브젝트 타입 사용 가능 프로퍼티 Set 인스턴스의 엘리먼트 수를 반환 Set 오브젝트 구조 3. Set과 Map 비교 저장 형태 : key와 value 작성, Key를 key로 사용하여 로 저장 : 만 작성, 를 key로 사용하여 로 저장 값을 구하는 형태 : 형태로 를 구할 수 있음 : 메소드가 없음 값 하나를 구할 수 없음, 반복으로 값을 구하거나 이터레이터 사용 1.Set 오브젝트 2. new Set() 3. Set과 Map 비교

Map과 WeakMap 차이 참조하는 를 삭제하면 은 그대로 갖고 있지만 은 처리로 삭제됨 Map과 WeakMap 차이

가비지 컬렉션 참조하는 object가 바뀌면 참조했던 오브젝트가 가비지 컬렉션 처리 됨 가비지 컬렉션 처리 WeakMap 인스턴스의 GC상태 가비지 컬렉션

1. get() 인스턴스에서 key 값이 같은 value 반환 존재하지 않으면 반환 2. set() 인스턴스에 key, value 설정 첫 번째 파라미터에 key로 사용할 오브젝트 작성 string과 같은 프리미티브 값 사용 불가 두 번째 파라미터는 값 첫 번째 파라미터의 오브젝트에 대한 값? 오브젝트 구분 등의 용도, 오브젝트에 따라 연동하는 함수 등록 3. has() 인스턴스에서 key의 존재 여부 반환 존재하면 , 아니면 반환 4. delete() 인스턴스에서 key와 일치하는 삭제 삭제를 성공하면 반환 삭제를 실패하면 반환 1. get() 2. set() 3. has() 4. delete()

1. WeakMap 오브젝트 WeakMap: 약한 Map? WeakMap은 Object만 로 사용 가능 number 등의 프리미티브 타입 사용 불가 value는 제한 없음 Map에서 key로 참조한 Object를 삭제하면 object를 사용할 수 없게 되지만 Map에 object가 남음 메모리 릭 발생 WeakMap의 object를 GC가 지움 GC: Garbage Collection 그래서(약한, 부서지기 쉬운) WeakMap? WeakMap 오브젝트 메소드 , , , CRUD와 관련된 메소드만 있음 WeakMap entry의 열거 불가 이터레이션 불가 2. new WeakMap() WeakMap 인스턴스 생성, 반환 파라미터 작성 대괄호 안에 이터러블 오브젝트 작성 WeakMap 오브젝트 구조 1. WeakMap 오브젝트 2. new WeakMap()

1. forEach() Map 인스턴스를 반복하면서 함수 호출 , 등의 함수가 동반되는 메소드 사용 불가 callback 함수에서 넘겨주는 파라미터 value, key, Map 인스턴스 key, value 순서가 아님 콜백 함수에서 사용 2. delete() Map 인스턴스에 파라미터 값과 같은 entry 삭제 같은 key가 있으면 반환 없으면 반환 3. clear() Map 인스턴스의 모든 entry를 지움 Map 인스턴스를 삭제하는 것은 아님 따라서 를 추가할 수 있음 Size 프로퍼티 Map 인스턴스의 entry 수를 반환 개발자 코드로 수정 할 수 없음 1. forEach() 2. delete() 3. clear()

1. entries() Map 인스턴스로 이터레이터 오브젝트 생성, 반환 Map 인스턴스에 설정된 순서로 반환 로 반환 2. keys() Map 인스턴스의 key로 이터레이터 오브젝트 생성, 반환 value는 포함하지 않음 Map 인스턴스에 설정된 순서로 반환 로 key 반환 3. values() Map 인스턴스의 value로 이터레이터 오브젝트 생성, 반환 key는 포함하지 않음 Map 인스턴스에 설정된 순서로 반환 로 value 반환 4. Symbol.iterator() Map 인스턴스로 이터레이터 오브젝트 생성, 반환 와 같음 로 반환 1. entries() 2. keys() 3. values() 4. Symbol.iterator()

1. set() Map 인스턴스에 key, value 설정 key, value 순서로 파라미터 작성 key, value를 설정한 인스턴스 반환 key 값이 같으면 value가 바뀜 2. get() Map에서 Key값이 같은 반환 key 값이 같지 않거나 타입이 다른 반환 오브젝트 설정과 추출 3. has() Map 인스턴스에서 key의 존재 여부를 반환 key가 있으면 , 아니면 1. set() 2. get() 3. has()

Map과 Object 비교 Map 오브젝트 구조 key Map: 타입 제약 없음 Object: , 수 Map: 프로퍼티로 구함 Object: 전체를 읽어 구해야 함 처리 시간 : MDN 빈번하게 key, value를 추가/삭제 할 때는 Map이 Object보다 좋은 경우가 있다고 함 Map과 Object 비교

1. Map 오브젝트 Map 오브젝트 와 의 컬렉션 Map 오브젝트 형태 형태처럼 대괄호 안에 와 를 작성 다양한 타입을 로 사용할 수 있음 Map의 key 처리 문에서 작성한 순서대로 읽혀짐 2. new Map() Map 인스턴스를 생성하여 반환 파라미터에 이터러블 오브젝트 작성 Same-Value-Zero 비교 알고리즘 key 값을 비교 key 값이 같으면 Value가 대체됨 잘못 작성한 형태 1. Map 오브젝트 2. new Map()

1. toString() 을 생성했던 형태를 문자열로 변환하여 반환 값은 반환되지 않음 로 문자열을 연결하면 으로 변환하면 연결은 되지만 값은 연결되지 않음 2. description Syntax, ES2019 오브젝트의 주석, 설명을 반환 함수의 파라미터를 반환 과 차이 3. valueOf() 가 프리미티브 값을 반환하지만 은 값을 반환하지 않고 을 생성한 형태를 반환 는 를 제외하고 반환 4. getWonPropertySymbols() 의 함수이지만 이 대상이므로 여기서 다룸 파라미터의 에서 만 배열로 반환, 다른 프로퍼티는 반환하지 않음 1. toString() 3. valueOf() 4. getWonPropertySymbols()

1. for() 글로벌 레지스트리에 형태로 을 저장 의 문자열이 가 되고 로 생성한 값이 가 됨 : 등록, 기록 글로벌 레지스트리는 공유 영역 다른 오브젝트에서도 사용 가능 같은 가 존재하면 등록된 값을 사용 2. keyFor() 글로벌 레지스트리에서 의 값을 구함 파라미터에 로 등록한 작성 값이 존재하면 값을 반환하고 존재하지 않으면 반환 1. for() 2. keyFor()

1. Well-Known Symbol Well-Known Symbol을 지원하는 String 메소드 문자열에 패턴을 매치하고 매치된 결과를 배열로 반환 2. Symbol.match() 개발자 코드를 함수 블록에 작성 대신에 대신에 가 실행됨 를 패턴으로 인식하지 않고 문자열로 인식 메소드를 오버라이드 하는 것이므로 메소드의 시맨틱은 유지해야 함 1. Well-Known Symbol 2. Symbol.match()

generator 함수 연결 에 를 작성하고 함수를 연결하면 반복 할 때마다 를 수행 연결 구조 의 에 제너레이터 오브젝트가 있는 구조 제너레이터 오브젝트에 이터레이터 오브젝트를 연결하여 값을 형태 제너레이터 오브젝트에 이터레이터 오브젝트가 포함된 구조 generator 함수 연결

1. iterator 가 있는 빌트인 오브젝트 String, Array, Map, Set, TypedArray 빌트인 Object에는 가 없지만 개발자 코드로 작성할 수 있음 2. Array.prototype@@iterator 오브젝트의 를 호출하면 이터레이터 오브젝트 반환 로 배열 엘리먼트 값을 하나씩 구할 수 있음 3. String.prototype@@iterator 오브젝트의 를 호출하면 이터레이터 오브젝트 반환 로 문자열에서 문자를 하나씩 구할 수 있음 4. Object 이터레이션 빌트인 에는 가 없음 가 반복을 처리하므로 를 작성하면 반복할 수 있음 엔진이 문을 시작하면 먼저 에서 검색, 이를 위해 obj에 작성 를 처음 실행할 때 의 가 호출되면 문을 수행 로 반복 횟수 정의 1. iterator 2. Array.prototype@@iterator 3. String.prototype@@iterator 4. Object 이터레이션

toPrimitive 오브젝트를 대응하는 값으로 변환 대응, 기대하는 타입 number, string, default ToPrimitive 스펙 오브젝트를 문자열에 대응 오브젝트를 숫자에 대응 사용 toPrimitive

Species 오버라이드 는 약세서 프로퍼티 이며 만 있고 는 없음 를 사용할 수 있는 빌트인 오브젝트 Array, Map, Set, RegExp Promise, ArrayBuffer, TypedArray 빌트인 오브젝트를 상속받은 에 를 작성하면 빌트인 오브젝트의 가 오라이드 됨 인스턴스 바꾸기 빌트인 오브젝트를 상속 받음 빌트인 오브젝트의 를 오버라이드 함 인스턴스를 생성함 파라미터 값이 인스턴스에 설정 됨 로 을 만들었으므로 출력 오브젝트를 상속 받았으므로 인스턴스로 를 호출 할 수 있음 대상은 인스턴스에 설정된 10, 20, 30 인스턴스를 반환하며 반환되는 인스턴스에 결과를 설정함 로 오버라이드 했으므로 가 호출 됨 호출에 사용한 인스턴스 형태를 반환하지 않고 인스턴스를 반환함 이처럼 로 반환할 인스턴스를 변경할 수 있음 인스턴스에는 인스턴스가 할당되어 있으며 오브젝트로 만들었으므로 출력 가 아니라 오브젝트로 인스턴…

Symbol.species species의 사전적 의미 : (공통 특성을 지닌) 종류, 인류, 종 는 를 반환 를 실행하면 인스턴스를 생성하여 반환하므로 결국, 인스턴스를 반환하게 됨 를 오버라이드 하면 다른 인스턴스를 반환할 수 있다는 의미 메소드를 실행한 후의 결과 형태 기능 빌트인 Array 오브젝트를 상속(확장, 연결) 받음 인스턴스를 생성함 인스턴스의 를 호출하면 처리 결과를 인스턴스에 설정하여 인스턴스를 반환함 이렇게 인스턴스의 메소드를 호출 했을 때 인스턴스를 반환하도록 하는 것이 기능임 Symbol.species

isConcatSpreadable 은 배열의 엘리먼트를 전개하여 반환 one 배열 끝에 two 배열의 엘리먼트를 하나씩 연결 전개하지 않고 two 배열 자체를 연결 전개 isConcatSpreadable

toStringTag 의 확장 으로 인스턴스 타입을 구하면 형태로 반환 인스턴스 타입을 명확하게 구할 수 없음 로 구분 가능 에서 두 번째에 표시될 문자열을 작성 예: “ABC”지정, object “ABC”로 반환 에 연결하여 작성 toStringTag

1. Well-Known Symbols 스펙에서 형태를 볼 수 있음 ES2019 스펙 : 을 나타내는 기호 와 가 같음 스펙에서는 형태를 사용하고 개발자는 형태를 사용 ES2019 기준 : 12개 이란 스펙에서 알고리즘에 이름을 부여하고 이름으로 참조하기 위한 빌트인 값 개발자 코드 우선 실행 를 실행하면 디폴트로 를 실행 소스 코드에 를 작성하면 가 실행 되지 않고 가 실행됨 개발자 코드로 디폴트 기능을 오버라이딩 할 수 있음 2. Well-Known Symbols 종류 1. Well-Known Symbols 2. Well-Known Symbols 종류

Symbol 사용 형태 프로퍼티 키로 사용 값이 유일하므로 중복되지 않음 라고 부름 프로퍼티 값 추출 방법 에서 함수 이름으로 사용 문에서 사용 이 열거되지 않음 이기 때문 로 열거 가능 문에서 사용 배열 안에 작성 에서 사용 값이 문자열로 변환되지 않음 Symbol 사용 형태

1. Symbol() 외부로 노출되는 것 허용 하지 않음 함수는 값을 생성하여 반환 반환된 값을 볼 수 없음 연산자를 사용할 수 없음 프로그램 전체를 통해 유일한 값 제공 값으로 연산 불가 타입 변경 불가 파라미터에 주석, 설명을 작성 값을 문자열로 바꿔서 연결 에 사용 1. Symbol()

1. Primitive 값 JS에서 값은 오브젝트가 아니라 값이며 함수를 갖고 있지 않음 을 할당하면 변수에 100만 할당되며 아무것도 첨부되지 않음 100이 값 ES5의 값 타입 , , , , ES6에서 타입추가 2. Wrapper 오브젝트 오브젝트는? 프리미티브 값이 포함된 오브젝트 오브젝트에는 메소드가 있음 오브젝트가 있는 프리미티브 값 타입 stiring : String, number : Number 오브젝트 boolean : Boolean, symbol : Symbol 오브젝트 obj 인스턴스의 에 100이 설정됨 형태 , 은 오브젝트 없음 1. Primitive 값 2. Wrapper 오브젝트

표현식 의 표현식에 따라 처리하는 방법이 다름 의 표현식이 배열 로 호출할 때마다 배열의 엘리먼트를 하나씩 처리 의 표현식이 제너레이터 함수 함수의 를 먼저 처리 표현식에서 자신 호출 재귀 호출

1. return() 이터레이터를 종료 시킴 파라미터 값을 프로퍼티 값으로 설정 2. throw() 를 의도적으로 발생 시킴 제너레이터 함수의 문에서 에러를 받음 제너레이터 함수에 문을 작성 1. return() 2. throw()

1. yield 분할 할당 대괄호 안에 다수의 작성 , 호출 를 연속해서 작성한 것과 같음 를 2개 모두 수행했으므로 더 이상 처리할 가 없음 세 번째 호출 파라미터 값 : 20 에서 형태로 반환 처럼 안에 파라미터 값 20을 넣어서 반환 에 형태로 표시되지만 가독성을 위해 편집 함 2. for-of 문으로 반복 문으로 제너레이터를 반복 호출 처음 문을 시작하면 으로 제너레이터 오브젝트를 생성함 제너레이터 오브젝트에 10이 설정됨 생성한 제너레이터 오브젝트를 저장할 변수가 없으며 엔진 내부에 저장함 과 같으며 이 엔진 내부의 이름으로 가정함 다시 를 호출 함 와 같지만 반환 값이 다름 를 실행 함 를 반환하지 않고 만 변수에 설정함 로 종료 처리를 할 수 없으므로 를 사용하여 종료시켜야 함 블록을 실행함 11을 출력 함 값이 11이므로 다시 문을 수행 를 수행 이렇게 를 만날 때 까지 반복하여 를 실행 함 1. yield 분할 할당…

1. yield 반복 를 반복하는 형태 임 문을 제어하기 위한 상태 값 첫 번 째 호출 을 실행하여 변수에 0을 설정 함 누적 값을 구하기 위한 것 가 이므로 를 수행 함 반환 두 번째 를 호출 함 가 이므로 를 수행 함 세 번째 를 호출 함 가 이므로 를 수행하지 않음 반환 이므로 이터레이터를 더 이상 사용 할 수 없음 2. 다수의 yield 처리 한 줄에 다수의 와 작성 첫 번째 호출 첫 번째 를 소행 함 에 반환 값이 없으므로 반환 두 번째 호출 파라미터 값 : 10 두 번째 를 수행 함 함수에 파라미터 값을 받을 변수가 없으면 파라미터 넘겨준 값을 반환 세 번째 호출 파라미터 값 : 20 세 번째 를 수행 함 함수에 파라미터 값을 받을 변수가 없으므로 파라미터로 넘겨 준 값을 반환 반환 네 번째 호출 파라미터 값: 30 처리할 가 없으므로 반환 문을 작성했으므로 파라미터로 넘겨 준 값을 반환 반환 문을 작성하지 않으면 …

next() 는 단위로 실행 수 만큼 를 작성해야 전체를 실행 를 호출하면 이전 의 다음부터 까지 실행 를 작성하지 않았을 때 제너레이터 함수에 문을 작성했을 때 함수는 호출 할 때마다 변수에 초깃값을 설정 제너레이터 함수는 제너레이터 오브젝트를 생성할 때 초깃값을 설정 로 실행할 때 마다 초깃값을 설정하지 않음 변숫값을 그래도 유지 next()

1. Yield 키워드 사용 형태 로 호출할 때 마다 하나씩 실행 키워드는 제너레이터 함수 실행을 멈추거나 다시 실행할 때 사용 오른쪽의 표현식을 평가하고 결과를 반환 표현식을 작성하지 않으면 반환 오른쪽의 평가 결과가 설정되지 않고 다음 에서 파라미터로 넘겨준 값이 설정됨 표현식을 평가하면 호출한 곳으로 반환 값 표현식의 평가 결과 설정 를 실행하지 못하면 값 를 실행하면 를 실행하지 못하면 2. Yield 정리 제너레이터 함수를 선언 3개의 를 작성함 제너레이터 오브젝트를 생성함 파라미터 값, 10이 에 설정됨 첫 번째의 를 호출 함 이 실행됨 의 값인 10을 반환함 변수에 10을 할당하지 않음 두 번째의 를 호출 함 에 파라미터 값을 작성하지 않았으므로 변수에 가 설정됨 를 실행 변수 값이 이므로 를 반환 세 번째의 를 호출 함 파라미터 값 20이 바로 앞의 변수에 설정됨 을 실행함 20 + 10을 반환 함 네 번째의 를 호출…

GenratorFunction 를 사용하여 제너레이터 함수를 생성 파라미터를 문자열로 작성 마지막 파라미터가 함수 코드가 되고 앞은 파라미터 이름이 됨 예시 GenratorFunction

1. Generator function : 키워드를 사용한 함수 제너레이터 함수 형태 : , , 작성 방법 : 다음에 소괄호() 작성이어서 작성해도 되고 하나 이상 띄워도 됨 2. 선언문 다음에 함수 이름 작성 제너레이터 함수를 호출하면 함수 블록을 실행하지 않고 오브젝트를 생성하여 반환 오브젝트는 오브젝트 함수 코드 실행 오브젝트의 메소드를 호출 할 때 3. 표현식 다음에 함수 이름 작성은 선택 일반적으로 함수 이름을 작성하지 않음 왼쪽에 변수를 선언하며 변수 이름이 함수 이름이 됨 함수를 선언하는 형태만 다를 뿐 다른 것은 선언문과 같음 1. 2. 선언문 3. 표현식

1. u 플래그 정규 표현식의 패턴을 유니코드의 코드 포인트로 변환하여 매치 u 플래그를 사용하지 않으면 코드 포인트를 문자로 매치 2. s 플래그 정규 표현식에서 dot(점.)은 모든 문자를 매치하지만 줄바꿈 문자는 매치 하지 않음 S 플래그를 사용하면(ES2018) 줄 바꿈 문자를 매치 dotAll 플래그에 true 설정 줄 바꿈 문자 U+000A Line Feed(LF)(“\n”) U+000D Carriage Return(CR)(“\r”) U+2028 Line Separator U+2029 Paragraph Separator 1. u 플래그 2. s 플래그

y 플래그 위치에 매치 부터가 아니라 위치에 매치 매치되면 값이 1증가 , 값을 지정할 수 있음 프로퍼티에 설정 y 플래그

lastIndex 정규 표현식 사용 형태 매치 시작 위치를 lastIndex 프로퍼티에 설정 디폴트 값 : 0 g 플래그를 사용하면 프로퍼티 위치부터 매치 g 플래그를 사용하지 않으면 프로퍼티 값이 바뀌지 않음 lastIndex 값을 지정해도 적용되지 않고 0 번 인덱스부터 배치 lastIndex

1. Math 오브젝트 ES5까지는 수학 계산 처리에 부족했으나 ES6에서 수학 계산용 함수가 많이 추가됨 특히, 머신러닝/딥러닝에 대응 할 수 있게 됨 일반적으로 수학 계산을 사용하지 않으므로 개요 중심으로 다룸 2. 정수, 제곱근, 사인 소수를 제외한 정수 반환 값의 보후에 해당하는 값 : 제곱근 각 파라미터 값을 제곱하여 합산하고 합한 값의 제곱근을 반환 : 세제곱근 3. Hyperbolic(쌍곡) : 쌍곡 사인 : 쌍곡 아크사인 : 쌍곡 코사인 : 쌍곡 아크코사인 : 쌍곡 탄젠트 : 쌍곡 아크탄젠트 4. 로그 : 2를 밑으로 한 로그 값 : 10를 밑으로 한 로그 값 : 자연 로그 상수(e)의 x승 -1 x는 파라미터 값, 과 같음 5. 32비트 계산 Emscripten에 대처하기 위한 것 C, C++를 JS로 컴파일 하기 위한 방법 곱한 값을 32비트로 반환 32비트 값에서 비트 값이 0인 수 32 비트 유동 소수 값으로 변환, 반올림 1.…

1. keys() 오브젝트를 이터레이터 오브젝트로 생성, 반환 와 같으며 형태에서 는 반환하지 않고 만 반환 배열 인덱스가 가 됨 2. values() 오브젝트를 이터레이터 오브젝트로 생성, 반환 형태에서 는 반환하고 반환하지 않음 배열의 엘리먼트 값이 가 됨 사용 값이 연동 됨 1. keys() 2. values()

1. flat() 배열 차원을 변환하고 새로운 배열로 설정하여 반환 파라미터의 대상 깊이에 따라 변환이 다름 파라미터에 을 작성한 경우 파라미터에 을 작성 빈 엘리먼트를 삭제 2. flatMap() 와 기본 기능은 같음 배열을 반복하면서 콜백 함수 호출 파라미터 : 엘리먼트, 인덱스, 배열 전체 콜백 함수에서 반환한 값을 배열로 반환 과 차이 1. flat() 2. flatMap()

1. fill() 범위 값을 지정한 값으로 설정, 반환 설정 방법 시작 인덱스부터 끝 인덱스 직전까지 첫 번째 파라미터 값으로 설정(대체) Generic 함수 2. includes() 대상 배열에 첫 번째 파라미터 값이 있으면 , 없으면 를 반환 두 번째 파라미터는 선택이며 비교 시작 인덱스 작성 제네릭 함수 1. fill() 2. includes()

1. find() 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수 호출 파라미터 : 엘리먼트, 인덱스, 배열 전체 콜백 함수에서 를 반환하면 를 종료하면서 현재 처리중인 엘리먼트 값을 반환 2. findIndex() 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수 호출 파라미터 : 엘리먼트, 인덱스, 배열 전체 콜백 함수에서 반환하면 종료하면서 현재 처리 중인 엘리먼트의 인덱스를 반환 1. find() 2. findIndex()

Generic 스펙에서 아래 문장을 볼 수 있음 ES7 스펙, 22.1.3.3 사용 형태 의 뜻하는 것은? 이 메소드이므로 오브젝트가 처리 대상이지만 은 오브젝트가 아닌 , 를 처리할 수 있다는 것을 뜻함 Generic

1. copyWithin() 범위 값을 복사하여 같은 오브젝트에 설정 두 번째 파라미터의 인덱스부터 복사하여 첫 번째 파라미터 인덱스 부터 순서대로 설정(대체) 세 번째 파라미터의 인덱스 직전까지 복사 복사 시작 인덱스와 끝 인덱스를 작성하지 않으면 배열 전체 복사 2. copyWithin() 함수의 특징 같은 배열 안에서 이동하는 개념 배열의 엘리먼트 수가 변동되지 않음 배열 안에서 엘리먼트를 이동은 엘리먼트를 왼쪽, 오른쪽으로 이동하는 것(처리 속도가 빠름) 1. copyWithin() 2. copyWithin()

1. from() 첫 번째 파라미터의 오브젝트를 오브젝트로 변환 두 번째 파라미터에 함수 작성 이터러블 오브젝트를 전개할 때마다 호출 세 번째 파라미터에 오브젝트 작성 호출된 함수에서 로 참조 2. of() 함수 파라미터 값을 로 변환, 반환 파라미터에 변환 대상 값을 작성 콤마로 구분하여 다수 작성 가능 1. from() 2. of() 함수

1. String.raw 오브젝트에 속하지만 을 사용하므로 여기서 다룸 에 이어서 작성 줄 바꿈을 문자로 처리 유니코드의 코드 포인트 처리 2. String.raw() 의 문자열을 문자 하나씩 전개 하면서 두 번째 파라미터 부터 조합하고 연결 문자열 배열 첫 번째 파라미터는 형태 두 번째 파라미터 부터 조합할 값 작성 1. String.raw 2. String.raw()

tagged Template 템플릿에 함수 이름을 작성한 형태 호출되는 함수를 라고 부름 함수를 호출하면서 문자열을 배열로 파라미터로 넘기고 표현식 결과를 하나씩 파라미터로 넘김 호출하는 곳에서 표현식을 평가한 값을 다수 넘겨 줄 때 태그 함수에 대응하는 파라미터 이름을 작성한 형태 문자열을 분리하면 3개의 배열 엘리먼트가 됨 표현식을 분리하면 와 show 태그 함수를 호출 태그 함수에 Rest 파라미터 작성 문자열을 분리하면 3개의 배열 엘리먼트가 됨 표현식을 분리하면 와 show 태그 함수를 호출 tagged Template

Template Literal Syntax tag Template Literal 문자열 처리를 위한 리터럴 표현식을 포함할 수 있음 강좌에서는 템플릿으로 표기 안에 표현식 작성 표현식을 형태로 작성 줄 바꿈 작성 차이 Template Literal

setPorotytpeOf() 첫 번째 파라미터에 을 작성 첫 번째 파라미터의 에 두 번째 파라미터의 에 연결된 프로퍼티를 설정 연결 후의 인스턴스 구조 상속을 위한 목적이라면 등의 상속 처리 키워드를 제공하는 를 사용하는 것이 좋음 setPorotytpeOf()

setPorotytpeOf() 첫 번째 파라미터의으로 두 번째 파라미터를 설정 첫 번째 파라미터에 인스턴스 작성 실행 후 인스턴스 구조 ES5에 가 있음 setPorotytpeOf()

메소드 추가 에 을 추가하면 에 설정되며 메소드로 추가하는 것과 같음 에 추가한 후의 모습 추가한 메소드를 인스턴스에 공유 메소드 추가

함수로 추가 연산자로 인스턴스를 생성하고 인스턴스의 프로퍼티로 함수를 추가 다른 인스턴스와 공유하지 않음 인스턴스에 추가한 후의 인스턴스 구조 함수로 추가

메소드 호출 방법 과 에 연결된 메소드를 호출하는 방법이 다름 에 연결된 메소드 호출 처럼 을 작성하여 호출 에 연결된 메소드 호출 인스턴스를 생성하여 호출 연산자로 생성한 인스턴스 구조 메소드 호출 방법

1. entries() 열거 가능한 오브젝트의 를 형태로 변환 작성한 순서가 바뀌는 경우 문자열은 문자 하나씩 분리 2. values() 열거 가능한 오브젝트의 를 형태로 변환 작성한 순서가 바뀌는 경우 문자열은 문자 하나씩 분리 3. fromEntires() 형태를 형태로 변환 프로퍼티 키 값이 같으면 값 대체 4. getOwnPropertyDescriptors() 의 프로퍼티 디스크립터를 반환 데이터 디스크립터 액세스 디스크립터 상속받은 오브젝트는 반환하지 않음 1. entries() 2. values() 3. fromEntires() 4. getOwnPropertyDescriptors()

Deep Copyt Object를 할당하면 프로퍼티 값이 연동됨 한 쪽 오브젝트의 프로퍼티 값을 바꾸면, 다른 오브젝트의 프로퍼티 값도 바뀜 함수로 복사 그래도 연동되는 형태 연동되지 않게 하려면 프로퍼티 단위로 복사 JSON 함수 활용 Deep Copyt

1. assgin() 두 번째 파라미터의 오브젝트 프로터피를 첫 번째 파라미터의 오브젝트에 복사하고 첫 번째를 반환 만 복사 2. 첫 번째 파라미터 작성 첫 번째 파라미터를 작성하지 않거나 , 를 작성하면 , , , 값 작성 첫 번째 파라미터에 를 작성하고 두 번째 파라미터를 작성하지 않음 인스턴스를 생성하여 파라미터 값 100을 에 설정 함 생성한 인스턴스를 반환함 , , 도 같은 방법으로 처리 3. 두 번째 파라미터 작성 열러 가능 오브젝트 작성 오브젝트 다수 작성 값을 작성 값과 오브젝트를 작성 값이 설정된 인스턴스 형태 1. assgin() 2. 첫 번째 파라미터 작성 3. 두 번째 파라미터 작성

is() 두 개의 파라미터 값과 값 타입을 비교 같으면 , 아니면 오브젝트 비교 목적이 아님 와 비교, 와 비교는 JS 값 비교 방법 값과 타입까지 모두 비교: 타입은 비교하지 않고 값만 비교: 와 비교 차이 NaN 비교 +0과 -0 비교 활용한 형태 is()

1. padStart() 첫 번째 파라미터 값 만큼 길이를 늘리고 늘어난 끝에 대상 문자열을 설정한 후 앞의 남은 공간에 두 번째 파라미터를 채움 두 번째 파라미터에 채울 문자열 작성 10자리로 늘리고 8/9/10 번째에 “ABC”를 설정, 남은 7자리에 “123”을 왼쪽부터 반복하여 채움 6자리 끝에 ABC를 설정하면 3자리가 남음, 123456을 왼쪽부터 채우고 123이 채워짐 전체 길이가 대상 문자열보다 작으면 길이를 줄이지 않고 대상 문자열을 반환 두 번째 파라미터를 작성하지 않으면 남은 앞에 빈문자열을 채움 2. padEnd() 첫 번째 파라미터 값 만큼 길이를 늘리고 늘어난 끝에 대상 문자열을 설정한 후 뒤의 남은 공간에 두 번째 파라미터를 채움 두 번째 파라미터에 채울 문자열 작성 10자리로 늘리고 1/2/3 번째에 “ABC”를 설정, 남은 7자리에 “123”을 왼쪽부터 반복하여 채움 6자리 앞자리에 ABC를 설정하면 3자리가 남음, 123456을 왼쪽부터 …

1. startsWith() 대상 문자열이 첫 번째 파라미터의 문자열로 시작하면 , 아니면 반환 정규 표현식 사용 불가 두 번째 파라미터 선택이며, 비교 시작 인덱스 작성 2. endsWith() 대상 문자열이 첫 번째 파라미터의 문자열로 끝면 , 아니면 반환 두 번째 파라미터 선택이며, 사용할 문자열 길이 지정 3.repeat() 대상 문자열을 파라미터에 작성한 수 만큼 복제, 연결하여 반환 4. includes() 대상 문자열에 첫 번째 파라미터의 문자열이 있으면 없으면 반환 두 번째 파라미터(선택) 비교 시작 인덱스 작성 1. startsWith() 2. endsWith() 3.repeat() 4. includes()

1. fromCodePoint() 유니코드의 코드 포인트에 해당하는 문자 반환 파라미터에 다수의 코드 포인트 작성 가능 문자를 연결하여 반환 ES5의 사용 로 작성 2. codePointAt() 대상 문자열에서 파라미터에 작성한 인덱스 번째 문자를 유니코드 코드 포인트로 변환하여 반환 코드 포인트는 UTF-16으로 인코딩된 값 3. normalize() 대상 문자열을 파라미터에 지정한 유니코드 정규화 형식으로 반환하여 반환 1. fromCodePoint() 2. codePointAt()

1. Unicode 유니코드는 U+0031 형태 코드 포인트 이 코드 포인트 문자 코드라고도 부름 코드 포인트로 등을 표현 4자리 이상의 UTF-16진수 형태 110만개 정도 표현 U+0000 ~ U+10FFFF Plane(평면) 코드 포인트 전체를 17개 plane으로 나눔 하나의 plane은 65535(U+FFFF)개 첫 번째 Plane BMP(Basic Multillingual Plane) 라고 부름 일반적인 문자(연문자, 숫자)가 여기에 속함 한글의 코드 포인트도 여기에 속함 첫 번째 Plane을 제외한 Plane Supplementary Plane, Astral Plane이라고 부름 5자리 이상의 코드 포인트를 표현할 수 있음 ES6+에서 지원 이스케이프 시퀀스(Escape Sequence) 역슬래시와 16진수로 값을 작성 이를 16진수 이스케이프 시퀀스라고 부름 유니코드 이스케이프 시퀀스 Unficode Escape Sequence 이스케이프 시퀀스를 유니코드로 작성한…

1. isNaN() 값의 여부를 체크 값이면 , 아니면 반환 글로벌 오브젝트의 값 타입이 가 아닌 것을 체크 함, 가 타입이므로 반환 와 은 값이 이므로 가 됨 값이 가 아니므로 가 됨 글로벌 오브젝트의 값을 숫자로 변환하고 그 결과로 비교 함, 변환한 값 이 이므로 반환 NaN 체크 방법 결과가 이므로 사용 불가 , 글로벌 오브젝트 : 2. isInteger() 파라미터 값이 이면 , 아니면 반환 정수로 인식 정수가 아닌 것으로 인식 값을 로 변환하여 체크하지 않음 r로 변환하면, 와 가 이므로 정수로 인식됨 3. isSafeInteger() 파라미터 값이 이면 아니면 반환 ~ : 아니면 4. isFinite() 파라미터 값이 유한 값이면 아니면 글로벌 오브젝트의 와 체크 결과가 다름 함수는 오브젝트에 속해야 하므로 와 관련된 것은 오브젝트의 함수 사용, 글로벌 오브젝트의 함수는 글로벌 사용이 목적 1. isNaN() 2. isInte…

1. Number.EPSLON 아주 작은 값 2.220446049250313080847263361816E-16 또는 2^-52 사용 사례 미세한 값 차이 형태 JS가 부동소수점 처리를 하기 때문(IEEE 74) 이처럼 미세한 값 차이로 일치하지 않을 때 을 사용 미세한 값 차이를 같은 값으로 간주 값 차이가 보다 작으면 를 반환` 으로 가 되는 것을 방지 처럼 작은 값을 더해 나누면 이 됨 2. 진수 Binary(2진수) , 형태로 작성 숫자 다음에 작성하고 이어서 또는 로 값을 작성 Octal(8진수) 형태로 작성 숫자 다음에 영문 작성하고 이어서 로 값을 작성 ES3는 첫 자리에 영문 작성 1. Number.EPSLON 2. 진수

1. IEEE 754 IEEE (Institute of Electrical and Electronics Engineers) JS는 IEEE 754에 정의된 64비트 부동 소수점으로 수를 처리 double-precision floating-point format numbers 64비트로 최솟값과 최댓값을 처리 정수와 실수를 구분하지 않음 1을 1.0으로 처리 1과 1.2를 더할 수 있음 2. 64비트 구성 사인 비트 63: 1비트 값이 0이면 양수, 1이면 음수 지수 52 ~ 62 : 11비트 가수 0 ~51 : 52비트 + 1(사인 비트): 53비트 3. 값을 구하는 방법 비트 값은 아니면 2^x승 값을 더해 값을 구함 0비트 부터 1, 1, 1이면 1(2^0) + 2(2^1) + 4 = 7 4. Number 상수 란 지수(e)를 사용하지 않고 나타낼 수 있는 값 2의 64승이 아닌 2의 53승 : safe integer 최댓값 : safe integer 최솟값 1. IEE…

1. Getter 로 선언된 함수를 자동으로 호출 값을 반환하는 시맨틱을 갖고 있으므로 함수에서 값을 반환해야 함 ES5 형태 을 실행하면 프로퍼티에서 속성의 존재를 체크 함 있으면, 함수를 호출하며 이 반환되어 출력 됨 처럼 함수로 호출하면 에러가 발생함 ES5의 를 참조하세요 ES6 형태 처럼 앞에 을 작성하면 로 선언됨 함수가 자동으로 호출 됨 ES6 장점 ES5처럼 프로퍼티의 속성 구조가 아님 작성 편리 다수의 사용 가능 2. Setter 프로퍼티에 값을 할당하면 로 선언된 함수 자동 호출 값을 설정하는 시맨틱을 갖고 있으므로 함수에서 값을 설정해야 함 ES5 형태 를 실행하면 프로퍼티에 속성의 존재 여부를 체크 있으면, 함수를 호출 를 파라미터 값으로 넘겨 줌 ES6 형태 ) 앞에 을 작성하면 로 선언됨 에 값을 할당하면 가 자동으로 호출 됨 파라미터 값으로 을 넘겨줌 변숫값을 함수 이름으로 사용 변숫값인 “setPoint”가 함수 이름으로 사용…

1. Trailing Commas 배열 끝에 콤바 사용 가능 앞에 콤마 사용 가능 끝에 콤바 사용 앞에 콤마 사용 가능 2. 거듭 제곱 좌결 합성 왼쪽에서 오른쪽으로 계산 은 으로 계산 우결 합성(거듭제곱 계산 할 때만) 오른쪽에서 왼쪽으로 계산 에서 로 계산 은 2의 3승의 2승이 아니라 먼저 3의 2승을 구하며(9) 2의 9승으로 512가 됨 2. Try-Catch 의 에서 처럼 (error)를 생략 가능 ES2019 에서 메시지를 받아 사용하지 않을 때 편리 함 타이핑 실수를 방지 할 수 있음 3. 함수 작성 형태 에 함수를 작성할 때 키워드를 작성하지 않아도됨 참고 : 에 함수를 작성하는 이유 함수에서 로 전체 참조 연산자로 인스턴스를 생성하지 않음, 메소드가 아닌 함수로 접근 전체가 하나의 묶음 접근성, 가독성이 좋음 에 시맨틱을 부여할 수 있으며 다른 오브젝트와 이름과 프로퍼티 이름이 충돌되지 않음 처럼 키워드를 사용하지 않음 1. Trailing Comm…

1. For-Of 이터러블 오브젝트를 반복 Iterable 이터러블 오브젝트를 작성 표현식을 작성하면 평가 결과를 사용 Variable 변수 이름 작성 이터러블 오브젝트를 반복할 때마다 Variable에 값이 할당됨 배열 배열을 반복하면서 엘리먼트를 하나씩 전개 String 문자열을 반복하면서 문자를 하나씩 전개 NodeList NodeList를 반복하면서 엘리먼트를 하나씩 전개 2. For-in, For-of의 차이 for-in 열거 가능한 프로퍼티가 대상 형태는 디폴트가 는 디폴트가 for-of 이터러블 오브젝트가 대상 Object는 전개되지 않음 Property의 프로퍼티도 전개되지 않음 3. for-of, Object Object는 이터러블 오브젝트가 아니므로 for-of 사용 불가 Object를 로 전개할 수 있는 방법 로 프로퍼티 이름을 배열로 만들고 만든 배열을 로 전개 1. For-Of 2. For-in, For-of의 차이 3. for-of, Object

Default Value 값을 할당하지 않으면 사전에 정의된 값을 할당 default value : 사전에 정의된 값 할당할 값이 없으면 디폴트 값을 할당 에 10을, 에 20을 분할 할당 함 에 할당할 값이 없으며, 이 때 에서 을 에 할당함 이것을 라고 함 의 왼쪽에 이름을 작성하고 오른쪽에 값을 작성 할당할 값이 있으면 디폴트 값을 무시 왼쪽과 오른쪽 모두 값이 3개 임 값(70)이 있으므로 에 을 할당함 에서 을 할당하지 않음 Object는 프로퍼티 이름으로 체크 오른쪽에 의 값인 을 왼쪽의 프로퍼티 값으로 분할 할당함 에 할당할 값이 없으며 에서 을 에 할당 함 디폴트 값 적용 순서 왼쪽에서 오른쪽으로 적용 오른쪽 one의 값인 10을 왼쪽의 one 프로퍼티 값으로 분할 할당함 오른쪽에 값이 없으므로 디폴트 값을 할당, 왼쪽에서 오른쪽으로 할당 , one의 값이 10이므로 30이 two에 설정됨 , two의 값이 30이므로 80이 five에 설정됨 함수의 파라미터에 디폴…

1. Object 오퍼레이션 같은 프로퍼티 이름 사용 에서 프로퍼티 이름인 이 같음 모드에서 프로퍼티 이름이 같으면 에러 뜸 에서는 모드에 관계없이 에러가 발생하지 않음, 뒤에 작성한 프로퍼티 값으로 대체됨 Shorhand property names 과 변수에 값을 작성하였으며 형태로 에 할당함 이 프로퍼티 이름이 되고 이 프로퍼티 값으로 할당됨 은 MDN에 작성된 것으로 스펙에 정의된 것은 아님 2. 프로퍼티 이름 조합 문자열을 프로퍼티 이름으로 사용 과 를 연결하여 를 프로퍼티 이름으로 사용 함 변숫값을 프로퍼티 이름으로 사용 변숫값을 프로퍼티 이름으로 사용 함 변숫값과 문자열을 연결할 수 있음 프로퍼티 이름에 공백이 있는 것이 어색하지만 공백을 넣을 수 있음 함수로 호출 할 수 있음, 변숫값에 따라 함수 이름을 정의 할 수 있음 분할 할당을 조합한 형태 변숫값을 프로퍼티 이름으로 사용하고 분할 할당한 형태 이 형태가 됨 이 에 “책”이 할당됨 1. Object 오퍼레…

1. Object 분할 할당 의 프로퍼티를 분할하여 할당 프로퍼티 이름이 같은 프로퍼티에 값을 할당 왼쪽의 가 형태가 아니라 프로퍼티 이름만 작성함 프로퍼티 이름이 같은 오른쪽 프로퍼티 값을 왼쪽의 프로퍼티 값으로 할당 에 , 에 을 할당, 형태가 됨 프로퍼티 이름을 별도로 작성 프로퍼티 이름을 앞에 별도로 작성함 전체를 소괄호() 안에 작성해야 함 프로퍼티 값 위치에 변수 이름 작성 이름을 별도로 선언하였으므로 소괄호() 안에 작성했음 오른쪽 프로퍼티 값 5를 five에 할당 오른쪽 프로퍼티 값 6을 six에 할당 을 실행하면 프로퍼티 이름으로 값을 구할 수 없음 와 변숫값을 구하는 것이 목적 Object 구조에 맞추어 값 할당 plus는 구조(경로)를 만들기 위한 것 왼쪽에 가 있고 가 있으면 프로퍼티 값에 을 할당함 구조가 같지 않으면 실행할 때 에러 발생 는 구조(경로)를 만들기 위한 것으로 실제로 존재하지 않음 가 없으므로 발생 할당한 후, 이름으로…

1. Destructuring Destructuring Assignment 사전적 의미 ~구조를 파괴하다. 파괴, 해체는 있는 것이 없어지는 뉘앙스 원 데이터는 변경되지 않음 이 관점에서 보면 분할/분리가 더 까움 2. Array 분할 할당 배열의 엘리먼트를 분할하여 할당(인덱스에 해당하는 변수에 할당) 할당 받을 변수 수가 적은 경우 왼쪽에 할당 받을 변수가 2개이고, 오른쪽에 분할 할당할 값이 3개 임 왼쪽의 변수 인덱스에 맞추어 값을 할당하므로 3은 할당되지 않음 할당 받을 변수 수가 많을 경우 왼쪽의 할당 받을 변수가 4개이고 오른쪽에 분할 할당할 값이 3개 임 왼쪽에 값을 할당할 수 없는 변수에 가 설정됨 배열 차원에 맞추어 분할 할당 매치되는 인덱스에 변수가 없으면 값을 할당하지 않음 Spread와 같이 사용 나머지를 전부 할당 에 1을 할당하고 나머지 2, 3, 4를 에 할당 함, 처럼 배열로 할당함 파라미터를 호출 받는 함수의 파라미터에 작성하지만, 나머지라는 시맨…

1. Function Spread 호출하는 함수의 파라미터에 대상 작성 처리 순서 및 방법 함수가 호출되면 우선, 파라미터의 배열을 엘리먼트 단위로 전개 전개한 순서대로 파라미터 값으로 넘겨 줌 호출 받는 함수의 파라미터에 순서대로 매핑됨 , , 이 매핑 됨 2. Rest 파라미터 Syntax: 분리하여 받은 파라미터를 배열로 결합 : 분리, : 결합 작성 방법 호출받은 함수의 파라미터에 에 이어서 파라미터 이름 작성 호출한 함수에서 보낸 순서로 매핑 , , 이 매핑 됨 파라미터와 파라미터 혼합 사용 에 10이 설정되고 설정되지 않은 나머지 값 전체가 파라미터 에 설정됨 그래서 파라미터 임 나머지라는 시맨틱을 나타내기 위해 파라미터 이름을 로 사용하기도 함 3. Array-like 타입이지만 배열처럼 이터러블 가능한 오브젝트 문으로 전개할 수 있음 작성 방법 프로퍼티 값을 0부터 1씩 증가하면서 프로퍼티 값을 작성 에 전체 프로퍼티 수 작성 이렇게 작성하지 않으면 그냥…

1. let, const 사용 기준 : 변경 할 수 있음 : 변경 할 수 없음 , 변수의 시맨틱을 우선하여 사용 값이 변경되면 초깃값이 변경되지 않으면 2. Spread Syntax: 처럼 안에 점 3개를 작성하고 이어서 이터러블 오브젝트 작성 이터러블 오브젝트를 하나씩 전개 의 가 이터러블 오브젝트는 아니지만 전개 가능 3. Array Speard 대상 배열을 작성한 위치에 엘리머트 단위로 분리(전개) 작성 형태 : 배열의 를 엘리먼트 단위로 분리(전개) 함 : 위치에 배열의 를 엘리먼트 단위로 분리(전개) 함 값이 대체되지 않고 전개 앞에 과 가 있지만 값을 대체하지 않고 을 작성한 위치에 전개 함 4. String Spread 대상 문자열을 작성한 위치에 문자 단위로 전개 작성 형태 의 를 문자 단위로 분리하여 위치에 설정 5. Object Spread 대상 를 작성한 위치에 프로퍼티 단위로 전개 작성 형태 : 오브젝트의 프로퍼티를 …

1. 이터레이터 프로토콜 이터레이터(iterator) 프로토콜 값을 순서대로 생성하는 방법(규약) 이터레이터 오브젝트 를 호출하면 이터레이터 오브젝트를 생성하여 반환 이터레이터 오브젝트에 가 있음 생성한 오브젝트를 이터레이터라고 부름 이터레이터 오브젝트의 를 호출하면 이터레이터를 호출한다고도 함 를 반환함, 에서 첫 번째 값이고 는 이터레이터 상태 임 두 번째 호출 를 반환함, 에서 두 번째 값이고 는 이터레이터 상태 임 세 번째 호출 반환, 는 처리할 값이 없다는 것을 뜻하며 는 이터레이터의 종료를 뜻함 이터레이터 오브젝트 구조 1. 이터레이터 프로토콜

1. 이터러블 오브젝트 1). 이러터블 오브젝트 개념 이터러블 프로토콜을 갖고 있는 오브젝트 스펙에서는 로 표기 반복 구조, 리터럴로 생성한 에 가 있으므로 는 이터러블 오브젝트 임 리터럴로 생성한 에 가 없으므로 는 이터러블 오브젝트가 아님 문의 반복과 이터레이션이 차이가 있듯이, 의 열거와 이터레이션은 차이가 있음 2). 이터러블 오브젝트 구조 3). 자체 오브젝트에는 없지만 이터러블 오브젝트를 상속받아도 됨 즉, 에 있으면 됨 예를 들어, 오브젝트를 상속 받으면 이터러블 오브젝트가 됨 2. 이터러블 프로토콜 1). 이터러블 프로토콜 개념 오브젝트가 반복할 수 있는 구조이어야 함 를 갖고 있어야 함 2). 아래 빌트인 오브젝트는 디폴트로 이터러블 프로토콜을 갖고 있음 즉 를 갖고 있음 -, , , , , , 1. 이터러블 오브젝트 1). 이러터블 오브젝트 개념 2). 이터러블 오브젝트 구조 3). 자체 오브젝트에는 없지만 2. 이터러블 프로토콜 1). 이터러블 프로토…

1. 이터레이션 이터레이션(Iteration)의 사전적 의미 : 반복 문의 반복 개념과 차이 있음 이터레이션을 위한 프로토콜(Protocol) 필요 예: 통신 프로토콜(규약) 데이터 송수신 프로토콜 정의 어떻게 반복을 할 것인가에 대한 규약이 필요 즉, 이터레이션은 프로토콜을 갖고 있으며 프로토콜에 따라 이터레이션 수행 프로토콜이 구문과 빌트인이 아니므로 프로토콜에 맞으면 이터레이션 가능 2. 이터레이션 프로토콜 이터레이션 프로토콜(규약)은 오브젝트가 이터레이션 할 수 있는 구조이어야 하며 10, 20은 가능, 100은 불가능 이터레이션 프로토콜 구분 이터러블(iterable) 프로토콜 : 반복가능 한 것 이터레이터(iterator) 프로토콜 : 처럼 반복문을 실행시키는 것 —> 이렇게 이터러블, 이터레이터를 규약하는 이유는? 때문에 개발자 코드로 프로토콜을 맞추면 이터레이션 할 수 없는 오브젝트를 이터레이션 할 수 있도록 만들 수 있음 1. 이터레이션 2. 이터레이션 프로토콜

1. 화살표 함수와 인스턴스 인스턴스에서 화살표 함수의 에 따라 가 참조하는 오브젝트가 다름 1). 에 메소드로 작성 에 화살표 함수를 연결하면 함수 안에서 가 글로벌 오브젝트를 참조 함 에서 글로벌 오브젝트의 값이 200을 출력 2). 의 메소드 안에 작성 에 일반 함수를 연결하고, 함수 안에 화살표 함수를 작성한 형태 임. 가 일반 함수 이므로 가 생성한 인스턴스 참조 또한, 화살표 함수에서도 가 생성한 인스턴스를 참조 함 화살표 함수의 스코프인 의 를 사용하기 때문 2. 화살표 함수 특징 대신 를 사용, 함수 표현식 형태 이 없으므로 함수가 가벼움 가 없으므로 연산자로 인스턴스를 생성할 수 없음 화살표 함수에 가 없음 화살표 함수로 오브젝트를 생성할 때 정적으로 화살표 함수가 속한 스코프의 를 화살표 함수에 바인딩 함 바인딩 된 참조가 바뀌지 않으며 화살표 함수에서 로 사용 함 일반 함수는 등으로 바꿀 수 있음 메소드보다 함수로 사용하는 것이 효율 성이 높음 1…

1. 화살표 함수와 this 1). 모드에서 함수를 호출할 때 함수 앞에 오브젝트 작성은 필수 모드에서는 처럼 호출하는 함수 앞에 오브젝트를 작성해야 함, 이렇게 하지 않으면 함수 안에서 값이 또한, 처럼 를 앞에 작성하지 않으면 안에서 값이 임 이를 피하기 위해 로 호출하면 오브젝트에 가 없으므로 에러가 남(현재 함수 블록 안에 가 있음) 모드의 함수에서 를 참조하기 위해서는 를 별도로 저장한 후 사용해야 하는 번거로움이 있음 —> 화살표 함수로 해결 가능 2). 화살표 함수에서 가 글로벌 오브젝트 참조 화살표 함수로 작성하면 로 호출할 수 있음 또한, 화살표 함수 안에서 가 가 아니라 글로벌() 오브젝트를 참조 함 을 작성했으므로 100이 출력됨 3). 값이 2. 가 정적 스코프 참조 화살표 함수에서 정적 스코프의 를 사용 정적(Lexical)스코프란 엔진이 해석할 때, 화살표 함수를 만나면 를 생성하고 화살표 함수가 속한 스코프를 생성한 함수 오브젝…

1) 화살표 함수 구조 을 로 표기하는 것이 전부가 아님 화살표 함수는 일반 함수와 구조가 다름 화살표 함수 나름의 특징이 있음 2) Arguments 사용 불가 (파라미터가 유동적일 때 사용하는 것) 사용 할 수 없음 대신에 파라미터 사용 1) 화살표 함수 구조 2) Arguments 사용 불가

1) Arrow Function 의 사전적 의미 : 화살, 화살표 코드 형태 키워드 대신에 화살표 사용 표 양쪽에 공백 작성 가능 의 축약 형태이지만, 고려할 사항도 있음( 참조가 다름) 2) 함수 블록 사용 함수 블록과 작성생략 함수 블록과 을 생략한 형태로 와 같음 앞에서 줄을 분리하면 뒤에서는 개행 가능 함수 블록 만 작성한 형태 함수 블록만 작성하면 반환 함수 블록에 을 작성하지 않은 것과 같음 을 작성하지 않으면 로 를 반환 함 화살표가 함수이기 때문이 아니라 문법임 를 반환하는 형태 를 소괄호()로 감싸면 를 반환함 소괄호()을 작성하지 않으면 를 반환함 3) 파라미터 사용 파라미터가 하나 일 때 파라미터가 하나이면 에서 소괄호를 생략할 수 있음 에서 이 에 설정됨 파라미터가 없으면 소괄호만 작성 파라미터가 없으면 소괄호만 작성할 수 있음 1) Arrow Function 2) 함수 블록 사용 3) 파라미터 사용

💡 요약 문에서 반복 할 때마다 변수는 스코프를 갖지 않음 변수는 스코프를 가짐 1) var 변수와 스코프 어떤 것을 클릭하더라도 항상 문이 끝났을 때의 값인 을 출력함 전체의 스코프에서 하나의 값으로 할당되기 때문 for문의 마지막 값인 이 선언된 즉 글로벌 변수에 할당 됨. 에서 k 변수의 스코프는 함수 임 2) let 변수와 스코프 이벤트를 설정할 때의 값을 출력 합니다. 💡 요약 1) var 변수와 스코프 2) let 변수와 스코프

1) 글로벌 오브젝트에서 let변수를 this로 참조 불가 현재 위치는 글로벌 오브젝트 오브젝트에 설정됨 오브젝트에 설정되지 않음 에서 가 오브젝트를 참조 하며 이 오브젝트에 설정되어 있으므로 “음악”이 출력됨 에서 sports가 에 설정되지 않으므로 가 출력됨 2) 엔진 관점에서 let 변수 처리 변수를 블록 안에 작성해야 하지만, 블록이 없으므로 엔진이 블록을 만들고 이를 스코프로 사용하여 설정함 위에 언급한 것 같이 현재 에 변수에 할당한 값이 존재 이것은 를 하나의 블록 개념으로 에 작성한 모든 파일에서 공유 가능 1) 글로벌 오브젝트에서 let변수를 this로 참조 불가 2) 엔진 관점에서 let 변수 처리

1) let 변수 개요 블록 스코프를 가진 변수 변수가 선언된 블록이 스코프 스코프 적용 기준 블록, 문, 표현시 블록 안과 밖이 스코프가 다름 변수 이름이 같아도 값이 대체되지 않음 2) let 변수 선언 Syntax , 에 변수 이름 작성 식별자로 사용 는 생략 가능을 나타냄 값을 할당하지 않아도 됨 값을 할당하지 않고 변수만 선언할 수 있음, 초깃값 가 할당됨 콤마로 구분하여 다수를 선언할 수 있음 , 에 초깃값 작성 표현식 작성 가능, 평가 결과 사용 변수를 선언하고 초깃값을 할당했습니다. 콤마로 구분하여 다수의 변수를 선언하고 값을 할당한 형태임 발생, 을 처음에 한 번만 작성함 콤마로 구분하여 let과 var을 같이 사용할 수 없음 3) 블록 스코프 블록 기준 중괄호 블록 안과 밖이 스코프가 다름 변수 이름이 같아도 값이 대체되지 않음 블록 안과 밖에 를 작성했으며 스코프가 다르므로 같은 이름을 사용할 수 있음 변숫값이 대체되지 않고 유지 됨 블…

1) ES5의 실행 콘텍스트 처리 순서 함수 선언문 설정(함수부터 찾음) 변수 이름을 바인딩, 변숫 값은 (변수 이름 찾고 값은 라고 넣음) 소스 코드 실행 2) var 변수 호이스팅 코드 아래 이 존재 변수가 아래에 있지만 식별자 해결을 할 수 있음 단, 이 위에서 값은 이것을 이라고 함 식별자 해결을 하지 못하면 에러가 발생 3) let 변수 호이스팅 사용 불가 변수는 호이스팅되지 않음, 즉 변수 앞에서 변수 사용 불가 변수를 인식하는 시점 안에 변수 작성 1) ES5의 실행 콘텍스트 처리 순서 2) var 변수 호이스팅 3) let 변수 호이스팅 사용 불가

💡 요약 모든 파일에서 글로벌 오브젝트에 작성한 변수와 변수를 공유 안에 작성하면 공유하지 않음 변수를 어디에 선언하냐에 따라 저장 위치가 다름 1) 글로벌 오브젝트에 작성 : , , , 에 변수가 저장됨 : 에 설정됨, 공유가능 : 에 설정됨, 공유가능 처럼 의도적으로 작성하지 않아도 됨 : 에 설정됨, 공유 불가능 글로벌 오브젝트에서만 사용하는 로컬 변수로 사용 2) 함수에 작성 : 에 설정됨 : 에 설정됨 💡 요약 1) 글로벌 오브젝트에 작성 2) 함수에 작성

1) const 문법 구문: 값을 바꿀 수 없는 변수 선언(예외로 배열이나, 객체면 값을 바꿀 수 있음) 에 변수 이름 작성, 식별자로 사용 sports를 로 선언하고 값 할당 try 블록도 별도의 스코프이지만 const, let을 작성하지 않았으므로 sports 변수에 값을 할당하게 됨 이때 가 변수 이므로 에러 발생 2) JS에서 상수는 대문자 사용이 관례 가 이지만 값 형태에 따라 바꿀 수 있음 대문자 사용이 코딩 관례이므로 괜찮음 우선 이 아닌 사용 가능을 검토(우선순위 > > ) 3) const 변수 사용 변수 전체를 바꿀 수 없지만, 의 프로퍼티 값을 바꿀수 있음 book에 값을 할당하면 에러 발생, 전체를 바꿀 수 없음 프로퍼티 값은 변경할 수 있음 변수의 변경 불가는 에 값을 할당하는 것을 뜻 함 의 엘리먼트 값도 바꿀 수 있음 book에 값을 할당하면 에러 발생 엘리먼트 값은 변경할 수 있음 1) const 문법 2) JS에서 상수는 대문…

1) function 블록 도 블록 스코프 안과 밖에 같은 이름의 변수 선언 가능 스코프가 다르기 때문 그래서 밖의 와 안의 는 다르게 저장되어 있음 밖의 변수를 안에서 사용 가능() 2) try-catch 문도 블록 스코프 블록 기준으로 안과 밖에 같은 이름의 변수 선언 가능 블록의 안과 밖에 를 선언했으며 안과 밖이 스코프가 다르므로 변숫값이 각각 설정됨 에서 밖의 변수 사용 블록에서 값을 할당 변수가 없으므로 에러가 발생 블록 안에서 선언한 값을 출력하지 않고 밖의 값을 출력 함 3) switch-case 문도 블록 스코프 블록 기준으로 같은 이름의 변수 작성 불가 , 는 블록 스코프가 아님 블록 안에서 을 사용하여 선언한 변수가 있는데 다시 을 사용하여 변수를 선언하므로 에러가 발생 그래서 주석으로 처리 에러는 실행할 때 생기지 않고 컴파일 할 때 에러가 발생함 1) function 블록 2) try-catch 3) switch-c…