[ javascript ] 알고있으면 유용한 JS문법2

1. spread와 rest-spread 연산자(ES6의 도입)

// spread 펼치다 퍼트리다 라는뜻을 가지고 있습니다
// 기존 객체를 포함한 새로운 객체를 만들고 싶을때 spread 연산자를 사용할수 있습니다
const slime = {
	name: '슬라임'
};
const cuteSlime = {
	name: '슬라임',
	attribut: 'cute'
}
const purpleCuteSlime = {
	name: '슬라임',
	attribut: 'cute',
	color: 'purple'
}

console.log(slime); // Object {name: "슬라임" }
console.log(cuteSlime); // Object {name: "슬라임", attribut: "cute"}
console.log(purpleCuteSlime);
// Object {name: "슬라임", attribut: "cute" ,color: "purple"}

//다른 방식으로 표현
const slime = {
	name: '슬라임'
};
const cuteSlime = slime;
cuteSlime.attribut = 'cute';

const purpleCuteSlime = cuteSlime;
purpleCuteSlime.color = 'purple';

// 이렇게 표현할수도 있지만 약간의 문제가 생깁니다
// 서로 같은 객체로 인식한다는 문제가 있습니다
console.log(slime === cuteSlime); // true
console.log(cuteSlime === purpleCuteSlime); // true
console.log(slime === purpleCuteSlime) // true

spread 연산자 사용

const slime = {
	name: '슬라임'
};
// slime객체의 있던 값들이 cuteSlime객체 안에 들어갔습니다
const cuteSlime = {
	...slime,
	attribut: 'cute'
}
// cuteSlime 객체에 있던 값들이 purpleCuteSlime 안에 들어갔습니다
const purpleCuteSlime = {
	...cuteSlime,
	color: 'purple'
}

console.log(slime); // Object {name: "슬라임" }
console.log(cuteSlime); // Object {name: "슬라임", attribut: "cute"}
console.log(purpleCuteSlime);
// Object {name: "슬라임", attribut: "cute" ,color: "purple"}

console.log(slime === cuteSlime); // false
console.log(cuteSlime === purpleCuteSlime); // false
console.log(slime === purpleCuteSlime) // false

// 불러올때는 최상단에 불러오는게 좋습니다
const slime = {
	name: '슬라임'
};
// slime객체의 있던 값들이 cuteSlime객체 안에 들어갔습니다
const cuteSlime = {
	name: '슬슬라라임임',
	...slime
}
console.log(slime); // Object {name: "슬라임" }
console.log(cuteSlime); // Object {name: "슬라임"}

// cuteSlime애서 이미 name값을 선언한뒤 slime값을 넣어서 name값을 덮어씌웠습니다

배열에 spread 연산자 사용

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals); // ['개', '고양이', '참새']
console.log(anotherAnimals); // ['개', '고양이', '참새', '비둘기'];

// spread 연산자 여러번 사용하기
const numbers = [1,2,3,4,5];
const spreadNumber = [...numbers, 1000, ...numbers];

console.log(spreadNumber); // [1,2,3,4,5,1000,1,2,3,4,5]

rest-spread연산자 사용

// rest-spread 연산자는 spread와는 역할이 정반대라고 생각할수 있습니다

const purpleCuteSlime = {
	name: '슬라임',
	attribut: 'cute',
	color: 'purple'
}

const {color, ...rest} = purpleCuteSlime;
console.log(color); // "purple"
console.log(rest); // Object {name:"슬라임", attribut: "cute" }
// color 값을 제외한 모든값을 가져옵니다

rest-spread연산자 사용

const numbers = [0,1,2,3,4,5];
// 배열의 순서대로 꺼내오기때문에  rest-spread 는 맨 마지막에 작성해야 합니다
const {one, two, ...rest} = numbers;

console.log(one); // 0
console.log(two); // 1
console.log(rest); // 2,3,4,5

함수 파라미터에서 rest-spread 연산자 사용

// rest-spread 연산자 를 사용하지 않는다면 작성하기도 힘들뿐더러 코드가 쓸대없이 길어집니다
// 함수 사용시 파라미터의 개수도 한정적입니다
function sum(a,b,c,d,e,f){
	return a+b+c+d+e+f;
}

console.log(sum(1,2,3,4,5,6)); // 21

// rest-spread 연산자 사용
// 함수를 사용할때 파라미터 개수의 영향을 받지 않습니다
function sum(...rest){
	return rest.reduce((acc, current) => acc+current, 0);
}
console.log(sum(1,2,3,4,5,6)); // 21

함수 인자에서 spread

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

const numbers = [1,2];
const result = sum(numbers[0], numbers[1]); // 3

// spread 사용
// 하나하나 나열해가면서 사용할 필요가 없습니다
const result = sum(...numbers); // 3

함수 인자에서 spread 예제 풀어보기

(함수 n개의 숫자들이 파라미터로 주어졌을 때 그중 가장 큰 값을 알아내시오)

function max() {
	return 0;
}
const result = max(1,2,3,4,10,5,6,7);
console.log(result);

풀이

function max(...rest) {
	// Math.max함수를 이용해서 rest배열의 가장 큰값을 찾아서 리턴
	return Math.max(rest);
}
const result = max(1,2,3,4,10,5,6,7);
console.log(result); // 10

---

3. Hoisting

자바스크립트에서는 함수를 선언하기 전에 먼저 호출을 하고 함수를 선언해도 잘 작동합니다

함수를 끌어 올려 사용하는 이현상을 Hoisting라고 합니다

myFunction(); // 'hello world'

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

// javascript는 이렇게 해석합니다
function myFunction () {
	console.log('hello world');
}

myFunction(); // 'hello world'

다른 예시

// 없는 변수가 아니라 변수는 있는데 값이 없는 undefined 라고 나옵니다
cnosole.log(number); // undefined
var number = 2;

// javascript는 이렇게 해석합니다
var number;
cnosole.log(number); // undefined
number = 2;

변수를 선언할 때 const 나 let은 Hoisting 현상이 일어나지 않지만 var은 Hoisting이 일어납니다

Hoisting는 코드가 길어지면 가독성이 떨어지고 이해하기 힘들어서 왼만하면 피해 줘야 합니다