1. 배열(Array) 메소드
2. 문자열(String) 메소드
3. 숫자/수학(Number/Math) 메소드
4. 객체(Object) 메소드
5. Set과 Map
6. 팁

1. 배열(Array) 메서드

배열 추가/삭제

push() - 배열 끝에 요소 추가

let arr = [1, 2, 3];
arr.push(4);
console.log(arr);  // [1, 2, 3, 4]

pop() - 배열 끝 요소 제거 및 반환

let arr = [1, 2, 3];
let last = arr.pop();
console.log(last);  // 3
console.log(arr);   // [1, 2]

unshift() - 배열 앞에 요소 추가

let arr = [2, 3];
arr.unshift(1);
console.log(arr);  // [1, 2, 3]

shift() - 배열 앞 요소 제거 및 반환

let arr = [1, 2, 3];
let first = arr.shift();
console.log(first);  // 1
console.log(arr);    // [2, 3]

배열 변환/가공

map() - 배열 각 요소를 변환

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

// 객체 배열에서 특정 속성만 추출
let users = [{name: "Alice", age: 20}, {name: "Bob", age: 25}];
let names = users.map(user => user.name);
console.log(names);  // ["Alice", "Bob"]

filter() - 조건에 맞는 요소만 필터링

let arr = [1, 2, 3, 4, 5];
let even = arr.filter(x => x % 2 === 0);
console.log(even);  // [2, 4]

// 특정 조건 만족하는 객체만 추출
let users = [{name: "Alice", age: 20}, {name: "Bob", age: 17}];
let adults = users.filter(user => user.age >= 18);
console.log(adults);  // [{name: "Alice", age: 20}]

reduce() - 배열을 하나의 값으로 누적

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

// 최댓값 구하기
let arr = [3, 1, 4, 1, 5];
let max = arr.reduce((acc, cur) => Math.max(acc, cur), -Infinity);
console.log(max);  // 5

// 객체로 그룹화
let fruits = ["apple", "banana", "apple", "orange", "banana"];
let count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count);  // {apple: 2, banana: 2, orange: 1}

forEach() - 각 요소에 함수 실행 (반환값 없음)

let arr = [1, 2, 3];
arr.forEach(x => console.log(x * 2));
// 출력: 2, 4, 6

배열 검색

find() - 조건에 맞는 첫 번째 요소 반환

let arr = [1, 2, 3, 4];
let found = arr.find(x => x > 2);
console.log(found);  // 3

findIndex() - 조건에 맞는 첫 번째 요소의 인덱스 반환

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

indexOf() - 특정 요소의 첫 인덱스 반환

let arr = [1, 2, 3, 2];
console.log(arr.indexOf(2));      // 1
console.log(arr.indexOf(5));      // -1 (없으면 -1)

includes() - 특정 요소 포함 여부 확인

let arr = [1, 2, 3];
console.log(arr.includes(2));  // true
console.log(arr.includes(5));  // false

some() - 조건에 맞는 요소가 하나라도 있으면 true

let arr = [1, 2, 3];
console.log(arr.some(x => x > 2));  // true

every() - 모든 요소가 조건에 맞아야 true

let arr = [1, 2, 3];
console.log(arr.every(x => x > 0));   // true
console.log(arr.every(x => x > 2));   // false

배열 정렬/순서

sort() - 배열 정렬 (원본 변경)

// 숫자 오름차순
let arr = [3, 1, 4, 2];
arr.sort((a, b) => a - b);
console.log(arr);  // [1, 2, 3, 4]

// 숫자 내림차순
arr.sort((a, b) => b - a);
console.log(arr);  // [4, 3, 2, 1]

// 문자열 정렬
let fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits);  // ["apple", "banana", "cherry"]

// 객체 정렬
let users = [{name: "Bob", age: 25}, {name: "Alice", age: 20}];
users.sort((a, b) => a.age - b.age);
console.log(users);  // [{name: "Alice", age: 20}, {name: "Bob", age: 25}]

reverse() - 배열 순서 뒤집기 (원본 변경)

let arr = [1, 2, 3];
arr.reverse();
console.log(arr);  // [3, 2, 1]

배열 분할/결합

slice(start, end) - 배열 일부 추출 (원본 유지)

let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3));   // [2, 3]
console.log(arr.slice(2));      // [3, 4, 5]
console.log(arr.slice(-2));     // [4, 5]

splice(start, deleteCount, ...items) - 요소 삭제/추가 (원본 변경)

