[JS] 함수의 정의와 호출

mokyoungg·2020년 4월 27일

1. 함수의 정의

함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록입니다.

2. 함수의 호출

변수도 이름이 있듯, 함수도 이름이 있다.
함수 이름을 부르면, 함수 내에 있는 코드가 실행된다.
함수 이름을 부르는 것을 "함수를 호출한다"라고 표현한다.
함수를 호출할 때, 함수이름 뒤에 괄호()를 붙인다.

함수이름()

함수를 정의만 한 것으로는 함수 내부가 실행되지 않는다.
반드시, 함수를 호출하여야 실행이 된다.

3. 함수의 형태

function 함수이름() {
  let hi = "안녕" //함수 호출시 실행할 코드
}

function 키워드로 시작하여
함수 이름을 지어주고
함수를 알리는 괄호 ()를 열고 닫고
함수의 시작을 알리는 중괄호 { 열기
실행할 코드를 작성한다.(함수의 body)
return(반환) 할 것이 있다면 작성한다.
중괄호 } 닫기

4. 함수 데이터 반환하기(return)

모든 함수는 반환(return)을 한다.
모든 함수는 반환을 하지만, return을 생략할 수도 있다.

함수 내부에 return 키워드가 보이지 않으면 반환을 생략했다는 뜻이다.
함수가 반환을 생략하면 undefined라는 값을 반환한다.
함수가 반환을 생략하면 undefined라는 값을 반환한다.
함수가 반환을 생략하면 undefined라는 값을 반환한다.

다음 함수를 보면,

//A
function add (a, b) { 
  let value = a + b;
}
add(1, 2) // undefined

//B
function addR(a, b) {
  let value = a + b;
  return value
}
addR(a, b) // 3

A의 함수를 실행하면 undefined.
B의 함수를 실행하면 값을 준다.

아마 A의 함수 역시 계산은 했다.
그리고 value라는 변수에 3이라는 값을 할당했다.
그러나 여기서 끝난거다.
컴퓨터만 알고 있는거다.

B의 함수는 A의 함수와 같은 스탭을 밟았다.
그러나 A와는 달리 value를 return(반환) 해달라고 요청했다.
그러자 value 값을 보여주었다.

그러니까.. return은 이런거다.
왜 말 안했어?
안 물어봤잖아?

함수는 항상 데이터를 반환하기 때문에 변수에 저장할 수도 있고,
다른 로직에 사용할 수도 있다.

5. 매개변수와 인자

반환은 함수를 호출할 때 데이터를 '반환'하는 법이다.
반대로, 함수가 실행될 때 데이터를 '받는' 법도 있다.
(함수가 실행될때 우리가 함수에 데이터를 전달하는 방법)

함수의 괄호에 값을 입력하면 함수가 그 데이터를 받는다는 뜻이다.
이를 매개변!수! 라고 한다. 변수다. 매개 변수도 변수다.

function getName(name) {
  return name + '님"
}

위의 코드에서 name 부분이 매개 변수다. 변수. 변수.
이런식으로 함수를 정의한 뒤.
함수를 호출하려면 다음과 같다.

getName('부처')
console.log(getName('부처') // 부처님

'부처'는 매개변수에 할당되는 값이다. 이를 인자라고 부른다.

6. 함수에 데이터 전달하기(=인자 , argument)

다음 두 함수의 차이는?

// A
function hello() {
  alert("안녕하세요!");
} // 안녕하세요!

// B
function helloTo(name) {
  alert(name + "님 안녕하세요!");
} // name님 안녕하세요!

위의 A코드 호출시, 항상 "안녕하세요!" 라는 메시지만 나온다.
그러나 B코드를 호출하면, name님 안녕하세요라는 메시지가 나오는데
이 name은 함수가 전달받은 데이터이다.
이 데이터에 따라 함수의 결과는 다양하게 나올 수 있다.


helloTo("졸든") // 졸든님 안녕하세요.
helloTo("큄정흔") // 큄정흔님 안녕하세요 등등

B코드와 같은 함수는.
함수를 호출할 때 데이터를 전달하고,
전달받은 함수를 사용(호출)하면 된다.

단계별로 보면..

1. 데이터를 전달 받는 함수의 정의

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

2. 함수의 호출(데이터 전달)

alertSuccess("왼손은거들뿐") //왼손은 거들뿐이라는 데이터가 전달되고, alert 됨
alertSuccess("오른손은거들뿐") //

3. 데이터를 전달받는 함수의 재정

'손은거들뿐' 이 중복되니, 중복을 줄이는 방법으로 함수를 재정의하자.

function alertSuccess(msg) {
  alert(msg + "손은거들뿐");
}

4. 함수의 호출(데이터 전달)

alertSuccess("왼"); // 왼(사실 이건 변수의 할당된 값)손은 거들뿐

그러니까. 함수호출할 때 전달되는 데이터(왼/오른)가 인자다.

주의사항

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


fucntion alertSuccess(name) {
  let name = "박지성" // 인자로 받은 변수(name)에 새로운 값("박지성") 넣으면 안됨
                             //  인자에 전달되는 데이터는 함수 호출시 결정된다.
  altert(name + "님 화이팅!");
}

호출시,
Uncaught SyntaxError: Identifier 'name' has already been declared 이런 오류가 뜸