[JS] 자바스크립트 기초 _ 함수

중복되는 코드들을 유용하게 사용하기 위해서 함수를 이용한다.

function sayHello(name){
console.log('Hello,${name}')};

sayHello는 함수이름이 되는 것이고, name은 매개변수가 된다.
매개변수는 없을 수도 있고, 1개 또는 2개 이상일수도 있다. 2개 이상이라면 쉼표로 구분한다.

첫번째 중괄호에 함수의 실행코드를 작성해준다.

✍️작성

function showError(){
alert('에러가 발생했습니다. 다시시도해주세요.');
}
showError();

로그인, 결제 등을 실패할때마다 띄워주기 좋은 코드이다.
매번 코드를 전체 작성할 필요없이 showError();만 작성해주면 되기때문에 매우 간결하고 유지보수(수정하기)가 편하다.

✍️작성

function sayHello(name){
const msg='Hello,${name}';
console.log(msg);
}

sayHello('Mike');
sayHello('Tom');
sayHello('Sam');

💻출력

"Hello, Mike"
"Hello, Tom"
"Hello, Sam"

위와같이 함수를 하나 만들어놓으면 작성되는 매개변수에 따라서 다양하게 대응이 가능하다.

조금 더 응용하여 로그인을 하지않아 사용자의 이름을 모르는 상황을 가정했을때, if문을 활용해서 코드를 작성해보자

✍️작성

function sayHello(name){
let msg='Hello';
if(name){
msg += ','+name;
}
console.log(msg);
}
sayHello();
sayHello('Mike');

💻출력

"Hello, Mike."

🚨변경될 수 있을땐 const 가 아닌 let을 사용해줘야한다.

✔️ 지역변수와 전역변수

✍️작성

let msg='Hello';
console.log('함수호출전')
console.log(msg)

function sayHello(name){
if(name){
msg+=','+name;
}
console.log('함수내부')
console.log(msg);
}

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

💻출력

함수호출전
'Hello'
함수내부
'Hello Mike'
함수호출후
'Hello Mike'

함수 내에서만 사용 할 수 있는 변수를 지역변수, 함수 외에서도 사용 할 수 있는 변수를 전역변수라고 한다.

✍️작성

let msg= "welcome";
console.log(msg);

function sayHello(name){
let msg= "Hi"
console.log(msg + '' + name);
}

sayHello('Mike');
consloe.log(msg);

💻출력

"welcome"
"HiMike"
"welcome"

위처럼 첫번째 msg와 두번째msg가 다르다는 것을 확인 할 수 있다. 지역변수는 전역변수에게 영향을 끼치지 않는다.

✍️작성

let name = "Mike";

function sayHello(name){
 console.log(name)
}

sayHello();
sayHello('Jane');

💻출력

undefined
"Jane"

매개변수는 복사된 후 함수의 지역변수가 된다.

🪄 전역변수가 많아지면 관리가 힘들어지기때문에 가급적 지역변수를 사용하는 것이 좋다.

✍️작성

function sayHello(name){
 let newName = name || 'friend';
 let msg = 'Hello, ${newName}'
 console.log(msg)
}

sayHello();
sayHello('Jane');

💻출력

	"Hello, friend"
    "Hello, Jane"

return을 사용하여 특정한 값을 반환하는 함수를 만들어보자.

✍️작성

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

💻출력

5

return문이 있으면 그 즉시 return오른쪽에 있는 값을 반환하고 종료한다.
그래서 함수를 종료하는 목적으로 사용하기도 한다.

🪄함수는 한번에 하나의 작업만 하는 것이 중요하다. 또는 최대한 세분화하여 작업하기
🪄어떤동작인지 알아보기 쉽도록 네이밍하기