'스터디/자바스크립트중고급' 카테고리의 글 목록

스터디/자바스크립트중고급

1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등)

2018. 9. 30. 16:26

[ 자바스크립트 중고급 내용 별도 정리(함수,호이스팅,prototype,실행컨텍스트 등. ]

- 해당 내용은 class 상속을 제외한 자바스크립트 중,고급 내용을 정리한 것입니다.

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>

/*
        [ 함수(Function) ]

1. 호이스팅(Hoisting)
        : 변수 선언, 함수선언(익명함수는 X) 을 위로 끌어올리는 성질로
        -> 아래의 예에서 a()를 호출시 자바스크립트는 최초 a함수를 위로끌어올려
        호이스팅하기 때문에 수행 가능하지만 b, c는 에러가 발생

-> 아래 예시를 자바스크립트 수행 순서대로 표시해보면...
        function a(){...}
        var b;
        function bb(){...}
        var c;
        // 여기까지해서 변수 선언부와 함수 선언이 호이스팅 됨...

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

b = bb;
        c = function(){...}
        가 되게됨...
    */
    console.log(a()); // 'a'
    //console.log(b()); // 변수 b가 호이스팅되어 위로 올려지고 bb()함수도 호이스팅되지만 b에
                      // 대입되지 않은 시점에 수행함으로 에러
    //console.log(c()); // 변수 c 선언만 호이스팅되고 c에는 undefined가 들어 있음으로 에러

// 선언적 함수
    function a(){
      return 'a';
    }
    // 기명함수 표현식
    var b = function bb(){
      return 'b';
    }

// 익명함수
    var c = function(){
      return 'c';
    }
    ///////////////////////////////////////////////////////////////////////////////////////

/*
    ex) 아래의 예시를 한번 보자.
      팀작업을 하다보면 다른 사람과 동일한 이름으로 함수를 아래쪽에 한번 더 선언하게 될 수 있는데
      (실수로...)
      이 경우는 호이스팅을 같이 생각하면 어떻게 수행될까?
      -> 첫번째 sum함수 선언이 호이스팅되서 올라가고, 두번째 sum 함수 선언이 호이스팅되는데
        이때, 이미 sum함수가 있음으로 마지막에 선언된 sum함수로 덮어써지고 만다...
        따라서, sum(1,2)와 sum(3,4)가 모두 3, 7의 결과가 나온다.
        (우리 예상으론 a+b=3, 7이 나올것 같지만...)

결론)
        -> 호이스팅에 의해 덮어써질 수 있음으로 함수 선언은 선언적 함수 방식보다
           함수 표현식(익명함수로 대입하는 등...)의 방식을 사용해서 정의하는 것이 좋다!
    */
    function sum(a,b){
      return "a + b = " + (a+b);
    }

sum(1,2); // 3

function sum(a,b){
      return (a+b);
    }

sum(3,4); // 7
    //////////////////////////////////////////////////////////////////////////
    /*
    - 실행 컨텍스트란?
        : 함수 등이 실행되는 시점에 실행시 필요한 호이스팅, this 바인딩 등의 작업이 이루어져
          필요한 정보를 불러모은 하나의 집합체가 되는 작업.
    -> 호이스팅, 실행 컨텍스트를 따져서 아래 예시의 호출 순서에 대해 생각해 보자.
    -> 출력값은 어떻게 되는가?
      : 정답) 1 undefined 1 1
    */
    var a = 1;

function outer(){

console.log(a);

function inner(){
        console.log(a);
        var a = 3;
      }

inner();

console.log(a);

}

outer();
    console.log(a);

/*
    수행순서)
    1. var a; // 호이스팅
    2. outer함수 선언 호이스팅
    3. a = 1;이 대입됨
    4. outer()를 수행함과 동시에 outer함수의 실행 컨텍스트 생성
    5. outer함수 내에서
       inner함수 선언 호이스팅
    6. outer함수 내의 console.log(a) 수행 -> 1출력
    7. inner()를 수행하며 inner함수의 실행컨텍스트 생성
       var a; 호이스팅되며
       console.log(a) 수행하며 undefined가 출력됨(아래 var a=3에서 a가 호이스팅되지만 대입은 아직 전이기 때문)
       a = 3대입이 이루어짐
    8. outer함수 내의 inner()아래 console.log(a)가 수행됨 -> 1 출력
    9. 가장 아래의 console.log(a)가 수행되며 -> 1출력
    */
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////

/*
      [ 사용시점에 따라 달라지는 this의 의미(this 바인딩) ]
      - 각 상황별 this가 갖는 의미에 대해 알아보자.
      1. 전역 스코프에서 this의 의미 -> "window 객체"를 가리킴
      2. 함수 내부에서 this의 의미 -> "window 객체"를 가리킴
        -> 이 부분이 메서드 내의 this와 헷갈릴 수 있는데
        -> 함수와 메서드는 다름... 메서드는 -> 우리가 흔히 아는 클래스 내에 있는 메서드를 의미하는 것!
        -> 주의하자!! 함수 내의 this의 의미는 "window 객체!"
      3. 메서드 내부에서 this의 의미 -> 메서드 실행 앞까지(호출주체)가 this
          -> 생성자 함수든 리터럴 선언이든 그 안에 정의된 메서드는
          -> new a().print()일 경우 메서드 .앞까지 new a()가 this를 의미하게 됨!
      4. callback에서 this의 의미 -> 함수 내부에서와 동일.
      5. 생성자 함수에서 this의 의미 -> 인스턴스
    */
    // 1. 함수 내에서 this의 의미 ex)
    function a(){
      console.log("함수 내부에서 this의 의미");
      console.log(this); // window 객체...
    }
    function b(){
      function c(){
        console.log("함수 내의 내부 함수에서 this의 의미");
        console.log(this); // 아무리 내부함수여도 역시 window 객체...
      }
      c();
    }

// 2. 메서드 내에서 this의 의미
    var d = {
      e : function(){
        function f(){
          console.log("메서드 내의 내부함수에서  this의 의미");
          console.log(this);
        }
        f();
      }
    }
    d.e(); // window 객체!
    // 여기서 메서드 내의 내부 함수여서 메서드 실행 앞까지가 this를 의미할 것 같지만
    // -> 역시 함수 내부이기 때문에 this가 가리키는 것은 window객체이게 됨!(함수 내부의 this는 무조건!!! window 객체)
    /*
    var a = {
      b : function(){
        console.log("메서드 안에서의 this의 의미");
        console.log(this);
      }
    }
    a.b(); // b()수행 . 앞까지 즉 a 인스턴스가 this
    */

// 그럼... 메서드 내의 내부함수에서 this가 객체를 가리키게 할 순 없을까?
    var obj2 = {
      a : 20,
      b : function(){
        var self = this; // 여기서 미리 this를 담음
        function cc(){
          console.log(self.a);
        }
      }
    }

// 3. callback 함수 내에서 this의 의미 ex)
        // -> 함수에서와 동일 but 함수 수행시 this 바인딩을 지정할 수 있음(함수도 마찬가지)
    var callbackFunc = function(){
      console.log("callback 함수 내에서 this");
      console.log(this);
    }
    var obj3 = {
      a : 1,
      b : function(callBackFunc){
        callBackFunc();
      }
    }
    obj3.b(callbackFunc); // callback 함수 내에서 this -> window 객체
    /*
    [ 함수 실행시 this 바인딩 시켜 실행하는 몇가지 방법 ]
    1. func.call(this바인딩할녀석, 해당함수 매개변수...)
        -> func.call(obj3, 1,2,3)
    2. func.apply(obj3, [1,2,3])
    3. var d = func.bind(obj3, 1,2,3)
        -> 1,2번은 즉시 호출되어 수행되고 3번은 새로운 함수를 생성하게 됨
        -> 즉시 수행되는게 아님... this 바인딩만 결정해서 다른 함수의 매개변수 등으로 전달하고자 할 때 주로 사용됨.
    */
    var cb = function(){
      console.log("bind를 통해 this를 변경해 호출하자.");
      console.log(this);
    }
    var obj4 = {
      a : 1
    }
    setTimeout(cb.bind(obj4),100);
    // setTimeout의 첫번째 매개변수는 함수를 받는데 apply, call은 즉시 수행함으로 bind를 통해서 더해야함
    // 이때, cb함수 수행시 매개변수는 넘기지 않았고, cb함수 수행시 cb함수 내의 this의 의미만 obj4를 가리키도록 bind했음
    // 따라서 this는 obj4를 가리키게 됨.

// 4. 생성자 함수 내에서 this의 의미 ex)
        // -> 인스턴스
    function constructorObj(){
      this.a = 10; // constructorObj 생성자를 통해 생성된 인스턴스를 가리킴(this)
      this.print = function(){
        console.log("이곳에서의 this는 ? ");
        console.log(this); // 메서드 내에서니까 new constructorObj() 가 됨.
      }
    }
    new constructorObj().print();
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////
    /*
      [ prototype ]
      : 많이 들어밨을테지만... 간단히 알면 엄청 쉽고... 자세히 알면 너무너무 어려운... 우리 prototype님...
      -> 우리가 흔히 제일 많이 아는 사용 이유?)
        : 생성자 함수 등에서 메서드를 선언하고 new를 통해 인스턴스를 생성시 모든 인스턴스에서 중복으로 메서드를 위한
        : 메모리 공간을 할당해 비효율 적이니까 공유될 수 있는 prototype에 선언해 효율적이게 관리하고
        : 또, prototype을 통해 상속을 구현하기 위해서... 정도?
      -> 이정도까진 기본적이니까... 많이들 안다. 하지만 인스턴스.메서드() 를 수행했을 때 어떻게 prototype내의 메서드가
        수행되고 하는 원리에 대해 아는 사람은 그리 많지 않다... 아래부턴 그것에 대해 설명한다.

---------------------------------------------------------------------------------------------------------
      - 생성자 함수를 정의시 자동으로 생성자 함수 내에는 prototype 객체라는 프로퍼티가 생성되게 된다.
      - 이때, 생성자 함수를 new를 통해 인스턴스를 생성하게 되면
          -> 해당 인스턴스에는 __proto__ 라는 변수가 하나 생성되게 되는데 이 __proto__는 바로 생성자의 prototype을
          -> 가리키게 된다.
          -> 이때 중요한건!
                -> 인스턴스는 __proto__를 생략하고 prototype에 바로 접근할 수 있다.(__proto__는 생략이 가능하다.)
                ex) new obj().__proto__.testMethod() == new obj().testMethod()

-> 위의 this바인딩과 연계해 얼마나 잘 이해했나 테스트해보자. 아래 예시를 보라.
    */
    function Person(n,a){ // Person 생성자 함수
      this.name = n;
      this.age = a;
    }

Person.prototype.setOlder = function(){
      this.age += 1; // 메서드 내의 this는? .앞까지 호출대상
    }
    Person.prototype.getAge = function(){
      return this.age;
    }

console.log("prototype EX");
    var youngRong = new Person('영롱',29);// 인스턴스 생성
    youngRong.__proto__.setOlder();
    console.log(youngRong.__proto__.getAge()); // NaN 발생 why?
    // -> 메서드내의 this는 메서드 앞 .까지가 호출대상임
    // 따라서, 여기선 youngRong.__proto__ 객체 즉 prototype객체가 this인데 해당
    // prototype내에 a를 정의한 적이 없음 따라서 undefined랑 1이랑 위에서 연산이 이루어져서 NaN가 나옴.
    console.log(youngRong.getAge()); // 29가 출력됨... youngRong이란 인스턴스를 가리키게 되니까... this가
    // 이처럼 __proto__를 생략하고 prototype에접근할 수 있는 것임...
    ////////////////////////////////////////////////////////////////////////////////////////////////////

/*
      [  자바스크립트 상속을 구현하기 위해 반드시 이해해야하는 prototype 체이닝에 관하여... ]
      - 자 우리는 자바스크립트에서 모든 객체는 Object 객체로부터 파생된다라는걸 알고있을거다.(Object 최상위 객체)
      - 모르면... 난감...
      - 그럼 어떻게 모든 자바스크립트 객체들은 Object 객체를 상속받고 있고 또 Object 내에 정의된 toString(), valueOf()등의
      - 메서드를 사용할 수 있는걸까?
      -> Array도 객체임으로 Object를 똑같이 상속하고 있을 텐데 Array로 예를 들어보자.

Object 생성자  -------> Object prototype
                                          /              - toString()
                                        /                - valueOf()
                                      /                  - isPrototypeOf() .. 등의 메서드
                                    /
                                  /
      Array 생성자  ---------> Array prototype
          |                    /
         new                 /
          |                /
      Array 인스턴스 -- __proto__
      -> Array인스턴스의 __proto__는 Array prototype을 가리키고 있고 Array prototype은 Object의 prototype을 가리키고 있기 때문!
      따라서 __proto__는 생략이가능하기 때문에 배열에서 바로 new Array().toString()처럼 접근할 수 있는 것!
    */
    var arr = [1,2,3];
    console.log("Array Object 관계")
    console.log(arr.toString()); // Object prototype에 선언되있는 toString()을 수행함 -> 1,2,3
    arr.toString = function(){ // 이렇게 정의하면 클래스에 static 메서드로 정의하게 되는 것!
      return this.join('_'); // 메서드 내의 this임으로 .앞까지가 호출대상이 this
    }
    console.log(arr.toString()); // arr에 선언된 toString()이 호출되 -> 1_2_3 출력(직접 정의한 것 호출)
    var arr2 = [3,4,5];
    console.log("this bind 변경");
    console.log(arr.__proto__.toString.call(arr2)); // this 바인딩을 arr이 아니라 arr2로 해서 수행할 수도 있음 -> 3,4,5 출력
    // 그럼 우리가 여기서 알 수 있는건 머임?
    // 우리가 event처리할 때 event의 함수 내에서 this를 써서 이벤트가 발생한 돔객체를 가리키도록 하는데 이게 어떻게 가능할까?
    // -> 그래, addEventListener 내에서 전달된 callback함수 수행시 bind를 이벤트가 발생한 돔을 가리키도록 했기 때문이지...
    // -> 이런 이유도 모르고 그냥 이벤트 처리에서 this를 사용하는 사람들이 정말 많다...

var obj5 = {
      a:1,
      b:{
        c:'c'
      }
    }
    console.log("obj5 : ");
    console.log(obj5.toString()); // Object prototype의 toString을 수행해 결과 -> [ Object Object ]
    // 이처럼 Object의 toString()은 우리가 원하는 결과를 얻을만큼 구체적으로 구현되어 있지 않음...
    // 따라서, 객체들의 toString()을 디버깅 용으로 찍어보기 위해 Object prototype을 재정의해 사용하는 것이 권장됨.

obj5.toString = function(){
      var res = [];
      for(var key in this){ // this는 obj5객체를 가리키게 될 것이고, for in을 통해 각 프로퍼티 key가 var key에 들어오게 될 것임
        res.push(key + ': ' + this[key].toString());
      }
      return '{' + res.join(', ') + '}';
    }

console.log(obj5.toString());
    // {a: 1, b: [object Object], toString: function (){
    //
    //   var res = [];
    //
    //   for(var key in this){ // this는 obj5객체를 가리키게 될 것이고, for in을 통해 각 프로퍼티 key가 var key에 들어오게 될 것임
    //
    //     res.push(key + ': ' + this[key].toString());
    //
    //   }
    //
    //   return '{' + res.join(', ') + '}';
    //
    // }}

// b 프로퍼티는 원하는 결과를 얻기 어렵고 매 클래스마다 저렇게 toString을 재정의하기도 번잡함... 따라서 아래처럼 수정하자.
    // Object prototype의 toString을 재정의
    Object.prototype.toString = function(){
      var res = [];
      for(var key in this){ // prototype체인을 통해 인스턴스에서 메서드 수행시 메서드 앞까지가 this가 됨으로 해당 객체
                            // 가 된다.
        res.push(key + ': ' + this[key].toString());

}
      return "{" + res.join(', ') + "}";
    }
    console.log(obj4.toString());
    ////////////////////////////////////////////////////////////////////////////////////////////////////////////
    
  </script>
</head>

저작자표시 비영리

'스터디 > 자바스크립트중고급' 카테고리의 다른 글

1. 함수(Function) 및 객체(Object) (0)	2018.09.27

1. 함수(Function) 및 객체(Object)

2018. 9. 27. 19:20

[ 함수(Function) ]

-종류)

