함수 정의 방식 & 배열/객체

자바스크립트 함수 정의 방식 & 배열/객체 처리 기초 정리

1. 함수 정의 방법

① 함수 선언문

function add(x, y) {
    return x + y;
}

const result = add(10, 20);
console.log(result);  // 30

② 함수 표현식

let add = function (x, y) { return x + y; };

let sum = add;
console.log(add(10, 20));   // 30
console.log(sum(10, 20));   // 30

③ 기명 함수 표현식

let sum1 = function add1(x, y) { return x + y; };
let sum2 = sum1;

console.log(sum1(10, 20));  // 30
console.log(sum2(10, 20));  // 30
console.log(add1(10, 20));  // ReferenceError

④ 재귀 함수(기명 표현식 내부)

const myFactorial = function factorial(n) {
    if (n <= 1) return 1;
    return n * factorial(n - 1);
};

console.log(myFactorial(10));

2. 화살표 함수

const add1 = function (x, y) { return x + y; };
const add2 = (x, y) => { return x + y; };
const add3 = (x, y) => x + y;
const add4 = x => x + 4;

const add5 = (x, y) => { return { result: x + y }; };
const add6 = (x, y) => ({ result: x + y });

console.log(add3(10, 20));  // 30

3. 배열 출력 방식

let values = ["빨강", true, 20];

console.log("방법1.");
console.log(values[0], values[1], values[2]);

console.log("방법2.");
for (let i = 0; i < values.length; i++) {
    console.log(values[i]);
}

console.log("방법3.");
for (let idx in values) {
    console.log(values[idx]);
}

console.log("방법4.");
for (let value of values) {
    console.log(value);
}

console.log("방법5-1.");
function printArrayItem(item) {
    console.log(item);
}
values.forEach(printArrayItem);

console.log("방법5-2.");
const printArrayItem2 = function (item) {
    console.log(item);
};
values.forEach(printArrayItem2);

console.log("방법5-3.");
values.forEach(function (item) {
    console.log(item);
});

console.log("방법5-4.");
values.forEach((item) => {
    console.log(item);
});

console.log("방법5-5.");
values.forEach(item => console.log(item));

console.log("방법5-6.");
values.forEach((item, index) => console.log(index, item));

4. 객체의 속성 접근

const person = {
    name: "홍길동",
    age: 23,
    isMarried: false,
    "favorite colors": ["빨강", "파랑"],
    hello: function () {
        return `안녕, 나는 "${this.name}" 입니다.`;
    }
};

for (let key in person) {
    console.log(`${key} => ${person[key]}`);
}

console.log(Object.keys(person));
Object.keys(person).forEach(key => console.log(person[key]));

5. 단축 속성명 (Shorthand Property Names)

let name = "John";
const person1 = {
    name: name,
    getName: function getName() {
        return this.name;
    }
};

const person2 = {
    name,
    getName() {
        return this.name;
    }
};

console.log(person1);
console.log(person2);

사용 예1: 함수에서 객체 반환

function returnObj1(age, name) {
    return { age: age, name: name };
}

function returnObj2(age, name) {
    return { age, name };
}

사용 예2: 로그 출력 시

const email = "hong@test.com";
const address = "서울시 독산동";

console.log("email", email);
console.log("address", address);
console.log(`email: ${email}, address: ${address}`);
console.log({ email, address });

6. 계산된 속성명 (Computed Property Names)

// 속성 이름(key)과 값(value)을 받아 객체 반환
function returnObject1(key, value) {
    return { [key]: value };
}

console.log(returnObject1("name", "John"));  // { name: "John" }
console.log(returnObject1("age", 23));       // { age: 23 }

// 속성 이름이 일련번호 형태를 가지는 객체 반환
function returnObject2(key, value, no) {
    return { [key + no]: value };
}

console.log(returnObject2("name", "John", 1));  // { name1: "John" }
console.log(returnObject2("name", "Jane", 2));  // { name2: "Jane" }

※ 대괄호 [] 안에 변수나 연산식을 사용해 동적으로 키 생성

7. 전개 연산자 (Spread Operator)

// Math.max는 개별 숫자만 받음
console.log(Math.max(3, 21, 1, 98, 7));       // 98
console.log(Math.max([3, 21, 1, 98, 7]));     // NaN

const numbers = [3, 21, 1, 98, 7];
console.log(Math.max(...numbers));           // 98

※ ...를 사용해 배열 요소를 개별 값으로 전달

// 사용 예1: 배열 복사
let a = 10;
let b = a;
a = 20;
console.log(a, b);  // 20 10

let c = [1, 2, 3];
let d = c;
c[1] = 20;
console.log(c, d);  // [1, 20, 3] [1, 20, 3]