let arr = [1, 2, 3, 4];
arr.splice(1, 2);           // [1, 4] - 인덱스 1부터 2개 제거
arr.splice(1, 0, 'a', 'b'); // [1, 'a', 'b', 4] - 인덱스 1에 추가
arr.splice(1, 2, 'x');      // [1, 'x', 4] - 인덱스 1부터 2개 제거하고 'x' 추가

concat() - 배열 합치기

let arr1 = [1, 2];
let arr2 = [3, 4];
let result = arr1.concat(arr2);
console.log(result);  // [1, 2, 3, 4]

// 스프레드 연산자로도 가능
let result2 = [...arr1, ...arr2];
console.log(result2);  // [1, 2, 3, 4]

join(separator) - 배열을 문자열로 합침

let arr = ['Hello', 'World'];
console.log(arr.join(' '));   // "Hello World"
console.log(arr.join(''));    // "HelloWorld"
console.log(arr.join('-'));   // "Hello-World"

기타 유용한 배열 메서드

fill(value, start, end) - 배열을 특정 값으로 채움

let arr = new Array(5).fill(0);
console.log(arr);  // [0, 0, 0, 0, 0]

let arr2 = [1, 2, 3, 4, 5];
arr2.fill(0, 1, 3);
console.log(arr2);  // [1, 0, 0, 4, 5]

flat(depth) - 중첩 배열 평탄화

let arr = [1, [2, [3, 4]]];
console.log(arr.flat());     // [1, 2, [3, 4]]
console.log(arr.flat(2));    // [1, 2, 3, 4]
console.log(arr.flat(Infinity));  // [1, 2, 3, 4]

from() - 유사 배열/반복 가능 객체를 배열로 변환

// 문자열을 배열로
let str = "hello";
let arr = Array.from(str);
console.log(arr);  // ["h", "e", "l", "l", "o"]

// 길이가 n인 배열 생성 + 초기화
let arr2 = Array.from({length: 5}, (_, i) => i);
console.log(arr2);  // [0, 1, 2, 3, 4]

2. 문자열(String) 메서드

문자열 검색/확인

indexOf(searchValue) - 문자열에서 특정 문자열의 첫 위치 반환

let str = "Hello World";
console.log(str.indexOf("World"));  // 6
console.log(str.indexOf("x"));      // -1 (없으면 -1)

includes(searchString) - 문자열 포함 여부 확인

let str = "Hello World";
console.log(str.includes("World"));  // true
console.log(str.includes("x"));      // false

startsWith(searchString) - 특정 문자열로 시작하는지 확인

console.log("Hello".startsWith("He"));   // true
console.log("Hello".startsWith("lo"));   // false

endsWith(searchString) - 특정 문자열로 끝나는지 확인

console.log("Hello".endsWith("lo"));   // true
console.log("Hello".endsWith("He"));   // false

문자열 추출

charAt(index) - 특정 인덱스의 문자 반환

console.log("Hello".charAt(1));  // "e"
console.log("Hello"[1]);         // "e" (동일)

slice(start, end) - 문자열 일부 추출

let str = "Hello World";
console.log(str.slice(0, 5));   // "Hello"
console.log(str.slice(6));      // "World"
console.log(str.slice(-5));     // "World"

substring(start, end) - 문자열 일부 추출 (음수 불가)

let str = "Hello World";
console.log(str.substring(0, 5));  // "Hello"
console.log(str.substring(6));     // "World"

slice와 substring 차이

• slice(): 음수 인덱스 지원 (뒤에서부터 계산)
• substring(): 음수를 0으로 처리, 시작 부분이 끝 부분보다 크면(start > end이면) 자동으로 바꿈

문자열 변환

split(separator) - 문자열을 배열로 분할

console.log("Hello World".split(" "));    // ["Hello", "World"]
console.log("a,b,c".split(","));          // ["a", "b", "c"]
console.log("Hello".split(""));           // ["H", "e", "l", "l", "o"]

replace(searchValue, newValue) - 문자열 치환 (첫 번째만 적용)

let str = "Hello World World";
console.log(str.replace("World", "JS"));  // "Hello JS World"

replaceAll(searchValue, newValue) -일치하는 모든 문자열 치환

let str = "Hello World World";
console.log(str.replaceAll("World", "JS"));  // "Hello JS JS"

toUpperCase() - 대문자로 변환

console.log("hello".toUpperCase());  // "HELLO"

toLowerCase() - 소문자로 변환

console.log("HELLO".toLowerCase());  // "hello"

