[JavaScript] 04. 자바스크립트 함수(Function)

# 함수(Function)

함수(Function)란, 어떤 작업을 수행하기 위한 독립적인 모듈로 프로그램의 주요 구성요소 중 하나입니다.

함수를 이용하면 유사한 동작을 하는 작업도 중복없이 처리할 수 있습니다.

자바스크립트에서는 function 키워드를 사용하여, function 함수명(매개변수){ 실행내용; } 형식으로 표현합니다.
이러한 형태를 함수 선언문 이라고 하며, 함수명() 형태로 함수를 호출하여 사용합니다.

function introduce(name){

	console.log(`나의 이름은 ${name}입니다.`);
}

introduce("송우든"); // call

 

# 함수의 반환

함수는 무조건 값을 반환하는 성질을 가지고 있는데요! 반환 시에는 return 키워드를 사용하여 값을 반환합니다.
만약 함수에 retrun문이 사용되지 않거나 return; 만 사용했을 경우, 함수는 결과값으로 undefined를 반환해요! 

아래 코드와 출력 결과를 보고 확인할 수 있습니다.

function introduce(name){

    console.log(`나의 이름은 ${name}입니다.`);
}

console.log(introduce("송우든"));

 

또한, 함수 내에서 return문을 만나게 되면 즉시 종료를 의미하여 다른 문장들이 수행되지 않습니다.

function add(num1,num2){

	return num1 + num2; // 함수 종료!
	console.log("더하기"); // 리턴 뒤에 문장은 수행되지 않음!
}

add(5,4); // 9

 

# 함수의 매개변수

매개변수는 함수에 값을 받아오기 위해 사용합니다. 다른 말로는 파라미터, 인자라고도 부릅니다.

자바스크립트에서는 매개변수에 기본값을 설정해 줄 있는데, 기본값을 설정해주는 작업이 필요한 경우는 아래 코드와 같아요!

function introduce(name){
    console.log(`나의 이름은 ${name}입니다.`);
}

introduce();

 

함수의 매개변수가 제대로 전달되지 않았을 경우, 실행 결과로 나의 이름은 undefined입니다. 가 출력되는 문제가 발생합니다.

이 때, 함수의 매개변수로 기본값을 설정해주면 undefined 혹은 예상치 못한 값으로 처리되는 것을 방지할 수 있어요!

function introduce(name = "송우든"){
    console.log(`나의 이름은 ${name}입니다.`);
}

introduce(); // 출력 : 나의 이름은 송우든입니다.

 

위와 같은 방법 이외에도 다음과 같이 매개변수의 기본값을 설정해줄 수 있습니다.

function introduce(name){
    if(!name){
        name = "송우든";
    }
    console.log(`나의 이름은 ${name}입니다.`);
}

introduce();

 

# 함수명 예쁘게 짓기

변수의 이름이나 함수의 이름을 잘 짓는 것은 프로그래밍에서 중요한 부분입니다.

이름을 잘 정의하여 준다면 주석을 대체할 수 있고, 다른 개발자들도 쉽게 이해할 수 있다는 장점이 있습니다.

또한, 리팩토링이 쉽고 함수 이름만으로 어떤 동작을 하는지 쉽게 알 수 있습니다.

 

함수명은 가능한 간결하고 명확하게 작성해줘야 하며, 함수를 만들 때에는 한가지 기능만을 하는 함수를 만드는게 중요합니다! 

 

아래에 몇가지 예시를 적어보자면

어떤 값을 반환하는 함수를 작성할 때에는 함수 이름 앞에 get을 붙여서 만든다고 해요!

function getName(){
	return this.name;
}

 

또한, 어떤 값을 계산해야 하는 함수는 calc, 어떤 값을 생성하는 함수라면 create와 같은 단어를 붙여 작성하면 이해하기 쉽고 좋은 함수명이 된다고 해요!

function calcValue(n, m){
	return n + m;
}

 

 

 

 

 

 

참고 자료 및 사이트 : ko.javascript.info/intro