[새싹 성동 2기] 자바스크립트에서 함수 정의와 활용법

코딩/자바스크립트

[새싹 성동 2기] 자바스크립트에서 함수 정의와 활용법

insu90 2024. 11. 12. 20:27

자바스크립트는 함수를 정의하고 호출하는 다양한 방법을 제공합니다. 함수는 코드 재사용과 가독성을 높이는 중요한 요소입니다. 이 글에서는 자바스크립트에서 함수를 정의하는 방법과 그 사용법에 대해 자세히 살펴보겠습니다.

1. 함수 선언문 (Function Declaration)

함수 선언문은 자바스크립트에서 가장 기본적인 함수 정의 방법입니다. 이 방식에서는 반드시 함수 이름을 정의해야 하며, 함수는 프로그램 어디서든 호출할 수 있습니다.

구문:

let 함수이름 = function(매개변수1, 매개변수2, ...) {
    // 함수 본문
    return 값; // 필요시 반환값
};

예시:

let add = function(x, y) {
    return x + y;
};
console.log(add(10, 20)); // 30

함수 선언문으로 정의된 함수는 자바스크립트에서 호이스팅(hoisting)되므로, 코드 어디에서든 함수 호출이 가능합니다. 함수 이름을 통해 매개변수를 전달하고 값을 반환할 수 있습니다.

2. 함수 표현식 (Function Expression)

함수 표현식은 함수 선언문과 다르게, 함수를 변수에 할당하여 정의합니다. 이 방식에서는 함수가 익명 함수일 수도 있으며, 변수 이름을 통해 함수를 호출할 수 있습니다.

구문:

let 함수이름 = function(매개변수1, 매개변수2, ...) {
    // 함수 본문
    return 값; // 필요시 반환값
};

예시:

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

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

이 방식에서는 함수 이름을 정의할 수 있지만, 외부에서 함수 이름으로 호출할 수는 없습니다. 함수 표현식은 변수에 할당되므로, 변수처럼 다룰 수 있습니다.

기명 함수 표현식

함수 표현식에서 함수에 이름을 붙여 사용할 수도 있습니다. 하지만 이 이름은 함수 내부에서만 유효하며, 외부에서는 호출할 수 없습니다.

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

console.log(add(10, 20)); // 30
console.log(plus(10, 20)); // ReferenceError: plus is not defined

3. Function 생성자 함수 (Function Constructor)

Function() 생성자를 사용하여 함수를 동적으로 정의할 수 있습니다. 이 방법은 함수 본문을 문자열로 전달하여 함수를 생성합니다.

구문:

let 함수이름 = new Function('매개변수1', '매개변수2', ..., 'functionBody');

예시:

let add = new Function('x', 'y', 'return x + y');
console.log(add(3, 4)); // 7

이 방식은 동적 함수 생성에 유용하지만, 일반적인 함수 정의 방식보다는 잘 사용되지 않습니다.

4. 콜백 함수 (Callback Function)

콜백 함수는 다른 함수의 인자로 전달되어, 특정 조건이 만족되었을 때 호출되는 함수입니다. 보통 이벤트 핸들러나 비동기 작업에서 많이 사용됩니다.

예시:

// setTimeout 함수는 1초 후에 콜백 함수를 호출
setTimeout(function() {
    console.log('1초 후에 실행됩니다.');
}, 1000);

5. 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

즉시 실행 함수는 함수 정의와 동시에 바로 실행되는 함수입니다. 보통 함수 표현식을 사용하여 즉시 실행합니다.

소괄호로 둘러 쌓아 실행시킬 수 있습니다. 아래는 두 예시입니다.

구문:

(function() {
    // 함수 본문
})();

예시:

function add(x, y) {
    console.log(x + y);
}
add(10, 20);


(function (x, y) { console.log(x + y); })(10, 20);

/////

function hello(name) {
    console.log('Hello, ' + name + '!');
}
hello('홍길동');


(function (name) {
    console.log('Hello, ' + name + '!');
})('홍길동');

이 방식은 주로 전역 변수 오염을 방지하기 위해 사용됩니다.

6. 화살표 함수 (Arrow Function)

