velopert님의 모던 자바스크립트 강좌를 참고하여 작성했습니다.
비구조화 할당 (구조분해) 문법
비구조화 할당시 기본값 설정
const object = { a: 1, b: 2 };
function print({ a, b }) {
console.log(a);
console.log(b);
}
print(object);이 때 만약 b의 값이 주어지지 않았다면, undefined 오류가 날 것이고, 이를 방지하기 위해 b값에 초기값을 줄 수 있다.
const object = { a: 1 };
function print({ a, b = 2 }) {
console.log(a);
console.log(b);
}
print(object);
// 1
// 2비구조화 할당시 이름 바꾸기
const animal = {
name: '멍멍이',
type: '개'
};
const nickname = animal.name;
console.log(nickname); // 멍멍이nickname이라는 값에 '멍멍이'라는 값을 담고 있다.
이를 비구조화방식으로 바꾸려면
const {name : nickname} = animal;
console.log(nickname); // 멍멍이로 바꿀 수 있다.
배열 비구조화 할당
비구조화할당은 객체에서만 할 수 있는 것이 아니라 배열에서도 할 수 있다.
const array = [1, 2];
const [one, two] = array;
console.log(one);
console.log(two);객체는 중괄호를 사용했다면 배열은 대괄호를 사용한다.
깊은 값 비구조화 할당
예를 들어 다음과 같은 객체가 있다고 가정해보자
const deepObject = {
state: {
information: {
name: 'velopert',
languages: ['korean', 'english', 'chinese']
}
},
value: 5
};여기서 name, languages, value 값들을 밖으로 꺼낸다면 다음 두가지 방법을 사용할 수 있다.
첫번째는 비구조화 하당 문법을 두번 사용하는 것이다.
const { name, languages } = deepObject.state.information;
const { value } = deepObject;const extracted = {
name,
languages,
value
};위와 같이 새로운 객체를 정의할 때, 키값에 해당하는 값이 이미 존재한다면 위와 같은식으로 바로 매칭시켜 줄 수 있다. 원래대로 한다면 아래와 같이 this를 사용해서 매칭해 주어야 한다.
const extracted = {
name: name,
languages: languages,
value: value
}두번째 방법은 한번에 추출하는 방법이다.
const {
state: {
information: { name, languages }
},
value
} = deepObject;
const extracted = {
name,
languages,
value
};이렇게 하면 깊숙히 안에 들어있는 값도 객체에서 바로 추출할 수 있다. 여기서 state와 information은 따로 추출되지 않는다.
정답은 없지만 한번에 뽑는 것보다 여러번에 걸쳐서 단계적으로 뽑는 것이 조금더 간결하고 명확하다.
spread 와 rest
spread
spread를 사용하면 객체 혹은 배열을 펼칠 수 있다.
다음과 같은 객체가 있다고 가정해 보자
const slime = {
name: '슬라임'
};
const cuteSlime = {
name: '슬라임',
attribute: 'cute'
};
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple'
};
console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);위와 같이 기존의 객체를 이용하여 새로운 객체를 만들때 유용하게 사용될 수 있다.
const slime = {
name: '슬라임'
};
const cuteSlime = {
...slime,
attribute: 'cute'
};
const purpleCuteSlime = {
...cuteSlime,
color: 'purple'
};
console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);여기서 사용한 ... 문자가 바로 spread연산자 이다.
spread연산자는 객체 뿐만아니라 배열에서도 사용할 수 있다.
const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);
console.log(anotherAnimals);코드의 중복을 효과적으로 방지할 수 있고, 배열내에서 spread연산자를 여러번 사용할 수 있다.
const numbers = [1, 2, 3, 4, 5];
const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers); // [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]rest
rest는 spread와 비슷하지만 그 역할이 다르다. rest는 객체, 배열, 그리고 함수의 파라미터에서 사용이 가능하다.
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple'
};
const { color, ...rest } = purpleCuteSlime;
console.log(color);
console.log(rest);rest는 객체와 배열에서 사용될 때 비구조화 할당 문법과 함께 사용된다. 주로 사용할 때는 rest 키워드를 사용하지만, 추출한 값의 이름이 꼭 rest일 필요는 없다.
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple'
};
const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);
const { attribute, ...slime } = cuteSlime;
console.log(attribute);
console.log(slime);배열에서의 rest
const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;
console.log(one); // 0
console.log(rest); // [1, 2, 3, 4, 5, 6]rest는 마지막인자로만 사용될 수 있다.
함수 파라미터에서의 rest
함수의 파라미터가 몇개가 될 지 모르는 상황에서 rest파라미터를 사용하면 매우 유용하다.
function sum(...rest) {
return rest;
}
const result = sum(1, 2, 3, 4, 5, 6);
console.log(result); // [1, 2, 3, 4, 5, 6]함수 인자와 spread
엄격히 말하면 인자는 함수호출시 넘겨주는 값을 인자라고 하고 함수가 받는 것을 파라미터라고 한다.
function sum(...rest) {
return rest.reduce((acc, current) => acc + current, 0);
}
const numbers = [1, 2, 3, 4, 5, 6];
const result = sum(...numbers); //1, 2, 3, 4, 5, 6 이 들어간다.
console.log(result);퀴즈
함수에 n 개의 숫자들이 파라미터로 주어졌을 때, 그 중 가장 큰 값을 찾아라.
function max(...rest) {
return rest.reduce((acc, cur) => (acc < cur ? cur : acc), rest[0])
}
const numbers = [1, 2, 3, 4, 10, 5, 6, 7]
const result = max(...numbers);
console.log(result);자바스크립트의 Scope에 대한 이해
scope
scope란 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미한다.
- Global Scope(전역) : 코드의 모든 범위에서 사용 가능하다.
- Function Scope(함수) : 함수 안에서만 사용 가능하다.
- Block Scope(블록) : if, for, switch 등 특정 블록 내부에서만 사용 가능하다.
우선순위는 범위가 작은게 더 우선이다.
Hoisting 이해하기
Hoisting이란 자바스크립트에서 아직 선언되지 않은 함수/변수를 끌어올려서 사용할 수 있는 자바스크립트의 작동방식을 의미한다.
Hositing은 자바스크립트 엔진이 갖고 있는 성질이며 일부러 할 필요는 없지만 방지하는 것이 좋다. 왜냐하면 Hoisting이 발생한 코드는 이해하기 어렵기 때문에 유지보수도 힘들고 의도치 않는 결과물이 나타나기 쉽기 때문이다.
함수의 경우 꼭 선언 후에 호출을하고, var대신 const, let을 위주로 사용하라.
