[JS] 함수 2
1. 함수선언문
function myFunc(){
let num = 20;
return num;
}
myFunc();
function muFunc(num1, num2){
return num1 + num2;
}
myFunc(10, 20);
2. 함수표현식
myFunc2(5, 10); // 불가능, (호이스팅 불가)
let myFunc2 = function(num1, num2) {
return num1 + num2;
}
myFunc2(5, 10); // 가능
3. 화살표 함수
무기명 함수는 화살표 함수로 변경할 수 있다.
function(num1, num2){
return num1+num2;
}
1) function 대신 =>
=>
2) 매개변수가 하나면 () 생략 가능
두 개 이상일 경우 () 생략 안됨
function(){} ---> () => {}
function(num){} ---> num => {}
function(num1, num2){} ---> (num1, num2) => {}
3) 실행문이 한 줄일 경우 {} 생략가능
function(num1, num2){ console.log(num1+num2)}
---> (num1,num2) => console.log(num1+num2);
4) 실행문이 리턴을 포함한 한 줄일 경우 리턴도 생략가능
function(num1, num2){ return num1+num2; }
---> (num1, num2) => num1+num2;
4. 나머지 매개변수 ??
arguments 객체
function sum(num1,num2){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
return num1+num2;
}
sum(10, 20, 30);
나머지 매개변수
나머지 인수를 다 묶어서 배열로 넘겨줌 (남아있는 인수를 모음)
매개변수가 여러개일 때 항상 마지막에 있어야 함
구문> ...매개변수명
function sumAll(ab,...c){
}
sumAll(10, 20, 30, 40, 50)
<!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){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
myFunc(10, 20, 30, 40);
// 나머지 매개변수 ...
// 함수 정의 방법과 상관없이 함수에 넘겨주는 인수의 개수에 지약을 없앰
function sum(num1, num2){
return num1 + num2;
}
let result = sum(1, 2, 3, 4, 5);
function sumAll(...numAll){
let sum = 0;
// numAll[0]+numAll[1]+numAll[2]
for(let i=0; i<numAll.length; i++){
sum = sum + numAll[i];
}
// console.log(sum);
return sum;
// numAll.forEach(num=>{
// sum=sum+num;
// return sum;
// })
}
console.log(sumAll(1, 2, 3, 4, 5, 6));
function showName(성, 이름,...스킬){ // 나머지 매개변수...는 항상 마지막에 있어야 함, 나머지 애들 모아주는 역할하기 때문
console.log(성)
console.log(이름)
스킬.forEach(기술=>console.log(기술))
}
showName('손', '민영', 'html', 'css', 'javascript', 'php', 'mysql', 'react', 'typescript');
showName('김', '그린', 'java', 'jsp', 'mysql');
</script>
</body>
</html>
5. 스프레드 문법
1, 2, 3, 4, 5, 6, 7 --> [1, 2, 3, 4, 5, 6, 7]
스프레드 문법 ...배열변수명
[1, 2, 3, 4, 5, 6, 7] --> 1, 2, 3, 4, 5, 6, 7 // 배열을 사용하기 위해 값으로 바꿈
배열복사
let arr1= [1, 2, 3]
let arr2 = arr1;
기본형 데이터 타입
Number, String, null, Boolean, undefined
참조형 데이터 타입
Object, function
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>
// let arr = [1, 2, 3];
// let arr2= [];
// // arr.forEach((val,index)=>{
// // // arr2[index]=val;
// // arr2.push(val)
// // })
// arr2 = arr2.concat(arr);
// let arr3=[...arr];
// // let arr2 = arr;
// console.log(arr);
// console.log(arr2);
// arr[0] = 10;
// console.log(arr);
// console.log(arr2);
let arr = [1, 2, 3];
let arr2 = [...arr];
let arr3 = arr;
console.log(arr===arr3);
console.log(arr===arr2);
let obj= {
name: 'green',
age: 30,
}
let objCopy = {...obj};
let objCopy2 = Object.assign({},obj);
console.log(obj===objCopy);
console.log(obj===objCopy2);
obj.name = 'aaa';
console.log(obj);
console.log(objCopy);
console.log(objCopy2);
let target = {
a: 10,
b: 20,
}
let source = {
b: 50,
c: 60,
e: 70,
}
target = Object.assign(target,source);
console.log(target);
</script>
</body>
</html>