화살표 함수는 자바스크립트에서 함수 정의를 더욱 간결하게 만들어주는 방법입니다. function 키워드를 생략하고 => 기호를 사용하여 함수를 정의합니다.

구문:

const 함수이름 = (매개변수1, 매개변수2, ...) => { // 함수 본문 }

예시:

function add1(x, y) {
    console.log(x + y);
}
add1(10, 20);


// 익명 함수 표현식을 이용해서 함수를 정의
const add2 = function (x, y) { console.log(x + y); };
add2(10, 20);


// 화살표 함수를 이용해서 함수를 정의
// function 키워드를 제거하고, 함수 파라미터와 함수 본문 사이에 => 기호를 추가
const add3 = (x, y) => { console.log(x + y); };
add3(10, 20);


// 화살표 함수 본문이 한 줄인 경우, 중괄호를 생략할 수 있음
const add4 = (x, y) => console.log(x + y);
add4(10, 20);


// 화살표 함수 본문이 한 줄이고, 그 한 줄이 return 문이라면 return 키워드를 생략할 수 있음
const add5 = (x, y) => x + y;   // const add5 = function(x, y) { return x + y; };
console.log(add5(10, 20));


// 파라미터가 하나인 경우, 파라미터를 감싸고 있는 소괄호도 생략이 가능
const add6 = x => x + 6;        // const add6 = function(x) { return x + 6; };
console.log(add6(10));


// 객체를 반환하는 경우에는 반환 객체를 소괄호로 감싸야 함
const add7 = (x, y) => { return { result: x + y }; };
console.log(add7(10, 20));     // { result: 30 }


const add8 = (x, y) => ({ result: x + y });
console.log(add8(10, 20));     // { result: 30 }

7. 배열 순회 방법

배열은 자바스크립트에서 여러 값을 저장하는 데 사용되는 객체입니다. 배열 요소를 순차적으로 접근하거나 처리할 때 다양한 방법을 사용할 수 있습니다.

방법 1: 인덱스를 이용한 접근

let values = ["빨강", "노랑", "파랑"];
console.log(values[0]); // 빨강
console.log(values[1]); // 노랑
console.log(values[2]); // 파랑

방법 2: for문 사용

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

방법 3: for...in 사용

for (let index in values) {
    console.log(index, values[index]);
}

방법 4: for...of 사용

for (let value of values) {
    console.log(value);
}

방법 5: forEach 사용

forEach()는 배열의 각 요소에 대해 콜백 함수를 실행하는 메서드입니다.

values.forEach(function(value) {
    console.log(value);
});

forEach()는 화살표 함수로도 간단히 사용할 수 있습니다.

values.forEach(value => console.log(value));

보다 다양한 예시는 아래와 같습니다.

// 배열 선언
let values = ["빨강", "노랑", "파랑", true, 20];




// 모든 배열 요소를 순차적으로 접근하는 방법
console.log('방법1. ------------------');
console.log(values[0]);
console.log(values[1]);
console.log(values[2]);
console.log(values[3]);
console.log(values[4]);


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


console.log('방법3. ------------------');
for (let index in values) {
    console.log(index, values[index]);
}


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


console.log('방법5-1. ------------------');
{   // 함수 선언문 형식으로 콜백 함수를 정의
    function printItem(value) {
        console.log(value);
    }
    values.forEach(printItem);
}


console.log('방법5-2. ------------------');
{   // 함수 표현식 형식으로 콜백 함수를 정의
    const printItem = function (value) {
        console.log(value);
    };
    values.forEach(printItem);
}


console.log('방법5-3. ------------------');
{   // 화살표 함수 형식으로 콜백 함수를 정의
    const printItem = (value) => {
        console.log(value);
    };
    values.forEach(printItem);
}


console.log('방법5-4. ------------------');
{   // 간략한 화살표 함수 형식으로 콜백 함수를 정의
    const printItem = value => console.log(value);
    values.forEach(printItem);
}


console.log('방법5-5. ------------------');
{   // 콜백 함수를 직접 정의
    values.forEach(value => console.log(value));
}


// 인덱스를 함께 출력
console.log('방법6-1. ------------------');
{   // 함수 선언문 형식으로 콜백 함수를 정의
    function printItem(value, index) {
        console.log(index, value);
    }
    values.forEach(printItem);
}


console.log('방법6-2. ------------------');
{   // 함수 표현식 형식으로 콜백 함수를 정의
    const printItem = function (value, index) {
        console.log(index, value);
    };
    values.forEach(printItem);
}


console.log('방법6-3. ------------------');
{   // 화살표 함수 형식으로 콜백 함수를 정의
    const printItem = (value, index) => {
        console.log(index, value);
    };
    values.forEach(printItem);
}


console.log('방법6-4. ------------------');
{   // 간략한 화살표 함수 형식으로 콜백 함수를 정의
    const printItem = (value, index) => console.log(index, value);
    values.forEach(printItem);
}


console.log('방법6-5. ------------------');
{   // 콜백 함수를 직접 정의
    values.forEach((value, index) => console.log(index, value));
}

8. 객체의 속성 접근 및 순회

자바스크립트에서 객체는 key-value 형식으로 데이터를 저장합니다. 객체의 속성에 접근하거나 순회하는 다양한 방법을 살펴보겠습니다.

객체 정의 예시:

let person = {
    name: '홍길동',
    age: 16,
    isMarried: false,
    favoriteColor: ['red', 'blue'],
    hello: function() {
        console.log(`안녕하세요, ${this.name}입니다.`);
    }
};

속성 접근 방법:

점 표기법: person.name
대괄호 표기법: person['age']

객체 순회 방법 1: for...in 사용

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

객체 순회 방법 2: Object.keys() 사용

let keys = Object.keys(person);
keys.forEach(key => {
    console.log(`${key}: ${person[key]}`);
});

보다 상세한 예시는 아래와 같습니다.

// 객체 선언
let person = {
    'name': '홍길동',
    "age": 16,
    isMarried: false,
    'favorite color': ['red', 'blue'],
    hello: function () {
        console.log(`안녕하세요, ${this.name}입니다.`);
    }
}


// 객체 속성을 참조할 때는 객체변수.속성이름(키) 또는 객체변수['속성이름(키)'] 형식을 사용한다.
console.log(person.name); // 홍길동
console.log(person['age']); // 16  
console.log(person['favoite colors']);  // ['red', 'blue']


// 객체 속성의 값을 변경
person.age = 20;
console.log(person.age); // 20


// 객체 속성의 추가
person.height = 180;
person['weight'] = 70;


// 객체 속성을 순회하면서 값을 가져오는 방법
console.log('방법1. for-in 구문을 이용');
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}


