이번에는 JS에서 자주 사용하는 함수들 몇 가지를 짚고 넘어가겠습니다.

그 전에 자바스크립트에서의 함수 선언 방법과 종류 그리고 콜백 함수가 무엇인지 가볍게 알고 넘어가겠습니다.

함수 선언 방법

일반 함수

자바스크립트에서 일반 함수는 function 을 사용해서 함수를 선언합니다.

일반 함수는 함수 선언식과 함수 표현식으로 함수를 정의할 수 있다.

둘의 차이가 있는데 이를 한 번 알아보겠습니다.

함수 선언식

함수 선언식은 자바스크립트에서 함수를 선언하는 가장 기본적인 방법입니다.

아래와 같은 방식을 함수 선언식이라고 합니다. 아마 익숙하신 분들도 계실 것 같아요

function hello() {
  console.log("Hello");
}

함수 선언식은 function 키워드를 써주고, 함수의 이름을 써줍니다.

이 함수를 호출하려면 우리가 정한 이름으로 호출할 수 있습니다.

hello();

함수 선언식으로 작성된 함수는 호이스팅이 됩니다.

호이스팅은 함수의 선언을 코드의 최상단으로 끌어오는 것을 말합니다.

그래서 코드 상에서 함수를 선언하기 전에 hello() 를 먼저 호출 할 수 있습니다.

hello();

function hello() {
  console.log("Hello");
}

위처럼 작성해도 잘 작동합니다.

함수 선언식으로 함수를 정의할 때는 함수의 이름을 꼭! 반드시! 적어주어야 합니다.

그래서 함수 선언식의 방법으로는 익명 함수를 만들 수 없습니다.

익명 함수는 함수의 이름을 정의하지 않은 함수를 말합니다. 그래서 함수의 이름이 없습니다.

(익명 함수의 필요성은 뒤에서 차차 이야기 하겠습니다.)

함수 선언식의 방식으로는 익명 함수를 만들 수 없습니다.

그러면 어떻게 할까요?

함수 표현식의 방식으로는 익명 함수를 만들 수 있습니다!

함수 표현식

먼저 함수 표현식으로 함수를 어떻게 정의하는지 먼저 보고 시작하겠습니다.

const hello = function () {
  console.log("hello");
};

되게 뭔가 많이 이상해졌어요.

하나씩 짚어볼게요.

먼저 함수 표현식 또한 function 키워드를 사용하여 함수를 정의합니다.

다만, 함수 표현식을 이용한 방법에서는 함수의 이름을 정의하지 않아도 됩니다.

위에서 보면 저는 function 키워드 다음에 함수의 이름을 작성하지 않았습니다.

(무조건 안 적어야 하는 것이 아니라, 작성을 해도 무방합니다.)

이를 익명 함수라고 합니다. 함수의 이름이 있다면 네임드 함수, 없다면 익명 함수라고 합니다.

그리고 위 코드를 보면 익명 함수를 선언하면서 바로 hello이라는 변수에 할당하고 있습니다.

const hello = function () {
  console.log("hello");
};

hello();

우리는 hello 라는 변수에 익명 함수를 할당해 주었기 때문에 변수의 이름을 통해서 함수를 호출할 수 있습니다.

마지막으로 함수 표현식으로 선언한 방식은 호이스팅이 되지 않습니다.

따라서 함수의 호출을 함수의 선언보다 먼저 하면 안됩니다.

화살표 함수

화살표 함수는 함수를 정의하는 또 다른 방법입니다.

방금 전에 배웠던 함수 표현식을 더 간단하게 작성하도록 도와줍니다.

화살표 함수는 아래와 같이 선언합니다.

const hello = **() => {
    console.log("hello");
}**

이제 function 키워드를 사용하지 않아도 함수를 선언할 수 있게 되었습니다.

위 코드에서 파란색 하이라이트 && 볼드체 된 부분이 화살표 함수입니다.

