개요
자바스크립트에서 함수는 “특정 기능을 수행하도록 묶어둔 독립적인 실행 블록”이고, Java의 메서드와 비슷하지만 클래스에 종속되지 않고도 어디서든 정의/호출할 수 있다는 점이 큰 차이다.
아래 글은 요청한 순서(함수 개념 → 함수도 타입 → window 내장 함수 → 주요 함수(addEventListener/Object.keys) → 화살표 함수 → 매개변수) 그대로 진행하고, 예시 코드는 제공한 실습 HTML을 중심으로 설명한다.
함수란? (Java의 메서드와 비교)
함수(Function)는 “어떤 일을 하는 코드 묶음”이며, 호출(call)되었을 때 내부 로직이 실행된다.
Java에서는 보통 클래스 내부의 메서드로 기능을 정의하지만, JavaScript에서는 클래스 없이도 전역/모듈/블록 등에서 독립적으로 함수를 만들고 쓸 수 있다.
기본 형태는 다음과 같다.
function 함수이름(매개변수1, 매개변수2, ...) {
실행문;
}실습 코드의 “기본 호출 방식”이 바로 이 형태다.
function basicFuntion() {
console.log("hello wolrd 1");
}함수의 기본 형태 3가지 (선언/표현식/화살표)
실습 파일은 같은 기능을 서로 다른 방식으로 정의해서 차이를 체감하기 좋게 구성돼 있다.
1) 함수 선언문(Function Declaration)
function basicFuntion() {
console.log("hello wolrd 1");
}- 장점: 문법이 가장 익숙하고 직관적이다.
2) 함수 표현식(Function Expression) — “함수를 변수에 담기”
const variableFunction = function () {
console.log("hello wolrd 2");
}- “함수도 값(타입)”이기 때문에 변수에 담을 수 있다.
3) 화살표 함수(Arrow Function, ES6)
const variableFunction2 = () => {
console.log("hello wolrd 3");
}- 더 짧고, 콜백에서 특히 많이 사용된다.
- 실습 코드에서도
map/filter/addeventlistener같은 패턴으로 확장하기 쉬운 형태다.
자바스크립트에서 함수는 ‘타입’이다
JavaScript에서는 함수 자체가 하나의 값이어서, 배열 요소로 넣거나 객체의 프로퍼티(정확히는 메서드처럼)로 넣을 수 있다.
배열 안에 함수 넣기 (실습: arrFunction)
const arrFunction = () => {
const arr = [1, 2, () => { console.log("hello"); }];
arr[2]();
}포인트는 “배열의 3번째 요소가 함수이므로, ()로 호출할 수 있다”는 것이다.
객체의 프로퍼티로 함수 넣기 (실습: createPerson / objFunction)
const createPerson = (name, email, age) => {
return {
name,
email,
age,
printPerson: () => {
return `이름은 ${name}, 이메일은 ${email}, 나이는 ${age}`;
}
};
};
const objFunction = () => {
const p1 = createPerson("hong", "hong@naver.com", 30);
console.log(p1);
console.log(p1.printPerson());
}printPerson은 객체 안에 들어있는 함수(메서드처럼 동작)이다.- 단축 속성명(
name, email, age)도 같이 확인 가능하다.
Window 객체 함수(내장함수)
브라우저 환경에서 window는 “브라우저 창”을 나타내는 전역 객체다.
실습 코드에도 window.location을 이용한 예제가 들어가 있다.
팝업(alert)
실습 코드의 예외처리 파트에서 alert()를 사용한다.
alert(`error log : ${e}`);alert()는 실제로 window.alert()의 축약처럼 동작한다고 이해하면 된다.
새로고침 / 페이지 이동 (실습: reloadScreen, moveScreen)
const reloadScreen = () => {
window.location.reload();
}
const moveScreen = () => {
window.location.href = "https://www.naver.com";
}reload()는 현재 페이지를 다시 로드한다.href를 바꾸면 해당 URL로 이동한다.
그 외 주요 함수: addEventListener, Object.keys
addEventListener (실습: scrollEvent, clickEvent)
이벤트 리스너는 “사용자의 행동(스크롤/클릭 등)”이 발생했을 때 실행될 함수를 등록한다.
const scrollEvent = () => {
window.addEventListener('scroll', () => console.log("hello"));
}const clickEvent = () => {
const popupBtn = document.getElementById("popup-btn");
popupBtn.addEventListener('click', () => console.log("hello"));
}정리하면:
window.addEventListener(...): 브라우저 전체에서 발생하는 이벤트를 받기 좋다(예: scroll).element.addEventListener(...): 특정 요소 클릭 같은 “요소 단위 이벤트” 처리에 적합하다.
Object.keys
이번 실습 코드에는 직접 사용되진 않지만, 앞에서 작성했던 객체 파트와 연결되는 중요한 함수다.
Object.keys(obj)는 객체의 key 목록을 배열로 뽑아내서 반복문/가공 로직을 만들 때 자주 사용한다.
화살표 함수(Arrow Function)
실습 코드 전반이 화살표 함수를 적극적으로 사용한다.
- 일반 함수 표현식:
const add = function(x, y) {
return x + y;
}- 화살표 함수:
const add = (x, y) => x + y;실습 코드에서도 아래처럼 “리턴만 있는 함수”를 한 줄로 줄여 쓴 형태가 나온다.
const makeString = () => "hello javascript!";매개변수(parameter) 다루기
JavaScript는 매개변수 타입을 명시하지 않고 이름만 적는다.
그리고 인자가 전달되지 않으면 해당 매개변수는 undefined가 될 수 있어 계산 시 주의가 필요하다(예: undefined + 1은 의도치 않은 결과).
매개변수 기본 사용 (실습: paramFunciont1)
const paramFunciont1 = (a, b) => {
console.log(`a + b = ${a + b}`);
}기본 매개변수(Default Parameter) (실습: paramFunciont2)
const paramFunciont2 = (name = "hong") => {
console.log(`name = ${name}`);
}- 호출 시 값을 안 넘기면
"hong"가 들어가도록 방어한다.
배열/객체도 매개변수로 전달 가능 (실습: paramFunciont3)
const paramFunciont3 = (arr) => {
console.log(`arr = ${arr}`);
}- 실제 실무에서는 배열/객체를 받아서 순회/가공하는 패턴이 매우 많다.
(추가 개념) 나머지 매개변수(Rest Parameter, ...)
실습 코드에는 없지만, 요청한 워크플로우에 포함된 핵심 문법이라 예시만 간단히 연결해두면 좋다.
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6- “인자 개수가 고정되지 않는 함수”에서 특히 유용하다.