trim() - 앞뒤 공백 제거

console.log("  hello  ".trim());      // "hello"
console.log("  hello  ".trimStart()); // "hello  "
console.log("  hello  ".trimEnd());   // "  hello"

padStart(targetLength, padString) - 문자열 앞을 채움

console.log("5".padStart(3, "0"));   // "005"
console.log("day".padStart(6, "to")); // "tododay"

padEnd(targetLength, padString) - 문자열 뒤를 채움

console.log("5".padEnd(3, "0"));   // "500"

문자열 반복

repeat(count) - 문자열 반복

console.log("Ha".repeat(3));  // "HaHaHa"
console.log("*".repeat(5));   // "*****"

기타

length - 문자열 길이

console.log("Hello".length);  // 5

3. 숫자/수학(Number/Math) 메서드

숫자 변환

parseInt(string, radix) - 문자열을 정수로 변환

console.log(parseInt("123"));       // 123
console.log(parseInt("3.14"));      // 3
console.log(parseInt("1010", 2));   // 10 (2진수)
console.log(parseInt("FF", 16));    // 255 (16진수)

parseFloat(string) - 문자열을 실수로 변환

console.log(parseFloat("3.14"));    // 3.14
console.log(parseFloat("3.14abc")); // 3.14

Number(value) - 값을 숫자로 변환

console.log(Number("123"));   // 123
console.log(Number("3.14"));  // 3.14
console.log(Number("abc"));   // NaN

toString(radix) - 숫자를 문자열로 변환

console.log((10).toString());    // "10"
console.log((10).toString(2));   // "1010" (2진수)
console.log((255).toString(16)); // "ff" (16진수)

toFixed(digits) - 소수점 자릿수 고정

console.log((3.14159).toFixed(2));  // "3.14"
console.log((3).toFixed(2));        // "3.00"

Math 객체

Math.max(...values) - 최댓값 반환

console.log(Math.max(1, 2, 3));       // 3
console.log(Math.max(...[1, 2, 3]));  // 3

Math.min(...values) - 최솟값 반환

console.log(Math.min(1, 2, 3));       // 1
console.log(Math.min(...[1, 2, 3]));  // 1

Math.abs(x) - 절댓값

console.log(Math.abs(-5));   // 5
console.log(Math.abs(5));    // 5

Math.floor(x) - 내림

console.log(Math.floor(3.7));   // 3
console.log(Math.floor(-3.7));  // -4

Math.ceil(x) - 올림

console.log(Math.ceil(3.2));   // 4
console.log(Math.ceil(-3.2));  // -3

Math.round(x) - 반올림

console.log(Math.round(3.5));   // 4
console.log(Math.round(3.4));   // 3

Math.pow(base, exponent) - 거듭제곱

console.log(Math.pow(2, 3));  // 8
console.log(2 ** 3);          // 8 (동일)

Math.sqrt(x) - 제곱근

console.log(Math.sqrt(16));  // 4
console.log(Math.sqrt(2));   // 1.414...

Math.random() - 0~1 사이 난수

console.log(Math.random());  // 0.xxxxx

// 1~10 사이 랜덤 정수
let random = Math.floor(Math.random() * 10) + 1;

4. 객체(Object) 메서드

Object.keys(obj) - 객체의 키를 배열로 반환

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj));  // ["a", "b", "c"]

Object.values(obj) - 객체의 값을 배열로 반환

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj));  // [1, 2, 3]

Object.entries(obj) - [키, 값]으로 배열 반환

let obj = {a: 1, b: 2};
console.log(Object.entries(obj));  // [["a", 1], ["b", 2]]

// 활용: 객체를 Map으로 변환
let map = new Map(Object.entries(obj));

5. Set과 Map

📍 Set (중복 제거)

// 배열 중복 제거
let arr = [1, 2, 2, 3, 3, 3];
let unique = [...new Set(arr)];
console.log(unique);  // [1, 2, 3]

// Set 메서드
let set = new Set([1, 2, 3]);
set.add(4);           // Set {1, 2, 3, 4}
set.delete(2);        // Set {1, 3, 4}
set.has(3);           // true
set.size;             // 3
set.clear();          // Set {}

📍 Map (키-값 쌍 저장)

let map = new Map();
map.set('name', 'Alice');
map.set('age', 20);

console.log(map.get('name'));  // "Alice"
console.log(map.has('age'));   // true
console.log(map.size);         // 2

map.delete('age');
console.log(map.size);         // 1

