TIL 11일차 -1 (코딩테스트, this에 대한 이해)

오늘은 간단한 코딩테스트를 먼저 진행했다.

문제 이름은 자연수 뒤집어 배열로 만들기이다. 말 그대로 자연수 N을 받아온 것을 뒤집어서 결과값에 출력해주면 된다.

---

풀이 코드를 먼저 보여주고 설명을 진행하겠습니다.

풀이코드

function solution(n) {

    var answer = [];

    //toString()문으로 num을 문자열로 바꾸고, split('')으로 각문단을 ("1", "2","3") 처럼 나눠준다.

    let num = n.toString().split('');

   

    for(let i = num.length - 1; i >= 0; i--)

        {

            //Number로 감싸줘서 다시 answer로 들어갈때는 정수형으로 들어가게 바꿔줌

            answer.push(Number(num[i]));

        }

   

    return answer;

}

 

설명

풀이코드는 다음과 같습니다. 우선 배열을 받을 answer을 만들어주고 받은 정수 n을 toString()을 사용하여서 문자열로 바꾸고 split(' ')을 사용하여서 각각 문자열이 되게끔 바꿔줬습니다. 그냥 toString을 하면 따옴표가 없어 문자열이 되지않습니다.그리고 우리는 뒤집어서 문자열을 넣어주어야 하기 때문에 for문을 돌릴때 num.length -1 즉 배열의 최대값을 i에 집어넣어주고 --하는식으로 num[0]까지 반복문을 돌려줍니다. 그 상태에서 answer에 num[i]를 그냥 푸쉬해주게 되면 문자열이 들어가서 ["5","4","3","2","1"]이 들어가므로 정수형을 넣어주기 위해서 Number로 num[i]를 감싸서 문자열 num[i]를 정수형으로 바꾼 상태로 answer에 넣고 answer을 리턴해주었습니다.

 

• This의 역할

그리고 학습을 이어서 진행했는데 this에 대해서 배웠다.

전역환경에서의 this는 node에서는 글로벌 객체, 브라우저에서는 window 전체 객체를 포함한다.

그리고 함수와 메서드에서의 this의 역할을 배웠는데, 이전에 함수와 메서드의 차이를배웠다. 함수는 독립적으로 호출할 수 있고, 메서드는 객체.메서드명() 처럼 호출의 주체가 필요하다. 이둘의 차이로 this의 역할이 바뀌는데, 함수는 전역객체 메서드의 this는 호출한 해당하는 객체의 정보를 가져온다.

함수와 메서드의 호출의 구분은 점(.) 또는 대괄호로 예를 들수 있다.

예) obj.methodA(); or obj['methodA']();

결론적으로 함수로서 '독립적으로' 호출할 때의 this는 항상 전역객체를 가리킨다.

메서드 내부에 함수의 this 또한 함수내의 존재하는 것이기때문에 전역 객체를 의미한다.

• 일반함수와 화살표함수 또한 this binding의 여부가 다르다.

화살표 함수내의 this는 thisbinding 과정을 생략하기 때문에 this가 전역변수를 가르키는것이 아닌 안의 객체를 가르킨다.

•  콜백함수도 this는 전역변수를 가르킨다.

(ex) setTimer, addEventListener, foreach등등) 의 전역 변수는 미리 지정된 특정한 상황이 아니면 this사용시 스스로를 가르킨다.

생성자함수내에서의 this

var Cat = function (name, age) {

    this.bark = '야옹';

    this.name = name;

    this.age = age;

}

var choco = new Cat('초코', 7);

var nabi = new Cat('나비', 5);

위와 같은 함수 틀을 생성자라고 하는데 위의서의 this는 스스로를 가르킨다. 초코와 나비는 다른 this객체를 가짐.

call을 이용한 명시적 Binding

함수내에서의 binding을 하기위해선 여러방법이 있는데 그중 call을 먼저 배웠다.

var func = function (a, b, c) {

    console.log(this, a, b, c);

};

 

func.call({x: 1}, 4,5, 6);

구도는 다음과 같다. 함수명 뒤에 call함수를 붙이고 this로 소개해줄 부분에 함수내용부분인 중괄호{} 를 이용하여서 내용을 직시적으로 표현한다.

결과값 : { x: 1 } 4 5 6

그러면 다음과 같이 this가 전역변수를 가르키는 것이 아닌 {x:1}의 내용을 가르키는것을 볼 수 있다.

apply를 이용한 명시적 Binding

apply또한 구도는 똑같다.

func.apply({x:1},[4 ,5, 6] );

구조는 같고 인수부분에 대괄호를 쳐 배열로 바꿔주면된다.

 

