스크립트 작성시 유사한 동작을 하는 코드가 여려곳에서 필요할 때가 있다.
함수는 프로그램을 구성하는 주요 구성요소이다. 함수를 이용하면 중복없이 유사한 동작을 하는 코드를 여러번 호출할 수 있다.
기존에 사용해본 prompt(message,default),alert(message), confirm(question)과 같은 것들은 자바스크립트 내장함수이다.
이번에는 함수를 어떻게 만드는지에 대해 공부한다.
함수 선언
->함수 선언 방식을 이룡하면 함수를 만들 수 있다.
이러한 함수 선언 방식을 사용하는 것을 함수 선언문 이라고 부르기도 한다.
function 함수명(){ alert("안녕"!); }
function키워드와 함수이름 , 소괄호로 둘러싼 매개변수를 써주면 함수를 선언할 수 있다. 위의 선언문은 매개변수가 없는 형태이다. 만약 매개변수가 여러개일 경우 각각을 콤마로 구분한다.
이러서 함수를 구성하는 코드들인 함수 본문을 중괄호로 감싸 붙여준다.
이렇게 새롭게 정의한 함수는 함수이름 옆에 소괄호를 붙여 호출(실행)할 수 있다.
함수명()
지역변수
함수 내에서 선언한 변수는 지역변수(local variable)이라고 한다. 이것은 함수 안에서만 접근이 가능하다.
외부변수
함수 밖에서 선언된 변수를 말한다.
함수 내부에서 이 외부변수에 접근도 가능하고, 수정할 수 도 있다.(재할당)
밖에서 변수를 선언하고, 함수 내에서 변수를 재할당하며 여기서 alert을 실행했다. 결과는 어떻게 나올까?
let userName = "Jhon"; function showMessage(){ userName = "Bob"; alert(message); }
여기서의 alert은 아직 합수가 실행되지 않았으니 실행되지 않는다
그럼 밖에서 alert(userName); 을 실행하면 무엇이 나올까?
아직 함수를 실행시키지 않고 useName이라는 변수를 가져오는 것이니 외부 변수로 선언된 "Jhon"이 출력된다.
이번에는 함수를 실행시킨 뒤, alert를 다시 실행해 보자
let userName = "Jhon"; function showMessage(){ userName = "Bob"; alert(message); } alert(userName); // 함수 호출 전. Jhon이 출력됨. showMessage(); alert(userName);// 함수가 실행된뒤 해당 함수안에서 Bob으로 재할당이 이루어짐.따라서 Bob이 출력됨. 그 전에 함수 안에 있는 alert이 작동.
함수가 실행이 되었으니 해당 함수 본문이 실행이된다.
함수의 본문에서 외부 변수에대한 재할당이 이루어져 값이 바뀌고, 바뀐 값이 함수 본문 alert에 적용된다.
이후 함수 밖의 alert이 실행되는데 함수 안에서 재할당이 이루어 졌으니 여기서도 바뀐값으로 alert이 작동된다.
외부변수는 지역변수가 없는 경우에만 사용할 수 있다.
함수 내부애 외부 변수와 동일한 이름을 가진 변수가 선언되었다면 내부 변수는 외부변수를 가린다.
(같은 변수가 함수 내부와 외부에 적용되어있다면 내부의 것이 우선시 된다.)
이렇게 외부에 선언된 변수를 전역변수라고 한다.
매개변수
매개변수는 임의의 데이터를 함수안에 전달하기 위해 존재한다.
매개변수는 '인자'라고 불리기도 한다.
function showMessage(from,text){ alert(from + ":" + text); } showMessage('Ann',Hello'); showMessage('Ann','What's up');
함수를 호출하게되면 안에 전달되는 인자는 지역변수 from과 text로 각 순서에 맞게 복사되어 들어가게된다. 그 후, 함수는 지역변수에 복사된 값을 사용한다.
함수의 매개변수를 인자라고 부르기도 한다고 했지만 정확히는 매개변수에 전달된 값을 인수라고 부ㅜ른다.
- 매개변수는 함수선언시 소괄호 안에있는 변수를 말한다.
- 인수는 함수를 호출 시 매개변수에 전달되는 값이다. 함수를 호출시에 인수를 전달하지 않으면 그 값은 undefinedrk ehlsek.
매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 함수를 선언할 때 =을 사용해 기본값을 설정해주면된다.
function showMessage(from,text = "나는 기본값만있음"){ alert(from + ':' + text); } showMessage("Ann");
여기서 두번째 매개변수에 값이 전달되는것이 없으나 기본값을 넣어주었기에 설정해준 기본값이 할당되게 된다.
매개변수에 값을 전달하더라도 그 값이 undefined와 엄격히 일치한다면 기본값이 할당된다.
복잡한 표현식(함수 등)도 기본값으로 설정이 가능하다.
기본값은 매개변수에 인수를 넣어주지 않았을때(해당하는 매개변수가 없을때) 호출된다.
오래된 자바스크립트에는 매개변수 기본값 관련 구문이 없었다.
오금에도 오래된 스크립트에는 매개변수 기본값 설정 관련 코드를 접할 수 있다.
구식코드에서는 매개변수값이 undefined인지 명시적으로 확인하고 일치하는 경우에는 기본값을 넣어주는 방식으로 설정을 할 수 있다.
if(text ===undefined){
text = 'no text given';
}이방법 말고도 논리연산자 || 을 사용해 매개변수 기본값을 사용하는 방법도 있다.
text = text || 'no text given';이렇게 함수를 선언할 때가 아니라 선언 이후 매개변수 기본값을 설정하는 것이 적절한 경우도 있다.
이럴때는 함수 호출 시 매개변수를 undefined와 비교하여 매개변수가 전달되었는지 확인한다.
이때에도 if문 이나, 논리연산자를 사용할 수 있다.
논리연산자 외에도 모던 자바스크립트 엔진이 지원하는 nullish병합 연산자 ??를 사용할 수도 있다.
반환값
함수를 호출했을 때 호출한 곳에 특정값을 반환하게 할 수 있다.
이때 이 반환값을 return value라고 한다.
함수 안에 지시자 return 을 사용해 실행하다가 return 을 만나면 함수 실행은 중단되고 함수를 호출한 곳에 값을 반환한다.
함수 하나에 여러개의 return 이 올 수도 있다. (if문을 사용하는 경우 조건에따라 return값이 달라짐을 표현할 때)
return 문이 없거나 return 지시자만 있는 함수는 undefined를 반환한다.
함수를 만드는 방식은 많다.
선언식 뿐만아니라 선언식을 화살표 형식으로 만드는 화살표함수
let answer = ()=>{...}표현식으로 만드는 함수 표현식도 있다.
let answer = function (){...}
