2024. 01. 03 This & Sort

JavaScript 3주차

 

THIS

this의 값은 함수를 호출한 방법에 의해 결정된다고 이해하면 되는 것 같다.

 

아래 문제를 풀면서 알게 되었지만 정말 호출한 방법에 의해 결정이된다.

물론 bind 메서드를 사용하면 호출 방법에 상관하지 않고 this의 값을 설정할 수 있지만 this 먼저..

 

아래 문제 풀이를 보며 this가 바인딩 되는 시점을 이해할 수 있기를!

3주차에서 숙제 중 this가 사용된 코드에서  this가 바인딩 되는 값을 찾는 문제가 나왔다.

 

-문제-

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);

 

---

FUNCTION을 사용한 THIS

    getName: function() {
        return this.fullname;
    },

 

function을 사용한 this의 경우 this를 부르는 곳 안에서 바인딩 된다.

 

fighter라는 객체 안에서 this를 사용하고 있다.

Ciryl Gane의 경우 fighter 밖에 선언되어 있으며,

Francis Ngannou의 경우 fighter 객체 안에 있는 객체인 opponent 안에 설정되어 있다.

 

그렇다면 동일한 객체에 몸을 담구고 있는 fullname은 fullname: 'John Jones' 뿐이다.

 

값은 John Jones

---

---

=> 화살표 함수를 사용한 THIS

 

    getFirstName: () => {
        return this.fullname.split(' ')[0];
    },

 

화살표 함수(=>)를 사용한 경우 상위 함수에서 바인딩 되어있는 this를 바인딩 하게된다.

 

현재는 상위 함수가 없기 때문에 전역객체를 바인딩하게 된다.

즉 fighter 상위에 다른 함수가 존재하고 함수 안에 fullname을 정의하는게 있다면 분명 그곳에서 바인딩 되었을 것이다.

현 문제에서는 상위함수는 없으나 전역객체에 선언된  fullname: 'Ciryl Gane' 이 존재한다.

 

그래서 this의 값은 Ciryl Gane 

split(' ')[0]을 사용했기 때문에

값은 Ciryl

 

**split 함수는 문자의 패턴을 사용해 문자열을 나눈다.

위에서 ' ' 띄어쓰기 로 값을 나누고 있으며, [0] 0번째 값을 반환하게 되어 있기 때문에  Ciryl 만 출력 

---

()() 즉시 실행 함수를 사용한 THIS

    getLastName: (function() {
        return this.fullname.split(' ')[1];
    })()

}

 

=

()() 형태를 가지고 있다. 처음 생각했을 때 당연히 Ngannou일 것 이라고 생각했다.

몇시간 헤메이고 도움을 구했다..

 

(함수)(호출)  형태는 즉시 실행 함수 라고 한다. 즉시 실행함수의 경우 가장 먼저 값을 읽는다.

자 this 는 자기를 부르는 곳에 바인딩 된다. 

즉, 즉시 실행을 하게 되면 this를 부르는 곳은 전역객체가 될 수 밖에 없다.

전역객체에 선언된  fullname: 'Ciryl Gane' 

 

때문에 this의 값은 Ciryl Gane.

split(' ') [1]을 사용했기 때문에 

값은 Gane

---

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

 

=

fighter.getLastName) 여기에서 fighter.getLastName()) 가 아닌 이유는 그 자리에서 호출을 했기 때문에!!!!

Not  Francis Ngannou VS John Jones

It is John Jones VS Ciryl Gan

---

---

SORT

sort 정복기 수업을 들었다. 와 이렇게 공부하는 거구나 하는 방법까지 쏙쏙 이었다.

 

sort

1. 원본배열까지 함께 변경 된다(같은 주소(유니코드)를 참조하기 때문! )
2. 재배열

위에서 말한 것 처럼 sort를 사용하는 경우 원본 배열 값이 변경된다. 이유인 즉슨 동일한 주소를 참조하기 때문이다.

같은 주소를 쓰는 이유는 배열과 같은 값은 부피가 크기 때문에 동일한 주소를 참조하게 된다.

 

 

때문에 sort(compare Function) 에서(compare Function)를 꼭 채워주는 것이 좋다.

sort와 sort(compare Function) 의 차이점은 문자 : 숫자 이다.

 

쉽게 예시를 들어보자.

 

const arr = [ 1, 2, 40, 5 ]

 

arr.sort( ) 는 [ 1, 2, 40, 5 ] ➡️ 문자로 보기 때문에 

arr.sort((a,b) => a - b) 는 [ 1, 2, 5, 40 ] ➡️ 숫자로 보기 때문에

 

** arr.sort 객체의 key 값에 접근할 때에는 .을 사용하자!  [ ]로도 접근 가능.

 

REACT의 경우 불변성이 중요하다고 한다. 꼭 주소 베이스로 바라보는 방법을 기르자

 

자 그럼 ((a,b) => a - b) 가 어떻게 되는지도 체크해보자🤔

 

index	a	b	ab	배열
				1, 2, 40, 5
0, 1	2	1	1	1, 2, 40, 5
0, 2	5	1	4	1, 2, 40, 5
2, 3	5	40	-35	1, 2, 5, 40

 

• a는 뒤 숫자 b 는 앞 숫자를 참조
• 양수인 경우 배열 유지
• 음수인 경우 배열 변경

하나 하나 콘솔을 찍어보면 알 수 있다고 한다! 아직 console.log() 체크하는 방법이 어렵지만 더 노력해봅시다.🤪