함수 (function)

※서비스를 만들다 보면 같거나 비슷한 동작들이 생기기 마련이죠?

팝업, 결재 등 이런 것들은 저장해서 재활용하는게 좋겠죠~ 

함수는 이걸 가능하게 해주는데요

 

저희는 주로 console, alert, confirm을 씁니다!

 

그럼 다음 그림을 볼까요?

이 함수는 함수명 뒤에 괄호를 붙혀서 호출할 수 있습니다.

매개변수가 필요하다면 괄호 안에 넣어줍니다.

 

※ 함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수입니다. 또한, 함수의 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킵니다.

 

이렇게 들으면 이해되지 않을 수 있으니 매개변수가 있는 함수의 예를 들어 보자면

function sayHello(name){

const msg = `Hello, ${name}`;

console.log (msg);

}

sayHello('Mike');  // Hello, Mike

이렇게 잘 작성해줬는데 저희가 함수를 써주는 이유는 중복된 값을 줄이기 위함이라고 했죠? 조금 더 이름을 추가해 봅시다 !

 

function sayHello(name){

const msg = `Hello, ${name}`;

console.log (msg);

}

sayHello('Mike');

sayHello('Tom');

sayHello('Jane');
// Hello, Mike

Hello, Tom

Hello, Jane

이렇게 여러명에게 인사할 수 있는 함수를 만들 수 있게 되었네요 

 

조금 더 들어가 보겠습니다. 만약 이름이 없다면?

function sayHello(name){
// console.log(name) 여기에 콘솔창을 찍어서 확인해 보면 undefined가 나온다.
let msg = `Hello`;
if(name){
msg = `Hello, ${name}`;
}
console.log (msg);
}
sayHello(); 
 // Hello

undefined인 경우에는 if(undefined)는 false기 때문에 if 내부로 들어갈 수가 없었겠죠?

그래서 msg는 2번째 줄에 letdp 있는 Hello가 찍히게 됩니다.

 

functionsayHello(name){
letmsg = `Hello`;
if(name){
msg += ',' + name;  // 또는  msg += `,${name}`;
}
console.log (msg);
}
sayHello();

sayHello("Mike");

 // Hello
 // HelloMike

이렇게 사용해서 함수를 줄여줄 수도 있겠죠?

그런데 여기서 중요한 점이 있는데 msg는 함수 밖에서는 사용할 수 없습니다.

이렇게 함수 내부에서 사용하는 변수를 지역변수라고 합니다.

마지막에 console.log(msg)를 친다면 에러가 납니다!

 

그래도 쓰고 싶다면 msg를 함수 밖으로 빼내면 됩니다.

let msg = `Hello`; // 전역변수 (global varable) : 어디서나 접근 할 수 있는 함수

console.log('함수 호출 전')

console.log (msg)

function sayHello(name){

if(name){

msg += `,${name}`;

}

console.log ('함수 내부');
// 지역 변 수 (local varable) : 함수 내부에서만 접근할 수 있는 변수

console.log (msg);

}

sayHello("Mike");

console.log ('함수 호출 후');

console.log (msg);
// 

함수 호출 전

Hello

함수 내부

Hello,Mike

함수 호출 후

Hello,Mike

 

이렇게 함수 위에 쓰면 됩니다.

매개변수로 받은 값은 받은 후 함수의 지역변수가 됩니다. 전체 서비스에서 공통으로 바라봐야 하는 지역변수를 습관 들이시는게 좋습니다.

전역변수가 많아지면 관리가 힘들어지기 때문이죠 그래서 함수에 특화된 지역변수를 사용하는 것을 추천드립니다 !

 

 

 

조금 더 살펴 보아요 !

 

반환하는 함수 

• return

function add(num1,num2) {
return num1+num2;
}
const result =add(2,3);
console.log (result) 
// 5

return은 보시는 것과 같이 값을 반환하는 함수입니다.

 

 

함수 (function) 정리

- 한번에 한작업에 집중
- 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍 
showError //에러를 보여줌
gerName // 이름을 얻어옴
createUserData// 유저데이터 생성
checkLogin // 로그인 여부 체크