// for-of 구문은 객체에 사용할 수 없다.


// Object.keys() 메소드를 이용
console.log('방법2. Object.keys() 메소드를 이용');
let keys = Object.keys(person);
console.log(keys);
keys.forEach(key => console.log(`${key}: ${person[key]}`));

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.

저작자표시 비영리 변경금지

'코딩 > 자바스크립트' 카테고리의 다른 글

[새싹 성동 2기] JavaScript 전개 연산자(Spread Operator)와 비구조화(Destructuring) 정리 (0)	2024.11.15
[새싹 성동 2기] JavaScript에서 JSON 데이터 처리 및 객체 속성명 활용 (4)	2024.11.15
[새싹 성동 2기] 자바스크립트를 이용한 간단한 코딩 실습 (0)	2024.11.12
[새싹 성동 2기] 자바스크립트의 기초: 변수, 자료형, 연산자, 그리고 호이스팅 (1)	2024.11.12
[새싹 성동 2기] 코딩을 위한 준비 작업 - 노드.js와 VSCode 설치 방법 (4)	2024.11.09

현재글[새싹 성동 2기] 자바스크립트에서 함수 정의와 활용법

insu90 님의 블로그

insu90 님의 블로그 입니다.

보안관제, DB, 리액트, fastapi, CICD, JavsScript, JavaScript, 클라우드, react, 코딩, CloudWatch, Python, Wordpress, AWS, vscode, 보안, github, 네트워크, javascripts, RDS,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

insu90 님의 블로그