JAVASCRIPT - 중급 4편

* this

1. { window }

전역코드, 함수 안에서 사용할 때

console.log(this); // result: {window}

{ window} 란?

모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체

1-1. undefined

strict mode에서 사용할 때

'use strict';
function printThis() {
	console.log(this);
}
printThis(); // result: undefined

strict mode란?

1. var 키워드 없이 변수를 선언 방지
2. 변수를 arguments라는 사용할 수 없는 키워드로 선언되는 실수 방지

---

2. 함수를 가지고 있는 오브젝트

오브젝트 내 함수 안에서 사용할 때

const objA = {
  data : "kim",
  useData() {
    console.log(this);
  }
}
objA.useData(); // result: {data: "kim", useData: f}

2-1. 1번 window와 동일

Arrow Function 사용할 때 => 함수 밖에 있던 요소를 그대로 사용

const ojbA = {
  data : "kim",
  useArrowFun : () => {
    console.log(this);
  }
}
objA.useArrowFun(); // result: {window}

3. 새로 생성되는 object

construtor를 사용할 때

function conA(name) {
	this.name = name; // 새로 생성되는 오브젝트 = instance
  	console.log(name);
}
var newObj1 = new conA("kim");

4. e.currentTarget

이벤트 리스너(EventListener)를 사용할 때

	document
      .getElementById('btn1')
      .addEventListener('click', function(e) {
      this;// result: e.currentTarget (지금 이벤트가 동작하는 곳)
    }

* Arrow Function(화살표함수)

특징

1. construtor 만들 때 가독성

2. 파라미터가 1개면 소괄호 생략 가능

3. 코드가 한줄이면 중괄호 생략 가능

4. 함수 내의 this 값을 변경하지 않음

예시

// 2번 3번
[1,2,3,4].forEach(function(a){
  console.log(a)
});
---- Arrow Function 으로 변경----
[1,2,3,4].forEach(a =>console.log(a));
--------------------------------
// 4번
document
  .getElementById('btn1')
      .addEventListener('click', () => {
      this;// result: { window }
    });
	// 요소를 선택하려면
	// this 대신 e.currentTarget 사용하기

* Hoisting(호이스팅)

변수,함수의 선언을 코드 범위 맨위로 끌고오는 현상

변수,함수를 만나면 선언부분을 강제로 맨위로 끌어올림

예시

function printName() {
  var name = 'kim';
}
var age = 30;
----작동방식----
var age; // 변수의 선언을 맨위로 끌고 온다.
function ... {
  ...
};
age = 30;

* 전역변수, 지역변수

전역변수: 코드 내에 모든 곳에서 사용 가능한 변수

전역변수 선언 방법

1. 코드 최상단에 가장 외곽에 변수 선언

let con = '옥수수'
function rename() {
  con = '수수옥'
  return console.log(con)
};
rename();

2. window에 선언

window.con = '옥수수';
console.log(window.con) // result: '옥수수'

---

지역변수: 블럭 내에서만 사용가능한 변수

function printName() {
  let con = '옥수수'
  return con;
}
function rename() {
  con = '수수옥' // result: [ERROR] con is not defined
}
console.log(con);

---

간단한 예시

1. Hoisting 오류

sayHi(); // result: 오류
function sayHi() {
  console.log(hello)
  let hello = 'Hello!';
// 이유: let 변수는 Hoisting은 되지만 undefined라는 값을 할당(일명 initialization(초기화)) 해주지 않는다.

2. window 오류

let a = 1;
var b = 2;
window.a = 3;
window.b = 4;
console.log(a + b); // result: 5 (a = 1, b = 4)
// 이유: a는 let을 사용했을 때 조금 더 범위가 작고 가까운 1을 참조해서 사용함,
// b는 var 과 window는 거의 동일한 기능을 하는 코드기 때문에 4로 재할당 됌 

3. for문 오류

for(var i=0; i<5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i*1000);
} // result: 5,5,5,5,5
// 이유: for조건식에 var를 변수로 사용했기 때문에 반복문과 동시에 실행되지 않는다.
// 반복문을 해석하고 실행하려고 하니 var는 이미 5가 됌
----해결방안----
for(let i=0; ...) {
  ...
}
// var로 선언한 변수를 let으로 변경
// 이유 let의 범위는 중괄호 = for반복문의 범위는 중괄호