2025-11-07(javascript - 함수, 화살표 함수, 고차함수, 내장객체, 스프레드..)

자바스크립트 함수

함수 (Function)

1) 함수 선언과 호출

 

function 함수이름(매개변수1, 매개변수2) { // 실행 코드 return 결과값; } 함수이름(값1, 값2); // 호출

---

2) 함수와 변수의 스코프 (Scope)

• 전역변수(Global) : 함수 밖에서 선언 → 프로그램 전체에서 사용 가능
• 지역변수(Local) : 함수 안에서 선언 → 함수 내부에서만 사용 가능

let globalVar = 10; function test() { let localVar = 5; console.log(globalVar); // ✅ 가능 console.log(localVar); // ✅ 가능 } console.log(localVar); // ❌ 에러 (함수 내부 변수)

---

3) 함수와 변수의 호이스팅 (Hoisting)

• JS는 코드를 실행하기 전 함수 선언부와 var 선언문을 메모리에 먼저 등록
• 즉, 선언보다 먼저 호출해도 동작할 수 있음

hello(); // 가능 (호이스팅) function hello() { console.log("안녕!"); }

• 단, 함수 표현식(익명함수) 은 호이스팅되지 않음
• var, let, const 모두 호이스팅은 되지만,
  • var는 undefined로 초기화
  • let, const는 TDZ(Temporal Dead Zone) 때문에 선언 전에 접근 불가

---

4) 표현식으로 함수 정의하기 (Function Expression)

 

let greet = function() { console.log("안녕하세요!"); }; greet(); // "안녕하세요!"

• 함수명을 생략할 수 있어 익명 함수(anonymous function) 가능
• 변수에 저장되므로 값처럼 취급
• 호이스팅이 발생하지 않음

---

5) 화살표 함수 (Arrow Function)

ES6에서 추가된 간결한 함수 문법

 

// 기본형 const add = (a, b) => a + b; // 여러 줄일 때 const sum = (a, b) => { const result = a + b; return result; }; // 매개변수가 하나일 때 const square = x => x * x;

---

6) 고차함수(High-order Function) & 콜백함수(Callback Function)

• 고차함수 : 함수를 인자로 받거나 함수를 반환하는 함수
• 콜백함수 : 다른 함수의 인자로 전달되는 함수

function greet(name) { console.log(`안녕, ${name}!`); } function processUser(callback) { const name = "희원"; callback(name); } processUser(greet); // 콜백함수 호출

 

---

5. 내장 객체 (Built-in Objects)

자바스크립트 엔진이 미리 만들어 놓은 객체들

• String, Number, Math, Date, Array, Map, Set, JSON, ...

---

 Array 고차함수

1. forEach()

각 요소를 순회하며 실행 (반환값 없음)

 

[1,2,3].forEach(num => console.log(num));

2. map()

새로운 배열을 만들어 반환

let doubled = [1,2,3].map(n => n * 2); console.log(doubled); // [2,4,6]

3. filter()

조건을 만족하는 요소만 추출

let evens = [1,2,3,4].filter(n => n % 2 === 0); console.log(evens); // [2,4]

4. find()

조건에 맞는 첫 번째 요소 반환

let firstEven = [1,2,3,4].find(n => n % 2 === 0); console.log(firstEven); // 2

5. findIndex()

조건에 맞는 인덱스 반환

let idx = [1,2,3,4].findIndex(n => n === 3); console.log(idx); // 2

6. reduce()

배열을 하나의 값으로 축약 (누적)

 

let sum = [1,2,3,4].reduce((acc, cur) => acc + cur, 0); console.log(sum); // 10

---

 6. 스프레드 연산자 & 구조분해할당

1) 스프레드 연산자 (...)

배열이나 객체를 펼침

let arr1 = [1,2,3]; let arr2 = [...arr1, 4,5]; console.log(arr2); // [1,2,3,4,5] let obj1 = {name: "희원", age: 20}; let obj2 = {...obj1, job: "개발자"}; console.log(obj2);

---

2) 구조분해할당 (Destructuring)

배열이나 객체의 값을 변수에 간단히 할당

let [a, b] = [10, 20]; console.log(a, b); // 10, 20 let {name, age} = {name: "희원", age: 20}; console.log(name, age);

---

7. 사용자 정의 객체

let person = { name: "희원", age: 25, greet: function() { console.log(`안녕하세요, ${this.name}입니다!`); } }; person.greet(); // "안녕하세요, 희원입니다!"