TIL #21 함수(function)의 기초

JohnKim·2021년 3월 22일

JavaScript

javascript

목록 보기

8/27

function

프로그램을 만들다 보면 같거나 비슷한 동작이 생긴다.

함수를 사용하여 이런 동작들을 자주 사용하거나 여러 곳에서 사용하는 곳에 하나로 만들고 재사용한다면

중복되는 코드도 줄어들고 유지보수도 편해 질 것이다. .

  함수     함수명   매개변수             
function sayHello(name){
  console.log(`Hello,${name}`);
  
  sayHello(`Mike`);

함수의 구성이다.

함수명은 자유롭게 설정할 수 있으며

매개변수는 인수라고도 하고 없어도 되며 1개 또는 2개 이상도 사용가능하다.(2개 이상일 경우 쉼표, 로 구분한다.)

매개변수가 없는 함수


function showError(){
   alert('error!')
}
showError();

매개변수가 없는 함수이며 showError(); 를 통해 함수를 호출한다.

짧은 문장으로 사용할 수 있으며 여러곳에서 사용할 때 함수만 유지보수한다면

다른 호출에도 변경된 값이 적용 되기 때문에 매우 편리하다.

매개변수가 있는 함수


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

sayHello(`Mike`);
sayHello(`Tom`);
sayHello(`Jane`);

매개변수가 있는 함수 이다. 이런식으로 함수를 하나 만들고

매개 변수만 바꿔가며 사용할 수있어 중복을 줄여준다.

전역변수 지역변수

function sayHello(name){
  let msg = `Hello`;
  if(name){
    msg = `Hello,${name}`;
}
console.log(msg);
}

sayHello();

함수 안에 조건문을 넣어 사용할 수도 있다.

위의 예제에는 현재 호출된 함수안에

매개변수가 없기때문에 false로 받아드려서 결과 값은 "Hello" 이다.

주의 할 점은 let msg = Hello; 는 지역변수 이기 때문에 함수내부에서만 사용가능하다.

function sayHello(name){
  let msg = `Hello`;
  if(name){
    msg = `Hello,${name}`;
}
console.log(msg);
}

console.log(msg);

다음과 같이 함수내부의 지역변수를 호출하게 되면error가 발생한다.

let msg = `Hello`;
console.log(msg)

function sayHello(name){
  if(name){
    msg += `, ${name}`;
}
console.log(msg);
}
sayHello(`Mike`);     //"Hello, Mike"
console.log(msg);     //"Hello, Mike"

그러나 let msg ="Hello"; 를 함수 외부로 올려버리면 전역변수가 되기 때문에

함수내부와 외부에서 호출한 값모두 Mike를 호출하게 된다.

이런식으로 어디서나 접근할 수 있는 변수를 전역 변수라 한다.

그리고 함수 내부에서만 접근할 수 있는 변수를 그 함수의 지역변수라 한다.

let으로 전역변수가 지정되었을 때

함수내에서 동일한 이름의 변수를 let으로 지정해도 간섭받지 않는다.

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

function sayHello(name){
 let msg= "Hello"
console.log(msg + '  ' + name);
}
sayHello(`Mike`);     //"Hello Mike"
console.log(msg);     //"welcome"

코드전체에서 공통으로 바라봐야하는 변수를 제외하고는
지역변수를 사용하는 습관을 들여야 한다. 전역변수가 많아지면 관리가 힘들어진다.

기본값 매개변수 default 값 설정

기본값 함수 매개변수 (default function parameter)를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수를 기본값으로 초기화할 수 있습니다

매개 변수에 name = 'friend' 값을 입력하여

매개변수가 없는 함수를 호출하였을 때 default 값으로 "friend" 호출한다.

function sayHello(name = 'friend'){
 let msg= `Hello, ${name}`
console.log(msg);
}
sayHello();     	 //"Hello, friend"
console.log('Jane');     //"Hello, Jane"

return문


function getRectArea(width, height) {
  if (width > 0 && height > 0) {
    return width * height;
  }
  return 0;
}

console.log(getRectArea(3, 4));
// expected output: 12

console.log(getRectArea(-3, 4));
// expected output: 0