From b746364ac6dd239dd03238d644822f884ac5dace Mon Sep 17 00:00:00 2001 From: L2HYUNN Date: Tue, 28 Mar 2023 18:01:41 +0900 Subject: [PATCH 1/3] =?UTF-8?q?docs(26):=2026=EC=9E=A5=20=EA=B8=B0?= =?UTF-8?q?=EC=96=B5=EC=97=90=20=EB=82=A8=EB=8A=94=20=EB=82=B4=EC=9A=A9=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...0\353\212\224 \353\202\264\354\232\251.md" | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 "10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/\352\270\260\354\226\265\354\227\220 \353\202\250\353\212\224 \353\202\264\354\232\251.md" diff --git "a/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/\352\270\260\354\226\265\354\227\220 \353\202\250\353\212\224 \353\202\264\354\232\251.md" "b/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/\352\270\260\354\226\265\354\227\220 \353\202\250\353\212\224 \353\202\264\354\232\251.md" new file mode 100644 index 0000000..086cc5d --- /dev/null +++ "b/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/\352\270\260\354\226\265\354\227\220 \353\202\250\353\212\224 \353\202\264\354\232\251.md" @@ -0,0 +1,27 @@ +# ✏️ 기억에 남는 내용 +* ES6에서는 함수를 사용 목적에 따라 다음과 같은 세 가지 종류로 명확히 구분했다. + * 일반 함수 (Normal) + * 메서드 (Method) + * 화살표 함수 (Arrow) + +* ES6 이전 사양에는 메서드에 대한 명확한 정의가 없었다. ES6 사양에서 메서드는 **메서드 축약 표현으로 정의된 함수만을 의미한다.** + * ES6 사양에서 메서드는 인스턴스를 생성할 수 없는 **non-constructor**다. + * ES6 메서드는 **자신을 바인딩한 객체를 가리키는** 내부 슬롯 [[HomeObject]]를 갖는다. + +* 화살표 함수와 일반 함수의 차이 + 1. 화살표 함수는 인스턴스를 생성할 수 없는 **non-constructor**다. + 2. 중복된 매개변수 이름을 선언할 수 없다. + 3. 화살표 함수는 함수 자체의 **this, arguments, super, new.target** 바인딩을 갖지 않는다. + +* 화살표 함수의 this는 일반 함수의 this와 다르게 동작한다. 이를 통해 **"콜백 함수 내부의 this 문제"**, 즉 콜백 함수 내부의 this가 외부 함수의 this와 다르기 때문에 발생하는 문제를 해결할 수 있다. + * ES6 이전에는 콜백 함수의 this와 내부 함수의 this를 동일하게 사용하기 위해 **외부 this를 내부에 전달하는 방식**을 사용하였다. + * **화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다.** 따라서 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조하여 외부 this와 내부 this를 동일하게 사용할 수 있다. + * 화살표 함수의 this가 함수가 정의된 위치에 의해 결정되는 것을 **lexical this**라 한다. + +* 화살표 함수 내부에서 super를 참조하면 this와 마찬가지로 상위 스코프의 super를 참조한다. + +* 화살표 함수 내부에서 arguments를 참조하면 this와 마찬가지로 상위 스코프의 arguments를 참조한다. + +* Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. + +* arguments 객체는 배열이 아닌 유사 배열 객체이므로 배열 메서드를 사용하려면 Function.prototype.call 이나 Function.prototype.apply 메서드를 사용해 arguments 객체를 배열로 변환해야 한다. \ No newline at end of file From 681ea8afb7b1fc0f9527f0d14952758d1243e421 Mon Sep 17 00:00:00 2001 From: L2HYUNN Date: Tue, 28 Mar 2023 18:12:27 +0900 Subject: [PATCH 2/3] =?UTF-8?q?docs(26):=2026=EC=9E=A5=20=EA=B0=84?= =?UTF-8?q?=EB=8B=A8=ED=95=9C=20=ED=80=B4=EC=A6=88=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../L2HYUNN/\355\200\264\354\246\210.md" | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 "10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/\355\200\264\354\246\210.md" diff --git "a/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/\355\200\264\354\246\210.md" "b/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/\355\200\264\354\246\210.md" new file mode 100644 index 0000000..f928b16 --- /dev/null +++ "b/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/\355\200\264\354\246\210.md" @@ -0,0 +1,6 @@ +# 📝 간단한 퀴즈 +1. 자바스크립트의 함수는 다양한 형태로 호출할 수 있다. 자바스크립트의 함수 호출 방법을 모두 작성하고 어느 시점에 어떤 호출 방법을 사용해야 할지 간단하게 이야기해보자. + +2. 화살표 함수와 일반 함수의 차이를 간단하게 작성해보자. + +3. "콜백 함수 내부의 this문제"가 무엇인지 간단하게 작성하고 그 해결 방법을 화살표 함수와 연관지어 작성해보자. (화살표 함수가 없던 ES6 이전에는 이 문제를 어떻게 해결했을까?) \ No newline at end of file From 9232358d287939b069b5388d48db284f89342a6a Mon Sep 17 00:00:00 2001 From: L2HYUNN Date: Tue, 28 Mar 2023 18:17:36 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat(26):=2026=EC=9E=A5=20=EC=98=88?= =?UTF-8?q?=EC=A0=9C=20=EC=BD=94=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../L2HYUNN/example.js" | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 "10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/example.js" diff --git "a/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/example.js" "b/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/example.js" new file mode 100644 index 0000000..bc1d804 --- /dev/null +++ "b/10\354\243\274\354\260\250 (26~27\354\236\245)/26. ES6 \355\225\250\354\210\230\354\235\230 \354\266\224\352\260\200 \352\270\260\353\212\245/L2HYUNN/example.js" @@ -0,0 +1,24 @@ +class Prefixer { + constructor(prefix) { + this.prefix = prefix; + } + + add1(arr) { + return arr.map(function (item) { + return this.prefix + item; + }); + } + + add2(arr) { + const that = this; + return arr.map(function (item) { + return that.prefix + item; + }); + } + + add3(arr) { + return arr.map((item) => this.prefix + item); + } +} + +const prefixer = new Prefixer("-webkit");