JS 기초(2)에 이어서.
함수
유사한 동작을 하는 코드를 여러곳에서 사용하기 위해 함수를 만들어두면, 중복없이 코드를 관리하고 효율적으로 사용할 수 있다. alert(), prompt() 같은 내장함수 외에도 직접 함수 선언방식이나 함수 표현식을 사용하여 원하는 함수를 만들 수 있다.
함수 선언과 함수 표현
함수 선언문(Declaration)
function greetings() {
console.log('hi!');
}
greetings(); // greetings 호출(=실행)*함수명 옆에 반드시 ()괄호가 붙어야 실행된다
- 함수 선언문은 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
- 함수 선언문은 그것이 정의되기 전에도 호출할 수 있다.(호이스팅 참고)
- 함수 선언문은 그것이 선언된 코드 블록 안에서만 유효하다.(블록 밖에서 호출하면 not defined 에러 발생)
함수 표현식(Expression)
let greetings = function() {
console.log('hi!');
}
greetings();
- 기명 함수 선언과 동시에 변수에 할당한다.
- 표현식이나 구문 구성(Syntax construct) 내부에 생성된다. 즉 표현식의 일부로 존재하게 된다.
- 실제 실행 흐름이 해당 함수에 도달했을때 함수를 생성한다. (이 시점부터 해당 함수를 할당하거나 호출할 수 있다.)
- 함수 표현식은 그것이 선언된 코드 밖에서도 호출할 수 있다.
선언방식과 달리 표현식으로 만든 함수는 다른 함수의 매개변수로 사용할 수 있다. 이를 콜백 함수라한다.
지역 변수(Local Variable)
함수 내에서 선언하여, 해당 함수 안에서만 접근할 수 있는 변수.
전역 변수(Global Variable)
외부 변수(Outer Variable)라고도 한다. 함수 내부에서 해당 함수 바깥에 있는 변수에 접근할 수 있다. 접근 뿐만아니라 수정도 가능하다.(권장되지 않음)
*접근하려는 외부 변수와 같은 이름의 변수가 내부(지역)에도 있다면, 지역 변수에 가려져 외부 변수에 접근할 수 없다.
프로젝트 전반에 사용되는 데이터가 아닌 이상 전역 변수는 잘 사용되지 않는 편이다.
호이스팅(Hoisting)
선언부를 유효범위 최상위로 끌어올리는 현상. var 키워드로 만든 변수(함수)와 함수 선언문은 호이스팅되고, 표현식은 호이스팅 되지 않는다.
코드가 길고 복잡해지면 호이스팅 현상을 활용해 가독성을 높이는 경우가 있다.
- 자바스크립트는 스트립트를 실행하기 전, 전역에 선언된 함수 선언문을 찾고 생성한다. 이 작업이 모두 끝나면 그제서야 스크립트를 실행한다.
- 표현식으로 만들어진 함수는 이후에 자바스크립트가 코드를 읽어가면서 순차적으로 생성된다.
❗주의
-
전역에 선언된 변수(var 키워드 사용한)와 함수 중 어떤 것이 더 먼저 호출될까? ➡ 변수
-
값이 할당되어 있지 않은 변수와 같은 이름의 함수선언이 되어있는 경우, 함수 선언문이 변수를 덮어쓴다.
var user1 = "hyun"; var user2; function user1() { console.log('user1 Function') } function user2() { console.log('user2 Function') } console.log(typeof user1); // string console.log(typeof user2); // function
반환 및 종료
return키워드를 사용해 함수 실행 결과로 얻은 데이터를 밖으로 반환할 수 있다. return 키워드는 즉시 값을 반환하고 함수의 실행을 종료한다.(이후의 코드는 무시됨)
*return 키워드를 사용하지 않으면 undefined가 반환된다.
function greetings() {
return 'hi!';
}
console.log(greetings()); // hi!화살표 함수(Arrow function)
익명의 함수 표현식을 간결하게 축약해서 사용할 수 있다.
let sum = function(a, b) {
return a + b;
}
// 위의 코드를 화살표 함수로 축약 ↓
let sum = (a, b) => a + b;-
조건부 연산자
?와 함께 사용하기 좋다. -
인수가 없을 땐 괄호 안을 비워두는데, 이때 괄호는 생략할 수 없다.
let sum = () => a + b; -
this를 가지지 않는다. (this를 사용하면 외부 렉시컬 환경에서 찾는다.)
-
arguments를 지원하지 않는다.
-
new 키워드와 함께 호출할 수 없다.
즉시실행함수(IIFE)
Immediately-Invoked Function Expressions. 함수 표현식이 만들어짐과 동시에 바로 실행 된다.
(function() {
let greetings = 'hi!'
console.log(greetings); // hi!
})(); // 만들어지자마자 실행하기위해 () 덧붙임자바스크립트에서 function 키워드를 사용하는 것은 함수 선언문을 만들겠다는 뜻인데, 즉시실행함수는 선언문으로는 만들 수 없다.(선언문은 만듦과 동시에 호출할 수 없음)
그래서 함수를 ()괄호로 감싸 자바스크립트가 표현식으로 인식할 수 있도록 만들어줘야한다.
*평소 자바스크립트 코드 끝에 ;를 따로 안붙이는 경우 혹시 모를 오류를 미연에 방지하기위해 즉시실행함수 첫 부분에 ;를 붙여주기도 한다.
- 전역 범위의 변수 오염가 오염되는 것을 막을 수 있다.
- 함수 외부에서 내부 변수에 접근하는 것을 차단하기위한 용도로도 쓰인다.
즉시실행함수의 패턴들
;(() => {})() // (F)()
;(function () {})() // (F)()
;(function () {}()) // (F())
;!function () {}() // !F()
;+function () {}() // +F()콜백(Callback)
함수의 인수로 사용되는 함수.
*무언가를 비동기적으로 수행하는 함수는, 함수 내 동작이 모두 처리된 후 실행되어야 하는 함수가 들어갈 콜백을 인수로 반드시 제공해야한다.
const a = callback => {
callback()
console.log('A')
}
const b = () => {
console.log('B')
}
a(b)
// 'B'
// 'A'출처
https://ko.javascript.info/function-basics
패스트캠퍼스 박영웅 강사님 강의
