현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. function(함수)

자바스크립트에서 function은 특정 작업을 수행하는 코드 블록이다. 함수는 코드의 재사용성을 높이고, 유지보수를 쉽게 만들어 주는 중요한 개념이다.

1) 함수 선언 방식

a. 함수 선언문

function sayHello() {
    console.log("Hello, world!");
}
sayHello(); // "Hello, world!" 출력

• function 키워드를 사용하여 함수를 정의한다.
• 선언된 함수는 호이스팅(hoisting)되어, 선언 이전에도 호출할 수 있다.

호이스팅(hoisting)
Hoisting은 무엇인가? 모든 변수 선언문이 코드의 최상단으로 이동되는 것처럼 느껴지는 현상을 이야기한다.
자바스크립트에서 변수와 함수 선언이 코드 실행 전에 메모리에 먼저 할당되는 현상을 말한다. 즉, 코드에서 선언된 변수와 함수가 실행 전에 최상단으로 끌어올려진 것처럼 동작한다.

b. 함수 표현식

const sayHello = function() {
    console.log("Hello, world!");
};
sayHello(); // "Hello, world!" 출력

• 함수가 변수에 할당된다.
• 함수 선언문과 달리, 호이스팅 시 함수가 정의되지 않은 상태이므로 선언 이전에는 호출할 수 없다.

c. 화살표 함수 (Arrow Function)

const sayHello = () => {
    console.log("Hello, world!");
};
sayHello(); // "Hello, world!" 출력

• function 키워드 없이 =>(화살표)로 함수를 정의한다.
• this 바인딩 방식이 다르며, this를 자동으로 상위 스코프의 this와 동일하게 유지한다.

2) 매개변수와 반환값

a. 매개변수 사용하기

function greet(name) {
    console.log(`Hello, ${name}!`);
}
greet("Alice"); // "Hello, Alice!" 출력

• 함수 호출 시 값을 전달하면, 해당 값을 함수 내부에서 사용할 수 있다.

b. 기본 매개변수 값 설정

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}
greet(); // "Hello, Guest!" 출력

• 매개변수에 기본값을 설정할 수 있어, 인자를 전달하지 않아도 오류가 발생하지 않는다.

c. 값 반환하기

function add(a, b) {
    return a + b;
}
const result = add(3, 5);
console.log(result); // 8 출력

• return 키워드를 사용해 값을 반환할 수 있다.
• return이 실행되면 함수는 즉시 종료된다.

3) 함수의 다양한 활용

a. 콜백 함수 (Callback Function)

function processUserInput(callback) {
    const name = "Alice";
    callback(name);
}
processUserInput(function(name) {
    console.log(`Hello, ${name}!`);
});

• 함수의 인자로 다른 함수를 전달하고, 특정 시점에 실행할 수 있다.

b. 즉시 실행 함수 (IIFE: Immediately Invoked Function Expression)

(function() {
    console.log("즉시 실행 함수 실행!");
})();

• 함수를 정의하자마자 즉시 실행할 수 있다.
• 글로벌 변수 오염을 방지하는 데 유용하다.

4) 함수 스코프와 클로저

a. 함수 스코프 (Function Scope)

function example() {
    let message = "Hello!";
    console.log(message);
}
example();
// console.log(message); // 오류 발생 (message는 함수 내부에서만 접근 가능)

• 함수 내부에서 선언된 변수는 함수 밖에서 접근할 수 없다.

b. 클로저 (Closure)

function outer() {
    let count = 0;
    return function inner() {
        count++;
        console.log(count);
    };
}
const counter = outer();
counter(); // 1
counter(); // 2

• 내부 함수가 외부 함수의 변수를 계속해서 유지할 수 있다.
• 상태를 저장하는 용도로 자주 사용된다.

2. 인수와 매개변수의 차이

1) 개념 정리

• 매개변수(Parameter): 함수를 정의할 때 선언하는 변수
• 인수(Argument): 함수를 호출할 때 전달하는 값

function greet(name) {  // name → 매개변수
    console.log(`Hello, ${name}!`);
}

greet("Alice");  // "Alice" → 인수

위 코드에서 name은 매개변수이고, "Alice"는 인수이다.

2) 여러 개의 인수 전달

함수는 여러 개의 인수를 받을 수 있다.

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

console.log(add(3, 5)); // 8
console.log(add(10, 20)); // 30

• a와 b는 매개변수이고, add(3, 5)에서 3과 5는 인수이다.
• 함수 호출 시 전달된 인수가 매개변수에 순서대로 할당된다.

3) 기본값 설정 (Default Parameter)

매개변수에 기본값을 설정하면, 인수를 전달하지 않았을 때 기본값이 사용된다.

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet();       // "Hello, Guest!"
greet("Bob");  // "Hello, Bob!"

