arguments.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// ●● arguments는 인수 전체를 얻어내기 위한 객체
// 인덱스를 이용해서 인수에 접근 가능
// 유사배열 객체 (length) 사용 가능
function myFunc(num1, num2) { // 2
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments.length); // 인수를 몇개 넣었는지 알 수 있음
console.log(arguments);
}
myFunc(10, 20, 30, 40); // 인수 4
// ▼▼ 결과
// 10
// 20
// 30
// 4
// ●● 나머지 매개변수
// 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수에 제약을 없앰
// (1)
function sum(num1, num2) {
return num1 + num2;
}
let result = sum(1, 2, 3, 4, 5); // 1 + 2 = 3이 result에 담겨있음
// (2)
function sumAll(...abc) { // 모든 인수가 배열이 됨
let sum = 0;
// (1)
for(let i=0; i<abc.length; i++) {
sum = sum + abc[i]; // 순차적으로 돌면서 더 해줌
}
return sum;
// (2)
// abc[0] + abc[1] + abc{2}; // 인덱스로 접근해 다 더해줌
// (3)
// abc.forEach(num => {
// sum = sum + num
// return sum;
// })
}
console.log(sumAll(1, 2, 3));
// (3)
function showName(성, 이름,...스킬) {
console.log(성);
console.log(이름);
console.log(스킬);
스킬.forEach(기술 => console.log(기술))
}
showName('손','민영','html', 'css', 'JS', 'php', 'mysql', 'react', 'typescript');
showName('김','그림','java','jsp','mysql');
</script>
</body>
</html>
arrCopy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// (1)
let arr = [1, 2, 3, 4, 5, 6];
let arr2 = arr;
console.log(arr);
console.log(arr2);
arr[0] = 10; // arr, arr2 둘 다 바뀜
// 값을 바라보는 주소를 복사해버림, 주소가 같아서 값이 같음 ★★
// (2) forEach push
let arr3 = [1, 2, 3, 4, 5];
let arr4 = [];
arr3.forEach( (val, index) => {
arr4.push(val)
})
console.log(arr3);
console.log(arr4);
arr3[0] = 10; // arr3만 바뀜
// 참조 주소가 달라서 같은걸 바라보고 있지 않음 ★★
// (3) 배열을 합쳐줌 concat
let arr5 = [1, 2, 3, 4];
let arr6 = [];
// arr3.forEach( (val, index) => {
// arr4.push(val)
// })
arr6 = arr6.concat(arr5);
console.log(arr5);
console.log(arr6);
arr5[0] = 10;
// (4)
let arr7 = [1, 2, 3];
let arr8 = [];
// arr6 = arr6.concat(arr5);
let arr9 = [...arr7];
console.log(arr7);
console.log(arr9);
arr7[0] = 10;
// (5)
let sum =[1, 2, 3];
let sum2 = [...sum];
let sum3 = sum; // 얕은 복사
console.log(sum===sum3); // true
console.log(sum===sum2); // false
// ★ 객체 복사 ★ assign ★
let obj = {
name : 'green',
age : 30,
}
let objCopy = {...obj}; // 새로운 객체 할당
let objCopy2 = Object.assign({},obj); // 예전 사용 방식, {}목표대상-빈객체, obj와 합침
console.log(obj === objCopy); // false
console.log(obj === objCopy2); // false
obj.name = 'aaa';
console.log(obj); // aaa
console.log(objCopy); // green
console.log(objCopy2); // green
// 같은 키명이 있을 때, 뒤에꺼가 덮어씌워진다 ★
let target = {
a : 10,
b : 20,
}
let source = {
b : 50,
c : 60,
d : 70,
}
target = Object.assign(target,source);
// target = {...target, ...source}; // 위와 같음 ★
console.log(target);
// ▼▼ 결과
// {a: 10, b: 50, c: 60, d: 70}
</script>
</body>
</html>
