(4/18 ~4/28) The Web Developer 부트캠프 2022 강의 내용 정리
범위 : JavaScript 기초! ~ Javascript 최신 기능들(섹션 14 ~23)
JavaScript는 움직임, UI 효과, 정보를 실시간으로 업데이트 하는 등의 기능을 포함한 동적인 웹사이트 제작 시 사용되는 프로그래밍 언어
보관하고 다룰 수 있는 다양한 정보의 타입
브라우저에서 코드를 실행하고 결과 값을 확인할 수 있는 창
clear() 콘솔창 지우기
1 // 정수
-1 // 음수
3.14 // 실수
50 + 5 // 55
90 - 1 // 89
11111 * 7 // 77777
400 / 25 // 16
27 % 2 // 1
2 ** 4 // 16
// : 주석
// 연산순서 (PEMDAS): parentheses(괄호) > exponent(지수) > multiplication(곱하기)
// > division(나누기) > subtraction(빼기)
0 / 0; // NaN
1 + NaN; // NaN
typeof 4; // "number"
typeof 4.231314; // "number"
typeof NaN; // "number" -> 숫자로 간주됨
데이터를 담는 공간( 재사용을 위해 값에 이름을 넣어 저장하는 것 )
let someName = value; // let 변수명 = 저장 하고자 하는 값
let year = 1985; // 변수 선언할때 세미콜론 있어야함
let numHens = 5;
let numRoosters = 1;
numHens + 1; // 6
numHens + numRoosters; // 6
let totalchicken = numHens + numRoosters;
totalchicken; // 6
let score = 0;
score = score + 5; // 5, 자신에게 5를 더한 값을 score에 저장
score += 5; // 10, 위랑 같은 의미
score -= 5; // 5, 다른 연산자도 가능
score *= 2; // 10
score /= 2; // 5
score++; // 1증가, score+=1; 같은 의미
score--; // 1감소
상수(항상 일정하고 바꾸지 않는 값)을 선언할 때 사용하는 키워드
const luckyNum = 26; //26
luckyNum += 1; //error, 변경할수 없다.
luckyNum = 7; //새로운 값을 할당할수 없다.
옛날 방식.. 권장하지 않음(금지)
let과 차이점이 있지만 추후에 다시 다룸
var runDistance = 26.2; //26.2
runDistance += 1; //27.2
True / False 두개의 값이 있다.
let isActiveGame = true; // true
isActiveGame = false; //false
type을 변경하는 변수를 가질수 있다.
let isLoggedIn = false; // false
isLoggiedIn = 2342324; // 타입을 변경해서 저장할수 있다. 권장 X
카멜 케이스 :
한단어 이상을 써야 할경우 변수의 첫단어를 제외한 각단어의 첫문자를 대문자로 쓰는방법
let currentYear = 1999;
let userInputNumber = 1234;
let isLoggedIn = true;
let n = 9; // 의미없는 짧은 변수는 피해라, 간결성은 중요X
" ", ' ' 로 묶어야 한다.
let favAnimal = 'Dumbo Octopus';
문자열의 문자에는 각각 관련된 인덱스가 있다.
let animal = 'Octopus';
//animal[0] "O"
//animal[1] "c"
문자열에 없는 인덱스인 경우 undefined가 나온다
let animal = 'Octopus';
//animal[7] undeifned
문자열의 길이를 출력하는 함수
let animal = 'Octopus';
animal.length; // 7
변수에 있는 문자열을 하나하나 바꿀 수 없다.
새로운 문자열을 저장해야함
let animal = 'Octopus';
animal[0] = 't';
animal[0]; // 출력 결과: O
animal = 'tctopus'; //새로운 문자열로 저장
animal[0]; // 출력 결과 :t
숫자를 문자열로 바꿔서 합침
let year = '1999';
year + 1; // "19991"
let msg = 'hello';
msg.toUpperCase(); // "HELLO" 대문자로 변경
msg.toLowerCase(); // "hello" 소문자로 변경
msg = ' hello world ';
msg.trim(); // "hello world" 앞 뒤 공백 제거 가운데 공백은 제거 안함
msg.trim().toUpperCase(); // "HELLO WORLD" 메소드를 연결해서 사용 가능
' hello world '.trim(); // "hello world" 문자열에 바로 메소드 사용 가능
메서드로 전달되어서 메서드의 동작을 변경하는 입력 값
let tvShow = 'catdog';
//문자열에서 cat이라는 인수에 해당하는 인덱스 위치의 시작값을 반환
tvShow.indexOf('cat'); // 출력 결과:0
//5인덱스 끝까지 자름
tvShow.slice(5); //출력 결과: "g"
//0인덱스부터 5인덱스까지 자름
tvShow.slice(0, 5); // 출력 결과: "catdo"
//뒤에서부터 해당 인덱스만큼 자름
tvShow.slice(-5); //출력 결과: "atdog"
let annoyingLaugh = 'teehee so funny! teehee!';
annoyingLaugh.replace('teehee', 'haha'); // 출력결과 : 'haha so funny! teehee!'
//해당 문자열 인수만큼 반복
annoyingLaugh.repeat(2);
//'teehee so funny! teehee!teehee so funny! teehee!';
``(back-tick)을 사용한다. 표현식은 ${}로 감싼다.
문자열 안에 표현식을 내장할 수 있는 문자열들을 만들고 해당 표현식은 평가된 후에 문자열로 바뀐다.
let count = 10;
let string = `back tick ${count}`; // 출력 결과: "back tick 10"
let string = `back tick ${count * 2}`; // 출력 결과: "back tick 20"
정의된 값이 없다.
값을 일부러 지정하지 않음을 명시적으로 표시
수학과 관련된 특성과 메서드의 모음
Math.PI; // 3.141592... 수학적 상수
Math.round(4.9); //5 소수점 한자리가 5이상이면 올림
Math.abs(-456); // 456 절대값
Math.pow(2, 5); // 32 제곱수
Math.floor(3.999); //3 버림
무작위로 생성되는 수
Math.random(); // 0~1 사이의 수를 무작위로 생성
// 특정 범위의 수를 구하기 위해선 범위의 끝 수를 곱하고, 자연수를 얻기 위해서 Math.floor를 사용해야함
Math.floor(Math.random() * 5); // 0~5사이의 자연수
>
<
>=
<=
==
!=
=== // strict equality
!== // strict non-equality
boolean 판단에 대한 결과 값은 true, false이다.
문자열 비교는 유니코드값으로 비교된다.
값에 대한 비교만 하며 타입에 대해선 하지 않는다.
10 == '10'; // true
null == undefined; //true
0 == false; // true
true == false; // false
값과 타입을 모두 비교한다.
10 === '10'; // false
null === undefined; // false
0 === false; // false
true === false; // false
값과 타입에 대해 비동등한지 비교
실시간으로 자바스크립트를 실행하고, 에러 메시지등을 출력해주는 기능
console.log('hi'); // 'hi';
console.log(3 + 4); // 7;
console.err('err'); // 'err' 출력
console.warning('warning'); // 'warning' 출력
console.clear(); //콘솔 비우기
사용자에게 팝업창으로 메세지를 표시한다.
alert('alert!');
사용자로부터 입력값을 받는 창을 띄우며 입력한 값을 받는다.
prompt('저장하시겠습니까?');
<!DOCTYPE hmtl>
<html>
<head> </head>
<body>
<script>
consoel.log('hi');
</script>
</body>
</html>
console.log('javascript!')'
<!DOCTYPE hmtl>
<html>
<head>
<script src="app.js"></script>
</head>
<body></body>
</html>
=> 콘솔에 javascript!가 찍힌다.
이 방법의 경우 javascript를 넣을 이상적인 위치는 body 끝 부분이다.
<!DOCTYPE hmtl>
<html>
<head> </head>
<body>
<h1>javascript!</h1>
<script src="app.js"></script>
</body>
</html>
조건에 대한 판단 값이 true이면 실행
if (1 + 1 == 2) {
console.log('If Execute');
} // 출력 값 : 'If Execute';
if (1 + 2 == 2) {
console.log('true');
} // 출력 값 : undefinded
If 조건에 대한 판단 값이 false이면
해장 조건문 판단 후 true이면 실행
if (1 + 2 == 2) {
} else if (1 + 1 == 2) {
console.log('Else-If Execute');
} // 출력 값 : 'Else-If Execute'
조건문이 없으며 if문 또는 else-if문에 대한 조건문 판단 값이 false이면 실행
if(false)
else if(false)
else {
console.log('Else Execute');
} // 'Else Execute'
조건문 안에 조건문 넣기
let password = 'cat dog';
if (password.length >= 6) {
if (password.indexOf(' ') === -1) {
console.log('Valid password!');
} else {
console.log('Password cannot include spaces');
}
} else {
console.log('Password too short!');
}
Javascript의 모든 값에는 고유 truth-y, false-y가 있다.
Falsy values :
false
0
""(empty string)
null
undefined
NaN
Everything else is truthy!
두 조건이 다 참이여야 참
true && true; // true
true && false; // false
false && false; // false
한 조건이라도 참이면 참
true || true; // true
true || false; // true
false || false; // false
표현식에 대한 boolean 값을 반전시킴
!true; // false
!false; // true
switch문에 들어가는 인수에 따라 실행되는 코드가 다르다.
const day = 2;
switch (day) {
case 1:
console.log('MONDAY');
break; // break를 넣어주어야 다음 case 코드가 실행되지 않는다.
case 2:
console.log('TUESDAY');
break;
default:
console.log('INVALID NUMBER!'); // case에 해당하지 않는 값일 경우 해당 코드 실행
} // 출력 값 : "TUESDAY";
순서가 있는 값의 집합
여기서 순서란 인덱스 순서를 의미한다.
const colors = ['red', 'blue', 'green'];
// colors[0]='red'
// colors[1]='blue'
// colors[2]='green'
자바스크립트에서 배열은 여러 타입에 대한 값을 가질
수 있다.
const array = [1, '1', null, undefined];
인덱스 접근으로 특정 요소를 찾거나 값의 변경이 가능하다.
let colors = ['red', 'blue'];
colors[0] = 'green';
colors[0]; // 'green'
let colors = ['red', 'blue'];
colors[10] = 'yellow';
//이렇게 하면 인덱스 2~9까지 undefined로 값이 들어간다.
배열에 마지막에 해당 값을 저장 후 배열의 길이 값을 반환한다.
let colors = ['red'];
arr.push('blue'); // 2
배열에 마지막 값을 꺼낸다. 배열에 있던 값은 삭제한다.
let colors = ['red', 'blue'];
colors.pop(); // blue
colors; // ['red']
배열 시작부터 제거하고 그 값을 반환
let arr = [1, 2, 3];
arr.shift(); // 1
arr; // [2,3]
배열 시작에 추가하고 배열 길이 반환
let arr = [1, 2, 3];
arr.unshift(5); // 4
arr; // [5,1,2,3]
2개의 배열을 붙여서 새로운 배열을 만든다.
let arr1 = [1, 2];
let arr2 = [3, 4];
arr1.concat(arr2); // [1,2,3,4]
인수가 배열에 있으면 해당 값의 인덱스 값을 반환한다. 없으면 -1을 반환한다.
let colors = ['green', 'yellow'];
colors.indexOf('blue'); // -1
colors.indexOf('green'); // 0
인수가 배열에 있으면 true 없으면 false를 반환한다.
let arr = [1, 2];
arr.includes(1); // true
파괴메서드로 원본 배열을 바꾼다.
해당 배열의 값을 뒤집는다.
let arr = [1, 2, 3];
arr.reverse(); // [3,2,1]
배열을 잘라 새로운 배열을 만든다.
인수가 1개 일 땐 slice(startIndex)
2개일 땐 slice(startIndex,endIndex)
let arr = [1, 2, 3];
arr.slice(); //인수가 없을 땐 원본 배열 그대로를 복사한다.
arr.slice(2); // [3]
arr.slice(0, 1); // [1] startIndex부터 endIndex이전까지 자른다
파괴메소드이며 원본 배열을 바꾼다.
배열에 삽입하거나 결합시킨다.
splice(startIndex, deleteCount, "넣을 값")
deleteCount가 0이면 삽입만을 한다.
let arr = [1, 2, 3];
arr.splice(0, 0, '3'); // [3,1,2,3]
배열에 있는 모든 값을 문자열로 바꾼 후 유니코드 값으로 대소 비교를 한 후 정렬한다.
let arr = [1, 30, 200, 1000];
arr.sort(); // [1,1000,200,30,] 정렬이 제대로 되지 않는다.
/*
정렬 기준을 정해주는 함수를 넣어주면 제대로 대소비교가 된다.
1을 리턴하면 순서를 앞으로
0을 리턴하면 순서 변동x
-1을 리턴하면 순서를 뒤로한다.
*/
arr.sort(function (a, b) {
if (a > b) return 1;
else if (a == b) return 0;
else return -1;
});
자바스크립트에선 원시 자료형이 아닌 모든 것은 참조 자료형이다. 참조형은 원시형 데이터의 집합이다. 배열([])과 객체({}), 함수(function(){})가 대표적
여기서 참조란 메모리 주소상에서 해당 데이터가 위치한 주소를 가리키는 것이다.
let arr = [1, 2, 3];
arr === [1, 2, 3]; //false
let arr2 = arr;
arr2 === arr; //true
배열에 컨텐츠는 바꿀 수 있지만
참조하는 배열은 바꾸지 못함
const arr = [1, 2, 3];
arr[0] = 2; // [2,2,3]
let arr2 = [1, 2, 3, 4];
arr = arr2; // Uncaught TypeError: Assignment to constant variable.
2차원 배열
3차원 배열
const colors = [
['red', 'blue'],
['grren', 'orange'],
];
colors[0][0]; // 'red'
colors[1][1]; // 'orange'
중괄호({})로 감싸진 하나 이상의 속성 이름과 속성 값의 리스트
객체도 배열처럼 데이터 구조의 한 종류
객체는 key:value(프로퍼티) 형식으로 데이터 저장
key는 다 문자열로 변환되어 저장
// 객체 선언 및 초기화
const object = {
totalSteps: 30867,
totalMiles: 211.7,
};
const movie = {
name: 'superman',
date: '2021.10.10',
price: 6500,
};
movie.name; // "superman"
변수 같은 유동적인 값을 객체에서 key로 쓰고 싶을 때 사용
const year = {
1999: 'Ok',
2000: 'Good',
};
let targetYear = '1999';
movie[targetYear]; // "Ok"
객체.key = value
객체[key] = value
문자열은 "key" 숫자는 key 형식으로로 한다.
형식으로 수정을 한다.
const object = {
color: 'blue',
};
object.color = 'skyblue';
object.color; // 'skyblue'
object['color'];
const comments = [
{username:'Tammy', text="haha", votes:9},
{username:'Tammy', text="haha", votes:9}
]
for(
[initialExpression]; //초기표현식
[condition] //조건식
[incrementExpression] // 증감식
)
for (let i = 0; i < 3; i++) console.log(i);
// 1
// 2
// 3
const animals = ['lions', 'tigers', 'bears'];
for (let i=0;i<animals.length;i++>){
console.log(animals[i]);
}
// 'lions'
// 'tigers'
// 'bears'
//구구단
for (let i = 1; i < 10; i++) {
for (let j = 1; j < 10; j++) {
console.log(`${i}*${j}=${i * j}`);
}
}
// 2차원 배열 원소 출력
const seatingChart = [
['Kristen', 'Erik', 'Namita'],
['Geofferey', 'Junita', 'Antonio', 'Kevin'],
['Yuma'],
];
for(let i=0;i<seatingChart.length;i+++){
const row = seatingChart[i]
for(let j=0;j<row;j++){
console.log(row[j]);
}
}
while (조건식)
{ 실행문}
let num = 0;
while (num < 10) {
console.log(num);
num++;
}
// 조건이 참이될 때가지 계속 실행문을 실행시킬 수 있음
const SECRET = 'CODE';
let guess = prompt('enter ther secret code...');
while (guess !== SECRET) {
guess = prompt('enter ther secret code...');
}
반복문을 벗어나게 하는 키워드
let num = 0;
while (num < 5) {
num++;
if (num == 3) break; //3번 수행되고 반복문을 빠져나온다.
}
순서가 있는 배열 리스트에 사용
const items = ['1', '2', '3'];
for (let item of items) {
console.log(item);
}
// 1
// 2
// 3
for in은 순서가 없는 경우에 사용
const obj = {
name: 'test',
color: 'brown',
};
for (key in obj) {
console.log(key);
// name
//color
}
객체는 iterable이 아니기 때문에
반복을 하기 위한 방법이 따로 존재함
for in
key,value 배열을 사용하는 방법
Object.keys() => key 배열 반환
Object.values() => value 배열 반환
Object.entries() => [key,value] 배열 반환
const testScores = {
A: 80,
B: 90,
C: 95,
};
for (let person in testScores) {
console.log(`${person} scored ${testScores[person]}`);
}
for (let person of Object.keys(testScores)) {
console.log(`${person} scored ${testScores[person]}`);
}
for (entry of Object.entries(testScores)) {
console.log(entry);
}
// ['A',80]
// ['B',90]
// ['C',95]
let isQuit = false;
let todos = [];
let todo = null;
while (!isQuit) {
let input = prompt('what would you like to do');
switch (input) {
case 'new':
todo = prompt('Insert todo');
if (todo) todos.push(todo);
console.log(todos);
break;
case 'list':
for (let entry of Object.entries(todos)) {
console.log(`${entry[0]}:${entry[1]}`);
}
break;
case 'delete':
const index = parseInt(prompt('Ok, enter an index to delete'));
if (!Number.isNaN(index) && index < todos.length) {
const deleted = todos.splice(index, 1);
console.log(`Ok, deleted ${deleted[0]}`);
} else {
console.log('Unknown index');
}
break;
case 'quit':
case 'q':
case null:
isQuit = true;
break;
default:
}
}
console.log('Ok QUIT THE APP!');
코드의 재사용 가능한 일부로서 언제든 사용할 수 있도록 이름을 붙인 것이다.
코드의 가독성, 재사용성을 향상시킨다.
function first() {} //함수 정의
first(); // 함수 호출
함수에 입력하는 값을 의미한다.
함수 선언식의 괄호안에 작성되는 변수
함수안에서 처리된 값을 외부에서 사용할 수 있게 해주거나
함수를 빠져나오게 하는데 사용된다.
함수 안에서 정의한 변수들은 그 함수로 범위가 한정됨
함수 밖에 있는 변수에 액세스 가능
안에 있는 변수가 액세스 우선순위가 더 높음
let color = 'blue';
function f() {
console.log(color); // blue
}
function t() {
let color = 'green';
console.log(color); // green
}
함수를 제외하고는 기본적으로 중괄호가 있는 모든 곳을 의미함
블록에서 선언된 변수는 블록안에서만 유효함 (var타입 제외)
let radius = 8;
if (radius > 0) {
const PI = 3.14159;
let msg = 'Hi';
} // if문 내부도 block임
함수를 선언하는 시점에서 상위 스코프가 결정된다.
부모 함수의 안에 중첩된 내부 함수는 해당 외부 함수내 변수 또는 범위 내에서 정의된 변수에 액세스할 수 있다.
외부 함수는 내부함수의 변수에 액세스할 수 없다.
동일한 스코프에서 함수를 선언한 경우
let x = 1;
function external() {
let x = 10;
internal(); // 선언한 시점에서 x=1이 internal의 상위 스코프이므로 출력결과는 1이다.
}
function internal() {
console.log(x);
}
중첩된 내부 함수의 경우
let color = 'green';
function external() {
let color = 'blue';
internal();
function internal() {
console.log(color); // 선언 시 internal의 상위 스코프는 external이기 때문
}
}
external(); //출력 값 : blue
함수를 정의한 것을 변수에 할당하는 것
이것이 가능한 이유는 javascript에서 함수가 값으로 처리되기 때문 이 의미는 함수를 반환,저장할 수 있다는 의미이다.
const f = function (parameter) {};
다른 함수를 인수로 받아서 보통은 그 인수로 어떤 작업을 하는 함수이자 또 함수를 반환할 수 있는 함수
function callFunc(func) {
func();
}
function func() {
console.log('call');
}
callFunc(func); // call
함수 내에서 함수를 반환하는 함수
팩토리 함수를 설정하는 패턴에 사용함
function makeBetweenFunc(min, max) {
return function (num) {
return num >= min && num <= max;
};
}
/* 아이,어른,노인인지 여부를 판단하는 코드는 같으므로 이를 반환함수를 사용하면
코드를 재사용하여 처리할 수 있다.*/
const isChild = makeBetweenFunc(0, 18);
const isAdult = makeBetweenFunc(19, 64);
const isSenior = makeBetweenFunc(65, 120);
console.log(isChild(18)); // true
console.log(isAdult(30)); // true
console.log(isSenior(115)); // true
메서드는 객체에 종속된 특성으로 함수에 포함되는 개념
const obj = {
add(a, b) {
return a + b;
}, // 속기법
minus : function(a-b){
return a-b
}
};
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다.
사용된 함수 호출 컨텍스트에 따라 this값이 바뀜
// 객체 안에서 this는 객체 자신을 가리킴
const cat = {
name : 'cat';
meow(){
console.log(this.name);
}
}
// 최상위 객체 window
function meow(){
console.log(this) // window 객체를 가리킴
}
try {
//실행 부분
} catch (e) {
//에러 처리 부분
}
배열 아이템 각각에 대해 인수로 넣은 함수를 실행함
let nums = [1, 2, 3];
function print(num) {
console.log(num);
}
nums.foreach(print);
//1
//2
//3
배열 아이템 각각에 대해 인수로 넣은 함수를 실행하고 콜백의 반환 값을 이용해서 새로운 배열을 만듬
let nums = [1, 2, 3];
nums.map(function (num) {
return num * num;
});
// nums = [1,4,9]
function 키워드 함수명을 쓰지 않고 => 를 사용하여 함수 정의
(매개변수) => { }
매개변수가 한개일 땐 ()
const sum = (x, y) => {
return x + y;
};
함수안에 return문 있을 경우 return 키워드 생략 가능 이 때 중괄호를 생략하거나 ()로 감싸야함
const test = (x) => x; // x
const test2 = (y) => y; // y
지정된 시간안에 한번만 수행
//3초 뒤 테스트 출력
setTimeout(() => {
console.log('테스트');
}, 3000);
지정된 시간을 주기로 반복 수행
//3초 주기로 반복
const id = setInterval(() => {
console.log('test');
}, 3000);
clearInterval(id); // 중단됨
배열에서 조건을 충족하는 원소만 모아 새로운 배열 생성
const numbers = [1, 2, 3, 4, 5];
numbers.filter((num) => num % 2 == 0); // [2,4]
배열 원소중 일부만이라도 통과하면 참을 반환
그렇지 않으면 거짓을 반환
const nums = [1, 2, 3];
nums.some((num) => num % 2 == 0); // true
const nums = [1, 2, 3];
nums.every((num) => num % 2 == 0); //false
배열 원소가 테스트를 다 통과하면 참을 반환
그렇지 않으면 거짓을 반환
배열 원소에 함수를 수행시켜 최종적으로 하나의 결과값을 반환
[1, 3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}); // 36
두 번째 인수를 주면 초기 값을 주게된다.
[1, 3, 5, 7, 9, 11].reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 100); // 136
화살표 함수에서 this는 함수가 만든 범위에 상속되는 this 키워드 값과 같다.
const cat ={
name :"cat",
call:()=>{console.log(this)},
home:function(){console.log(this)}
walk:function(){
setTimeout(()=>{
console.log(this)
},1000)
}
}
cat.call() // window 객체
cat.home() // cat 객체
cat.walk() // cat 객체
인수에 값이 없을 경우 매개변수에 지정한 값이 할당됨
function sum(a, b = 1) {
return a + b;
}
sum(1); //2
sum(1, 2); //3
배열,반복가능한 객체가 펼쳐지고 인수는 따로 들어감
const nums = [1, 2, 3];
Math.max(nums); // NaN
Math.max(...nums); // //3
배열을 다른 배열에 복사
const cat = ['a', 'b', 'c'];
const dog = ['d', 'e', 'f'];
const allCatDog = [...cat, ...dog]; // ['a','b','c','d','e','f']
객체를 펼쳐서 복사할 때 사용
객체를 변형하지 않고 복사할 수 있음
const dataFromForm = {
email: 'test@test.com',
password: 'tobias123!',
username: 'titk',
};
const newDataFormForm = { ...dataFromForm, id: 'test', password: '1234' };
/* {
"email": "test@test.com",
"password": "1234",
"username": "titk",
"id": "test"
} */
인수에 ...붙이면 인수를 배열로 받음
인수의 갯수를 정하지 않을 경우 사용
function sum(...nums) {
return nums.reduce((total, currentValue) => total + currentValue);
}
sum(1, 2, 3, 4, 5); //15
값을 해체하고 꺼내고 선정하는 간편한 방식
const nums = [1, 2, 3, 4, 5];
//배열 앞에서 순서대로 해서 갯수만큼 값이 들어감
const [gold, silver, bronze] = nums;
// gold =>1
// silver =>2
// bronze => 3
객체 속성명을 {}안에 넣고 객체를 할당하면
속섬명에 맞는 값이 할당됨
const obj = {
name :"phone"
price : 250000
}
const {name,price} = obj
//name => "phone"
//price => 250000
디폴트 값 객체 분해
const obj = {
price: 250000,
};
const { name = 'test', price } = obj;
//name => "test"
//price => 250000
함수를 정의할 때 괄호 안에 매개변수를 작성하면 전달되는 값의 구조를 분해할 수 있다.
const obj = {
name: 'test',
id: 'test',
};
function test({ name, id }) {
console.log(name, id);
}
test(obj); // "test test";
혹시 무슨 부트캠프를 참여하고 계신지 알려주실 수 있을까요?