이 장부터 React에 대한 공부를 적어 나가기로 했습니다 그 첫 번째로 ES Next 에 대한 문법을 정리할 것인데 이는 ES5 -> ES6 단계에서 자바 스크립트는 정말 많은 변화를 이룩했습니다 그 내용을 전부는 아니지만, 핵심 내용만 정리해서 넘어가도록 하겠습니다
const
이전에 없었던 상수정의입니다 이전 자바스크립트는 모든 변수를 var 정의했는데 이제 const 쓰게 되면 상수로 정의할 수 있게 개발이 되었습니다
1
2
3
const temp_bolean = false
temp_bolean = true; /* Uncaught TypeError: Assignment to constant variable.*/
const 를 사용할 때에는 선언과 동시에 값을 입력을 해주어야 하고 다른 값을 넣을 수 없습니다 그러므로 temp_bolean 은 계속해서 false로 값을 가지고 있습니다
let
const 가 상수변수 정의라면 let 은 이전의 var 를 완전히 대체하는 그런 변수선언자입니다 const 하고는 다르게 기존 값을 대체할 수 있습니다 그럼 그전에 var 에 대한 것을 잠깐 보게 되면
1
2
3
4
5
6
7
8
9
10
var apple = 'apple'
function change_var(){
var apple = 'melon';
console.log(apple) //'melon'
}
change_var();
console.log(apple) //'apple'
함수 스코프 안에서 var 는 지역변수로 활용되기 때문에 전역변수에 영향을 미치지 못합니다 그래서 지금 소스 같은 경우는 전역에 있는 apple 는 여전히 apple을 가지고 있고 함수 스코프 안에 있는 apple 는 melone 을 가지고 있습니다 설사 함수를 한번 호출한 이후에도 전역 apple 는 계속 같은 값을 가지고 있습니다
다만 문제점은 if 에서 부터 시작입니다
1
2
3
4
5
6
7
8
var apple = 'apple'
if(apple){
var apple = 'melon'
console.log(apple)
}
console.log(apple)
var 의 문제점은 함수형 스코프가 아닌 지금처럼 if 스코프 문에서는 전역으로 영향을 미칩니다 (Java 는 이렇게 선언 자체 안됨) 이때 if 문을 통과하게 되면 기존의 전역 apple 객체는 melon 이 되는 문제가 있습니다 이 때문에 var를 쓸 때는 생각보다 변수의 영향을 미치는 정도를 파악을 했어야 했습니다 하지만 이는 let 나오게 되면서 그 걱정은 없어지게 되었습니다.
1
2
3
4
5
6
7
8
let apple = 'apple'
if(apple){
let apple = 'melon'
console.log(apple) //melon
}
console.log(apple) // apple
이제 let 을 쓰면 if 스코프 문에서도 독립적으로 객체가 생성되어 전역 apple하고는 다른 값을 보여주게 됩니다 그래서 ES6 로 넘어와서는 var 다는 let , const 로 사용하는 것이 바람직합니다
반복문에서의 Var 오류
1
2
3
4
5
for (var i = 0; i < 3; i++) {
console.log('for문' + i);
}
console.log('for 문 아님' + i);
이 경우에 보면 마지막 for 문 바깥에 있는 i 는 에러가 날 듯하지만 결과는
for문0 for문1 for문2
for 문 아님3
이런 결과가 나온다. 그 이유는 var 로 선언을 하면 for 문에서는 이는 전역변수로 생성해 외부에서도 마찬가지로 접근할 수 있게 됩니다 하지만 let 으로 변경을 하게 되면
스코프 안에서만 i 가 유효함으로 바깥에 있는 i는 변수가 없다고 나오게 됩니다.
1
2
3
4
5
6
for (let i = 0; i < 3; i++) {
console.log('for문' + i);
}
console.log('for 문 아님' + i);
for문0 for문1 for문2
탬플릿 문자열
이전에 문자열 연결은 다음과 같이 진행했습니다
1
2
3
4
5
6
let first_name = "kim"
let middle_name = "Time"
let last_name = 'Flow'
console.log(first_name + middle_name + last_name)
이렇게 선언한 변수에 + 기호를 써서 붙여 나갔습니다 다만 이제 `` 를 사용하게 되면 우리는 그냥 평소 쓰는 것처럼 문자열을 아주 자연스럽게 이어 붙일 수 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
let first_name = "kim"
let middle_name = "Time"
let last_name = 'Flow'
let hospital_name = 'Time'
console.log(`안녕하십니까 친애하는 ${first_name} ${middle_name} ${last_name} 님에게
오늘도 우리 병원을 이용해주셔서 대단히 감사합니다
문의하실 사항은 프런트 또는 전화번호 010xxxx777 번으로 연락 부탁드립니다 부디 오늘도 편안한 하루를
${hospital_name} 병원장으로 부터`)
함수
자바스크립트의 함수는 function [함수명] 이렇게 시작을 하면 됩니다 호출할 때는 함수명() 호출하면 됩니다 이것은 ES5 , ES6 모든 NEXT 애서 같은 호출법입니다
1
2
3
4
5
6
function call_alert(){ /*함수 선언*/
alert('알럿창 불러오기')
}
call_alert() /*함수호출*/
호이스팅
호이스팅 이 무엇인지 알아보기 전에 다음과 같은 소스는 유효한지를 먼저 보자
1
2
3
4
5
6
call_alert()
function call_alert(){ /*함수 선언*/
alert('알럿창 불러오기')
}
이때 함수를 선언하기 전에 함수를 먼저 호출하는 소스가 있습니다 우리가 아는 지식으로 보면 변수를 선언하기 전에 호출한 것과 마찬가지로 보입니다. 이때는 눈에 보이기엔 호출 선언이지만 이게 컴파일되어서 메모리로 올라갈 때는 함수를 일차적으로 먼저 빼서 최상단에 올려둡니다 이를 호이스팅이라는 기술입니다 사실 호이스팅은 변수에서도 발생합니다.
변수 호이스팅
1
2
3
4
console.log(x)
var x = 5;
console.log(x)
이런 형식일 때 x는 컴파일 단계에서 위로 끌어올려 지게 됩니다 그래서 첫 번째 x 라는 변수는 찾았지만, 값이 정해지지 않았기 때문에 undefined 가 나옵니다 만약 없는 변수에 접근할 때는 없는 변수에 접근할때는 not defined이라고 나와서 이는 undefined하고는 다른 개념입니다
1
2
console.log(y);
let y = 10;
참고로 let , const 는 함수형 스코프를 가지고 있기 때문에 호이스팅이 되지 않고 기본적인 규칙은 먼저 선언하고 후 호출입니다 let , const 는 안된다는 점을 미리 알고 계시는 게 좋습니다
함수 표현식
함수는 위에서 보았다 싶히 기본적으로 function 을 많이 사용하지만 es6 특정상 함수를 값으로 취급할 수 있는 일급함수의 특징입니다 그래서 함수를 const , let 으로 넣을 수 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
const call_alert = function() {
alert(1);
}
let call_alert2 = function(){
alert(2)
}
call_alert()
call_alert2()
이렇게 const , let 안에 넣을 수 있습니다 단 이런 함수 표현 식은 호이스팅이 동작하지 않습니다 호이스팅이 동작하지 않는 이유는 위에서 변수 const , let 이 변수를 담을때 마찬가지로 호이스팅이 안 되는 것과 같은 원리입니다
화살표함수
React 에서는 정말로 많은 화살표 함수를 볼 수 있습니다 그 이유는 함수에서 this 는 값이 왜곡이 될 수 있는데 예를 들어서 다음의 값들이 있다고 생각을 해보게 되면 기본적으로 this는 실행컨텍스트에 따라서 다양한 값을 가질 수가 있습니다 여러가지가 있는데 이를 정리를 해보면
- 전역 컨텍스트
1
2
3
4
5
6
7
8
console.log(this === window); // true
function globalFunction() {
console.log(this === window); // true
}
globalFunction();
기본적으로 this 는 전역컨텍스트 window 와 같은 값입니다 이는 스크립트 상에서 쌩으로 쓰거나 함수 안에서 쓰여도 동일한 값입니다
- 메소드 내부
1
2
3
4
5
6
7
8
9
const obj = {
name: "MyObject",
sayName: function() {
console.log(this.name);
}
};
obj.sayName(); // MyObject
이 모양은 현재 객체 obj 가 있고 안에 name , sayName 이라는 값이 있는데 하나는 일반 값을 가지고 다른 하나는 함수를 가지는데 그 함수 안에서 this 를 가리키고 있습니다 이때는 해당메서드를 호출한 객체를 가리키게 됩니다 즉 obj 안에 있는 name 을 가리키게 됩니다.
- 콜백함수
1
2
3
4
5
6
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log(this === window); // true
});
지금과 같이 일반적인 이벤트 또는 콜백함수를 만들 때의 this 는 기본적으로 window 값을 가지게 됩니다.
- bind , call , apply
이들 같은 경우는 명시적으로 this 를 지정할 수 있습니다
bind
1
2
3
4
5
6
7
8
9
10
const person = {
name: "John",
sayHello: function() {
console.log(`Hello, ${this.name}!`);
}
};
const greet = person.sayHello.bind(person);
greet(); // "Hello, John!"
이때 person 을 지정해서면서 상단 person 객체의 this.name 을 person.name 으로 변경합니다
call
1
2
3
4
5
6
7
8
9
10
11
12
13
const person = {
name: "John",
sayHello: function(greeting) {
console.log(`${greeting}, ${this.name}!`);
}
};
const anotherPerson = {
name: "Alice"
};
person.sayHello.call(anotherPerson, "Hi"); // "Hi, Alice!"
call 의 첫 번째 매개변수는 지정한 객체의 함수의 this 로 사용 즉 anotherPerson name 이 사용될 예정입니다 뒤따라오는 Hi 문자열은 호출되는 함수의 매개변수로 전달이 되어서 Hi, Alice 가 되는 것입니다
apply
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const person = {
name: "John",
sayHello: function(greeting1, greeting2) {
console.log(`${greeting1}, ${greeting2}, ${this.name}!`);
}
};
const anotherPerson = {
name: "Alice"
};
person.sayHello.apply(anotherPerson, ["Hi", "Hello"]); // "Hi, Hello, Alice!"
apply 는 call 하고 마찬가지로 첫 번째는 매개변수는 지정한 객체의 함수의 this 로 사용하고 뒤에 따라오는 매개변수는 배열로 들어갈 때 상단에서 정의한 값만큼 매개변수가 전달할 수 있습니다
- 화살표함수
1
2
3
4
5
6
7
8
9
10
function regularFunction() {
return () => {
console.log(this === window);
console.log(this)
};
}
const arrowFunction = regularFunction.call({});
arrowFunction();
이때는 함수 regularFunction call 할 때 첫 번째 매개변수 {} 을 던지는데 그러면 this 는 {} 이 되고 window 하고는 다르므로 false 가 나오게 됩니다.