[JS] Function

같은 기능이 반복될 때

매번 새롭게 만들지 말고 자주 사용하는 기능을

하나로 묶어서 쓰는게 편리합니다.

이 묶는 기능을 함수라고 하는데요.

JavaScript에도 함수 기능이 있습니다.

구조는 이렇습니다.

 

function 함수명 (파라미터) {

}

이떄 파라미터는 생략될 수 있습니다.

 

function showError(){

alert("에러 발생 !!!!");}

showError();

 

파라미터가 없는 함수의 예시입니다.

function sayHello(name){

let msg = `hello, ${name}`;

alert(msg);

}

sayHello("David");

 

그리고 파라미터가 있는 함수입니다.

이 함수에 파라미터를 넣지 않고 실행하면 어떻게 될까요?

 

sayHello();

 

이 경우에는 undefined가 출력됩니다.

그래서 파라미터가 없는 경우 방지하기 위해서

다음과 같이 구현할 수 있습니다.

 

function sayHello(name){

let msg = `hello, ${name}`;

if(name) {

msg += ` , ${name}`

}

alert(msg);

}

 

다음은 함수에서 쓰이는 변수에 대해서 알아보겠습니다.

함수 밖에서 어디서나 접근할 수 있는 변수를

전역 변수라고합니다.

반면에 함수 내부에서만 접근 할 수 있는 변수를

지역 변수라고 합니다.

 

let msg = "Hello";

console.log(msg);

function sayHello(name){

let msg = `hello, ${name}`;

if(name) {

msg += ` , ${name}`

}

alert(msg);

}

 

위 코드에서 첫번째로 선언된 변수는

어디서나 접근 가능해서 전역 변수,

함수 내에 선언된 변수는 함수 내에서만

사용할 수 있으므로 지역 변수입니다.

지역 변수는 함수 내에서 전역 변수와 같은 이름으로

지을 수 있고, 서로 간섭 받지 않습니다.

전역 변수가 많아진다면 관리하기 힘들기 때문에

가급적이면 함수에 특화되어있는 지역 변수를 사용하는 것이 좋습니다.

 

OR 연산자를 활용하면 파라미터로 기본 값을 지정할 수 있는데요.

 

function sayHello2(name){

let newName = name || 'Friend';

let msg = `Hello, ${newName}`;

console.log(msg);

}

 

값이 안들어 왔을 시 'Friend'를 변수에 집어 넣음으로써

기본값을 지정했습니다.

 

이와 마찬가지로

함수를 정의할 때

함수의 파라미터에 값을 넣으면

그 값이 default 값이 되는데요.

 

function sayHello3(name = 'Friend'){

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

}

 

이렇게 파라미터로 값을 넣어주면

해당 값이 기본값이 되게 됩니다.

 

JS의 함수도 값을 반환 할 수 있습니다.

 

function add(num1, num2){

return num1 + num2;

}

 

return은 반환하는 것과 동시에 함수를 종료하는 기능도 있습니다.

 

함수에 대해서 덧붙이자면

함수는 한 번에 한 작업만 하는게 좋기 때문에

하나의 함수가 여러 작업을 진행한다면, 여러개의 함수로 구현하고

함수명은 읽기 쉽고, 어떤 기능인지 알 수 있게 작명해야합니다.