화살표 함수 또한 이름이 없는 익명 함수입니다. 따라서 이전에 함수 표현식에서 했던 방법처럼 변수에 할당해주면 변수의 이름을 통해서 함수를 호출할 수 있습니다.

const hello = **() => {
    console.log("hello");
}**

hello();

좀 더 알아보기
여기서는 화살표 함수의 return 에 대해서 좀 더 알아볼까 합니다.
먼저 아래와 같은 화살표 함수가 있다고 하겠습니다.지금 보면 함수는 딱 1줄만 수행하고 있습니다. 이러한 상황에서 화살표 함수는 이걸 더 간결하게 작성할 수 있습니다.
여기서 중괄호를 없에서 return 키워드도 없앨 수 있습니다.이렇게 작성하면 return 키워드를 작성하지 않아도 표현식의 결과가 return 됩니다.
이전에 살펴본 hello() 함수도 중괄호를 없앨 수 있습니다.
const hello = () => console.log("hello");
const calculator = (a, b, c) => a * b * c;
const calculator = (a, b, c) => { return a * b * c; };

콜백 함수

함수는 매개 변수로 여러가지를 받을 수 있습니다.

숫자, 문자열, 객체, 배열, … 많습니다.

여기서 한 가지 더 있는데 함수는 함수를 매개 변수로 받을 수 있습니다.

이렇게 다른 함수의 매개 변수로 전달되는 함수를 콜백함수라고 합니다.

그리고 콜백함수는 함수를 전달 받은 함수에 의해 호출됩니다.

이번에도 간단한 예제를 통해서 콜백함수를 알아봅시다.

function hello(x) {
  x();
}

function niceToMeetU() {
  console.log("Nice to meet you");
}

hello(niceToMeetU);

위 코드에서는 콜백 함수로 niceToMeetU 라는 함수가 hello 라는 함수에 전달되고 있습니다.

hello 함수 내부에서는 매개 변수로 전달받은 niceToMeetU 라는 콜백 함수를 x 라는 함수로 받고 있습니다.

x 는 함수이기 때문에 함수를 호출하는 방식으로 hello 함수 내부에서 x라는 함수를 x() 로 호출하였습니다.

hello 라는 함수를 호출할 때 niceToMeetU 라는 콜백 함수를 매개 변수로 전달해주었기 때문에 x 에 niceToMeetU 라는 함수가 들어갈 것입니다. 이후에 hello 함수 내부에 있는 코드가 실행되는데, 여기서 x() 로 함수를 호출하고 있습니다.

이렇게 실수 할 수도?

function hello(x) {
  x();
}

function niceToMeetU() {
  console.log("Nice to meet you");
}

hello(niceToMeetU);

위 코드를 보면 hello 함수를 호출할 때 저는 niceToMeetU 콜백함수의 이름만 적어주었습니다.

하지만 아직 익숙하지 않다면 niceToMeetU() 처럼 괄호까지 붙여버리는 실수를 할 수도 있어요.

function hello(x) {
  x();
}

function niceToMeetU() {
  console.log("Nice to meet you");
}

hello(niceToMeetU());

여기서 소괄호를 붙여버린다면 niceToMeetU 함수가 저기서 바로 호출이 되어버립니다. 이렇게 되면 결국 함수 자체를 매개변수로 전달하는 것이 아니라 함수의 return 값을 전달하게 됩니다.

위 코드에서는 niceToMeetU 의 return 값이 없습니다. 따라서 전달하는 값은 undefined가 됩니다.

만약 niceToMeetU 의 명시적인 다른 return 값이 있었다면 그 값을 hello 에 전달할 것입니다.

여기서 코드를 더 줄일 수 있다?

function hello(x) {
  x();
}

function niceToMeetU() {
  console.log("Nice to meet you");
}

hello(niceToMeetU);

위 코드는 지금까지 살펴본 코드입니다.