1. 선언적 함수 : 함수에 이름이 있는 함수로 호이스팅의 대상이 된다.(호이스팅은 별도로 정리)

function circle(radius){

return something;

}

2. 익명 함수 : 함수에 이름이 없어 주로 변수에 대입해서 사용하는 함수(호이스팅의 대상이 되지 않음)

-> 따라서 순차적으로 수행되기 때문에 요즘은 익명함수로 선언하는 것이 추천됨.

var anonymousFunc = function(raidus){

return something;

}

3. 람다 함수 : 일회성으로 사용하기 위한 목적으로 사용되는 함수

(function(radius){

return something;

})(25)

- 매개변수가 정해지지 않은 함수 처리 방식)

-> 자바스크립트는 arguments 라는 배열을 제공함

-> arguments[0], arguments[1], ... 하면 각 순서대로 넘긴 매개변수 값을 가져올 수 있다.

-> arguments.length : 실재 넘긴 매개변수 개수

-> arguments.callee 는 함수 정의부를 의미한다.

-> 따라서, arguments.callee.length 하면 선언된 매개변수 개수

testFunc(10,20,30,40); // 선언적 함수는 호이스팅되기 때문에 수행 가능.

function testFunc(a, b){

if(arguments.callee.length != arguments.callee){

alert("선언된 함수의 매개변수 개수와 실재 호출시 넘긴 매개변수 개수가 다릅니다.");

alert("선언 매개변수 개수 : " + arguments.callee.length);

alert("실재 호출시 넘긴 매개변수 개수 : " + arguments.length);

// arguments[0] // 10

// arguments[1] // 20

// arguments[2] // 30

}

- 인코딩/디코딩 내장함수)