let x = [1, 2, 3];
let y = [...x];
x[1] = 20;
console.log(x, y);  // [1, 20, 3] [1, 2, 3]

※ 전개 연산자는 배열 복사 시 참조를 끊고 새로운 배열 생성

// 사용 예2: 객체 복사
let a = { name: '홍길동', age: 23 };
let b = a;
a.age = 230;
console.log(a, b);  // 동일 객체

let c = { name: "홍길동", age: 23 };
let d = {};
for (key in c) {
    d[key] = c[key];
}
c.age = 230;
console.log(c, d);  // d는 영향 없음

let x = { name: "홍길동", age: 23 };
let y = { ...x };
x.age = 230;
console.log(x, y);  // y는 영향 없음

※ 객체 복사에도 전개 연산자를 사용하면 독립된 객체 생성

// 사용 예3: 복사하면서 속성 수정 또는 추가
let a = { name: "홍길동", age: 23 };
let b = { ...a, age: 230, email: "hong@test.com" };
console.log(b);

// 사용 예4: 배열 또는 객체 결합

// 배열 결합
const a = [1, 2, 3, 5];
const b = [5, 7, 8, 9];
const ab = [...a, ...b];
const ba = [...b, ...a];
console.log(ab);
console.log(ba);

// 객체 결합
const x = { name: "홍길동", age: 23 };
const y = { name: "고길동", address: "서울시 도봉구" };

const xy = { ...x, ...y };  // y의 name으로 덮어씀
const yx = { ...y, ...x };  // x의 name으로 덮어씀
console.log(xy);
console.log(yx);

※ 객체 병합 시 동일 키는 나중 값으로 덮어짐

8. 비구조화 할당 (Destructuring)

1) 배열 비구조화

// 배열 구조화
const arr = [1, 2, 3, 4, 5];

let a = arr[0];
let b = arr[1];
console.log(a, b);

// 배열 비구조화
let [c, d, e, f] = arr;
console.log({ c, d, e, f });

// 값 교환 (임시 변수)
let x = 10;
let y = 20;
let temp = x;
x = y;
y = temp;

// 값 교환 (비구조화 사용)
[x, y] = [y, x];

※ 배열 요소를 변수에 간편하게 할당하거나 값 교환 가능

// 변수 개수가 더 많을 경우
const arr = [1, 2];
let [x, y, z] = arr;
console.log({ x, y, z }); // { x: 1, y: 2, z: undefined }

// 기본값 설정
const arr2 = [1, 2];
let [a1, b1 = 20, c1 = 30] = arr2;
console.log({ a1, b1, c1 }); // { a1: 1, b1: 2, c1: 30 }

// 위치 건너뛰기
const arr3 = [1, 2, 3];
const [a, , c] = arr3;
console.log({ a, c }); // { a: 1, c: 3 }

// 나머지 요소를 배열로
const arr4 = [1, 2, 3, 4, 5, 6];
const [first, ...rest] = arr4;
console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5, 6]

※ 쉼표 건너뛰기, 기본값, 나머지 배열 추출 가능

2) 객체 비구조화

const obj1 = { name: "홍길동", age: 23 };
const obj2 = { name: "고길동", age: 43, grade: "A" };

// 일반 할당
const age1 = obj1.age;
const name1 = obj1.name;

// 비구조화 할당
const { age, name } = obj1;

// 없는 키
const { newAge, newName } = obj1;
console.log({ newAge, newName }); // undefined

// 변수 이름 변경
const { age: newAge2, name: newName2 } = obj1;
console.log({ newAge2, newName2 });

// 기본값 설정
const { age: newAge3, email = "default" } = obj1;
console.log({ newAge3, email });

// 나머지 속성 추출
const { age: age2, ...restObj } = obj2;
console.log({ age2, restObj });
// { age2: 43, restObj: { name: '고길동', grade: 'A' } }

// 객체 출력 함수 비교
const person = {
    name: "홍길동",
    age: 23,
    email: "hong@test.com"
};

// 방식 1: 객체를 직접 활용
function print1(obj) {
    console.log(`${obj.name} ${obj.age} ${obj.email}`);
}

// 방식 2: 비구조화로 지역 변수에 저장
function print2(obj) {
    const { name, age, email } = obj;
    console.log(`${name} ${age} ${email}`);
}

// 방식 3: 매개변수에서 직접 비구조화
function print3({ name, age, email }) {
    console.log(`${name} ${age} ${email}`);
}

print1(person);
print2(person);
print3(person);

※ 키 이름 기준으로 추출하며, 별칭 및 기본값, 나머지 속성 추출 가능. 함수에서의 비구조화도 유용하게 사용 가능