[JavaScript #3] Basic of JavaScript - 함수

Kayoung Kim·2021년 7월 14일
0

JavaScript

목록 보기
3/19
post-thumbnail

함수(Function)

  • 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록

함수 정의 vs 실행(호출)

  • 변수에 이름이 있듯, 함수도 이름이 있다. 함수 이름을 부르면, 함수 내에 있는 코드가 실행된다.
  • 함수를 정의하면 "이 함수는 이런 동작을 할거야~"라고 정해두는 것과 같다.
  • 함수를 불러 실행시키는 것을 "함수를 호출한다"고 한다.
  • 함수 이름은 checkCorrect다. 위와 같이 함수를 생성하고, checkCorrect();와 같이 호출한다.
  • ⚠️ 함수를 정의만 하고 호출하지 않으면 실행되지 않는다.
function checkCorrect() {
  let hi = "안녕하세요";
  
  return hi;
}
function checkCorrect() {
  let hi = "안녕하세요";
  
  return hi;
}

매개변수(parameter)

  • 함수 안에서 변수와 같은 역할을 하는 단위
  • 외부(인자)로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할을 한다.
  • 함수를 정의하면서 함수 선언식의 괄호() 안에 변수명(매개 변수)을 써주면, 함수가 호출될 때 값을 전달받을 때 매개 변수에 값이 정의된다.

인자(argument)

  • 어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수
  • 함수에서 매개변수를 넣어놓은 상태라면 호출시 인자로 전달한 값은 매개변수를 통해 사용 가능하다.
// doubleNumber 함수 선언식
function doubleNumber(myNumber) { // <- 호출시 전달받은 값을 myNumber 라는 변수명으로 함수 안쪽에서 사용하겠다.
  let myResult = myNumber * 2
  return myResult
}
// doubleNumber 함수 호출문
doubleNumber(3); // <- doubleNumber를 호출하면서 값 3을 전달해주겠다.

매개변수(parameter)는 '자리' 혹은' 변수의 이름. 인자(argument)는 그 자리에 들어갈 구체적인 값.

여러 인자

  • 함수에 인수가 한 개가 아닌 여러 개를 전달할 수 있음
function alertSuccess(month, name) {
  alert(month + "월의 당첨자는 " + name + "입니다.");
}

alertSuccess(3, "김개발");

수의 반환(return)

  • 모든 함수는 반환을 한다. 함수가 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고 다른 로직에 다시 사용할 수도 있는 것!
  • 함수에 return 키워드를 생략할 수 있지만, 함수는 계속 열일중.. 함수가 반환을 생략하면 undefined를 반환한다.
  • 함수를 호출해서, 변수에 저장하고 변수를 확인할 때는 console.log()를 쓴다.

함수에 데이터(인자) 전달하기

  • 함수를 호출할 때 데이터를 전달하고, 전달받은 데이터를 함수에 사용한다.
**1. 데이터를 전달 받는 함수의 정의**

	function alertSuccess(msg) {
  		alert(msg);
	}

**2. 함수의 호출(데이터 전달)**
	alertSuccess("김가나님 로그인 성공!");
	alertSuccess("박다라님 로그인 성공!");
	alertSuccess("김마바님 로그인 성공!");
	alertSuccess("박사아님 로그인 성공!");
**3. 데이터를 전달 받는 함수의 재정의**
중복을 줄이는 방법으로 함수 재정의하기.

function alertSuccess(name) {   
  alert(name + "님 로그인 성공!"); 
}
function alertSuccess(name) {   
  alert(name + "님 로그인 성공!"); 
}

**4. 함수의 호출(데이터 전달)**
alertSuccess("김가나");
alertSuccess("박다라");

⚠️ 함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안된다!

함수 내부에서 다른 함수 호출하기

function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price);
}

const result = calculateTotal(3500);
console.log(result);
  • calculateTotal 함수 내부에서 getTax를 호출했음. 함수가 실행되는 시점은 함수를 호출하는 순간(calculateTotal(3500))

0개의 댓글