function
함수란 하나의 로직을 재사용할 수 있도록 하는 것
- 중복되는 코드를 줄임으로서 유지보수 , 코드 해석 용이 ,재사용성에 이점이 있다.
- 함수는 입력과 출력을 이용해 유용하게 만들 수 있다.
function makeName(firstName,lastName){
return `${lastName} ${firstName}`;
}
const person1=makeName('hyunoo','kim');
console.log(person1);
const person2 =makeName('jisoo','park');
console.log(person2);
// 함수를 지정해주지 않으면 아름을 작성할때마다 반복작업을 해야한다.
const person3= `${yuri} ${lee}`
console.log(person3);
입력
함수에서 입력은 parameter(매개변수)를 통해서 들어온다.
- 매개변수(
parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있다. - 매개변수는
인자(parameter)라고 불리기도 한다. - 함수에 전달된 매개변수는 복사된 후 함수의 지역변수가 된다.
- 매개변수는 결과값을 출력할 때 주로 사용된다.
- 매개변수의 기본값은
undefined이지만 기본값을 자체적으로 설정 가능하다.
function sum(left=1,right=2){ /* left, right는 매개변수 */
console.log(left+right);
}
sum(2,3); /* 2,3은 인수 */
sum(3,8) // 11
sum(3); // 5출력
함수 내부에서 return 값으로 반환 값을 지정하고 함수가 종료된다.
return문이 없거나 return 값이 비어있으면(return;), 자동으로undefined를 반환한다.- 계산하는 기능으로서 사용된다.
function sum2(left,right){
return left+right;
}
const result=sum2(2,3);
console.log(result); // 5
return을 함수 중간에 하면 함수가 종료된다.
이를 이용해 조건에 맞지 않을때 함수를 일찍 종료 시킬 수 있다.
function result(num){
if(num<10){
return;
}
console.log(num);
}
result(8); //8
result(12); // undefinedarguments 객체
함수 호출 시 전달된 인수들의 정보를 담고 있는 유사 배열 객체
- 함수 내부에서 지역변수로 사용된다.
function sum(){
let _sum =0;
for(let i=0;i<arguments.length;i++){
// 1 2 3 4 출력
console.log(i+' : '+arguments[i]+'</br>');
_sum+=arguments[i];
}
return _sum; // 10
}
console.log('result : ' +sum(1,2,3,4)); // 인자는 4개함수의 종류
함수 선언문
function name() { }
지금까지 앞에서 본 함수는 함수 선언문으로 표현한 함수이다.
함수 표현식
const name= function() { }
const sum = function(a, b) {
return a + b;
};화살표 함수
function 키워드( function() {} ) 대신 () => {} 사용
매개변수
- () ⇒ { . . .}
- x ⇒ { . . .}
매개변수가 한개면 괄호 생략 가능하다. - (x , y) ⇒ {. . .}
함수 몸체
- x ⇒ { return x * x}
- x ⇒ x*x;
어떤 값을 바로 return하는 함수라면 중괄호와 return을 생략한다. - () ⇒ {
const x=10;
return x* x;
};
여러 줄일 때는 중괄호와 return을 반드시 사용해야한다.
const fow = x => x*x; // function(x) { return x * x; };
console.log(fow(3)); //9즉시 실행 함수(IIFE)
1회성 함수로 1번 실행하고 함수가 종료된다.
- 함수를 선언함과 동시에 호출한다.
(function fow(){
console.log('hello');
})();고차 함수
고차 함수에는 인자로 함수를 받는 함수, 함수를 반환하는 함수가 있다.
콜백 함수
함수의 인자로 전달되고, 필요할때 나중에 호출되는 함수
function cal(func,num){
return func(num); // func은 콜백함수이다.
}
function increase(num){
return num+1;
}
function decrease(num){
return num-1;
}
// func에 increase 참조(주소)값이 전달된다.
console.log(cal(increase,10));
console.log(cal(decrease,10));값, 참조에 의한 복사
원시타입을 인자로 전달할때 값 자체가 인자에 저장된다.
함수내에서 원시타입의 값이 바뀌어도 인자로 전달된 원시타입 값은 변하지 않는다.
function display(num) {
num = 5;
console.log(num);
}
const value = 4;
display(value); // 5
console.log(value); // 4객체타입을 인자로 전달할때 객체의 참조값이 인자에 저장된다.
함수내에서 객체의 값을 변경하면 인자로 전달된 객체의 값도 변경된다.
const age= 10;
const lee = {
name: 'Lee',
gender: 'male'
};
function changeName(num,obj){
num+=10;
obj.name= "Kim";
}
changeName(age,lee);
console.log(age); // 10
console.log(lee); //{name:"Kim",gender:"male"}함수 내부에서 외부로부터 주어진 인자의 값(원시값, 참조값)을 변경하는 것은 좋지 않다.
상태 변경이 필요하다면, 새로운 객체를 만들어서 반환하는 것이 좋다.
function changeName(num,obj){
return {...obj, name:"Kim"};
}
changeName(age,lee);
학습 기록.