유사배열 객체

유사배열객체란 배열과 흡사한 객체모양을 뜻한다.

var obj = {

    0: 'a',

    1: 'b',

    2: 'c',

    length: 3

};

과 같이 배열과 같은 기능을 하는 obj[0], [1], [2]등을 명시하고 length를 사용가능하다. 

이런 객체를 Array.from을 사용하면 쉽게 객체를 배열로 바꿔서 배열 method인 slice, push등을 사용할 수 있는데

var arr = Array.from(obj);

위의 obj객체에 Array.from을 해주면 arr을 호출할 경우 배열로 나온다.

 

call, apply의 활용

call, apply는 생성자로 활용가능하다.

function Student(name, gender, school) {

    this.name = name;

    this.gender = gender;

    this.school = school;

}

function Employee(name, gender, company){

    this.name = name;

    this.gender = gender;

    this.company = company;

}

var kd = new Student('길동', 'male', '서울대');

var ks = new Employee('길순', 'female', '삼성');

다음과 같은 코드에서 Student와 Employee의 생성자는 이름과 성이 겹친다. 이것을 Person이라는 생성자로 따로 만들어 하나로 묶고, call과 apply를 활용한다면 

function Person(name, gender){

    this.name = name;

    this.gender = gender;

}

function Student(name, gender, school) {

    Person.call(this, name, gender);

    this.school = school;

}

function Employee(name, gender, company){

    Person.apply(this, [name, gender]);

    this.company = company;

}

var kd = new Student('길동', 'male', '서울대');

var ks = new Employee('길순', 'female', '삼성');

다음과 같이 더 깔끔해진 코드를 짤 수 있다.

그리고 배열 메소드를 사용하기 위해서 apply를 사용할 수 있는데

var numbers = [10, 20, 3, 16, 45];

위와 같은 numbers라는 배열에서의 최대값과 최소값을 구하기위해서 

var max = Math.max.apply(null, numbers);

var min = Math.min.apply(null, numbers);

다음과 같은 코드를 사용하여서 쉽게 최대값과 최소값을 구할 수 있다.(apply는 (this, 배열)로 구성되어있기 때문에 배열인 numbers에 괄호를 칠필요 x) max 와 min 함수 같은경우 배열이 풀려야 하기 때문에 apply를 이용하여 배열을 풀 수있다. 비슷한 방법으로 (...) 을 이용한 스프레드도 비슷한 효과를 내므로

var max = Math.max(...numbers);

var min = Math.min(...numbers);

위와 같은 코드로 쉽게 작성할 수 있다.(spread를 사용하면 해당하는 배열을 다 풀어준다.)

Bind 메서드

bind 메서드의 목적

 - 함수에 this를 '미리'적용

 - 부분적용 함수

 

함수에 this를 '미리'적용

var func = function (a, b ,c ,d) {

    console.log(this, a, b, c, d);

};

var bindFunc1 = func.bind({x:1});

bindFunc1(5,6, 7,8);

함수를 그냥 호출하게 된다면 this에는 global 전역변수가 들어가게 되겠지만, bind를 사용한다면 {x:1}이 this에 적용되서 bindFunc에 호출된다.

 

부분적용 함수

var bindFunc2 = func.bind({x:1},4 ,5);

bindFunc2(6, 7);

다음과 같이 미리 bind를 이용하여 인수를 적용하면

{x: 1} 4, 5, 6, 7로 호출이 된다. 위의경우 모두  function에 호출할 필요가 없음

 

bind메서드는 또한 추적하기 쉽다는 이점이 있는데

console.log(func.name);

console.log(bindFunc1.name);

console.log(bindFunc2.name);

다음과 같이 각 func들에 name을 보면 func, bound func, bound func로 호출되어 무엇이 바운드 되었는지 쉽게 알 수 있다.

 

예시문제

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

다음과 같은 문제를 브라우저로 실행했을 때 

처음 fighter.opponent.getFullname()의 경우 fighter의 opponent의 getFullname을 정확히 명시했으므로 해당하는 Francis Ngannou가 나온다. 그냥 fighter.getName()의 경우 fighter내의 this.fullname을 찾으라는 명시가 되어있으므로 fighter내의 fullname인 John Jones가 나온다. getFirstname의 경우 화살표 함수로 되어있는데 화살표 함수의 경우 this bind를 무시하므로 상위객체인 전역변수인 Ciryl Gane중 앞부분인 Ciryl이 결과 값으로 배출된다. getLastName의 경우 호출을 직접적으로 명시하지 않았기 때문에 전역부분인 fullname에서 뒷이름 Gane를 호출하게된다.