[JavaScript]
기초
- [JS] Js기초
- [JS] Js기초 변수
- [JS] Js기초 자료형
- [JS] Js기초 형변환
- [JS] Js기초 연산자
- [JS] Js기초 반복문
- [JS] Js기초 switch
- [JS] Js기초 function
- [JS] Js기초 객체
- [JS] Js기초 배열
중급
- [JS] Js중급 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)
- [JS] Js중급 생성자함수
- [JS] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
- [JS] 심볼(Symbol)
- [JS] WeakMap WeakSet
- [JS] 숫자, 수학 method (Number, Math)
- [JS] 문자열 메소드(String methods)
- [JS] 배열 메소드(Array methods)
- [JS] 구조 분해 할당 (Destructuring assignment)
- [JS] 매개변수 리스트와 전개 문법(Rest parameters and spread syntax)
- [JS] 클로저(Closure)
- [JS] setTimeout / setInterval
- [JS] call / apply / bind
- [JS] 상속, 프로토타입(Prototype)
- [JS] 클래스(Class)
- [JS] 클로미스(Promise)
- [JS] 비동기 처리(Async/Await)
- [JS] Generator
- [JS] 메모리 릭(Memory Leak)
함수 마스터 가보자고! 🚀 코드를 재사용할 수 있게 해주는 꿀템이야!
1. 기본 함수 만들기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| // 기본적인 함수 선언
function sayHello(name) {
console.log(`안녕! 난 ${name}이야! 👋`);
}
// 함수 사용하기
sayHello("김코딩"); // 안녕! 난 김코딩이야! 👋
sayHello("박해커"); // 안녕! 난 박해커야! 👋
// 값을 돌려주는 함수
function addNumbers(a, b) {
return a + b; // 결과를 돌려줌!
}
let result = addNumbers(5, 3);
console.log(result); // 8
|
2. 화살표 함수 (모던한 방법! 😎)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| // 일반 함수
function multiply(x, y) {
return x * y;
}
// 화살표 함수로 변신!
const multiply2 = (x, y) => x * y;
// 사용해보기
console.log(multiply2(4, 5)); // 20
// 여러 줄이 필요하면 이렇게!
const checkAge = (age) => {
if (age >= 20) {
return "성인이네요! 🎉";
} else {
return "아직 미성년자네요! 🎈";
}
};
|
3. 기본값 설정하기
1
2
3
4
5
6
7
8
9
10
| // 기본값 있는 함수
function orderCoffee(type = "아메리카노", size = "중간") {
return `${size}사이즈 ${type} 주문완료! ☕`;
}
console.log(orderCoffee()); // 중간사이즈 아메리카노 주문완료! ☕
console.log(orderCoffee("라떼", "큰")); // 큰사이즈 라떼 주문완료! ☕
// 화살표 함수로도 가능!
const greet = (name = "익명") => `안녕, ${name}! 😊`;
|
4. 콜백 함수 (함수를 인자로 전달!)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // 콜백 함수 사용
function processUser(name, callback) {
console.log(`${name} 처리 시작...`);
callback(name);
}
// 콜백으로 전달할 함수들
const welcomeUser = (name) => {
console.log(`환영합니다, ${name}님! 🎉`);
};
const goodbyeUser = (name) => {
console.log(`안녕히가세요, ${name}님! 👋`);
};
// 사용해보기
processUser("김코딩", welcomeUser);
processUser("박해커", goodbyeUser);
|
5. 실전 예제: 게임 캐릭터 만들기!
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
32
33
34
35
36
| // 캐릭터 생성 함수
const createCharacter = (name, type = "전사") => {
let hp = 100;
let mp = 50;
return {
name,
type,
status: () => {
console.log(`
이름: ${name}
직업: ${type}
HP: ${"❤️".repeat(hp / 20)}
MP: ${"💙".repeat(mp / 10)}
`);
},
attack: () => {
mp -= 10;
return `${name}의 공격! ⚔️ (MP: ${mp})`;
},
heal: () => {
if (mp >= 20) {
hp += 30;
mp -= 20;
return `${name}의 힐링! 💚 (HP: ${hp}, MP: ${mp})`;
}
return "마나가 부족해요! 😢";
},
};
};
// 캐릭터 만들어보기
const hero = createCharacter("슈퍼코딩", "마법사");
hero.status();
console.log(hero.attack());
console.log(hero.heal());
|
꿀팁! 🍯
- 함수는 작게 만들기!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // 이렇게 길게 말고
function doEverything() {
// 엄청 긴 코드...
}
// 이렇게 나누기!
function calculateTotal() {
/* ... */
}
function processData() {
/* ... */
}
function displayResult() {
/* ... */
}
|
- 함수 이름은 동사로 시작!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // 좋은 예시
function getUserData() {
/* ... */
}
function calculateTotal() {
/* ... */
}
function isAdult() {
/* ... */
}
// 안 좋은 예시
function data() {
/* ... */
}
function number() {
/* ... */
}
|
- 순수 함수 만들기
1
2
3
4
5
6
7
8
9
10
| // 좋은 예시 (순수 함수)
function add(a, b) {
return a + b;
}
// 피해야 할 예시 (부작용 있는 함수)
let total = 0;
function addToTotal(n) {
total += n; // 외부 변수를 변경!
}
|
함수 완전 재밌지 않아? 이제 넌 함수 마스터야! 🎉