기억보다 기록을

[JavaScript] ES6 chap.1

 

 

 

this

1. 아무데서 쓰거나 일반 함수에서의 this는 window

<script>

    console.log(this); // Window
    
    function 함수(){
    	console.log(this); 
    }
    
    함수(); // Window
    
</script>

 

** use strict **

<script>
    'use strict';

    console.log(this); // Window
    
    function 함수(){
    	console.log(this); 
    }
    
    함수(); // undefined
    
</script>

 

 

2. object 자료형 안의 함수에서 this값은 오브젝트 그 자체

<script>
    
    var 오브젝트 = {
        data: "kim",
        함수: function(){
            console.log(this);
        }
    }
    
    오브젝트.함수(); // { data : 'Kim', 함수 : f }
    
</script>

this값: 오브젝트 객체

 

<script>
    
    var 오브젝트2 = {
        data: {
          함수: function(){
              console.log(this);
          }
        }
    }
    
    오브젝트2.data.함수(); // { 함수 : f }
    
</script>

this값: data 객체

 

 

* window 객체

<script>

  (1)
  function 함수(){
    console.log(this)
  }

  (2)
  window.함수 = function(){
      console.log(this);
  }; <!-- window라는 오브젝트에 함수 자료를 추가 -->
  
  <!-- (2)와 같은 의미
  var window = {
    함수: function(){
      console.log(this);
    }
  }
  실질적으로 window로 객체 변수를 선언하면 에러 남-->
  
</script>

- 2번의 뜻은 1번의 뜻과 상통한다. script라는 태그 자체안에 window라는 큰 객체(object)가 있는것이다.

 

 

3. constructor(생성자) 안에서 쓰면 constructor로 새로 생성되는 오브젝트

<script>
       
    function 생성자(){
        console.log(this);
    }        

    new 생성자(); // 생성자 {}
        
</script>

this 값: 생성자 객체

 

 

<script>

    function 생성자or함수(){
        this.테스트 = "test";
        console.log(this);
    }        

    // 1번의 경우
    new 생성자or함수(); // 생성자or함수 {테스트: kim}
    
    // 3번의 경우
    생성자or함수(); // Window
    
</script>

- 함수로 사용 했을시엔 window 객체를 가리키지만 new를 통해 생성자(constructor)로 만들게 되면 해당 function의 이름으로 새로운 object 객체를 만든다.

 

 

4. eventListener 안에서 쓰는 this는 e.currentTarget

<script>

	document.getElementById('ID').addEventListener('click', function(e){
            // == e.currentTarget
            console.log(this); // document.getElementById('ID')            
	});
    
</script>

- 이벤트리스너 안에서의 this는 지금 이벤트가 동작하는 곳을 의미하며, e.currentTarget과 document.getElementById('ID')와 같은 의미이다.

 

 

** 가장 가까이 있는 함수에 따라 바뀌는 this

<script>

    document.getElementById('버튼').addEventListener('click', function(e){
        console.log(this); // document.getElementById('버튼') (4)
        var 어레이 = [1,2,3];
        어레이.forEach(function(){
            console.log(this); // window, window, window (1)
        });
    });

    var 오브젝트 = {
        이름들 : ['김', '이', '박'],
        함수 : function(){
            console.log(this); // 오브젝트 { 이름들: ['김', '이', '박'] } (2)
            오브젝트.이름들.forEach(function(){
                console.log(this); // window, window, window (1)
            });
        }
    }
    
    console.log(오브젝트.함수());
</script>

 

 

** function()과 arrow함수의 차이

<script>

    var 오브젝트 = {
        이름들 : ['김', '이', '박'],
        함수 : function(){
            console.log(this); // 오브젝트 { 이름들: ['김', '이', '박'] } (2)
            오브젝트.이름들.forEach(function(){
                console.log(this); // window, window, window (1)
            });
        }
    }

    console.log(오브젝트.함수());
    
    var 오브젝트2 = {
        이름들 : ['김', '이', '박'],
        함수 : function(){
            console.log(this); // 오브젝트 { 이름들: ['김', '이', '박'] } (2)
            오브젝트2.이름들.forEach( () => {
                console.log(this); // 오브젝트 { 이름들: ['김', '이', '박'] } (2)
            });
        }
    }
    
    console.log(오브젝트2.함수());

</script>

ES6에선 function(){} 대신 () => {} 라는 arrow function 문법이 있는데, 둘의 차이는 함수 내부의 this 값을 새로 바꿔주지 않기 때문에(=바깥에 있던 this값을 내부에서 그대로 사용) this를 사용하기 유용하다.

 

 

 

Arrow function

<script>

    var x = function(){} // 기존 함수
    
    var y = () => {} // arrow 함수

</script>

 

 

* 사용법

<script>

    var 두배만들기 = (x) => { return x * 2 }
    console.log( 두배만들기(4) );
    
    
    var 두배만들기 = x => x * 2 ;
    console.log( 두배만들기(8) );

</script>

- 파라미터가 하나면 중괄호 생략이 가능하고 return 값도 한 줄이면 중괄호와 return도 생략 가능하다.

 

 

* arrow function에서의 this

<script>

    var 오브젝트1 = {
        함수 : function(){ 
            console.log(this)
        }
    }

    오브젝트1.함수(); // { 오브젝트1: 함수f }
    
    
    var 오브젝트1 = {
        함수 : () => { console.log(this) }
    }

    오브젝트1.함수(); // window

</script>

arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용한다.

 

 

 

 

 

var, let, const

* var

• 재선언 (o)
• 재할당 (o)
• 범위: function

var 이름 = 'kim';

이름 = 'lee' // (o)
var 이름 = 'kim'; // (o)

