[JavaScript] 함수

이 글은 혼자공부하는 자바스크립트(저자 : 윤인성)의 책 내용과 유튜브 동영상을 참고하여 개인적으로 정리하는 글임을 알립니다.

---

익명 함수

함수에 이름이 없어서 익명함수라고 한다.

일반적으로 함수를 선언할 때 함수명을 지정하지만, 익명 함수는 그렇지 않다.

보통 변수에 할당되거나 다른 함수 내에서 사용되어 일회성으로 실행할 때 유용하게 활용된다.

let 익명함수 = function() {
    console.log("이 함수는 익명 함수입니다.");
};

익명함수() // 익명함수 호출하려면 변수명을 사용

프로시저 함수
프로시저 함수란 특정한 결과를 반환하지 않고 단순히 작업을 수행하는 함수를 가리킨다.

 

선언적 함수

선언적 함수는 일반적인 함수 선언 방식으로 정의된 함수를 가리킨다.

함수를 선언할 때 사용되는 표준적인 방법이며, 함수 이름을 사용하여 함수를 선언하고, 필요한 경우 매개변수를 지정하고 함수 내용을 구현한다.

function add(a, b) {
    return a + b;
}

add(3, 4) // 함수 호출

 

매개변수

나머지 매개변수(가변 매개변수)

function func1(...etc){
	let sum = 0;
	for(const i of etc){
  	sum += i;
  }
  return sum;
}
  
console.log(func1(1,2,3,4,5,6,7,8,9,10)) //etc[] = 1~10

전개 연산자
자바스크립트는 배열을 전개해서 함수의 매개변수로 전달해주는 전개 연산자를 제공한다.

함수명(...배열)​

전개 연산자를 사용하면 함수 파라미터에 배열값을 전달할 때 함수명(arr[1], arr[2]...) 이런식으로 전달할 필요가 없어진다.

 

일반 매개변수와 나머지 매개변수 조합

function func2(a, b, ...etc) {
    let sum = 0;
    sum += a;
    sum += b;
    for(const i of etc){
      sum += i;
  }
  return sum;
}

console.log(func2(1,2,3,4,5,6,7,8,9,10)) //a = 1, b = 2, etc[] = 3~10

 

기본 매개변수

function func3(a, b, c = 3){
    return a + b + c
  }
  console.log(func3(1, 2)); // 1 + 2 + 3 = 6, c에 매개값이 안들어오면 기본으로 3이 됌

 

 

콜백 함수

callThreeTimes(print)로 콜백함수를 호출하면, callThreeTimes()의 매개변수에 print() 함수가 전달된다.

callThreeTimes() 내부의 for문에서 callThreeTimes()의 매개변수로 들어온 함수가 호출된다.

즉, 매개변수로 들어온 print() 함수가 호출된다.

 

콜백 함수를 활용하는 함수

• forEach() : forEach()메서드는 주어진 함수를 한번씩 각각의 array 요소들에게 실행한다.
• map() : 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어낸다.
• filter() : 주어진 function에 속한 조건을 통과한 요소들을 새로운 배열로 반환한다.

 

forEach()

let 배열 = [1, 2, 3, 4, 5];

배열.forEach(function(요소) {
  console.log(요소);
});

 

let 배열 = ['사과', '바나나', '딸기'];

배열.forEach(function(요소, 인덱스) {
  console.log(`인덱스 ${인덱스}: ${요소}`);
});

 

map()

let 숫자들 = [1, 2, 3, 4, 5];

let 제곱된숫자들 = 숫자들.map(function(요소) {
    return 요소 * 요소;
});

console.log(제곱된숫자들); // [1, 4, 9, 16, 25]

 

filter()

let 숫자들 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let 짝수들 = 숫자들.filter(function(요소) {
    return 요소 % 2 === 0;
});

console.log(짝수들); // [2, 4, 6, 8, 10]

 

화살표 함수(=>)

콜백 함수를 쉽게 입력하고자 화살표 함수라는 함수 생성 방법이 있다.

화살표 함수는 function 키워드 대신 => 를 사용한다.

 

forEach()

let 숫자들 = [1, 2, 3, 4, 5];

숫자들.forEach(요소 => {
    console.log(요소);
});

 

map()

let 숫자들 = [1, 2, 3, 4, 5];

let 제곱된숫자들 = 숫자들.map(요소 => {
    return 요소 * 요소;
});

console.log(제곱된숫자들);

 

filter()

let 숫자들 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let 짝수들 = 숫자들.filter(요소 => {
    return 요소 % 2 === 0;
});

console.log(짝수들);

 

 

타이머 함수

특정 시간마다 또는 특정 시간 이후에 콜백 함수를 호출할 수 있는 타이머 함수들이 있다.

함수 이름	설명
setTimeout(함수, 시간)	특정 시간 후에 함수를 한 번 호출
setInterval(함수, 시간)	특정 시간마다 함수를 호출

 

setTimeout()

setTimeout(function() {
    console.log("일정 시간 후에 실행됩니다.");
}, 3000); // 3초 후에 실행됩니다.

clearTimeout(timeoutId); // setTimeout()이 취소되어 실행되지 않습니다.

 

setInterval()

let intervalId = setInterval(function() {
    console.log("일정 시간마다 실행됩니다.");
}, 2000); // 2초마다 실행됩니다.

clearInterval(intervalId); //intervalId 취소

 

 

즉시 호출 함수

함수를 선언하자마자 즉시 실행되는 함수이다.

(function() {
    // 여기에 코드 작성
})();

 

(function() {
    let 내부변수 = '비공개';

    function 내부함수() {
        console.log(내부변수);
    }

    내부함수(); // 내부함수는 내부변수에 접근할 수 있습니다.
})();

console.log(내부변수); // 오류! 내부변수는 IIFE 외부에서 접근할 수 없습니다.

 

엄격모드

엄격 모드(strict mode)는 JavaScript 코드를 더 엄격하게 해석하여 오류를 줄이고 코드 품질을 향상시키는 모드이다.

이 모드를 사용하면 일부 예상치 못한 동작을 방지하고 코드를 더 예측 가능하게 만든다.

엄격 모드를 활성화하는 방법은 코드의 최상단에 'use strict'; 를 추가하는 것이다.

<script>
    (function() {
      'use strict'
      //코드 작성
    })();
</script>

const 나 let을 생략해도 상수나 변수 같은 것들을 사용 가능한데, 이는 많은 위험을 내포하고 있기 때문에 엄격모드가 생겼다.