// 순회
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

6. 팁

배열 초기화

// 길이 n인 배열, 모두 0으로 초기화
let arr = new Array(5).fill(0);  // [0, 0, 0, 0, 0]

// 0부터 n-1까지 배열
let arr2 = Array.from({length: 5}, (_, i) => i);  // [0, 1, 2, 3, 4]

// 1부터 n까지 배열
let arr3 = Array.from({length: 5}, (_, i) => i + 1);  // [1, 2, 3, 4, 5]

2차원 배열 초기화

// n x m 배열 생성
let n = 3, m = 4;
let arr = Array.from({length: n}, () => Array(m).fill(0));
console.log(arr);
// [[0,0,0,0], [0,0,0,0], [0,0,0,0]]

배열 복사

// 얕은 복사
let arr = [1, 2, 3];
let copy1 = [...arr];
let copy2 = arr.slice();
let copy3 = Array.from(arr);

// 깊은 복사 (중첩 배열/객체)
let deepCopy = JSON.parse(JSON.stringify(arr));

최댓값/최솟값 구하기

let arr = [3, 1, 4, 1, 5];

// Math 사용
let max = Math.max(...arr);  // 5
let min = Math.min(...arr);  // 1

// reduce 사용
let max2 = arr.reduce((a, b) => Math.max(a, b));
let min2 = arr.reduce((a, b) => Math.min(a, b));

배열 합계

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, cur) => acc + cur, 0);  // 15

배열 평탄화

let arr = [[1, 2], [3, 4], [5]];
let flattened = arr.flat();  // [1, 2, 3, 4, 5]

// 또는
let flattened2 = [].concat(...arr);  // [1, 2, 3, 4, 5]

문자열, 배열 변환

// 문자열 → 배열
let str = "hello";
let arr = str.split('');     // ["h", "e", "l", "l", "o"]
let arr2 = [...str];         // ["h", "e", "l", "l", "o"]
let arr3 = Array.from(str);  // ["h", "e", "l", "l", "o"]

// 배열 → 문자열
let arr = ["h", "e", "l", "l", "o"];
let str = arr.join('');  // "hello"

숫자, 문자열 변환

// 숫자 → 문자열
let num = 123;
let str1 = String(num);      // "123"
let str2 = num.toString();   // "123"
let str3 = num + '';         // "123"

// 문자열 → 숫자
let str = "123";
let num1 = Number(str);      // 123
let num2 = parseInt(str);    // 123
let num3 = +str;             // 123

조건부 카운팅

let arr = [1, 2, 3, 4, 5];
let count = arr.filter(x => x > 2).length;  // 3

빈도수 세기

let arr = ["apple", "banana", "apple", "orange", "banana"];
let freq = arr.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});
console.log(freq);  // {apple: 2, banana: 2, orange: 1}

정리

이 글에서 정리한 메소드들은 자바스크립트에서 자주 사용되는 핵심 메서드들입니다.
각 메서드의 시간 복잡도와 특징을 이해하는 것이 중요합니다.

특히 map, filter, reduce 같은 고차 함수와 slice, splice, sort 같은 배열 조작 메소드는 중요합니다.

• 원본을 변경하는 메서드: push, pop, shift, unshift, splice, sort, reverse, fill
• 새 배열/문자열을 반환하는 메서드: map, filter, slice, concat, split, join

배열에 있는 요소의 값을 변경하여 새로운 배열을 만들 때 사용할 수 있다.

반복문으로 처리가 가능 하지만 간단하게 Array.map() 메소드를 사용할 수 있으며, 이는 콜백 함수를 이용해 각각의 요소를 호출하고 그 값을 변환할 수 있게 만들어준다.

즉, 콜백 함수는 배열의 각 요소에 실행된다.

예를 들어,

let arr = [1, 2, 3, 4];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 2;
}

console.log(arr); // [2, 4, 6, 8]

와 같은 반복문으로 나타낼 수도 있지만

let arr = [1, 2, 3, 4];

let modifiedArr = arr.map(function(element){
    return element * 2;
});

console.log(modifiedArr); // [2, 4, 6, 8]

처럼 Array.map() 메소드를 사용할 수 있다.

이는 객체 배열에서도 적용될 수 있으며

예를 들어,

let users = [
  {firstName : "Kanghyun", lastName: "Kim"},
  {firstName : "Donald", lastName: "Trump"},
  {firstName : "Michel", lastName: "Jordan"}
];

과 같은 배열을 순환처리해서