-> 한글 등을 넘길때 값에 문제가 생길 수 있어 인코딩에 사용되는 내장함수이다.

escape(str) <-> unescape(str)

encodeURIComponent(str) <-> decodeURIComponent(str)

- 숫자 판별 내장함수)

isNaN() : 숫자면 true 아니면 false를 return함.

- 정수 변환 내장함수)

parseInt()

- 실수 변환 내장함수)

parseFloat()

-------------------------------------------------------------------------------------------

[ 객체(Object) ]

객체 선언 방식 종류)

1. new Object()를 통한 방식 -> 거의 사용 안함...

2. 객체 리터럴 방식

var circle = {

변수 : "값",

메서드1 : function(){

return something;

메서드2 : function(){}

...

}

-new 를 통해 객체를 여러개 생성할 수 없음으로 3번 생성자를 이용한 방식이 제일 자주 사용된다.

-객체 선언 이후에 객체에 메서드, 변수를 추가하는 방법)

circle.새변수명 = 값;

circle.새메서드명 = function(){

}

->*** 이런 방식 말고도 변수나 문자열을 통해서도 동적으로 변수, 메서드를 추가할 수 있다.

circle["새변수명"] = 값;

circle["새메서드명"] = function(){};

var newFunction = "print";

circle[newFunction] = function(){} 처럼 동적으로 생성할 수 있다.

