JS/Javascript
[Javascript] 함수
ui-o
2023. 2. 4. 14:58
반응형
함수
- 특정 작업을 수행하는 코드의 집합
- 반복될 수 있는 작업을 정의하여 사용
기본 구조
- INPUT(parameter) > function() > OUTPUT
기본 문법
1. 함수의 선언
function 함수명(매개변수, 매개변수 ...){
문장
return 리턴값
}
2. 함수 실행
함수명();
Source
function add(a, b) { // 입력(a,b)
let sum = a + b; // 할일
return sum; // 출력
}
let result = add(1, 5);
document.write(result); // 6
함수의 종류
- 사용자 정의 함수 : 사용자가 필요한 기능을 직접 만든 함수
- 자바스크립트 코어 함수 : 자바스크립트 기본적으로 제공하는 함수 ex) pasreInt(), Math.random()..
선언식 함수 (일반함수)
- 기본적인 함수 선언 방법
- 이름이 있는 함수
- 재귀호출 시에도 사용
- 호이스팅 가능 (함수 선언전 호출해도 작동)
// [문법]
function 함수명() {}
let 함수명 = function(){} // 위와 동일한 기능
function 함수() {
console.log('함수');
}
console.log(typeof 함수); // function
• Sources
* 숫자 계산 기본 문법
function 함수(매개변수) {
let output = 초깃값;
처리
return ouput
}
// = a부터 b까지의 합
function sumAll(a, b) {
let output = 0;
for (let i = a; i <= b; i++) {
output += i;
}
return output;
}
console.log(sumAll(1,4)); // 10
// = a부터 b까지의 곱
function mul(a, b) {
let output = 1;
for (let i = a; i <= b; i++) {
output *= i;
}
return output;
}
console.log(mul(1, 3));
// 최소값 구하기
function min(array) {
let output = array[0];
for (const i of array) {
if (output > i) {
output = item;
}
}
return output;
}
newArr = [1, 2, 3, 4, 5];
console.log(min(newArr)); // 1
익명함수 (임의 함수)
- 이름이 없는 함수
- 익명함수 사용을 위해서는 변수에 담아 호출이 필요함
- 함수 자체가 식(Expression)이기 떄뮨에 함수를 변수에 할당 하거나 다른 함수의 매개변수로 사용 가능
- 익명함수는 반드시 선언 이후에 실행이 되어야 호출이 가능 (호이스팅 불가)
* 기본 문법
function (){}
// 변수에 함수를 할당
const print = function(){
console.log('print');
};
print(); // print
const printAgain = print;
printAgain(); // print
일반함수와 익명함수의 차이
- 일반함수의 경우 함수 자체를 출력 시에 콘솔에 함수의 이름이 붙어있음
화살표 함수
[Javascript] 화살표 함수(Arrow Function)
Arrow Function함수를 간략히 정의할 수 있음익명함수임function 키워드 대신 화살표를 사용 this를 묶는것이 가능new 연산자로 인스턴스 생성 불가new 생성자와 함께 호출 할 수 없다실행문법화살
u-pub.tistory.com
즉시실행함수 (IIFE)
- 함수 선언과 동시에 호출
- 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있음
- 한 번만 실행할 초기화 코드 사용에 유용
* 기본 문법
// + type01
(function(){
}());
// + type02
(function(){
})();
let result = (function (a, b) {
return a + b;
})(10, 20); // 전달인자를 넣어 즉시 실행
console.log(result); // 30
전개 연산자
- 배열을 전개해서 함수의 매개변수로 전달
- 배열 앞에 마침표 3개를 붙여 표혐
* 기본 문법
함수명(...배열)
function callA(...items) {
console.log(items);
}
const array = [1,2,3,4];
// 전개 연산자를 사용하지 않은 경우
callA(array) // [ [ 1, 2, 3, 4 ] ] - 배열 형태로 들어옴
// 전개 연산자를 사용한 경우
callA(...array) // [ 1, 2, 3, 4 ] - 숫자가 하나하나 들어옴
함수에서의 arguments 활용
- 함수에서 arguments를 활용하여 각 인덱스에 어떤 값을 가지고 있는지 파악이 가능
- 파라미터의 개수를 정확히 알지 못한 경우 스프레드 연산자에서 arguments 활용 가능
const arr = function (x, y, z) {
console.log(arguments); // [Arguments] { '0': 2, '1': 3, '2': 4 }
return x * y * z;
};
arr(2, 3, 4);
// Spread 연산자의 arguments 활용
const arr2 = function (...arguments) {
return Object.values(arguments).reduce((prev, cur) => prev + cur);
};
console.log(arr2(2, 3)); // ⇒ 5
함수의 파라미터 초깃값 설정
- '파라미터=값'을 사용하여 초기값 설정 가능
- 초기값으로 설정된 파라미터는 값을 전달받지 않으면 초기값을 사용하는데 이를 '디폴트 파라미터'라고 함
기본 문법
function 함수명(파라미터, 파라미터=초기값, 파라미터=초기값) {
}
임의의 파라미터를 가지는 함수 정의
- 정해지지 않은 파라미터의 개수를 가지는 함수의 경우 '나머지 파라미터(Rest Parameter) '...'을 이용하여 함수 정의
- 입력받은 파라미터는 인덱스를 이용하여 파라미터[0], 파라미터[1]의 방식으로 사용
기본 문법
// Function
function 함수명(...파라미터) {}
// Arrow Function
(...파라미터) => {}
// 인덱스를 지정하여 파라미터 사용
파라미터[0]
source
function calcSum(...prices) {
let result = 0
for(const value of prices) {
result +=value
}
return result
}
calcSum(1,2,3) // ⇒ 6
함수의 변수와 리턴처리
- 함수의 리턴값을 지역변수로 선언하여 반환 받을 경우 반드시 return 처리 필요 하며, 함수내에서만 변수호출 가능
- 함수의 리턴값을 전역변수로 처리시에 return처리를 하지 않아도 되며, 함수 외부에서도 결과값 반환 가능
함수 내 지역변수 리턴값을 함수 밖에서 호출하는 방법
- 전역변수 선언 ( 전역변수로 선언 시 함수 내에서 리턴처리가 없이 결과 출력 가능)
// = 내부함수 활용
function add(a, b) {
let sum = a + b;
return sum; // 지역변수 일 때는 반드싀 리턴 필요
}
console.log(add(1, 4));
//console.log(sum); // ERROR sum이 add 안에 선언된 지역변수라서 Error 발생
// + 해결방안 (sum을 전역변수로 선언)
let result // 전역변수
function add(a, b) {
result = a + b;
}
add(3,2)
document.write(result); // 5
함수 활용
매개변수 값으로 함수 이용
// hi1, hi2 는 일반 함수
function hi1() {
alert('hi');
}
function hi2() {
alert('hi-2');
}
// 매개변수 값으로 함수를 이용
function exec(a) { // a = hi1, a = hi2와 동일
a(); // 매개변수로 받은 함수를 호출
}
exec(hi1);
exec(hi2);
리턴값으로 함수 활용
$(function () {
function hi() {
document.write('hi');
}
$('#btnStart').click(hi);
});
리턴값으로 익명함수 활용
sestInterval(function(){
document.write('hi');
}, 1000)
리턴값으로 중첩함수 활용
function hi() {
// 중첩함수
function hello(name) {
document.write(`${name}님`);
}
return hello; // 리턴값으로 중첩함수를 넘기고 있음
}
//함수를 저장한 것이 아닌 hi()를 호출하고 그 리턴값으로 hello()를 받고 있음
// 중첩함수인 hello()를 받고 있는 것
const func = hi();
func('john'); // hello('john'); 동일
객체 방식으로의 함수 정의
let hi = new Function('name', 'document.write(name+"님")');
hi();
익명함수의 확장으로 함수 정의
- 재사용 목적이 아닌 다른 함수와의 충돌을 막기 위함
(function (name) {
document.write(name);
})('john');
반응형