사실 여기서 코드를 더 줄일 수 있어요.

hello 의 콜백 함수를 전달하기 위해서 niceToMeetU 라는 새로운 함수를 정의하였지만, hello 의 소괄호 안에서 함수 자체를 써버릴 수도 있어요.

function hello(x) {
  x();
}

hello(function niceToMeetU() {
  console.log("Nice to meet you");
});

위처럼 전달할 수 있어요.

사실 더 줄일 수 있어요.

위에서 보면 콜백 함수가 전달되고 hello 는 x 라는 이름으로 함수를 사용하고 있습니다.

그러면 굳이 제가 콜백 함수의 이름까지 정해주고 전달할 필요가 있을까요??

function hello(x) {
  x();
}

hello(function () {
  console.log("Nice to meet you");
});

그래서 콜백 함수로 전달하는 함수의 이름을 적어주지 않은 익명 함수를 콜백 함수로 전달하는 것이 가능합니다.

사실 여기서 더 간단해질 수도 있어요.

방법은 화살표 함수를 이용하는 것입니다.

위에서 살펴본 두 방법은 일반 함수를 콜백 함수로 전달했습니다.

하지만 화살표 함수도 콜백 함수로 전달할 수 있겠죠.

function hello(x) {
  x();
}

hello(() => {
  console.log("Nice to meet you");
});

아주 마음에 들게 바뀌었어요.

콜백 함수는 “다른 함수”의 매개변수로 전달되기 때문에, 궁극적으로 콜백 함수의 실행을 제어하는 것은 그 콜백을 전달받은 함수입니다.

이 "다른 함수"는 자신의 내부 로직에 따라 콜백을 실행할 수 있으며, 콜백 실행 시점에 자신이 생성한 값이나 결과를 인자로 넘길 수도 있습니다.

이처럼 콜백 함수는 작업의 순서를 제어하거나, 특정 작업이 끝난 뒤에 실행되어야 할 로직을 정의하는 데 매우 유용합니다.

배열 메소드

forEach(callbackFn)

각 배열 요소에 대해 제공된 함수를 한 번씩 실행합니다. 반환값은 없습니다.

const arr = [1, 2, 3];
arr.forEach((num) => {
  console.log(num * 2);
});
// 출력: 2, 4, 6

map(callbackFn)

배열의 각 요소를 변형하여 새로운 배열로 반환합니다.

const nums = [1, 2, 3];
const doubled = arr.map((num) => num * 2);

console.log(doubled); // [2, 4, 6]

filter(callbackFn)

조건을 만족하는 요소만 모아서 새 배열로 반환합니다.

const nums = [1, 2, 3, 4, 5];
const evenNums = nums.filter((num) => num % 2 === 0);

console.log(evenNums); // [2, 4]

reduce(callbackFn)

배열의 요소들을 누적하여 하나의 값으로 만듭니다.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // 10

reduce 는 콜백 함수의 인자로 accumulator 와 currentValue 를 받습니다. 추가적으로 accumulator의 초기값으로 initialValeu 를 optional하게 받습니다.

accumulator: 콜백 함수의 반환값을 누적합니다. 콜백 함수의 이전 반환값이나 콜백 함수의 첫 번째 호출이면서 initialValue 가 제공된 경우에는 initialValue 의 값을 가집니다.
currentValue: 처리할 현재 요소를 말합니다.
initialValue: 콜백 함수의 최초 호출에서 첫 번째 인수에 제공되는 값을 말합니다.

find(callbackFn)

배열에서 특정한 요소를 찾을 때 사용합니다.

const users = [{ id: 1 }, { id: 2 }, { id: 3 }];
const user = users.find((user) => user.id === 2);

console.log(user); // { id: 2 }

첫 번째로 찾은 요소를 반환합니다.
만약에 찾지못하면 undefined를 반환합니다.

findIndex(callbackFn)