3. 생성자 함수를 이용한 방식

1) 선언적 함수를 이용하는 방식

function constructorObject(a, b){

this.변수명 = 값;

this.메서드명 = function(){}

...

}

2) 익명함수를 이용하는 방식

var constructorObject = function(a,b){

this.변수명 = 값;

this.메서드명 = function(){}

}

new constructorObject(10,20);

처럼 new 연산자를 통해 인스턴스를 생성해서 사용하며, 이때 this는 자기 자신의 객체를 의미하게 된다.

-> 자바스크립트에서 각 사용처 별로 this가 굉장히 다른데 추후에 정리...

-> 일단, 생성자 함수를 통해 생성된 객체에서의 this는 자기 자신의 객체를 의미

-> 함수 내에서 this는 window 객체를 의미

역시 익명함수에서도 new를 통해 생성한 객체에 추가로 변수, 메서드를 추가하고 싶은 경우

var newObject = new constructorObject(10,20);

newObject.newVal = "새로운 값 추가";

newObject["newMethod"] = function(){} 처럼 추가할 수 있다.

*** [ 객체에서의 prototype ]

-> prototype 사용 이유)

생성자 함수를 통해 선언된 것을 new 키워드를 통해 객체 생성시 모든 인스턴스들은

생성자 함수 내에 선언된 메서드 공간을 중복적으로 할당받게 된다.

