구조 분해 할당은 객체나 배열을 변수로 '분해’할 수 있게 해주는 JavaScript 표현식입니다.
// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]
// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;
alert(firstName); // Bora
alert(surname); // Lee
인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 된다.
// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert( title ); // Consul
const arr = [1, 2, 3]
const [x, y, z] = arr
// 키는 없고 밸류만 나열되어있어서 순서를 맞춰야함
// 1, 2, 3을 x, y, z 로 받아라
// 3만 꺼내고 싶으면 쉼표 기호만 남겨둠
const [,, z] = arr
//만약 배열이 많다면? 하나하나 쉼표 입력할 수 없으니 몇개 안되는 배열에서만 사용
const arr = [1, 2, 3]
//기본값 지정 가능
const [,x,,a = 99] = arr
console.log(a)
// a는 없어서 undefined인데 기본값 지정했으니 99가 뜸
함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.
점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있다.
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a);
console.log("b", b);
console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
// 콘솔 출력:
// a, one
// b, two
// manyMoreArgs, [three, four, five, six]
let {var1, var2} = {var1:…, var2:…}
우측: 분해하고자 하는 객체
좌측: 상응하는 객체 프로퍼티의 '패턴’을 넣는다.
// 예시
let options = {
title: "Menu",
width: 100,
height: 200
};
// 분해하고자 하는 options 변수를 상응하는 변수에 할당
let {title, width, height} = options;
alert(title); // Menu
alert(width); // 100
alert(height); // 200
프로퍼티 options.title과 options.width, options.height에 저장된 값이 상응하는 변수에 할당된 것을 확인할 수 있습니다.
참고로 순서는 중요하지 않다.
// 구조 분해 할당
// 객체
const user = {
name: 'Heropy',
age: 85,
isValid: true
}
// isValid라는 것만 꺼내서 쓰고싶을 때
const { isValid } = user
console.log(isValid)
// 구조분해해서 꺼내려는 속성이 없거나 undefiend일때 기본값 = 기호로 지정 가능
const { email = 'yejine2@naver.com' } = user
console.log(email)
// 사용하고싶은 이름은 콜론기호로 지정할 수 있음
const { email: e = 'yejine2@naver.com' } = user
console.log(e)
// 여러개 꺼내기에 유용함
const { name: n, age: a, isValid: i} = user
console.log(n, a, i)
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다.
(function () {
console.log(33)
}(); // 즉시 실행 함수를 생성하는 괄호()
보통 익명함수를 만들면서 바로 실행하는 구조로 사용할때 사용
콜백 함수는 다른 함수에 인수로 전달된 함수이며 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료한다. 한마디로 함수의 인수로 사용되는 함수이다.
용도: 순차적으로 실행하고 싶을 때 사용
document.querySelector('.button').addEventListener('click', function() {
// 버튼 클릭 -> 이 함수 실행(순차적)
})
// .addEventListener는 함수이고, function() {}는 콜백함수이다.
가장 대표적인건 setTimeout(함수, 지연시간) 이라는 전역함수 사용할 때임
setTimeout(function(){
// 1초 경과 후에 이 함수를 실행(순차적)
}, 1000)
특징1. 다른 곳에서 만든 함수도 콜백 함수로 넣을 수 있음. 콜백 함수 자리에 함수명만 입력해주면 됨
특징2. 위 예시 처럼 콜백함수가 필요한 함수들에만 콜백함수 사용 가능
function first() {
console.log(1)
}
first()
다른 함수 second를 실행하고 싶을 때 // first 함수를 업그레이드 함, 파라미터 추가해주고 파라미터를 실행
function first(파라미터) {
console.log(1)
파라미터()
}
function second(){
console.log(2)
}
// 팀원들이 first함수 갖다쓸 때 이런식으로 갖다 쓸 수 있음. 실행하고 싶은 코드를 함수형태로 소괄호에 같이 집어넣음
/* first(function(){
console.log(2)})
*/
first(second)
차례로 실행하고 싶은 부분에 콜백함수를 썼다가
콜백 함수 안에 콜백 함수 안에 콜백 함수 ... 가 되어버리면 코드가 피라미트 형태로 길어짐
이게 싫다면 콜백함수로 함수를 디자인하지 말고, Promise나
async await를 사용하면 된다.