let users = [
  {firstName : "Kanghyun", lastName: "Kim"},
  {firstName : "Donald", lastName: "Trump"},
  {firstName : "Michel", lastName: "Jordan"}
];

let usersFullName = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Kanghyun Kim", "Donald Trump", "Michel Jordan"]

와 같이 각각의 객체를 결합할 수도 있다.

이러한 Map() 메소드는 원본 배열을 변경하지 않으며, 각 요소에 대해 콜백 함수를 실행한다

또한, 결과물로 새로운 배열을 반환한다.

참조 : https://www.freecodecamp.org/korean/news/javascript-map-method/

일정 시간이 지난 후에 원하는 함수를 예약하여 호출하는 것을 '호출 스케줄링(scheduling a call)'이라 하며 이는 setTimeout, setInterval과 같이 두 가지로 나뉠 수 있다.

setTimeout

setTimeout은 타이머와 같은 기능을 하고 일정 시간이 지난 후에 함수를 실행시킨다.

예를 들어,

setTimeout (() => {
console.log("setTimeout, 1000ms");
}, 1000);
	
	console.log("Hello World");

와 같이 나타낼 수 있으며 이 함수는 "Hello World"를 출력하고 1초 후에 "setTimeout, 1ms"를 출력하게 된다. 여기서 1000은 1000ms(1초)를 뜻한다

setInterval

setInterval은 일정 시간 간격을 두고 함수를 실행시킨다.

예를 들어,

setInterval (() => {
console.log("Tic");
}, 1000);

setInterval (() => {
console.log("Tok");
}, 2000);

와 같이 나타낼 수 있으며, 이 함수는 1초 마다 "Tic"을 출력하고 2초 마다"Tok"를 출력하여 주기적으로 문자를 출력하게 된다.

clearTimeout / clearInterval

setTimeout을 호출하면 '타이머 식별자(timer identifier)'가 반환된다. 스케줄링을 취소하고 싶을 때, clearTimeout을 사용할 수 있으며 이는 setInterval에도 동일하게 적용된다.

예를 들어,

let ticTok = setInterval(() => {
console.log("Tictok");
}, 1000);
clearInterval(() => {
ticTok}, 10000);

와 같이 나타낼 수 있으며, 이 함수는 1초 마다  "TicTok"을 10초간 호출하고 더 이상 호출하지 않게 된다.

출처 : https://ko.javascript.info/settimeout-setinterval

다음은 해당 섹션의 끝에 도달한 후 바로 지금 또는 나중에 검토할 수 있는 "심층 정보" 추가 읽기입니다. 연산자, 값 그리고 값 유형에 대한 더 유용한 정보입니다.

연산자에 대한 추가 정보

이전 강의에서 우리는 자바 스크립트로 수학을 할 때 항상 사용하게 될 핵심 연산자를 살펴보았습니다.

● +: 두 개의 숫자를 더하거나 두 개의 문자열을 연결

● -: 두 숫자 빼기

● *: 여러 개의 두 숫자

● /: 두 숫자를 나눕니다.

● %: 나눗셈의 나머지를 구합니다.

영상에서는 다루지 않았지만 과정 후반부에 표시될 유용한 속기 연산자도 있습니다.

● ++(예: age++): age = age + 1에 대한 약식 표기법(변수에 저장된 값을 1씩 증가시키고 해당 변수에 다시 저장)

● --(예: age--): age = age - 1에 대한 약식 표기법(변수에 저장된 값을 1만큼 감소시키고 해당 변수에 다시 저장)

● ** (예: age = 4 ** 3): 지수 연산자(예: age = 4 * 4 * 4 대체)

● +=(예: age += 2): age = age + 2에 대한 약식 표기법(변수에 저장된 값을 증가시키고 해당 변수에 다시 저장)

● -= (예: age -= 2): age = age - 2에 대한 약식 표기법(변수에 저장된 값을 감소시키고 해당 변수에 다시 저장)

● *= (예: age *= 2): age = age * 2에 대한 약식 표기법(변수에 저장된 값을 곱하여 해당 변수에 다시 저장)

● /= (예: age /= 2): age = age / 2에 대한 약식 표기법(변수에 저장된 값을 나누어 해당 변수에 다시 저장)

값 유형에 대한 추가 정보