function(){
    var 테스트 = 'test';
    테스트 // (o)
}

테스트 // (x)

 

 

* let

• 재선언 (x)
• 재할당 (o)
• 범위: {}

let 이름 = 'kim';

이름 = 'lee' // (o)
let 이름 = 'kim'; // (x)

if(1 == 1){
    let 테스트 = 'test';
    테스트 // (o)
}

테스트 // (x)

 

 

* const

• 재선언 (x)
• 재할당 (x)
• 범위: {}

const 이름 = 'kim';

이름 = 'lee' // (x)
const 이름 = 'kim'; // (x)

if(1 == 1){
    const 테스트 = 'test';
    테스트 // (o)
}

테스트 // (x)

 

const 오브젝트 = { 이름 : 'Kim' }
오브젝트.이름 = 'Park'; //가능

const 변수를 쓴다고 하더라도 const로 선언된 변수의 자료 형이 object 형이라면 안에 있는 값을 변경 할 수 있다. 변경 불가능한 값을 만드려면 Object.freeze()라는 기본 함수를 사용하면 된다.

 

 

 

호이스팅, 클로저

- 호이스팅

<script>

    // var 이름;

    console.log(이름); // undefined

    var 이름 = 'Kim'; // 이름 = 'kim;
    
    console.log(이름); // kim
    
</script>

var 변수를 사용하게되면 (var 변수) 선언 부분은 맨 위로 올리고 (변수 = 값)만 그 자리에 남게되는데 이런것을 호이스팅이라고 한다. (함수 또한 호이스팅 가능하다.)

 

 

- 클로저

var 나이 = 20;

function 함수(){
  console.log(나이)
}

함수();

클로저는 바깥에 있는 변수는 안쪽에서 자유롭게 사용할 수 있다는 것을 의미한다. 이것을 참조가능하다라고도 한다. 함수 안쪽에 나이라는 변수가 있다면 그것을 사용하겠지만 없으면 바깥에 있는 변수를 사용한다.

 

 

 

Template literals

따옴표 대신 backquote, backtick 이라는 '`' 기호를 사용하여 문자를 만드는 법이다.

: 장점

• 문자 중간 엔터키 입력가능
• 문자 중간 변수를 집어넣을 때 편리

var 문자 = `안녕

하세요`;

var 이름 = '손흥민';
var 문자 = `안녕하세요 ${이름} 입니다`;

 

 

* Tagged Literals

 - 문자 해체분석

var 변수 = '손흥민';

function 해체분석기(문자들, 변수들){
  console.log(문자들);
  console.log(변수들);
}

해체분석기`안녕하세요 ${변수} 입니다`; // () 대신에 이런식으로 사용 가능하다.
// 문자열 값: [안녕하세요, 입니다]
// 변수 값: 손흥민

 

 

 

spread operator

- 괄호를 제거해주는 연산자 (함수/소괄호, 오브젝트/중괄호, 어레이/대괄호에서 사용)

var 어레이 = ['hello', 'world'];
console.log(어레이); // ['hello', 'world']
console.log(...어레이); // hello world

 

- 문자의 경우

var 문자 = 'hello';
console.log(문자[0]); // h
console.log(문자[1]); // e
console.log(문자); // hello
console.log(...문자); // h e l l o

 

 

* 합치기 / 복사

// Array
var a = [1,2,3];
var b = [4,5];
var c = [...a, ...b]; // [1, 2, 3, 4, 5]

// Object
var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 }; // { a: 1, b: 2, c: 3}

: 합치기

 

var a = [1,2,3];
var b = a;

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

var object1 = {a: 1, b: 2};
var object2 = object1;

console.log(object1);
console.log(object2);

: 복사

등호(=)를 이용하여 쉽게 Array와 Object의 값을 복사 할 수는 있지만 참조 값 타입의 변수를 등호(=) 방식으로 복사 하게되면 값 공유가 일어난다. 때문에 복사되어진 값과 복사한 값의 값 변경이 같이 일어나기 때문에 올바른 복사 방식은 아니다.

 

var a = [1,2,3];
var b = [...a];

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

var object1 = {a: 1, b: 2};
var object2 = {...object1};

console.log(object1);
console.log(object2);

: spread를 통한 복사 방식

값 변경이 일어나도 서로의 값에 영향을 주지 않는다.

 

 

* 만약 spread를 통한 복사를 했을 때, 중복되는 값이 있다면 ??

var o1 = { a : 1, b : 2};
var o2 = { a : 3, ...o1 };
console.log(o2); // {a: 1, b: 2}

중복된 값이 있다면 기존의 값에 새롭게 들어온 값으로 저장된다.

 

 

 

apply, call

array를 파라미터 형태로 집어넣고 싶을 때 사용한다.

function 더하기(a,b,c){
   console.log(a + b + c)
}

더하기(1,2,3); // 6

var 어레이 = [10, 20, 30];

더하기(어레이[0], 어레이[1], 어레이[2]); // 60 주먹구구
더하기.apply(undefined, 어레이); // 60 옛날방식
더하기(...어레이); // 60 요즘방식

 

var person = {
    인사 : function(){
      console.log(this.name + '안녕')
    }
}
  
var person2 = {
    name : '손흥민'
}

person.인사.apply(person2);
person.인사.call(person2);

어떤 함수(person)를 실행하는데 다른 오브젝트(person2)에다가 적용해서 실행할 때 사용한다.

 

person.인사.apply(person2, [1,2,3]); // array 형태
person.인사.call(person2, 1,2,3); // 일반 형태

apply와 call의 사용법과 결과는 똑같지만 함수에 파라미터를 넣어서 실행할 때, apply는 array[] 형태로, call은 일반 함수처럼 파라미터를 전달한다.