var fullname = 'Ciryl Gane'
var fighter = {
fullname: 'John Jones',
opponent: {
fullname: 'Francis Ngannou',
getFullname: function () {
return this.fullname;
}
},
getName: function() {
return this.fullname;
},
getFirstName: () => {
return this.fullname.split(' ')[0];
},
getLastName: (function() {
return this.fullname.split(' ')[1];
})()
}
console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);
2023.6.14 18:22 수정됨.
- 문제
- 출력의 결과를 제출해주세요, 그리고 그 이유를 최대한 상세히 설명해주세요
- 주의사항 : 브라우저에서 테스트해주세요(Chrome → 개발자 도구 → 콘솔에 입력하여 실행)
- 결과값
Not Francis Ngannou VS John Jones
It is John Jones VS Ciryl Gane아니 무슨 예시 이름이 이렇게 어려워
그래서 코드를 바꿈.
var fullname = '풀네임'
var fighter = {
fullname: '파이터.풀네임',
opponent: {
fullname: '파이터.어포넌트.풀네임',
getFullname: function () {
return this.fullname;
}
},
getName: function () {
return this.fullname;
},
getFirstName: () => {
return this.fullname.split(' ')[0];
},
getLastName: (function () {
return this.fullname.split(' ')[1];
})()
}
console.log('fighter.oppnant.getFullName : ', fighter.opponent.getFullname(), '///fighter.getName() : ', fighter.getName());
console.log('fighter.getname:', fighter.getName(), '////fighter.getFirstName:', fighter.getFirstName(), '//fighter.getLastname:', fighter.getLastName);결과값
fighter.oppnant.getFullName : 파이터.어포넌트.풀네임 ///fighter.getName() : 파이터.풀네임
fighter.getname: 파이터.풀네임 ////fighter.getFirstName: 풀네임 //fighter.getLastname: undefined
아니 뭔말이여
하나씩 타고 올라가보자.
일단 첫번째. fighter.opponent.getFullname() -> 파이터. 어포넌트.풀네임이 왜나옴??
this는 함수를 호출할때 결정된다. 호출 주체를 명시할 수 없는 경우 함수를 호출한 최종보스인 브라우저(window)나 node의 경우 node를 지칭한다.
여기서는 .점으로 opponant가 호출의 주체라고 명시가 되었으므로, this는 opponant를 지칭한다.
두번째. fighter.getName() -> 파이터. 풀네임은 왜 출력됨?
똑같다. 호출 주체가 누구냐? fighter라고 되어있다.
그럼 fighter의 fullname이 뭐냐? 파이터.풀네임 이다.
세번째는 똑같은게 다시 나와서 생략.
네번째. fighter.getFirstName()은 왜 풀네임이냐
화살표 함수는 내부에서 this가 할당되지 않으므로, 여기서 this는 자연스럽게 자기 부모의 this를 빌려옴.
즉, 한단계 위 스코프의 this를 가리킨다고 생각하면 됨.
마지막 fighter.getLastName은 왜 undefined? (즉시실행함수)
아니다. 즉시실행함수라고 불리는, 호출도 안했는데 실행을 해버리는 함수였다.
이게 실행되는 global(크롬은 windows) 에는 fullname이 없기때문에, undefined가 나온것이다.
이렇게 글로벌이 쭈루룩 나온다.
즉시실행함수는 좀더 깊게 가면 내용이 많은것 같아서,
우선 지금은 호출하기도 전에 그냥 프로그램이 실행되자마자 실행되는 함수라고 이해했다.
이 프로그램을 실행하
https://velog.io/@hyowon_lee/JavaScript-%EC%A6%89%EC%8B%9C-%EC%8B%A4%ED%96%89-%ED%95%A8%EC%88%98
[JavaScript] 즉시 실행 함수
즉시 실행 함수 함수 정의와 동시에 즉시 호출되는 함수를 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)라고 한다. 즉시 실행 함수는 단 한 번만 호출되며 다시 호출할 수 없다. 기명 즉시
velog.io
마지막꺼 getLastName에서 ()()중에 하나 빼는 경우(익명함수)
결과값 : ƒ () {return this.fullname.split(' ')[1];}
근데 저기서 f()가 뭐지?
크롬 콘솔에서 이렇게 나옴
그래서 노드에서도 실행해봄
=> 이건 그냥 ()괄호르 빼도 똑같았다. 괄호는 그냥 ( 1+1 ) 처럼 의미없었고,
getLastName이라는 익명함수가 나온것.
getLastName이라는 변수에 함수가 할당되어있는 것으로,
getLastName()이렇게 쓰지 않고 getLastName만 써서 호출하면,
fighter object의 키값인 getLastName의 밸류값에 어떤 데이터가 들어있는지 보여준다.
그렇다면 getLastName()이렇게 호출하면??
괄호 두개만 붙여줬는데, 이렇게 다른 결과가 나온다.
뒤에 split은 의미가 없어서 지워줬고, 위와같이 출력되었다.
익명함수에 할당된 변수명 뒤에 ()괄호를 붙이면 해당 함수를 호출한다는 의미이다.
즉, 함수를 호출하는 것과 똑같은 형태를 하고, 똑같은 역할을 한다.
마지막으로 this도 한번 찍어보았다.
아니 간단한 문제인줄 알았는데...
주옥같은 문제였다.
동료 민승님께 많이 물어보고,
인터넷 검색해보고, 책 보고, 한 6시간 이상 걸린것 같다..