배열에서 조건을 만족하는 첫 번째로 찾은 요소의 인덱스를 반환합니다.
없으면 -1 를 반환합니다.

const nums = [10, 20, 30];
const idx = nums.findIndex((num) => num === 20);

console.log(idx); // 1

includes(callbackFn)

요소가 있는지 여부를 판단합니다.
있으면 true , 없으면 false 를 반환합니다.

const fruits = ["사과", "배"];
console.log(fruits.includes("배")); // true
console.log(fruits.includes("복숭아")); // false

push(element)

배열의 끝에 요소를 추가합니다.

const arr = [1, 2];
arr.push(3); // [1,2,3]

pop()

배열의 마지막 원소를 제거하고 반환합니다.

const arr = [1, 2, 3];
const last = arr.pop();

console.log(arr); // [1, 2]
console.log(last); // 3

slice(start, end)

<aside>

start: optional

end: optional

</aside>

배열의 일부를 복사합니다 **(원본은 유지!)**

```jsx
const arr = [1, 2, 3, 4];
const sliced = arr.slice(1, 3);

console.log(sliced); // [2, 3]
console.log(arr); // 원본 유지됨 [1,2,3,4]

```

### splice(start, deleteCount, item1, item2, …)

<aside>

deleteCount: optional

item1, item2, … : optional

</aside>

배열 요소를 추가/ 삭제/ 변경합니다 **(원본을 수정!!)**

`start` 를 포함해서 `eleteCount` 개의 요소를 제거합니다.

`deleteCount`가 주어지지 않으면 `start` 부터 싹 다 삭제합니다.

`item1`, `item2`,  … 은 삭제된 자리부터 추가될 요소들입니다.

```jsx
const arr = [1, 2, 3, 4];
const sliced = arr.slice(1, 3);

console.log(sliced); // [2, 3]
console.log(arr); // 원본 유지됨 [1,2,3,4]

```

문자열 메소드

includes(searchString, position)

position: optional

searchString 이라는 문자열이 포함되어있는지 여부를 확인합니다.

const text = "Hello, JavaScript!";

console.log(text.includes("Java")); // true
console.log(text.includes("java")); // false (대소문자 구별됨)

split(separator, limits)

separator: optional

limits: optional

주어진 separator기준을 이용해 문자열을 나눕니다.

separator 가 생략되거나 주어진 문자열에 존재하지 않으면 원본 문자열을 반환합니다.

결과는 배열로 반환합니다.

const fruits = "사과,바나나,포도";

const fruitArray = fruits.split(",");

console.log(fruitArray);
// ["사과", "바나나", "포도"]

substring(start, end)

end: optional

문자열에서 시작 인덱스(start)부터 종료 인덱스(end) 이전까지 잘라서 새로운 문자열로 반환합니다.
원본 문자열은 바뀌지 않습니다.

두 번째 파라미터인 end 를 생략하면 start 부터 끝까지 반환합니다.

const text = "Hello, World!";

// 0부터 5미만까지 추출
const result = text.substring(0, 5);

console.log(result); // "Hello"

replace(pattern, replacement)

문자열에서 특정 문자열을 찾아서 다른 문자열로 바꿉니다.

원본 문자열은 바뀌지 않으며, 새 문자열을 반환합니다.

기본적으로는 첫 번째로 발견된 문자만 변경합니다.

pattern 은 찾을 문자열을 말합니다.

replacement 는 바꿀 문자열을 말합니다.

const text = "hello world";

// 'hello'를 'Hi'로 변경
const replaced = text.replace("hello", "Hi");

console.log(replaced); // "Hi world"

toUppercase()/ toLowercase()

매개 변수는 없습니다.

문자열의 모든 문자를 대문자(toUpperCase) 또는 소문자(toLowerCase)로 변환하여 반환합니다.

원본 문자열은 그대로 유지됩니다.

const text = "Hello World";

console.log(text.toUpperCase()); // "HELLO WORLD"
console.log(text.toLowerCase()); // "hello world"