• name = "Guest"을 설정하여 인수가 없을 경우 "Guest"를 기본값으로 사용한다.

4) 나머지 매개변수(Rest Parameter)

인수의 개수가 정해지지 않은 경우, 나머지 매개변수 (...) 를 사용하면 모든 인수를 배열로 받을 수 있다.

function sum(...numbers) {
    return numbers.reduce((acc, num) => acc + num, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(10, 20));        // 30

• ...numbers는 여러 개의 인수를 배열로 변환하여 받는다.

5) arguments 객체 (ES5 방식, 화살표 함수에서는 사용 불가)

arguments 객체를 사용하면 함수에 전달된 모든 인수를 배열처럼 다룰 수 있다.

function showArguments() {
    console.log(arguments);
}

showArguments(1, 2, 3, "hello");
// 출력: [Arguments] { '0': 1, '1': 2, '2': 3, '3': 'hello' }

• 단점: arguments는 배열이 아니라 유사 배열 객체이므로, map, filter 같은 배열 메서드를 바로 사용할 수 없다.
• ES6 이후에는 ... 나머지 매개변수를 사용하는 것이 권장됨.

6) 함수 호출 시 인수 부족/초과 처리

a. 인수를 덜 전달한 경우

function multiply(a, b) {
    return a * b;
}

console.log(multiply(2));  // NaN (b가 undefined이므로 2 * undefined)

• 매개변수 개수보다 적은 인수를 전달하면, 부족한 부분은 undefined가 할당됨.
• 이를 방지하려면 기본값을 설정하거나 if문으로 예외 처리를 해야 한다.

function multiply(a, b = 1) {  // 기본값 설정
    return a * b;
}

console.log(multiply(2)); // 2 (b의 기본값 1이 사용됨)

b. 인수를 초과해서 전달한 경우

function divide(a, b) {
    return a / b;
}

console.log(divide(10, 2, 5));  // 5 (추가 인수는 무시됨)

• 함수에 정의된 매개변수 개수보다 많은 인수를 전달하면, 초과된 인수는 무시된다.
• 초과된 인수를 모두 사용하려면 나머지 매개변수(...) 를 사용하면 된다.

function printAll(...args) {
    console.log(args);
}

printAll(1, 2, 3, 4, 5);  // [1, 2, 3, 4, 5]

7) 매개변수 구조 분해 할당 (Destructuring Assignment)

객체나 배열을 매개변수로 받아 필요한 값만 추출할 수 있다.

a. 배열 구조 분해

function getInfo([name, age]) {
    console.log(`이름: ${name}, 나이: ${age}`);
}

getInfo(["Alice", 25]); // 이름: Alice, 나이: 25

b. 객체 구조 분해

function displayUser({ name, age }) {
    console.log(`이름: ${name}, 나이: ${age}`);
}

const user = { name: "Bob", age: 30 };
displayUser(user); // 이름: Bob, 나이: 30

• 객체의 프로퍼티를 직접 매개변수로 받아 사용할 수 있어 코드가 깔끔해진다.

3. 이벤트와 이벤트 핸들링

이벤트(Event) : 이벤트는 웹 페이지에서 발생하는 모든 사용자 행동이나 시스템 변화를 의미한다. 이벤트가 발생하면 브라우저는 이를 감지하고, 미리 정의된 함수(이벤트 핸들러)를 실행한다.

이벤트 핸들링(Event Handling) : 이벤트 핸들링이란 이벤트 발생 시 실행할 동작(함수)을 지정하는 것이다. 이때 실행되는 함수를 이벤트 핸들러(Event Handler) 또는 이벤트 리스너(Event Listener)라고 한다.

1) 이벤트 등록 방법

a. HTML 요소에서 직접 이벤트 설정

<button onclick="alert('버튼 클릭!')">클릭하세요</button>

• HTML 요소의 속성(onclick, onmouseover 등)에 직접 함수를 작성할 수 있다.
• 단점: HTML과 JavaScript 코드가 분리되지 않아 유지보수하기 어렵다.

b. JavaScript에서 onclick 속성 사용

<button id="myButton">클릭하세요</button>

<script>
    const btn = document.getElementById("myButton");
    btn.onclick = function() {
        alert("버튼 클릭!");
    };
</script>

• document.getElementById()로 요소를 가져와 onclick 속성에 함수를 할당한다.
• 단, 한 개의 이벤트 핸들러만 등록 가능하다.

c. addEventListener() 사용 ✨

<button id="myButton">클릭하세요</button>

<script>
    const btn = document.getElementById("myButton");
    btn.addEventListener("click", function() {
        alert("버튼 클릭!");
    });
</script>

• 여러 개의 이벤트 핸들러를 등록할 수 있음.
• addEventListener(이벤트명, 핸들러 함수) 형식으로 사용한다.

