Feat/lyw this binding 01 - #2
Open
lywoo00 wants to merge 3 commits into
Open
Conversation
주석으로 설명, 답 적어놨습니다.
Walkthrough
Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 분
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
this-binding/01_lyw.js(1 hunks)this-binding/01_박유진.js(0 hunks)
💤 Files with no reviewable changes (1)
- this-binding/01_박유진.js
Comment on lines
+16
to
+20
| getNameLater2() { | ||
| console.log(this) // this는 함수를 호출한 객체를 바인딩 -> user.getNameLater1() user가 호출 했기때문에 user를 바인딩함 | ||
| setTimeout(() => { | ||
| console.log("2:", this.name); // 화살표함수는 화살표 함수를 감싸고 있는 스코프의 this를 가져옴 -> getNameLater2가 감싸고있는데 getNameLater2 의 this는 user임 | ||
| }, 0); |
There was a problem hiding this comment.
getNameLater2 주석의 메서드명 오기 및 출력 라인 수 혼동 가능성
- Line 17 주석에서
user.getNameLater1()이라고 되어 있는데, 실제로는getNameLater2를 설명하는 부분이라 혼동 여지가 있습니다. - 또한
console.log(this)때문에 실제 콘솔에는 객체 로그 1줄 +"2: Yujin"1줄, 총 2줄이 찍힙니다. 맨 위 문제 설명은 “정답은 4줄로 적어주세요.”라고 되어 있어서, 학습자 입장에서는 어떤 4줄을 정답으로 봐야 하는지 헷갈릴 수 있습니다.
주석과 의도를 맞추려면 최소한 메서드명을 고쳐 주는 게 좋겠습니다:
- console.log(this) // this는 함수를 호출한 객체를 바인딩 -> user.getNameLater1() user가 호출 했기때문에 user를 바인딩함
+ console.log(this) // this는 함수를 호출한 객체를 바인딩 -> user.getNameLater2()에서 user가 호출했기 때문에 user를 바인딩함추가로, 객체를 찍는 이 로그를 “정답에 포함하지 않아도 된다”는 식으로 한 줄 주석을 더 달아 두면 문제 풀이 입장에서 더 명확할 것 같습니다.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| getNameLater2() { | |
| console.log(this) // this는 함수를 호출한 객체를 바인딩 -> user.getNameLater1() user가 호출 했기때문에 user를 바인딩함 | |
| setTimeout(() => { | |
| console.log("2:", this.name); // 화살표함수는 화살표 함수를 감싸고 있는 스코프의 this를 가져옴 -> getNameLater2가 감싸고있는데 getNameLater2 의 this는 user임 | |
| }, 0); | |
| getNameLater2() { | |
| console.log(this) // this는 함수를 호출한 객체를 바인딩 -> user.getNameLater2()에서 user가 호출했기 때문에 user를 바인딩함 | |
| setTimeout(() => { | |
| console.log("2:", this.name); // 화살표함수는 화살표 함수를 감싸고 있는 스코프의 this를 가져옴 -> getNameLater2가 감싸고있는데 getNameLater2 의 this는 user임 | |
| }, 0); |
🤖 Prompt for AI Agents
this-binding/01_lyw.js around lines 16 to 20: the inline comment on line 17
incorrectly references getNameLater1 and may confuse readers; also the
console.log(this) prints an extra object line that learners might mistake as
part of the expected answer. Update the comment to refer to getNameLater2,
clarify that console.log(this) prints the object (one line) which can be ignored
for the "answer lines" count, and add a short one-line comment stating the
object log is not part of the expected output so the total answer lines remain
unambiguous.
Comment on lines
+22
to
+29
| getNameLater3() { | ||
| const fn = this.getName; | ||
| setTimeout(fn, 0); // setTimeout은 window객체 바인딩 | ||
| }, | ||
| getNameLater4() { | ||
| const fn = this.getName.bind(this); // this에 강제로 user를 바인딩 | ||
| setTimeout(fn, 0); | ||
| }, |
There was a problem hiding this comment.
getNameLater3/4에서 실제로는 아무 것도 출력되지 않는 논리 오류
현재 구현에서는:
getNameLater3() {
const fn = this.getName;
setTimeout(fn, 0);
},
getNameLater4() {
const fn = this.getName.bind(this);
setTimeout(fn, 0);
},getName은 문자열을 반환하지만, 그 반환값을 어디에서도console.log로 찍지 않으므로 콘솔에는 어떤 값도 출력되지 않습니다.- 그럼에도 아래에서
user.getNameLater3(); //Glrobal,user.getNameLater4(); //YujinYujin처럼 주석으로 예상 결과를 적어 두어서, 실제 동작과 문제 설명이 어긋난 상태입니다.
문제 설명대로 “출력 결과 4줄”을 만들려면, getNameLater3/4에서도 반환값을 console.log로 출력해 주어야 합니다. 예를 들면 다음과 같이 수정할 수 있습니다:
getNameLater3() {
const fn = this.getName;
- setTimeout(fn, 0); // setTimeout은 window객체 바인딩
+ setTimeout(() => {
+ console.log("3:", fn());
+ }, 0); // fn은 일반 함수로 호출되기 때문에 this가 Global(또는 전역 객체)로 바인딩됨
},
getNameLater4() {
- const fn = this.getName.bind(this); // this에 강제로 user를 바인딩
- setTimeout(fn, 0);
+ const fn = this.getName.bind(this); // this에 강제로 user를 바인딩
+ setTimeout(() => {
+ console.log("4:", fn());
+ }, 0);
},이렇게 하면:
- 3번: 바운드되지 않은
fn()이 호출되어this가 전역 객체가 되고"3: Global"이 찍힘 - 4번:
bind(this)로 미리 바운드된fn()이 호출되어"4: Yujin"이 찍힘
으로, 의도한 this 바인딩 차이를 콘솔 출력만 보고도 명확히 비교할 수 있습니다.
🤖 Prompt for AI Agents
this-binding/01_lyw.js around lines 22-29: getNameLater3 and getNameLater4 call
setTimeout(fn, 0) but never log the return value of getName, so console output
comments are misleading; fix by ensuring the return of getName is logged inside
the timeout — e.g., capture fn (unbound for 3, bound to this for 4) and call
console.log on its return within the setTimeout callback (setTimeout(() =>
console.log(fn()), 0)), so the actual values appear in the console and match the
comments.
Comment on lines
+32
to
+35
| user.getNameLater1(); //Glrobal | ||
| user.getNameLater2(); //Yujin | ||
| user.getNameLater3(); //Glrobal | ||
| user.getNameLater4(); //YujinYujin |
There was a problem hiding this comment.
마지막 호출부 주석의 오타 및 실제 출력과의 불일치
현재 호출부는 다음과 같습니다:
user.getNameLater1(); //Glrobal
user.getNameLater2(); //Yujin
user.getNameLater3(); //Glrobal
user.getNameLater4(); //YujinYujin문제점:
Glrobal오타가 두 번 있습니다.YujinYujin처럼 이름이 두 번 반복되어 있는데, 코드 상으로는Yujin한 번만 출력되는 게 자연스러워 보입니다.- 위에서 제안한
getNameLater3/4수정까지 반영하면, 실제 콘솔에는"1: Global","2: Yujin","3: Global","4: Yujin"처럼 prefix까지 포함된 문자열이 찍히게 됩니다.
예상 출력과 주석을 맞추려면 다음 정도로 정리하는 것을 제안드립니다:
-user.getNameLater1(); //Glrobal
-user.getNameLater2(); //Yujin
-user.getNameLater3(); //Glrobal
-user.getNameLater4(); //YujinYujin
+user.getNameLater1(); // 1: Global
+user.getNameLater2(); // 2: Yujin
+user.getNameLater3(); // 3: Global
+user.getNameLater4(); // 4: Yujin이렇게 하면 학습자가 “정답 4줄”을 적을 때도 주석과 실제 출력이 자연스럽게 일치합니다.
🤖 Prompt for AI Agents
In this-binding/01_lyw.js around lines 32-35 the inline comments for the four
calls are wrong: they contain a repeated typo "Glrobal", an incorrect doubled
"YujinYujin", and they don’t include the actual "n: " prefixes that the
functions print; update the four comments to exactly match runtime output after
the earlier fixes so they read: //1: Global, //2: Yujin, //3: Global, //4: Yujin
(one comment per call) so comments and actual console output are consistent.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.