2021년 4월 25일 TIL(호이스팅(Hoisting), spread/rest)

호이스팅(Hoisting)

 

ECMAScript 2015언어 명세 및 그 이전 표준 명세에서 사용된 적이 없는 용어.

 

하지만 이 호이스팅이라는 현상이 자바스크립트를 사용하는 이에게 많은 혼란을 줬다고한다. 

 

호이스팅은 무엇일까? 

 

함수를 함수의 선언보다 위에서 호출해도 문제없이 실행되는 것을 쉽게 호이스팅이라고 할 수 있겠다. 

 

helloWorld();

function helloWorld(){
	return console.log('hello world');
}

hello world//결과 값

 

호이스팅(Hoisting)은 함수뿐만 아니라 변수(var)에도 적용이되는데.

 

console.log(name);

name = 'Daniel';

console.log(name);

var name;

//아래의 결과 값을 보자.

Daniel//결과 값

//다른 예제를 보자.

console.log(name);

var name = 'James';

undefined//결과 값

//위를 보면 변수의 경우 선언만을 위로 가져오는 것을 알 수 있다. 

 

즉, 함수의 경우 아래 있는 선언을 끌어올리고, 변수(var)의 경우 아래 있는 선언만 끌어올린다. 

 

---

Spread와 Rest 문법(...)

 

spread라는 단어는 펼치다, 퍼뜨리다라는 의미를 가진다. 

 

이 문법을 사용하면 객체 혹은 배열을 펼칠 수가 있다. 

 

객체에서의 예시를 보자.

const person = {
	name : 'daniel'
};

const handsomePerson = {
	name : 'daniel',
    looks : 'good',
};

const tallHandsomePerson = {
	name : 'daniel',
    looks : 'good',
    height : '185cm'
};

console.log(person);
console.log(handsomePerson);
console.log(tallHandsomePerson);

{name: "daniel"} //결과값
{name: "daniel", looks: "good"} //결과값
{name: "daniel", looks: "good", height: "185cm"} //결과값

// 위 내용을 spread 문법을 이용하여 표현해 보겠다. 

const person = {
	name : 'daniel'
};

const handsomePerson = {
	...person,
    looks : 'good',
};

const tallHandsomePerson = {
	...handsomePerson,
    height : '185cm'
};

console.log(person);
console.log(handsomePerson);
console.log(tallHandsomePerson);

{name: "daniel"} //결과값
{name: "daniel", looks: "good"} //결과값
{name: "daniel", looks: "good", height: "185cm"} //결과값

//같은 결과를 뱉는 것을 알 수 있다. 

spread문법을 이용하면 기존의 객체를 복사(얕은 복사 : 중첩 구조를 복사할 수 없다. )하고

 

이에 새로운 속성을 더해 새로운 객체를 만드는 것이 가능한다. 

 

배열에서의 예시를 보자.

const friends =['min', 'wool', 'wook'];
const addFriends = [...friends, 'jun'];

console.log(addFriends);

(4) ["min", "wool", "wook", "jun"]//출력값

//위에서의 spread문법은 아래와 같은 결과값을 가진다. 

const friends =['min', 'wool', 'wook'];

const addFriends = friends.concat('jun');

console.log(addFriends);

(4) ["min", "wool", "wook", "jun"]

 

...을 사용하는 것은 spread와 비슷하지만 역할에 차이가 있다.

 

rest를 사용하면 객체, 배열 그리고 함수의 parameter에서 사용할 수 있다.

 

우선 객체에서의 예시를 보자.

 

const tallHandsomePerson = {
	name : 'daniel',
    looks : 'good',
    height : '185cm'
};

const {name, ...rest} = tallHandsomePerson;

console.log(name);
console.log(...rest);

daniel
{looks: "good", height: "185cm"}

//rest라는 객체안에 name을 제외한 나머지 키와 키값이 있는 것을 확인할 수 있다. 
//그리기 굳이 ...rest말고 다른 이름을 사용해서 표현 할 수도 있다.

 

배열에서의 용도와 주의점을 알아보자. 

 

const friends =['min', 'wool', 'wook', 'jun'];

const [one, ...rest] = friends;

console.log(one);
console.log(rest);

min//결과값
(3) ["wool", "wook", "jun"]//결과값

//...rest를 마지막에 넣지 않을경우 아래의 오류를 띄운다. 

const [...rest, last] = friends;
Uncaught SyntaxError: Rest element must be last element

 

rest를 함수에 사용하면 매개변수를 배열의 형태로 가져올 수 있다.

 

이를 이용하면 아무리 많은 매개변수가 있더라도 한꺼번에 가져와 처리를 할 수 있는 것이다. 

 

function sum(...rest){
    console.log(rest);
	return rest.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13))
(13) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
91

---