✨ Hoisting
변수, 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가 가장 먼저 해석
function func(){
console.log('hello');
var name = '영긔';
}위와 같은 코드가 있을 때, 자바스크립트는 다음과 같이 해석함.
function func(){
var name;
console.log('hello');
name = '영긔';
}변수의 선언부분을 강제로 변수의 맨 위로 끌고 간다.
console.log(name);
var name = '영긔';
console.log(name);이런 코드가 있다면 결과가 undefined, '영긔'라는 결과가 출력된다.
var name;
console.log(name);
name = '영긔';
console.log(name);해당 방식으로 코드가 동작하기 때문이다.
func();
function func() {
console.log(name);
let name = '영긔';
} 이렇게 let을 사용할 경우에는 var을 사용할 때완 달리 에러가 뜬다. hoisting이 되나 undefined의 값이 할당되지 않기 때문이다.
func();
var func = function() {
console.log(name);
let name = '영긔';
} 이렇게 작성한다면 아직 func이 정의되지 않은 상태에서 func()으로 불러오고 있으므로 에러가 난다.
✨ 전역변수
var name = '영긔';
console.log(name);
console.log(window.name);이런 식으로 전역변수를 만들면 window에 보관이 돼 window.을 붙여도 호출할 수 있게 된다. (var만 가능)
window.name = '영긔';
console.log(name);//영긔
window.name = '승긔';
console.log(name);//승긔이런식으로 사용할 수도 있음
for (var i = 1; i < 6; i++) {
setTimeout(function() { console.log(i); }, i*1000 );
}이런식으로 작성한다면 setTimeout은 바로 실행되지 않고 나중에 실행되는데, 먼저 전역변수로 만든 i가 반복문을 다 돌고 5가 되어있는 상태가 되기 때문에 계속해서 5가 들어가서 의도와는 달리 동작하게 된다. 따라서 의도대로 동작하게 하려면 var 대신 let을 써야함
✨ Tagged Literals
var name = '영긔';
function func(){
return 10
}
func`안녕하세요 ${name} 입니다`;//안녕하세요 영긔 입니다위와 같은 방식으로 함수를 실행시킬수 있다.
var name = '영긔';
function func(strings, value1){
console.log(strings);//strings[0] = '안녕하세요' strings[1] = '입니다'
console.log(value1);//value1 = '영긔'
}
func`안녕하세요 ${name} 입니다`;//안녕하세요 영긔 입니다이와 같이 작성한다면 strings는 백틱 안의 문자를 array로 만든 것이고, value1는 변수를 의미한다.
💡 단어 순서 바꾸기
var height = 30;
var weight = 200;
`영긔키${height} 영긔몸무게${weight}`;//영긔키30 영긔몸무게200위와 같은 코드가 있다. 이 코드를 수정하여 '영긔몸무게30영긔키200'으로 바꿔보자
var height = 30;
var weight = 200;
function func(strings,value1,value2){
console.log(strings[1]+value1+strings[0]+value2);
}
func`영긔키${height} 영긔몸무게${weight}`;//영긔몸무게30영긔키200문자는 배열로 저장되나, 변수는 하나씩 파라미터로 작성해야 함
위와 같이 콘솔창에 잘 나타나는 것을 확인할 수 있다.
💡 변수가 0일 때
var height = 1000;
var weight = 200;
`영긔키${height} 영긔몸무게${weight}`;이 코드에서 height가 300초과일 경우 '영긔키는 아주 크고 영긔몸무게200'을 출력하도록 구현하려고 한다.
var height = 1000;
var weight = 200;
function func(strings,value1,value2){
if (value1>300){
console.log("영긔키는 아주 크고 "+strings[1]+value2);
}
}
func`영긔키${height} 영긔몸무게${weight}`;이와 같이 작성해주었다.
위와 같이 콘솔창이 잘 출력되는 것을 확인할 수 있다.
✨ Spread Operator
펼침연산자
괄호를 제거해주는 연산자이다
var arr = ['야식', '짜파게티'];
console.log(...arr);이런식으로 ...을 붙여주면 배열에 붙은 [] 이 괄호를 없애준다.
콘솔창에는 '야식', '짜파게티' 만 출력된다.
문자에 붙이면 문자에 붙은 괄호도 없애준다.
var name = '영긔';
console.log(name[0]);//영
console.log(name[1]);//긔문자도 이런식으로 배열처럼 출력할 수 있는데
var name = '영긔';
console.log(...name);//영 긔이런식으로 ...을 붙여 작성하면 console.log('영','긔') 와 같은 효과가 난다.
📍 활용
📋 배열 합치기
var a = [1,2,3];
var b = [4,5];
var c = [...a, ...b];//[1,2,3,4,5]이런 식으로 작성하면 두 배열을 합칠 수 있다.
📋 배열 복사하기
var a = [1,2,3];
var b = a;이때는 배열의 값을 공유하기 때문에 하나를 수정하면 다른 하나도 수정된다.
var a = [1,2,3];
var b = [...a];위와 같은 방식으로 값 복사를 할 수 있다.
📋 Object 복사
var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 };//{ c : 3, a : 1, b : 2 }위와 같은 방식으로 object를 복사할 수 있다. (spread는 중괄호도 지워주기 때문)
var o1 = { a : 1, b : 2};
var o2 = { a : 3, ...o1 };위와 같이 a값이 중복이 발생할때는 나중에 오는 값으로 고정된다. 따라서 이 경우에는 a:1이 된다.
spread 연산자는 함수의 소괄호, object 중괄호, array 대괄호 내에서 사용해야 한다. 그렇지 않으면 에러가 날 수 있음
📋 array를 파라미터로
function add(a,b,c){
console.log(a + b + c);
}
var arr = [10, 20, 30];
add(...arr);이와 같이 add(10,20,30);을 작성하고 싶을 때, spread를 사용해 간편하게 표현할 수 있다.
✨ apply
var person = {
sayHi : function(){
console.log(this.name + '안녕');
}
}
var person2 = {
name : '영긔'
}
person.sayHi.apply(person2);//영긔안녕이때, person.sayHi.apply(person2);는 person.sayHi()라는 함수를 쓰는데 person2라는 오브젝트에 있는 함수처럼 실행한다는 뜻이다.
→ 실행할함수.apply(적용할곳);
✨ call
var person = {
sayHi : function(){
console.log(this.name + '안녕');
}
}
var person2 = {
name : '영긔'
}
person.sayHi.call(person2);//영긔안녕apply와 같이 call도 그대로 쓰일 수 있다.
📍 차이점
var person = {
sayHi : function(){
console.log(this.name + '안녕');
}
}
var person2 = {
name : '영긔'
}
person.sayHi.apply(person2, [1,2,3]);
person.sayHi.call(person2, 1,2,3);이와 같이 파라미터를 넣을 때, apply 함수에서는 array를 넣을 수 있지만, call 함수는 일반함수처럼 집어넣어야 함