하지만 이러한 중복된 메서드를 공간을 객체마다 각기 할당받는 것은 비효율 적임으로

공유될 수 있는 prototype을 통해 한군대에서만 정의될 수 있도록 해주는 방식을 사용한다.

클래스명.prototype.변수명 = "값"; // 이 값은 해당 클래스명으로 생성되는 모든 객체에서 공유된다.

클래스명.prototype.메서드명 = function(){}

// 한번에 여러개를 뭉뚱그려 정의하고 싶다면...

클래스명.prototype = {

// 해당 클래스의 prototype을 통째로 재정의할 수도 있다.

변수명 : "값",

메서드1 : function(){},

메서드2 : function(){},

...

}

- Date 내장 객체 자주사용되는 메서드)

var date = new Date();

date.getFullYear();

date.getMonth() + 1; // 시작값이 0부터여서 1을 더해야함

date.getDate(); // 일

date.getHours();

date.getMinutes();

date.getSeconds();

- 콜백(Callback) 함수란? )

: 별거없다... 함수 호출시 매개변수에 함수를 넘겨서 해당 함수 내에서 특정 시점에 넘긴 함수를 수행하기 위한 목적으로 사용된다.

-> ajax등에서 success시 로딩 이미지를 없앤다거나 success가 완료된 시점에 특정 작업 등을 하려할 때 많이 사용된다.

function print(sum){

document.write(sum);

}

function testMethod(callbackF, a, b){

var sum = 0;

sum = a + b;

callbackF(sum); // 전달받은 callbackF(print메서드)를 수행한다.

}

testMethod(print, 10, 20);

저작자표시 비영리

'스터디 > 자바스크립트중고급' 카테고리의 다른 글

1.자바스크립트 중고급 내용 정리(함수,호이스팅,prototype, 실행컨텍스트 등) (0)	2018.09.30

PREV 1 NEXT

악덕고용주의 개발 일기