26장 ES6 함수의 추가 기능 #21

MinboyKim · 2025-02-04T08:00:48Z

늦어서 죄송함미다 🥲

Turtle-Hwan

고생하셨습미다

Turtle-Hwan · 2025-02-04T10:58:27Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+const derived = {
+  __proto__: base,
+  // sayHi는 ES6 메서드 이므로 [[HomeObject]]를 갖는다.
+  // sayHi의 [[HomeObject]]는 derived.prototype을 가리킨다.
+  // super는 sayHi의 [[Homeobject]]의 프로토타입인 base.prototype을 가리킨다.
+  sayHi() {
+    return `${super.sayHi()}. how are you doing?`;
+  }
+}


프로토타입을 명시적으로 줄 수도 있군요

but __proto__ 를 직접 이용하는 방식은 권장 되지 않는다

Turtle-Hwan · 2025-02-04T10:59:54Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+const base = {
+  name: 'Lee',
+  sayHi() {
+    return `Hi! ${this.name}`;
+  }
+}


sayHi가 메서드라 this가 base를 가리키지만, 만약 메서드가 아니었다면 그 자신을 가리키겠죠?
그럼 이 경우엔 super를 써야 base를 가리킬까요?

아 아래에 super를 쓸 수 없다고 나오네요
그러면 파라미터로 받아야 하나 봐요

Turtle-Hwan · 2025-02-04T11:58:35Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+foo(1, 2, 3, 4, 5);
+```
+
+일반 매개변수와 `Rest` 파라미터는 함께 사용가능하며, 함수에 전달된 인수들은 매개변수와 `Rest`파라미터에 순차적으로 할당된다.


rest 파라미터가 드디어 나오네오

junepil

뒤쪽을 읽으면 읽을수록 es5 -> es6으로 변화에서 생기는 차이점을 알아보자! 이런 느낌의 책인 것 같네요. 수고하셨습니당

junepil · 2025-02-05T02:44:39Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+
+### 02. 중복된 매개변수 이름을 선언할 수 없다.
+```js
+const arrow = (a, a) => a + a;


다른 함수들에서는 중복된 매개변수 이름 선언이 가능하다는게 충격적이네요

우와.. 이걸 js는 왜 가능하게 만들었을까요

가능하게 만든 건지 아니면 만들고 보니 가능했던 건지...궁금하네요ㅎㅎㅎ

이런것도 되네요

//일반 함수 function test(a, a) { return a+a; } test(1, 1); //2

//화살표 함수 const test=(a, a)=>return a+a; test(1, 1); //VM171:1 Uncaught SyntaxError: Duplicate parameter name not allowed in this context

function test(a, a) { console.log(a); //2 console.log(a); //2 return a+a; } test(1, 2); //4

아니 이렇게 되는데 뒤에 넣어진 걸로 덮어써지나본데 사실상 사용의 의미가 없네요...
js 개발자가 급하게 만들어서 예외 처리를 빼먹었나봐요

junepil · 2025-02-05T03:36:48Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+따라서 이런 방어 코드가 필요하다.
+
+```js
+function sum(x = 0, y = 0) {


정말 유용한데 생각보다 모르는 분들도 계시더라구요

zziglet

정리하시느라 수고많으셨어유!!

zziglet · 2025-02-05T06:02:07Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+
+### 02. 중복된 매개변수 이름을 선언할 수 없다.
+```js
+const arrow = (a, a) => a + a;


우와.. 이걸 js는 왜 가능하게 만들었을까요

zziglet · 2025-02-05T06:04:44Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+const arrow = x => { ... };
+// 매개변수가 하나인 경우 소괄호 () 생략 가능


소괄호를 제외해도 되는군요.. 전 언젠가부터 아묻따 괄호 넣기 권법을 사용해왔는데..

생략해도 되는건 처음 알았네요

생략하는 형태가 안 익숙한 이유는 프리티어가 강제로 씌워버리기 때문이다!

zziglet · 2025-02-05T06:14:29Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+### 01. add 메서드를  호출한 prefixer 객체를 가리키는 this를 일단 회피시킨 후에 콜백 함수 내부에서 사용
+```js
+...
+add(arr) {
+  // this를 일단 회피시킨다.
+  const that = this;
+  return arr.map(function (item) {
+    // this 대신 that을 참조한다.
+    return that.prefix + ' ' + item;
+  });
+}
+...
+```


that이라는 것도 존재하는군요.. 그치만 우리에겐 더 나은 대안인 화살표 함수가 존재..

this를 일단 회피시키는 방식이 c에서 x와 y를 교환하는 temp 같아서 와닿네요

whddltjdwhd

긴 연휴 동안 정리하시느라 정말 고생하셨습니다~ 오늘도 동민님의 노고 덕분에 오늘도 좋은 지식을 얻어갈 수 있습니다. 고맙습니다 : )

