javascript 함수
javascript 함수
안녕하세요!! 오늘은 javascript 함수에 대해 알아보도록 하겠습니다.
선언적 함수
선언적 함수는 코드의 상단에 function 키워드를 사용하여 정의된 함수를 말합니다. 이 함수는 선언된 위치와 관계없이 어디서든 호출할 수 있으며, 코드 실행 전에 메모리에 할당되어 호이스팅에 영향을 받습니다. 다른 말로는 함수 선언문이라고도 불리며, 전역 스코프나 해당 함수가 정의된 스코프에서 사용될 수 있습니다. 함수가 선언될 때마다 함수 객체가 만들어지며, 이후에 언제든 해당 함수를 호출할 수 있습니다.
1
2
3
4
5
6
{
function func() {
console.log("01. 함수가 실행되었습니다.");
}
func();
}
익명 함수
익명 함수는 이름이 없는 함수를 의미합니다. 일반적으로 함수를 선언할 때 이름을 명시하지 않고 사용됩니다. 대부분의 경우 함수 표현식이나 콜백 함수로 사용되며, 다른 함수 내에서 일회성으로 사용될 때 유용합니다. 예를 들어, 변수에 할당하여 사용하거나 다른 함수의 매개변수로 전달되어 호출될 수 있습니다. 이러한 함수는 주로 한 번만 필요하거나 특정 작업을 처리하는 데에만 사용되므로 이름을 붙이지 않고도 충분히 이해할 수 있습니다. 이름이 없어도 함수의 동작이나 목적을 파악하기 쉽고 간결한 코드를 작성할 수 있도록 해줍니다.
1
2
3
4
5
6
{
const func = function () {
console.log("02. 함수가 실행되었습니다.");
}
func();
}
매개변수 함수
매개변수 함수는 다른 함수의 매개변수로 전달되는 함수를 말합니다. 위 코드에서는 “func”와 “func1”이라는 두 함수를 정의하고 있습니다. 두 함수 모두 하나의 매개변수를 받아들이고, 이 매개변수를 콘솔에 출력하는 역할을 수행합니다. 따라서 이 두 함수는 문자열을 받아들이는 매개변수 함수로 정의됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
{
// 선언적 함수
function func(str) {
console.log(str);
}
func("03. 함수가 실행되었습니다.");
//익명 함수
const func1 = function (str) {
console.log(str);
}
func("03. 함수가 실행되었습니다.");
}
리턴값 함수
리턴값 함수는 호출되었을 때 결과를 반환하는 함수를 말합니다. 이 함수는 실행된 결과를 반환하여 해당 함수가 호출된 곳에서 그 값을 받아 사용할 수 있습니다. 보통 함수 내에서 계산된 값을 반환하거나 다른 작업의 결과를 반환하는데 사용됩니다. 반환된 값은 함수를 호출한 코드에서 변수에 할당하거나 다른 함수의 인자로 전달하여 활용될 수 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
{
//선언적 함수
function func() {
return "04. 함수가 실행되었습니다."
}
console.log(func());
//익명 함수
const func1 = function () {
return "04. 함수가 실행되었습니다."
}
console.log(func1());
}
매개변수 + 리턴값 함수
주어진 코드에서 함수는 외부로부터 문자열을 입력받아들이고, 그 입력값을 그대로 반환합니다. 이는 매개변수와 리턴값을 가진 함수의 기본적인 형태입니다. 함수는 입력값을 받아들인 후 내부에서 특정 작업을 수행하거나 가공한 후 결과를 반환하는데, 여기서는 입력값을 그대로 반환하여 출력합니다. 이렇게 하면 함수는 입력값에 따라 결과를 다르게 반환할 수 있으며, 이는 함수의 다양한 활용성을 보여줍니다. 함수는 코드의 재사용성과 가독성을 높이는데 유용하며, 다양한 기능을 제공할 수 있습니다
1
2
3
4
5
6
7
8
9
10
11
12
13
{
// 선언적 함수
function func(str) {
return str;
}
console.log(func("05. 함수가 실행되었습니다."));
// 익명 함수
const func1 = function (str) {
return str;
}
console.log(func1("05. 함수가 실행되었습니다."));
}
선언적 함수
화살표 함수는 함수를 더 간결하게 정의하는데 사용됩니다. 기존의 함수 선언 방식인 function 키워드 대신 =>를 사용하여 함수를 정의합니다. 주로 한 줄로 간단한 작업을 하는 함수를 정의할 때 유용하게 활용되며, 익명 함수를 변수에 할당할 때 자주 사용됩니다. 이를 통해 코드를 더 읽기 쉽고 간결하게 만들어줍니다
1
2
3
4
5
6
7
8
9
10
11
12
13
{
// 선언적 함수
function func() {
console.log("06. 함수가 실행되었습니다.")
}
func();
// 선언적 함수를 화살표 함수로 바꿈
func = () => {
console.log("06. 함수가 실행되었습니다.")
}
func();
}
익명함수
화살표 함수는 익명 함수를 더 간결하고 명확하게 작성할 수 있는 ES6 문법입니다. 익명 함수란 이름이 없는 함수를 말하며, 주로 콜백 함수나 간단한 함수를 정의할 때 사용됩니다. 화살표 함수는 익명 함수를 활용하여 함수를 정의하는 것이므로, 익명 함수의 특성을 그대로 가지고 있습니다. 이를 통해 화살표 함수는 코드를 더 간결하게 표현할 수 있고, 일반적으로 함수의 선언을 더 짧고 명확하게 만들어줍니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
{
//익명 함수
const func = function () {
console.log("07. 함수가 실행되었습니다.")
};
func();
// 익명함수를 화살표 함수로 변경
const func1 = () => {
console.log("07. 함수가 실행되었습니다.")
};
func1();
}
매개변수 함수
매개변수는 함수가 호출될 때 함수에 전달되는 값을 받아들이는 변수를 말합니다. 함수를 정의할 때 괄호 () 안에 매개변수를 지정하여 함수가 호출될 때 이를 사용할 수 있습니다. 매개변수는 함수 내부에서 변수처럼 사용되며, 함수가 호출될 때 전달된 값(argument)에 대응됩니다. 화살표 함수에서 매개변수는 화살표 =>를 통해 함수의 몸체와 구분되며, 함수의 인자로 동작합니다. 이를 통해 함수가 호출될 때 매개변수에 전달된 값을 함수 내부에서 사용할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
{
// 선언적 함수
func = (str) => {
console.log(str);
}
func("08. 함수가 실행되었습니다.");
// 익명 함수
const func1 = (str) => {
console.log(str);
}
func1("08. 함수가 실행되었습니다.");
}
리턴값 함수 (결과,종료)
화살표 함수는 ES6에서 도입된 간결한 함수 표현식으로, 함수를 더 간결하게 정의할 수 있는 문법입니다. 함수 내부에서 return 키워드를 사용하여 명시적으로 반환값을 지정하며, 호출한 곳으로 그 값을 전달합니다. 이를 통해 함수의 실행 결과를 간결하게 반환할 수 있고, 코드의 가독성을 향상시킵니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
{
//선언적 함수
func = () => {
return "09. 함수가 실행되었습니다."
}
console.log(func());
//익명 함수
const func1 = () => {
return "09. 함수가 실행되었습니다."
}
console.log(func1());
}
매개변수 + 리턴값 함수
화살표 함수는 ES6에서 추가된 새로운 함수 선언 방식입니다. 이 함수는 기존의 함수 선언 방식보다 더 간결하고 명확한 구문을 제공합니다. 화살표 함수는 다음과 같은 특징을 가지고있습니다. 매개변수: 함수의 매개변수를 괄호로 묶어서 받아들입니다. 매개변수가 하나인 경우에는 괄호를 생략할 수 있습니다. 화살표 (=>): 화살표 함수를 정의하는데 사용됩니다. 매개변수와 함수의 몸체를 구분하는 역할을 합니다. 함수 몸체: 함수의 몸체는 중괄호 {}로 감싸지지 않고, 단일 표현식이거나 여러 표현식이 될 수 있습니다. 리턴값: 함수 몸체가 단일 표현식으로 이루어진 경우, return 키워드와 중괄호를 생략하여 바로 결과를 반환할 수 있습니다. 이러한 특징들을 이용하면 함수를 더 간결하게 작성할 수 있고, 특히 간단한 작업을 하는 함수를 정의할 때 유용합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
// 익명 함수(화살표 함수) + 매개변수 + 리턴값
const func = (str) => {
return str;
}
console.log(func("10. 함수가 실행되었습니다."));
// 매개변수가 하나이면 괄호 생략 가능
const func2 = str => {
return str;
}
console.log(func2("10. 함수가 실행되었습니다."));
// 리턴 생략
const func3 = str => str;
console.log(func3("10. 함수가 실행되었습니다."));
// 선언적 함수(가독성X)
func4 = str => str;
console.log(func4("10. 함수가 실행되었습니다."));
}