이벤트 리스너 여러 개 추가 가능

const btn = document.getElementById("myButton");

btn.addEventListener("click", function() {
    console.log("첫 번째 핸들러 실행!");
});

btn.addEventListener("click", function() {
    console.log("두 번째 핸들러 실행!");
});

• 버튼을 클릭하면 두 개의 핸들러가 실행됨.

2) 이벤트 객체(Event Object)

이벤트 핸들러 함수는 자동으로 이벤트 객체(event object) 를 전달받을 수 있다.
이벤트 객체에는 이벤트와 관련된 정보가 담겨 있다.

a. event 객체 사용 예시

document.addEventListener("click", function(event) {
    console.log("이벤트 발생 위치:", event.clientX, event.clientY);
});

• event.clientX, event.clientY: 클릭한 위치의 X, Y 좌표를 반환한다.
  

3) 이벤트 전파(Event Propagation)

이벤트는 버블링(Bubbling)과 캡처링(Capturing) 두 단계로 전파된다.

a. 이벤트 버블링(Bubbling)

• 이벤트가 가장 안쪽 요소에서 발생한 후, 부모 요소로 전파되는 방식
• 기본적으로 모든 이벤트는 버블링 단계에서 실행된다.

<div id="outer">
    <button id="inner">클릭하세요</button>
</div>

<script>
    document.getElementById("inner").addEventListener("click", function() {
        console.log("버튼 클릭!");
    });

    document.getElementById("outer").addEventListener("click", function() {
        console.log("div 클릭!");
    });
</script>

버튼을 클릭하면 콘솔에 아래 순서로 출력됨

버튼 클릭!
div 클릭!

• button 요소에서 클릭 이벤트가 발생하고, div 요소까지 전파됨.

b. 이벤트 캡처링(Capturing)

• 이벤트가 부모 요소에서 시작하여 자식 요소로 전달되는 방식
• addEventListener의 세 번째 인자를 true로 설정하면 캡처링 단계에서 실행됨.

document.getElementById("outer").addEventListener("click", function() {
    console.log("div 클릭!");
}, true);

• 이제 "div 클릭!"이 먼저 출력된 후 "버튼 클릭!"이 출력됨.

c. event.stopPropagation() 사용

이벤트 전파를 막고 싶다면 event.stopPropagation()을 호출하면 된다.

document.getElementById("inner").addEventListener("click", function(event) {
    event.stopPropagation(); // 부모 요소로 이벤트 전파 차단
    console.log("버튼 클릭!");
});

이제 div의 클릭 이벤트는 실행되지 않는다.

4) 기본 동작 방지 (event.preventDefault())

어떤 이벤트는 기본 동작(예: 링크 이동, 폼 제출 등)이 설정되어 있다. 이를 막으려면 event.preventDefault()를 사용한다.

a. 링크 이동 방지

<a href="https://example.com" id="link">클릭해도 이동 안 됨</a>

<script>
    document.getElementById("link").addEventListener("click", function(event) {
        event.preventDefault(); // 기본 동작(페이지 이동) 방지
        console.log("링크 클릭됨!");
    });
</script>

b. 폼 제출 방지

<form id="myForm">
    <input type="text" placeholder="이름 입력">
    <button type="submit">제출</button>
</form>

<script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
        event.preventDefault(); // 폼 제출 방지
        console.log("폼 제출 막음!");
    });
</script>

5) 이벤트 위임(Event Delegation)

많은 요소에 개별적으로 이벤트를 등록하는 대신, 부모 요소에서 이벤트를 감지하고 필요한 요소만 처리하는 기법이다.

a. (1) 이벤트 위임을 사용하지 않은 경우

document.getElementById("item1").addEventListener("click", () => console.log("Item 1 클릭!"));
document.getElementById("item2").addEventListener("click", () => console.log("Item 2 클릭!"));

요소가 많아질수록 비효율적이다.

b. 이벤트 위임을 사용한 경우

document.getElementById("list").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        console.log(event.target.textContent + " 클릭!");
    }
});

• 부모 요소 #list에 클릭 이벤트를 등록하고, 클릭된 요소가 <li>인지 확인한다.
• 동적으로 추가된 <li> 요소에도 자동 적용된다.

4. value

input, textarea, select 요소의 현재 값을 가져오거나 설정하는 속성이다.

1) 값 가져오기

const inputValue = document.getElementById("myInput").value;
console.log(inputValue);

2) 값 변경하기

document.getElementById("myInput").value = "새로운 값";

3) value vs textContent

4) value vs defaultValue

• value: 현재 입력된 값
• defaultValue: HTML에서 설정된 초기 값 (변경되지 않음)

끝맺음.

매력적인 함수! 하면 할 수록 재미있다!
제발..아웃풋이 잘되길!!