whddltjdwhd · 2025-02-05T07:20:44Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+// Good
+const person = {
+  name: "Lee",
+  sayHi() {


객체의 프로퍼티로 화살표 함수를 이용하는건 상당한 혼란을 초래할 수 있군요..! 무분별한 화살표 함수 사용을 조심해야겠네요

whddltjdwhd · 2025-02-05T07:24:31Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+// ['-webkit-transition', '-webkit-user-select']
+```
+
+**화살표 함수는 함수 자체 this 바인딩이 존재하지 않으므로 내부에서 this 참조 시 상위 스코프의 this를 그대로 참조한다.**


만약 다음과 같이 화살표 함수가 중첩되어 있다면 스코프 체인 상에서 가장 가까운 상위 함수 중에서 화살표 함수가 아닌 함수의 this를 참조한다고 하네요

whddltjdwhd · 2025-02-05T07:26:37Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+
+### 02. 중복된 매개변수 이름을 선언할 수 없다.
+```js
+const arrow = (a, a) => a + a;


가능하게 만든 건지 아니면 만들고 보니 가능했던 건지...궁금하네요ㅎㅎㅎ

joeuns

수고하셨습니닷!!!🔥☕️🫂📣📣

joeuns · 2025-02-05T07:51:26Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+
+이에 반해 ES6 메서드가 아닌 함수는 내부 슬롯 `[[HomeObject]]`가 존재하지 않기 때문에 `super` 키워드를 사용할 수 없다.
+
+이처럼 ES6 메서드는 일반적으로 생각되어지는 메서드에 맞게 본연의 기능인 `super` 를 추가하고 의미적으로 맞지 않는 `constructor` 는 제거했다. **따라서 메서드를 정의할 때 프로퍼티 값으로 익명 함수 표현식을 할당하는 ES6 이전의 방식은 사용하지 않는 것이 좋다.**


ES6의 메서드 축약 표현 (method() {}) 은 [[HomeObject]]를 갖는다.

[[HomeObject]] 덕분에 super가 동작할 수 있다.

일반 함수 표현식 (sayHi: function() {})에서는 super를 사용할 수 없다.

ES6에서 constructor를 제거하고 super를 사용할 수 있도록 개선되었다.

따라서 ES6의 축약 표현을 사용해야 한다. (일반적인 함수 표현식 대신 method() {} 형태로!)

-그냥 정리하고 지나감🕺-

joeuns · 2025-02-05T07:55:18Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+// 매개변수가 하나인 경우 소괄호 () 생략 가능
+
+const arrow = () => { ... };
+// 매개변수가 없어도 소괄호 ()는 생략 불가능


매개변수 없을 때도 소괄호 생략하는 상상..
const arrow = => { ... };

joeuns · 2025-02-05T08:08:06Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+
+함수와 ES6 메서드는 Rest 파라미터와 `arguements` 객체를 모두 사용할 수 있지만, 화살표 함수는 `arguments` 객체를 갖지 않으므로 반드시 Rest 파라미터를 사용해야한다.
+
+# 26.5 매개변수 기본값


갑자기 기본값에 동적인값을 넣을 수 있을까? 궁금해졌는데
가능하네용

//랜덤기본값 넣기 function randomValue() { return Math.random() * 10; } function test(value = randomValue()) { console.log(value); } test(); // 랜덤 숫자 출력됨 test(100); // 100

clicelee

고생하셨습니다~

clicelee · 2025-02-05T08:25:56Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+const arrow = x => { ... };
+// 매개변수가 하나인 경우 소괄호 () 생략 가능


생략해도 되는건 처음 알았네요

clicelee · 2025-02-05T08:35:28Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+
+### 02. 중복된 매개변수 이름을 선언할 수 없다.
+```js
+const arrow = (a, a) => a + a;


이런것도 되네요

//일반 함수 function test(a, a) { return a+a; } test(1, 1); //2

//화살표 함수 const test=(a, a)=>return a+a; test(1, 1); //VM171:1 Uncaught SyntaxError: Duplicate parameter name not allowed in this context

clicelee · 2025-02-05T10:33:26Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+const arrow = x => { ... };
+// 매개변수가 하나인 경우 소괄호 () 생략 가능


생략하는 형태가 안 익숙한 이유는 프리티어가 강제로 씌워버리기 때문이다!

clicelee · 2025-02-05T10:36:20Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+## 26.3.3 this
+화살표 함수의 `this`는 콜백 함수 내부의 `this` 문제를 해결하기 위해 일반 함수의 `this`와 다르게 동작하도록 의도적으로 설계되었다.
+
+**일반 함수의 `this` 는 함수를 정의할 때 정적으로 결정되는 것이 아닌 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.**


화살표 함수는 렉시컬 스코프에 따른 this를 참조한다!

clicelee · 2025-02-05T10:41:01Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+### 01. add 메서드를  호출한 prefixer 객체를 가리키는 this를 일단 회피시킨 후에 콜백 함수 내부에서 사용
+```js
+...
+add(arr) {
+  // this를 일단 회피시킨다.
+  const that = this;
+  return arr.map(function (item) {
+    // this 대신 that을 참조한다.
+    return that.prefix + ' ' + item;
+  });
+}
+...
+```


this를 일단 회피시키는 방식이 c에서 x와 y를 교환하는 temp 같아서 와닿네요

clicelee · 2025-02-05T10:45:13Z

26장 ES6 함수의 추가 기능/26장 ES6 함수의 추가 기능.md

+const derived = {
+  __proto__: base,
+  // sayHi는 ES6 메서드 이므로 [[HomeObject]]를 갖는다.
+  // sayHi의 [[HomeObject]]는 derived.prototype을 가리킨다.
+  // super는 sayHi의 [[Homeobject]]의 프로토타입인 base.prototype을 가리킨다.
+  sayHi() {
+    return `${super.sayHi()}. how are you doing?`;
+  }
+}


but __proto__ 를 직접 이용하는 방식은 권장 되지 않는다

26장 ES6 함수의 추가 기능

96da0f2

MinboyKim requested review from junepil, Turtle-Hwan, joeuns, whddltjdwhd, zziglet and clicelee February 4, 2025 08:00

MinboyKim self-assigned this Feb 4, 2025

Turtle-Hwan approved these changes Feb 4, 2025

View reviewed changes

Update README.md

420355e

junepil approved these changes Feb 5, 2025

View reviewed changes

zziglet approved these changes Feb 5, 2025

View reviewed changes

whddltjdwhd reviewed Feb 5, 2025

View reviewed changes

whddltjdwhd approved these changes Feb 5, 2025

View reviewed changes

joeuns approved these changes Feb 5, 2025

View reviewed changes

clicelee approved these changes Feb 5, 2025

View reviewed changes

clicelee reviewed Feb 5, 2025

View reviewed changes

Update README.md

a989c0b

clicelee approved these changes Feb 5, 2025

View reviewed changes

clicelee merged commit 13bc3f4 into main Feb 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

26장 ES6 함수의 추가 기능 #21

26장 ES6 함수의 추가 기능 #21

MinboyKim commented Feb 4, 2025

Turtle-Hwan left a comment

Turtle-Hwan Feb 4, 2025

clicelee Feb 5, 2025

Turtle-Hwan Feb 4, 2025

Turtle-Hwan Feb 4, 2025

junepil left a comment

junepil Feb 5, 2025

zziglet Feb 5, 2025

whddltjdwhd Feb 5, 2025 •

edited

Loading

clicelee Feb 5, 2025

Turtle-Hwan Feb 5, 2025

junepil Feb 5, 2025

zziglet left a comment

zziglet Feb 5, 2025

zziglet Feb 5, 2025

clicelee Feb 5, 2025

clicelee Feb 5, 2025

zziglet Feb 5, 2025

clicelee Feb 5, 2025

whddltjdwhd left a comment

whddltjdwhd Feb 5, 2025

whddltjdwhd Feb 5, 2025

whddltjdwhd Feb 5, 2025 •

edited

Loading

joeuns left a comment

joeuns Feb 5, 2025

joeuns Feb 5, 2025

joeuns Feb 5, 2025

clicelee left a comment

clicelee Feb 5, 2025

clicelee Feb 5, 2025

clicelee Feb 5, 2025

clicelee Feb 5, 2025

clicelee Feb 5, 2025

clicelee Feb 5, 2025

		const arrow = x => { ... };
		// 매개변수가 하나인 경우 소괄호 () 생략 가능


		이에 반해 ES6 메서드가 아닌 함수는 내부 슬롯 `[[HomeObject]]`가 존재하지 않기 때문에 `super` 키워드를 사용할 수 없다.

		이처럼 ES6 메서드는 일반적으로 생각되어지는 메서드에 맞게 본연의 기능인 `super` 를 추가하고 의미적으로 맞지 않는 `constructor` 는 제거했다. 따라서 메서드를 정의할 때 프로퍼티 값으로 익명 함수 표현식을 할당하는 ES6 이전의 방식은 사용하지 않는 것이 좋다.


		함수와 ES6 메서드는 Rest 파라미터와 `arguements` 객체를 모두 사용할 수 있지만, 화살표 함수는 `arguments` 객체를 갖지 않으므로 반드시 Rest 파라미터를 사용해야한다.

		# 26.5 매개변수 기본값

26장 ES6 함수의 추가 기능 #21

26장 ES6 함수의 추가 기능 #21

Conversation

MinboyKim commented Feb 4, 2025

Turtle-Hwan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

junepil left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whddltjdwhd Feb 5, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zziglet left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whddltjdwhd left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whddltjdwhd Feb 5, 2025 • edited Loading

Choose a reason for hiding this comment

joeuns left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

clicelee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whddltjdwhd Feb 5, 2025 •

edited

Loading

whddltjdwhd Feb 5, 2025 •

edited

Loading