모든 값에는 특정 값 유형이 있다는 것을 이해하고 염두에 두는 것도 중요합니다. 예를 들어 2는 숫자이고 'hi'또는 '2'는 문자열입니다('!에 주의).

특히 '2'의 경우가 중요합니다. 우리 인간에게는 숫자처럼 보이지만 물론 엄밀히 따지면 숫자입니다. 그러나 "원시 숫자"가 아닌 텍스트로 저장됩니다.

그게 왜 중요할까요?

위에서 언급한 연산자로 작업을 수행하기 시작하면 중요합니다. 다음은 몇 가지 예제 코드 조각과 이에 의해 생성되는 결과입니다(브라우저 개발자 도구의 자바 스크립트 콘솔에서 모두 테스트할 수 있음).

위의 예를 살펴보면 생성한 결과를 생성할 것으로 예상하지 못한 일부 코드 라인이 있을 수 있습니다.

특히 e, f와 g는 혼동될 수 있습니다.

그러나 값에는 특정 값 유형이 있다는 점을 염두에 두면 덜 혼란스럽습니다. 무언가를 따옴표로 묶는 경우(큰따옴표든 작은따옴표든 중요하지 않음) 문자열입니다. 비록 그것이 우리에게 숫자처럼 보일지라도 문자열에 + 연산자를 사용하면(다른 값이 숫자인 경우에도) 자바 스크립트는 문자열에 대해 +를 사용할 때 항상 하던 일을 수행하죠.

값을 연결해서 새로운 문자열을 만듭니다. 이것이 e와 f가 결과로 '22'를 산출하는 이유입니다.

이제 결과가 갑자기 문자열이 아니라 숫자이기 때문에 g가 다시 혼란스러울 수 있지만 그 이유는 간단합니다. 자바 스크립트는 문자열에 대해 *, / 또는 -로 무엇을 해야 할지 모릅니다. 하지만 바로 실패하는 대신 문자열을 배후에서 숫자로 변환하고 변환된 숫자를 연산에서 대신 사용하려고 시도합니다. 그래서 결과적으로 숫자 6을 얻습니다.

문자열을 숫자로 변환하는 데 실패하면(예: 'hi' * 3을 시도했기 때문에) "Not a Number"를 나타내는 NaN이라는 특별한 결과를 얻게 됩니다. 이와 같은 경우에 자바 스크립트에 존재하는 특수 값입니다.

다른 값 유형(객체, 배열, 함수 등)도 있지만 지금은 숫자와 문자열이 가장 중요하며 과정을 통해 더 많은 값과 값 유형을 탐색할 것입니다!

출처 : https://www.udemy.com/course/100-2022-web-development/learn/lecture/30289952#questions

프로그래밍에서 함수(function)는 일정한 동작을 수행하는 코드를 의미한다.

이를 미리 만들어 두고 원할 때 실행하여 정해진 동작을 수행할 수 있다.

함수를 만들 때, ‘function’ 예약어를 사용하거나 ‘=>(화살표)’ 기호를 사용하며 화살표 기호를 사용한 함수를

화살표 함수(arrow function)이라 한다.

이는

function() {}

() => {}

와 같이 나타낼 수 있으며, 함수에 이름을 붙이면 다른 곳에서 사용할 수 있다.

예를 들어,

function a() {}

const b = function() {}

const c = () => {}

와 같이 사용할 수 있으며

함수 a 처럼, 함수를 상수에 대입하는 대신 function 키워드 뒤에 함수 이름을 넣어주는 방식을 함수 선언문(function declaration statment)이라 한다.

그리고, 두 번째와 세 번째 함수에는 각각 b와 c의 상수를 대입했는데, 이처럼 함수에 상수나 변수를 대입하는 방식을 함수 표현식(function expression)이라 한다.

이러한 함수를 만드는 행위도 선언한다(declare)고 표현한다.

만든 함수를 사용하는 행위를 호출한다(call)고 표현하며

예를 들면,

function a () {

console.log('Hello');

console.log('Function!');

};

a ();

Hello

Function!

undefined

와 같이 나타난다.

위의 부분은 함수선언문을 선언한 것 이며,

아래의 a(); 부분은 선언한 함수를 호출한 부분이고 출력이 된다.

undefined 부분은 반환값을 나타내는데, 이는 반환값이 없음을undefined 라는 반환값으로 나타내 주었다.

이는 함수선언문 안에서 return undefined;

가 생략된 모습이다. 따라서, undefined와 return undefined는 생략 가능하다.

return 함수를 사용한다면 그 부분을 마지막으로 함수는 종료된다.

그러므로, if문을 사용하여 함수의 실행부분과 종료부분을 설정할 수 있다.