오늘은 자바스크립트 함수에 대해 간단히 정리해 보려고 합니다!
💡함수(Function)
어떠한 작업을 수행하기 위한 독립적인 모듈
프로그램의 주요 구성 요소 중 하나를 의미
함수를 이용하면 유사한 동작을 하는 작업도 중복없이 처리할 수 있어요!
자바스크립트에서는 function 키워드를 사용하여 함수를 표현하는데요.
function 함수명(매개변수) {실행내용;} 위와 같은 형태를 함수 선언문이라고 하는데요! 함수명()형태로 호출이 가능합니다.
function introduce(name){
console.log(`나의 이름은 ${name}입니다.`);
}
introduce("송우든"); // call💡함수의 반환
함수는 무조건 값을 반환하는 성질을 가지고 있는데요!
값을 반환할 때에는 return 키워드를 사용하여 값을 반환합니다.
function introduce(name){
console.log(`나의 이름은 ${name}입니다.`);
}
console.log(introduce("송우든")); //return undefined
만약 함수에 return문이 사용되지 않거나 return;만을 사용한 경우, 결과값으로 undefined를 반환해요!
또한, 함수 내에서 return문을 만나게 되면 즉시종료를 의미하여 다른 문잘들이 수행되지 않습니다.
function add(num1,num2){
return num1 + num2; // 함수 종료!
console.log("더하기"); // 리턴 뒤에 문장은 수행되지 않음!
}
add(5,4); // 9💡함수의 매개변수
매개변수란, 함수에 값을 받아오기 위해 사용
파라미터 또는 인자라고도 부름
아래 코드는 introduce() 함수 안에 name이라는 매개변수를 받아와 실행하는 함수입니다.
function introduce(name){
console.log(`나의 이름은 ${name}입니다.`);
}
introduce("송우든");그렇다면 아래와 같이 매개변수를 전달하지 않고 실행하면 어떻게 될까요?
introduce()위와 같이 매개변수가 필요한 함수에 값을 전달하지 않는다면 실행결과로 나의 이름은 undefined입니다. 가 출력되는 문제가 발생합니다.
자바스크립트에서는 매개변수에 기본값을 설정해줌으로써 위와 같은 상황을 방지할 수 있는데요!
function introduce(name = "송우든"){
console.log(`나의 이름은 ${name}입니다.`);
}
introduce();또는 함수내에 조건을 통해 위와 동일한 작업을 해줄 수 있습니다.
function introduce(name){
if(!name){
name = "송우든";
}
console.log(`나의 이름은 ${name}입니다.`);
}
introduce();💡함수명 예쁘게 지어보기
변수의 이름이나 함수의 이름을 잘 짓는것은 프로그래밍에서 중요한 일부인데요!
이름을 잘 정의하여 준다면 주석을 대체할 수 있고, 다른 개발자들도 쉽게 코드를 이해할 수 있다는 장점이 있겠죠?
또한, 리팩토링이 쉽고 함수 이름만으로 어떤 동작을 할 수 있는지 쉽게 알 수 있습니다.
가능한 간결하고 명확하게!
한가지 기능만을 하는 함수를 만들자!
아래 몇가지 에시를 적어보자면,
어떤 값을 반환하는 함수를 작성할 때에는 함수 이름앞에 get을 사용합니다.
function getName(){
return this.name;
}어떤 값을 계산해야한다면, calcValue() 와 같은 이름을
어떤 값을 생성해야하는 함수라면, createValue()와 같은 이름을 사용해보면 좀 더 쉽게 이해할 수 있지 않을까요?
오늘은 간단하게 자바스크립트에서 함수의 사용법에 대해 간단하게 정리해보았습니다.
참고 자료 및 사이트
