[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은 일반 함수처럼 파라미터를 전달한다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 함수형 프로그래밍 (일급함수, 고차함수) (0) | 2022.03.29 |
|---|---|
| [JavaScript] ES6 chap.3 (0) | 2021.12.02 |
| [JavaScript] ES6 chap.2 (0) | 2021.11.30 |
| [JavaScript] Chap.2 (0) | 2021.11.25 |
| [JavaScript] Chap.1 (0) | 2021.11.19 |