📌 07. spread와 rest - spread 연산자
ES6에 도입된 문법
const slime = {
name: '슬라임'
};
const cuteSlime = {
name: '슬라임',
attribute: 'cure'
};
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple'
};
console.log(slime);
console.log(cuteSlime)
console.log(purpleCuteSlime)다음과 같이 slime의 겹치는 부분을 사용하고 싶을 때 ...인
spread연산자를 활용할 수 있음
const slime = {
name: '슬라임'
};
const cuteSlime = {
...slime,
attribute: 'cure'
};
const purpleCuteSlime = {
...cuteSlime,
color: 'purple'
};
const greenCuteSlime = {
...purpleCuteSlime,
color: 'green'
};
console.log(slime);
console.log(cuteSlime)
console.log(purpleCuteSlime)...
spread연산자를 사용하면 그 자리에 기존에 있던 속성이 들어오게 되어 마지막greenCuteSlime을 보면color:'green'으로 색이 덮어 씌워지는 것을 확인할 수 있다.
스프레드 연산자는 객체뿐만 아니라 배열에서도 활용 가능함
const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);
console.log(anotherAnimals);anotehrAnimals는 animals.concat('비둘기')와 같음
📌 08. spread와 rest - rest
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple'
};
const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime); // {name: '슬라임', attribute: 'cute'}
const { attribute, ...slime } = cuteSlime;
console.log(slime); // {name: '슬라임'}spread의 경우 특정 객체나 배열안의 다른 객체나 배열을 퍼뜨리는 역할을 한다면, rest의 경우 비구조화 할당을 통해 다시 모아오는 역할을 함.
배열에서의 rest
const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;
console.log(one);
console.log(rest);마찬가지로 비구조화 할당을 통해서 사용!
rest 무조건 마지막 요소에 위치시켜야 함! --> 안그러면 에러뜸
📌 09. spread와 rest - 함수 파라미터에서의 rest
함수 파라미터가 너무 많을 때 rest를 사용하면 좋음
function sum(...rest) {
return rest.reduce((n,c)=>n+c, 0)
}
console.log(sum(1,2,3,4,5,6));...rest를 통해 받아온 값은 배열처럼 활용하여 reduce함수와 같이 사용하여 원하는 결과 값을 만들어 낼 수 있다.
📌 10. spread와 rest - 함수 인자에서의 spread
함수 인자에서 spread를 사용하는 경우 다음과 같이 사용함
function sum(...rest) {
return rest.reduce((n,c)=>n+c, 0)
}
const numbers = [1, 2,3, 4, 5, 6, 7, 8];
console.log(sum(...numbers));퀴즈문제
함수에 n개의 숫자들이 파라미터로 주어졌을 때, 그 중 가장 큰 값을 알아내세요.
내가 푼 풀이
function max(...numbers) {
let max = 0;
for (let num of numbers)
{
if (max < num) max = num;
}
return max;
}
const result = max(1, 2, 3, 4, 10, 5, 6, 7);
console.log(result);정답의 reduce함수 사용
function max(...numbers) {
return numbers.reduce((n, c) => n < c ? c : n, numbers[0]);
}
const result = max(1, 2, 3, 4, 10, 5, 6, 7);
console.log(result);📌 11. scope의 이해 - scope 이해하기
변수 또는 함수가 어디서부터 어디까지 유효한지? --> scope와 관련!
global
const value = "hello";
function myFunction() {
console.log("myFunction: ");
console.log(value);
}
function otherFunction() {
console.log("otherFunction: ");
const value = "bye!";
console.log(value);
}
myFunction();
otherFunction();
console.log("global scope:");
console.log(value);myFunction과 global scope부분은 전역 변수로 선언한 hello로 찍히고 otherFunction은 함수 내부에 변수를 선언하여 그 변수의 영향을 받아 bye!가 찍힘
function
const value = "hello";
function myFunction() {
const value = 'bye!';
const anotherValue = 'world';
function functionInside() {
console.log('functionInside: ');
console.log(value);
console.log(anotherValue);
}
functionInside();
}
myFunction();
console.log('global scope: ');
console.log(value);
console.log(anotherValue); // 정의 되지 않음functionInsde함수 내에선 bye와 world가 찍히고 myFunction내 에서 정의한 anotherValue는 함수 밖으로 나오면 사라지게 됨.
block
const value = "hello";
function myFunction() {
const value = 'bye!';
if (true) {
const value = 'world';
console.log('block scope: ');
console.log(value);
}
console.log('function scope: ');
console.log(value);
}
myFunction();
console.log('global scope: ');
console.log(value);block 안에서 정의한 변수는 block범위 내에서만 유효하다.
만약 변수 선언시 const나 let이 아닌 var로 선언하게 되면 변수의 유효범위가 전역변수는 그대로 유지하게 되지만 함수와 블록에 각각 정의하였을 시 함수에서 정의한 값대로 블록 내에서 작용하여 원하지 않은 결과를 초래할 수 있기 때문에 웬만하면 const나 let으로 정의하는게 좋다!
📌 12. scope의 이해 - hoisting
자바스크립트에서 아직 선언되지 않은 함수 또는 변수를 끌어 올려서 사용할 수 있는 자바스크립트의 작동방식
myFunction();
function myFunction() {
console.log('hello world');
}함수가 아래에 있어도 호출이 가능하다. (호이스팅)
호이스팅은 웬만하면 피하는게 좋음!
console.log(number);
var number = 2;이 예제의 경우 에러는 뜨지 않고
undefined라고 뜨는데 자바스크립트가 var number; -> console.log(number); -> number = 2; 이렇게 해석하기 때문
그러나 const나 let의 경우 호이스팅이 발생하지 않음
호이스팅을 방지하는 이유는
- 코드가 헷갈려지고
- 유지보수가 어려워지고
- 의도치 않은 결과를 초래할 수 있기 때문
