함수 선언
function ASDF() {
}
식으로 선언하고
ASDF() 로 함수를 호출하면 함수의 본문이 실행된다
@지역변수
함수 내에서 선언한 변수인 지역변수는 함수 안에서만 접근할 수 있다
@외부변수
함수 내부에서는 함수 외부의 변수에 접근, 수정할 수 있다
외부변수는 지역변수가 없는 경우에만 사용할 수 있으며
함수 내부에서 외부 변수와 동일한 이름을 가진 변수가 있다면 내부 변수에 접근하게 된다
외부변수는 내부변수에 가려져 값이 수정되지 않는다
함수 외부에 선언된 변수를 전역변수라고 하며 모든 함수에서 접근할 수 있다
하지만 변수에 연관되는 함수는 보통 지역변수로 사용하고 전역변수는 최소한으로 사용하는 것이 좋다
@매개변수
임의의 데이터를 함수 안에 전달할 수 있다
이를 인자(parameter)라고 부르기도 한다
함수의 매개변수에 전달된 값을 인수(argument) 라고 부른다
- 매개변수는 함수 선언 방식 괄호 사이에 있는 변수이다
(선언 시 쓰이는 용어) - 인수는 함수를 호출할 때 매개변수에 전달되는 값이다
(호출시 쓰이는 용어)
함수를 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined 가 된다
-> 이게 undefined 가 되지 않게 하려면 선언할 때
= 를 사용해 기본값을 설정해 주면 된다(default value)
%매개변수 기본값 평가 시점
JS에서는 함수를 호출할 때 마다 매개변수 기본값을 평가한다
if 문을 이용하거나 || 연산자를 활용해 함수를 선언한 이후 매개변수 기본값을 설정할 수 있다
if ( text === undefined) {
test = '기본값을 나중에 설정'
}
function ASDF(text) {
text = text || '빈 문자열' ;
}
@ 반환 값
함수를 호출했을 때 호출한 곳에 특정 값을 반환하게 한다
이 값을 반환 값( return value ) 라고 한다
지시자 return-> 함수 내에 어디서든 사용할 수 있고 함수 실행은 즉시 중단되고 호추한 곳에 값을 반환하게 된다
return 문이 없거나 지시자만 있고 () 가 없는 경우 undefined 를 반환한다( return -> return undefined 와 같은 동작)
return 과 값 사이에 줄바꿈을 하면 JS 는 자동으로 세미콜론을 추가하기 때문에 return undefined 로 처리된다
@ 함수 이름
함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 줘야 한다
- show -> 보여준다
- get -> 값을 반환한다
- calc -> 계산한다
- create -> 생성한다
- check -> 확인하고 불린값을 반환한다
이름이 언급되어 있는 동작만 수행하고 그 이외의 동작은 수행하면 안된다. 따라서 메세지를 띄우는 등의 동작이 들어있으면 좋지 않은 경우가 많다
$ 와 - 는 빈번이 쓰이는 함수이므로 기억하자
함수 표현식
JS 는 함수 옆에 괄호가 있어야만 함수가 호출된다
JS에서 함수는 값 이기 때문에 함수를 값처럼 취급할 수 있다
이처럼 함수 소스코드가 문자형으로 바뀌어 출력된다
위와 같이 함수를 asdf 와 func 를 괄호 없이 하면 복사할 수 있다
let func = adsf() 라면 func 는 asdf() 의 호출 결과가 저장되게 된다
@콜백 함수
함수 ask의 인수, showOk와 showCancel 을 콜백, 콜백함수라고 부른다
함수를 다른 함수의 인수로 전달하고, 필요하다면 인수에 전달한 함수를 호출하는 것이다
이처럼 매개변수 안에 직접 기입해 간출일 수 있다
@함수 표현식 vs 함수 선언문
선언문 -> function asdf(a,b) {
return a+b
}
표현식 -> let asdf(a,b) = function (a,b){
return a+b
}
함수 표현식은 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다. 따라서 그 이후부터 함수를 사용할 수 있다
~하지만 함수 선언문은 정의되기 전에도 호출할 수 있다~
(전역 함수 선언문은 스크립트 어디에 있느냐에 상관없이 사용할 수 있다)
(JS알고리즘 상 스크립트를 실행하기 전 준비단계에서 전역에 선언된 함수 선언문을 찾고 먼저 생성한다)
화살표 함수
화살표 함수를 통해 함수를 축약할 수 있다
함수의 인수가 하나밖에 없다면 괄호를 생략할 수 있고,
인수가 하나도 없다면 괄호를 생략할 수 없고 비워두면 된다
? -> 조건부 연산다, a ? b : c -> a 조건이 truthy 라면 b, false 라면 c를 반환한다
위처럼 화살표 연산자 옆에 중괄호를 사용하여 여러 줄로 구성된 함수를 만들 수 있다
new & 생성자 함수
@생성자 함수
일반 함수와 기술적인 차이는 없지만 두 관례를 따른다
1. 함수 이름 첫 글자는 대문자로 시작한다
2. 반드시 new 연산자를 붙여준다
new User(...) 의 동작 알고리즘
1. 빈 객체를 만들어 this 에 할당합니다
2. 함수 본문을 싱행한다. this 에 새로운 프로퍼티를 추가해 this 를 수정한다
3. this 를 반환한다
여기서 let user = new User("보라") 는 다음과 동일하게 동작한
( , 찍어주는 것에 주의하자)
이처럼 new User("보라") 뿐 아닌 혜종 등을 손쉽게 사용자의 객체로 만들 수 있어 유용하다
재사용 할 수 있다는 점에서 유용하다
재사용 할 필요가 없는 복잡한 객체의 경우에 코드를 익명 생성자 함수로 감싸주는 방법을 사용할 수 있다
재사용을 막을 수 있다
@new.target
new.target 프로퍼티를 사용하면 함수가 new와 함께 호출된것인지 아닌지 알 수 있다
일반적인 방법으로 호출했다면 undefined 를 반환하지만 new 와 함께 호출한 경우 new.target 은 함수 전체를 반환해준다
