[12/10] DAY6 자바스크립트 공부
6일 차 진도
구조 분해 할당
배열이나 객체의 요소 및 프로퍼티들을 분해해, 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식
배열의 구조분해 할당
let colors = [“green”, “blue”, “purple”];
let [c1, c2, c3] = colors;
console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purplelet c1, c2 , c3; // 선언 분리 할당
[c1, c2, c3] = “green”, “blue”, “purple”
console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
배열의 길이보다 적은 수의 값을 할당하게 되면 배열 요소의 인덱스 순서대로 값이 할당된다.
let c1, c2 , c3, c4; // 선언 분리 할당
[c1, c2, c3, c4] = “green”, “blue”, “purple”
console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); // undefined
배열의 길이보다 더 많은 수의 변수에 배열요소를 할당하려고 한다면, 남은 변수들에는 undefined가 할당된다.
let c1, c2 , c3, c4; // 선언 분리 할당
[c1, c2, c3, c4=“yellow”] = “green”, “blue”, “purple”
console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); // yellow
변수의 옆에 기본 값을 할당하면, 할당받지 못했을 때 기본값이 할당되는 것을 알 수 있다.
let a = 10;
let b = 5;
[a,b] = [b, a]
console.log(a, b) // 5 10구조 분해를 사용하면 임시 변수 없이 두 변수의 값을 쉽게 바꿀 수 있음
객체의 구조분해 할당
let colors = {
c1 : “green”,
c2 : “blue”,
c3 : “purple”,
}
let {c1, c2, c3} = colors;
console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
키 값을 기준으로 객체를 분해해, 변수에 할당한다.
let colors = {
c1 : “green”,
c2 : “blue”,
c3 : “purple”,
}
let {c1: color1, c2: color2, c3: color3} = colors;
console.log(color1 ); // green
console.log(color2); // blue
console.log(color3); // purple
객체 프로퍼티를 할당할 변수가 객체 프로퍼티의 키 값과 다를 경우, 콜론을 사용해 다른 이름의 변수에 값을 할당할 수 있다.
let colors = {
c1 : “green”,
c2 : “blue”,
c3 : “purple”,
}
let {c1,c2,c3,c4} = colors;
console.log(c1 ); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); // undefined
배열과 마찬가지로 변수의 수가 객체 프로퍼티의 수보다 큰 경우 undefined가 할당된다.
let colors = {
c1 : “green”,
c2 : “blue”,
c3 : “purple”,
}
let {c1,c2,c3,c4=“yellow”} = colors;
console.log(c1 ); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); // yellow
배열과 마찬가지로 기본값 할당이 가능하다.
spread
const toy = {
type : “bear”,
price: 15000
}
const blueToy = {
...toy,
color: “blue”,
}
const yellowToy = {
...toy,
color: “yellow”,
}
console.log(blueToy); // { type: 'bear', price: 15000, color: 'blue' }
console.log(yellowToy); // { type: 'bear', price: 15000, color: 'yellow' }
작성된 객체들의 반복되는 프로퍼티들을 스프레드를 사용해서 작성할 수 있다.
const color1 = [“red”, “orange”, “yellow”];
const color2 = [“blue”, “navy”, “purple”];
const rainbow = […color1, “green”, …color2];
console.log(rainbow); // [ 'red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple']
점 3개를 사용해 특정 객체가 가진 프로퍼티들을 펼쳐주는 역할을 한다.
rest
나머지 매개변수. spread는 객체나 배열에서 반복적인 값을 퍼트려주는 문법, rest는 특정 부분들을 하나의 배열이나 객체로 묶어주는 문법
객체 rest
const blueToy = {
type : “bear”,
price: 15000,
color : “blue”,
}
const {type, …rest } = blueToy;
console.log(type); // bear
console.log(rest); // {price: 15000, color: “blue”}
rest 변수가 객체 형태로 출력되며, type값을 제외한 나머지 값이 들어가 있는 것을 확인할 수 있다.
rest 문법은 순서와 상관없이 여러 번 작성할 수 없고, 항상 맨 마지막에 작성되어야 한다
배열 rest
const color = [“red”, “orange”, “yellow”, ”green”];
const [c1, c2, ...rest] = color;
console.log(c1, c2); // red orange
console.log(rest); // [“yellow”, “green”]const print = (a,b,c,d,e,f) => {
console.log([c,d,e,f]); // [3,4,5,6]
}
print(1,2,3,4,5,6);const print = (a,b, ...rest) => {
console.log(a,b,rest); // 1 2 [3,4,5,6]
}
print(1,2,3,4,5,6);
함수의 매개변수에 rest를 사용하게 되면 rest는 함수에서 받아온 매개변수들로 이루어진 배열이 할당되게 된다.
함수의 매개변수가 매우 많거나, 몇 개가 될지 모를 때, 함수에서 받아온 매개변수들을 배열로 나타내야 할 때 유용하게 사용
spread와 rest의 차이
const print = (a,b,c,d,e,f) => {
console.log(a,b,c,e,d,f); // 1 2 3 4 5 6
}
const numbers = [1,2,3,4,5,6]
print(…numbers);
spread는 인수로 많은 수를 넘겨줘야 할 때 자주 사용
const print = (…rest) => {
console.log(rest); // [1,2,3,4,5,6]
}
const numbers = [1,2,3,4,5,6]
print(...numbers);
spread : 객체나 배열에서 중복된 부분을 퍼트릴 때, 함수를 호출할 때 인수로 전달할 값을 퍼트릴 때 사용
rest : 객체나 배열에서 특정 부분을 하나의 객체나 배열로 묶어야 할 때, 구조분해할당을 사용해 배열이나 객체의 값을 묶어서 할당할 때, 함수의 매개변수로 많은 값들을 전달받거나, 특정 매개변수를 제외한 나머지 매개변수를 묶어서 사용할 때 사용
동기, 비동기
동기: 하나의 작업이 실행되는 동안 다른 작업을 동시에 진행하지 않는 방식, 즉 앞의 작업이 종료된 이후 다음 작업을 진행할 수 있는 순차적인 방식
const workA = () => { // 5초
console.log(“workA”)
}
const workB = () => { // 3초
console.log(“workB”)
}
const workC = () => { // 10초
console.log(“workC”)
}
workA()
workB()
workC()
위와 같이 스레드가 하나의 작업을 마친 후 다음작업을 진행하면 총 18초가 걸릴 것이고, 이를 ‘블로킹 방식’이라고 함
작업 시간이 매우 길어짐 -> 성능상의 문제
여러 개의 스레드를 통해 일을 분산시키면 되는 거 아니냐! 할 수도 있지만 자바스크립트는 싱글 스레드 방식으로 동작하는 언어이다.
비동기 : 여러 작업을 동시에 진행하는 방식
const workA = () => { // 5초
console.log(“workA”)
}
const workB = () => { // 3초
console.log(“workB”)
}
const workC = () => { // 10초
console.log(“workC”)
}
workA()
workB()
workC()
하나의 스레드에서 여러 개의 작업을 동시에 진행, 즉 위의 코드를 기준으로 보면 작업시간은 10초가 나올 것이고 이를 ‘논 블로킹 방식’이라고 한다.
비동기 연습
setTimeout(()=>{
console.log(“3초만 기다리세요”); // 3초만 기다리세요
},3000)
매개변수로 전달받은 시간만큼 기다렸다가, 전달받은 콜백함수를 실행시키는 함수
setTimeout(()=>{
console.log(“3초만 기다리세요”); // 3초만 기다리세요
},3000)
console.log(“종료”) // 종료
‘종료’가 먼저 출력되고 이후 ‘3초만 기다리세요’가 출력된다
setTimeout함수가 비동기 함수이기에, 전달된 콜백함수 실행이 종료될 때까지 기다리지 않고 다음 코드인 console.log(“종료”)를 실행시켰기 때문이다.
const workA = () => {
setTimeout(()=>{
console.log("workA");
},5000)
};
const workB = () => {
setTimeout(()=>{
console.log("workB");
},3000)
};
const workC = () => {
setTimeout(()=>{
console.log("workC");
},10000)
};
const workD = () => {
console.log("workD");
};
workA()
workB()
workC()
workD()
[workD -> workB -> workA -> workC] 순서로 출력되는 것을 확인할 수 있다.
6일 차 QUIZ
6일 차 문제
6일 차 정답
