- 일정한 동작을 함수로 만들어놓고 그 함수를 실행하거나 호출할 수 있음. 한번 만들어 놓은 애들은 여러번 실행이 가능하다.
- 함수를 한 번 만들어놓으면 반복적인 작업을 덜 할 수 있게 된다.
- 함수를 만들 때는 function예약어를 사용하거나 =>화살표를 사용한 화살표함수를 사용한다.
- 함수에는 이름을 붙여줘야 다른 곳에서도 사용이 가능하다.
- 함수선언문, 함수표현식은 자주쓰는 용어이니까 외워두자.
function a() {} // 함수선언문
const b = function() {}; // 함수표현식
const c = () => {}; // 화살표함수는 꼭 변수에 넣어서 이름을 붙여줘야한다. //
- function a() {} 같은 함수선언문 뒤에는 세미콜론을 붙이지 않는다.
- 함수는 만들기만하면 실행되는게 아니라 나중에 사용할때 호출을 해줘야함.
- 이름이 없는 함수는 보통 딱 한번만 쓸 때 사용가능하다.
- 이렇게 함수의 모양이 다른 이유는 차이가 있기 때문이다! 프로그래밍에서 모양만 다르고 똑같은 기능을 하는 경우는 없다고 보면 됨.
- 여태까지 사용했던 console.log() / parseInt() 등 모두 함수였던 것이다. 미리 작성되어 있던 함수
- 함수를 만들면 반복작업하는 코드를 줄일 수 있는게 장점이다.
- console.log를 하면 undefined가 console.log의 반환값(return)이라고 할 수 있다. 함수를 만들때 이런 반환값은 직접 정할 수도 있다. 함수안에 return을 을 넣어주면 반환값을 설정해줌.
- return문을 사용하지 않았다면 함수 실행문 끝에는 return undefined가 기본적으로 들어가 있다고 생각할 수 있음. 그렇기 때문에 함수가 언젠가는 종료된다고 생각하면 됨. 우리가 그냥 return undefined를 손으로 직접 쓰지 않을 뿐이다.
- 여기서 주의해야 할점은 return문을 넣으면 반환값을 내보냄과 동시에 함수가 끝이난다. 만약에 retrurn문 뒤에 console.log('hi')창이 있다면 이 부분은 실행이 안되고 그냥 return문에서 종료되어 버림.
function a(){
return 10;
}
// undefined
a();
//10
function a(){
return ;
}
//undefined는 생략이 가능해서 그냥 return만 써도 반환값이 undefined가 된다.
- 조건문과 return문을 결합해서 함수의 실행을 조작할 수 있다.
- return문이 들어있다고 해서 무조건 함수가 종료되는건 아니다.
function a(){
if(false){
return;
}
console.log('실행')
}
a(); // 실행
- 위의 함수안에는 if문이 있고, if의 조건식이 false이기 때문에 return은 실행되지 않고 console.log('실행')이 실행된다.
- 함수안에서 조건을 써서 어디까지 실행되고 안될지를 조절 할 수있음.
- 아래의 경우는 a()를 console.log 호출하면 return 10 값이 저 안에 들어간다고 생각하면 됨 .
function a(){
return 10;
}
console.log(a());
- 만약에 여러 값을 return값으로 쓰고 싶다면?
- 우리가 값을 여러개 쓰고 싶을때는 배열을 사용했었다. 배열을 사용하면 여러 값을 return값으로 사용할 수 있다.
function a(){
return [1,5];
}
a(); // [1,5]
#매개변수(parameter)와 인수(arguement)
- 함수를 선언할때는 매개변수를 넣고 호출할때는 인수를 받는다.
- 선언문의 첫번째 매개변수는 호출의 인수의 첫번째 자리와 연결된다.
- 매개변수도 변수.
function a(parameter){ //선언 , 파라미터(매개변수)
console.log(parameter)
}
a('arguement') // 호출, 아규먼트(인수)
arguement // parameter = 'arguement'
- 매개변수와 인수는 각각 여러개를 가질 수 있고 갯수가 꼭 일치하지 않아도 된다.
- 아래에선 z파라미터와 일치하는게 없어서 undefined가 출력됬다.
- arugments는 특별히 선언하지 않아도 함수안에서 사용할 수 있는애다. function함수안에서만 쓸 수 있고 화살표함수에서는 사용이 안됨. 호출하면 넣어놨던 인수들을 배열 모양으로 나타난다.
function a(w,x,y,z){
console.log(w,x,y,z);
console.log(arguements);
}
a('hello','Parameter', 'Arguement');
//hello Parametr Arguement undefiend
//auguements(3) ['hello','Parameter','Arguement']
- 반대로 매개변수는 2개인데 인수가 3개인 경우? 그럼 마지막 아규먼트가 무시된다. 갯수가 많는것 끼리만 성립되고 나머지 이외에는 무시된다고 생각하면 됨.
function add(x,z){
return x+z ;
}
console.log(3,4) // 7
console.log(2,3) // 5
- 지금은 간단한 예시니까 굳이 함수를 만들지 않아도 되는것 처럼 보이지만, 앞으로 점점 더 복잡해지는 경우가 많이 생기기 때문에 그 때를 대비해서 함수를 쓰는게 좋다.
- 위의 예시에서 만약에 인수 자리에 값이 안들어가고 비어있다면? 안들어간 자리는 undefined가 되어서 결과값으로는 NaN이 출력된다.
const times = (x,y,z) =>{
returnx*y*z;
}
tiems(2,3,4) // 24출력
const times = (x,y,z) => x*y*z ; // 이렇게도 사용 가능하다. 중괄호랑 return이 바로 이어서 나오면 이런식으로 생략가능//
- 함수 안에서 변수나 상수를 선언할 수도 있음.
function minus1(x,y){
const a = 100;
return (x-y)*a;
}
console.log(minus1(5,3));
//200
const b = 100;
function test(x,y){
return (x+y)*b;
}
console.log(test(2,2))
//400출력
댓글