자바스크립트하면, 함수(function)가 빠질 수 없는 부분이다.
가장 중요한 핵심 개념이다.
1. 함수(Function)
중학교 때 처음 들어봤을 것이다.
함수의 정의는 두 집합 또는 변수의 관계를 성립하는 개념을 함수(function = 기능)라고 말한다.
그리고, "어떤 입력 값이 주어지면 결과를 내는 상자"라고 말할 수 있다.
함수를 왜 사용해? 라고 물어본다면,
이는 코드의 재사용성이라는 측면에서 매우 유용하기 때문이다.
동일한 작업을 반복적으로 수행을 해야한다면,
같은 코드를 굳이 여러 번 작성하는 것이 아니라
정의된 함수를 재사용하는 것이 효율적이다.
수학에서 말하는 함수는, 입력(Input)을 받아서 출력(Output)을 내보내는
일련의 과정을 정의한 것이다.
예시를 들자면, f(x, y) = x + y라는 함수를 정의하고 이 함수에
두 개의 입력 2, 5를 전달을 하면 함수는 정의된 일련의 과정,
즉 x + y를 실행하여 7을 출력하게 된다.
이처럼 함수는 마치 재료를 투입받아 제품을 생산하는 기계와
같다고 말할 수 있다.
2. 함수 구문
JavaScript 함수는 다음 구문으로 정의한다.
function 함수이름(매개변수) {
// 함수 내부에 코드 작성
}function 키워드는 JavaScript 엔진에 함수를 선언한다는 것을 알려준다.
함수 이름은 사용자가 임의로 정의할 수 있고,
의미있는 이름을 작성하는 것이 좋다.
함수 이름 규칙?
함수 이름 작성 규칙은 이름 작성 규칙과 유사하다.
1. 한 단어로 구성되어야 하고, 공백은 허용하지 않는다.
2. 알파벳(a-z, A-Z), 숫자(0-9), 특수문자(_,$) 조합으로 구성된다.
3. 변수와 마찬가지로, 숫자로 시작하는 함수 이름은 허용되지 않는다.
4. 예약 키워드를 사용할 수 없다.
3. 매개변수
매개변수(Parameters)는 선택 사항이다.
매개변수는 함수에 선언할 변수를 쉼표(,)로 구분하여 나열한 것이다.
매개변수는 함수를 사용할 때 값을 지정할 수 있다.
4. 함수 사용
함수를 선언한 후에 함수 이름 뒤에 소괄호( () )를 붙여서
함수를 사용(호출 또는 선언)할 수 있다.
// 함수 선언
function sayHello() {
console.log('안녕! JavaScript')
}
// 함수 사용
seyHello() // `안녕! JavaScript'5. 반환문
함수는 return 키워드를 사용해 "반환문(return statement)"을
설정할 수 있다.
function 함수이름(매개변수) {
return 반환값
}JavaScript 엔진은 함수가 사용될 때 return 키워드를 확인하면
실행을 중단하고 값을 반환한다.
function add(x, y) {
// 함수를 사용하면 반환되는 값
return x + y
// 이 코드는 무시된다
console.log('x + y = ', x + y)
}
add(9, 11) // 20생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의
식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.
함수 선언문을 의사 코드로 표현하면 다음과 같다.
let add = function(x, y) {
return x + y
}
console.log(add(2, 5)) // 7함수는 함수 이름으로 호출하는 것이 아니라,
함수 객체를 가르키는 식별자로 호출한다.
함수의 암묵적 반환 값?
명시적으로 return을 사용해 값을 반환하지 않으면,
undefined가 암묵적으로 반환된다.
5-1. 함수 정의
함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들,
그리고 반환할 값을 지정하는 것을 말한다.
그 중, 4가지 함수 정의 방식이 있다.
1. 함수 선언문
function add(x, y) {
return x + y;
}
2. 함수 표현식(익명 또는 무명함수)
let add = function(x, y) {
return x + y
}
3. Function 생성 함수
let add = new Function('x', 'y', 'return x+y')
4. 화살표 함수(ES6)
let add(x, y) => x + y;6. 매개변수와 인수
함수는 매개변수를 받을 수 있는데,
매개변수란 "함수에 선언하려는 변수"를 말한다.
각 매개변수는 쉼표(,)로 구분해야 한다.
function 함수이름(매개변수1, 매개변수2) {
// 함수 내부에 코드 작성
}매개변수는 함수 내부에서 사용될 수 있다.
(매개변수 = 함수 내부의 지역 변수)
function 함수이름(매개변수1, 매개변수2) {
console.log('첫번째 매개변수 값 = ', 매개변수1)
console.log('두번째 매개변수 값 = ', 매개변수2)
}매개변수는 사용하기 전에 값을 지정해야 한다.
따라서, 함수를 사용할 때 인수(arguments)라고 불리는 값을 전달할 수 있다.
함수이름('값1','값2')전달된 각 인수는 함수의 매개변수 순서에 맞춰 값이 할당된다.
function 함수이름(매개변수1, 매개변수2) {
console.log('첫번째 매개변수 값 = ', 매개변수1)
console.log('두번째 매개변수 값 = ', 매개변수2)
}
> 함수이름('값1','값2')
// 첫번째 매개변수 값 = 값1
// 두번째 매개변수 값 = 값27. 표현식
JavaScript에서 표현식(expression)은 전달되기 전에
평가되어야 하는 값으로 정의된다.
12 + 9
add(92, 73)예시를 들자면,
function sum(num1, num2) {
return num1 + num2
}
const result = sum(5, 10)
console.log(result) // 15숫자를 함수에 전달하면 즉시 사용할 수 있다.
표현식(ex: 21 + 13)을 전달할 때,
해당 표현식은 함수에 전달되기 전에 먼저 평가된다.
const result = sum(21 + 11, 10)
console.log(result)
// JavaScript 엔진 내부 처리 과정
// [단계 1] 표현식 평가 21 + 11 - 결과 값: 32
// [단계 2] sum(32, 10) 함수 호출 - 결과 값: 42함수를 호출해 반환 값을 다른 함수에 전달하는 경우,
값을 사용하기 전에 먼저 함수를 평가된다.
function multiply(num1, num2) {
return num1 * num2
}
const result = sum(multiply(21, 11), 10)
console.log(result)
// JavaScript 엔진 내부 처리 과정
// [단계 1] multiply(21, 11) 함수 호출 - 결과 값: 231
// [단계 2] sum(231, 10) 함수 호출 - 결과 값: 241일급객체가 무슨 말이야?
자바스크립트 함수를 배우다 보면,
일급 객체라는 말이 매우 생소해서 무슨 말인지
이해가 안될 수 있는데, 아래를 보면 조금이나마
이해가 될 수 있다.
1. 자바스크립트는 함수를 값처럼 변수에
할당할 수 있다.
2. 프로퍼티(속성)값이 될 수도 있고 배열의
요소가 될 수 있다.
이처럼 값의 성질을 갖는 객체를 "일급 객체"라 불린다.
쉽게 말해서, 함수가 일급 객체라 함은
함수를 값처럼 자유롭게 사용할 수 있다는 의미로
불리는 것이다.
8. 호이스팅
function 키워드를 사용해 함수를 선언하면
현재 코드 영역(Scope)의 맨 위로 끌어올려진다.
이와 같은 현상을 "호이스팅(Hoisting)"이라 불린다.
영역(또는 범위)에 대해 추후 설명을 할 예정이다.
여기서 호이스팅의 단순화를 위해서,
"모든 함수 선언을 파일 맨 위로 옮긴다"라고
의미로 이해해도 좋다.
사용자가 작성한 코드
sayHello()
function sayHello() {
console.log('안녕! JavaScrpit')
}JavaScript 엔진에서 처리된 코드
// JavaScript 엔진이 코드를 처리할 때,
// 함수 선언은 파일 맨 위로 끌어올려집니다.
function sayHello() {
console.log('안녕! JavaScrpit')
}
sayHello()JavaScript 코드 실행흐름의 이해
일반적으로 코드는 위->아래 방향으로 읽으며 실행된다.
하지만, JavaScript 엔진은 선언된 함수를 코드 맨 위로
끌어올려서 컴퓨터의 메모리에 먼저 기억을 해둔다.
함수 호이스팅은 JavaScript 엔진에서 작성된 코드 순서를
바꾸므로, 처음에 하게 되면 혼란스러울 수 있다.
하지만, 이러한 함수 호이스팅은 매우 유용하고
코드를 더 읽기 쉽게 만들어준다.
함수들을 파일 맨 아래 몰아놔도 문제가 없이
작동하기 때문이다. 코드가 읽기 쉬워지는 이유는
코드를 작성할 때, 중요한 흐름을 위해 깔끔하게 작성하고
처리를 위한 함수 선언은 파일 끝에 모아둘 수 있기에
읽기 쉽고 깔끔해진다.
// 코드 흐름 먼저 작성
startGame()
movePlayer()
endGame()
// ...
// 함수들은 파일 맨 끝에 배치
function startGame() {
// ...
}
function movePlayer() {
// ...
}
function endGame() {
// ...
}위 코드는 JavaScript 엔진에서 호이스팅하여 코드를 아래와 같이 변경한 후 처리한다.
// JavaScript 엔진에 의해 함수 선언이 끌어올려집니다.
function startGame() {
// ...
}
function movePlayer() {
// ...
}
function endGame() {
// ...
}
startGame()
movePlayer()
endGame()컴퓨터 CPU와 Memory
CPU와 메모리는 컴퓨터 관련하면 자주 나오는 용어이다.
입력 장치가 2진 데이터를 CPU에 보내게 되면,
CPU는 해당 데이터를 즉시 메모리에 저장하게 되어서
저장해서 처리하기 쉽게 만들어준다.
ex: 2+4 결과 요청 -> 2와 4를 각각 2진수로 변환 후,
0010, 0100 이라는 2진 데이터로 변경되어 처리되고,
CPU는 해당 데이터를 메모리에 저장한다.
쉽게 말해, CPU는 두뇌 담당 = 계산 및 명령 처리하고,
메모리는 기억 담당 = 데이터와 명령어를 기억한다.
여기서 호이스팅의 주의점을 말해보자면,
함수 표현식은 함수 선언과 달리, 호이스팅이 되지 않으므로,
각별히 주의를 해야 한다.
sayHello()
// ⚠️ 함수 표현식은 파일 맨위로 끌어 올려지지 않는다.
const sayHello = function() {
console.log('안녕! JavaScrpit')
}
이러한 특징은 나중에 배울 예정인,
"화살표(Arrow) 함수"에서도 동일하므로
중요한 개념이다.
다음에 다시 자세히 알아볼 예정이다.
출처
야무쌤 자바스크립트 강의
poiemaweb - 함수
javascript.info - funtcion