객체 메소드

Object.keys(obj)

객체의 키 배열을 반환합니다.

const student = { name: "KKW", age: 24 };
console.log(Object.keys(student)); // ["name", "age"]

Object.values(obj)

객체의 값 배열을 반환합니다.

console.log(Object.values(student)); // ["KKW", 24]

Object.entries(obj)

객체의 키-값 배열을 반환합니다.

console.log(Object.entries(student));
// [["name", "KKW"], ["age", 24]]

이 많은 함수들을 다 외워야 할까..??

사실 이 외에도 배열, 문자열, 객체들을 다루는 함수는 매우 많아요.

근데 이것들을 다 외우는 건 힘이 들겠죠.

사실 자주 사용하는 함수들은 저절로 외워지겠지만 그렇지 않으면 기억하기 쉽지 않을 것 같아요.

저도 완벽하게 다 외우진 않고 있습니다.

필요에 따라서 함수를 찾아보면서 코딩하고 있어요.

근데 찾는 것도 방법이 있으니, 잘 찾아야겠죠.

내가 필요한 함수의 사용법을 찾는 방법을 소개해보겠습니다.

저는 보통 MDN이라는 개발 문서를 통해서 함수의 사용법을 체크합니다.

https://developer.mozilla.org/en-US/

MDN Web Docs

The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.

developer.mozilla.org

References → Javascript → References → Built-in objects → …

여기에 모든 것들의 사용 설명이 다 나와 있습니다.

만약 배열에 관한 함수들을 알고 싶으면 Built-in objects 하위에 있는 Array 를 클릭하면 페이지가 넘어가는데 사이드바에서 모든 함수들을 확인할 수 있어요.

제가 방금 전까지 설명드린 함수들은 모두 MDN을 참고 해서 가져온 함수들 입니다.

저작자표시

'웹 > Javascript' 카테고리의 다른 글

JS의 스프레드 연산자 (0)	2025.03.27
JS의 구조 분해 할당 (0)	2025.03.27
JS의 옵셔널 체이닝 (0)	2025.03.27
JS의 템플릿 리터럴 (0)	2025.03.27
JS에서의 비교연산자 (0)	2025.03.27

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

칙칙폭폭 땡땡

JS에서의 함수들

함수 선언 방법

일반 함수

함수 선언식

함수 표현식

화살표 함수

콜백 함수

이렇게 실수 할 수도?

여기서 코드를 더 줄일 수 있다?

배열 메소드

forEach(callbackFn)

map(callbackFn)

filter(callbackFn)

reduce(callbackFn)

find(callbackFn)

findIndex(callbackFn)

includes(callbackFn)

push(element)

pop()

slice(start, end)

문자열 메소드

includes(searchString, position)

split(separator, limits)

substring(start, end)

replace(pattern, replacement)

toUppercase()/ toLowercase()

객체 메소드

Object.keys(obj)

Object.values(obj)

Object.entries(obj)

이 많은 함수들을 다 외워야 할까..??

'웹 > Javascript' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

JS에서의 함수들

함수 선언 방법

일반 함수

함수 선언식

함수 표현식

화살표 함수

콜백 함수

이렇게 실수 할 수도?

여기서 코드를 더 줄일 수 있다?

배열 메소드

forEach(callbackFn)

map(callbackFn)

filter(callbackFn)

reduce(callbackFn)

find(callbackFn)

findIndex(callbackFn)

includes(callbackFn)

push(element)

pop()

slice(start, end)

문자열 메소드

includes(searchString, position)

split(separator, limits)

substring(start, end)

replace(pattern, replacement)

toUppercase()/ toLowercase()

객체 메소드

Object.keys(obj)

Object.values(obj)

Object.entries(obj)

이 많은 함수들을 다 외워야 할까..??

'웹 > Javascript' 카테고리의 다른 글

관련글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역