V VibeCoding 365
사전 목록 javascript

VIBECODING 365 / DICTIONARY

함수

Function

기초 난이도: 기초태그: 함수 · JavaScript · 재사용

DEFINITION

함수는 JavaScript의 기본 구성 단위다. MDN JavaScript Guide는 함수를 어떤 일을 하거나 값을 계산하는 문장들의 묶음에 가깝다고 설명하면서, 입력과 출력 사이에 분명한 관계가 있을 때 함수라고 부를 수 있다고 덧붙인다. 쓰려면 호출하려는 범위 안에 먼저 정의해 두어야 한다. 버튼을 눌렀을 때 할 일, 가격을 계산하는 식, API에서 받은 값을 정리하는 절차처럼 반복되거나 이름이 필요한 동작을 여기에 담는다.

정의만 해서는 실행되지 않는다. 이름을 붙이고 이렇게 동작한다고 적어 둔 뒤, 필요할 때 인자를 넘겨 호출해야 본문이 돌아간다. 선언은 보통 function 키워드, 이름, 괄호 안의 매개변수 목록, 중괄호 안의 본문으로 이루어진다. 같은 로직을 값처럼 만들 때는 함수 표현식을 쓰고, 이름 없이 익명으로 두었다가 다른 함수에 인자로 넘기는 패턴도 흔하다. 객체의 메서드도 결국 그 객체에 붙어 있는 함수다.

값으로 넘기고, 범위로 가둔다

숫자·문자열 같은 원시 값은 대체로 값 복사로 넘어가서, 함수 안에서 매개변수에 새 값을 넣어도 바깥 변수는 안 바뀐다. 객체나 배열을 넘기면 속성·원소를 고친 결과가 바깥에서도 보일 수 있다. 함수 안에 선언한 변수는 그 함수 밖에서 직접 읽을 수 없고, 안쪽 함수는 바깥 함수의 변수를 기억할 수 있다. MDN이 말하는 클로저는, 부모 범위가 끝난 뒤에도 그 변수를 붙들고 있는 코드 조각이다. 덕분에 설정값이나 카운터를 바깥에 노출하지 않고 유지할 수 있다.

선언·표현식·화살표

함수 선언은 같은 범위 안에서 호이스팅되어, 코드상 아래쪽에 적어도 위에서 호출할 수 있는 경우가 많다. 함수 표현식은 그렇게 끌어올려지지 않아, 초기화 전에 부르면 오류가 난다. 화살표 함수는 더 짧은 표기이며, 자신만의 this나 arguments를 갖지 않고 항상 익명이다. 배열 map 같은 콜백을 짧게 넘길 때 자주 쓰인다.

바이브 코딩에서의 위치

의미가 분명한 동작을 함수로 빼면 읽기와 테스트가 쉬워진다. AI에게 거대한 컴포넌트에서 로직을 함수로 분리해 달라고 할 때도, 입력·출력·부작용 범위를 먼저 정하면 임시 이름과 중복 본문이 줄어든다. 한 함수가 너무 많은 분기를 품으면 복잡도 경고등이 켜지므로, 이름 하나로 설명할 수 있는 단위까지 나누는 것이 안전하다.

ENGLISH

Function

EXAMPLE

function square(n) { return n * n }

REFERENCE

developer.mozilla.org/docs/Web/JavaScript/Guide/Functions