javascript 데이터 실행하기01
javascript 데이터 실행하기
▶ 오늘은 데이터를 실행하는 다양한 유형에 대해 알아볼까합니다. 그럼 공부하러 가볼까요?
1. 함수 : 선언적 함수
▶ 선언적 함수 정의(Declarative function definition)는 함수를 선언할 때 함수 이름과 함께 function 키워드를 사용하여 함수를 명시적으로 정의하는 방식입니다. 이 함수는 선언 시 어디서든 호출할 수 있고 함수를 호출할 때는 함수 이름과 괄호를 사용해야 합니다. 예시를 통해 살펴볼까요?
1
2
3
4
5
6
{
function func () {
console.log("01. 함수가 실행되었습니다.")
}
func();
}
▶ 위의 예시에서 func을 “01. 함수가 실행되었습니다.”로 선언했기 때문에 결과값을 실행하면 01. 함수가 실행되었습니다.가 도출되어집니다.
2. 함수 : 익명 함수
▶ 익명 함수는 함수의 이름이 없는 함수로 변수에 할당하여 사용되는데, const를 통해 func를 상수로 정의한 후 입력합니다. 예시를 통해 살펴볼까요?
1
2
3
4
5
6
{
const func = function () {
console.log("02. 함수가 실행되었습니다.")
}
func();
}
▶ 위의 예시는 const를 통해 func를 “02. 함수가 실행되었습니다.”로 정의했기 때문에 결과값을 실행하면 02. 함수가 실행되었습니다.가 도출되어집니다.
3. 함수 : 매개변수 함수
▶ 매개변수(parameter)는 주로 str로 많이 쓰는데 이는 함수를 호출할 때 전달되는 값(argument)을 받아들이는 변수입니다. 때문에 func와 결과값인 console.log()에 동일하게 매개변수인 str을 입력하여 선언한 후 함수 func()에 결과값을 지정해주는 형식입니다. 예시를 통해 살펴볼까요?
1
2
3
4
5
6
{
function func(str) {
console.log(str);
}
func("03. 함수가 실행되었습니다.");
}
▶ 위의 예시는 func와 console.log()에 동일하게 매개변수인 str을 입력한 후 선언함수 func()에 결과값을 “03. 함수가 실행되었습니다.”로 지정했기 때문에 결과값을 실행하면 03. 함수가 실행되었습니다.가 도출되어집니다.
4. 함수 : 리턴값 함수
▶ return은 반환하는 값을 의미하며, return할 값을 지정해주면 해당 값이 도출되는 형식입니다. 예시를 통해 살펴볼까요?
1
2
3
4
5
6
{
function func() {
return "04. 함수가 실행되었습니다.";
}
console.log(func());
}
▶ 위의 예시는 return값을 “04. 함수가 실행되었습니다.”로 지정했기 때문에 결과값을 실행하면 04. 함수가 실행되었습니다.가 도출되어집니다.
5. 함수 : 매개변수 + 리턴값 함수
▶ 함수는 매개변수와 리턴값을 동시에 사용할 수도 있는데요, 위에서 배운 내용을 생각하며 예시를 통해 살펴볼까요?
1
2
3
4
5
6
{
function func(str) {
return str;
}
console.log(func("05. 함수가 실행되었습니다."));
}
▶ 위의 예시는 return값과 console.log()에 동일하게 매개변수인 str을 입력한 후 선언함수 func()에 결과값을 “05. 함수가 실행되었습니다.”로 지정했기 때문에 결과값을 실행하면 05. 함수가 실행되었습니다.가 도출되어집니다.
6. 화살표 함수
▶ 화살표 함수는 기존 함수에서 function을 지운 후 func와 () 사이엔 ‘=’ ,()와 {} 사이엔 ‘=>’를 입력하면 됩니다. 예시를 통해 살펴볼까요?
1
2
3
4
5
6
7
8
9
10
11
12
13
{
// 기존 선언적 함수
function func() {
console.log("06. 함수가 실행되었습니다.");
}
func();
// 화살표 선언적 함수
func1 = () => {
console.log("06. 함수가 실행되었습니다.");
}
func1();
}
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();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
{
// 기존 매개변수 함수
function func = (str){
console.log(str);
}
func("08. 함수가 실행되었습니다.");
// 화살표 매개변수 함수
func = (str) => {
console.log(str);
}
func("08. 함수가 실행되었습니다.");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
{
// 기존 리턴값 선언적 함수
function func = (){
return "09. 함수가 실행되었습니다.";
}
console.log(func());
// 화살표 리턴값 선언적 함수
func = () => {
return "09. 함수가 실행되었습니다.";
}
console.log(func());
}
▶ 위의 예시들을 통해 선언, 익명, 매개변수, 리턴값 화살표 함수가 어떤식으로 만들어지는지 이해하시면 됩니다!
7. 함수 유형 : 함수와 매개변수를 이용한 형태
▶ 함수와 매개변수를 이용한 형태는 예시를 보며 이해하는게 더 빠를테니 예시를 통해 살펴보도록 할게요!
1
2
3
4
5
6
7
{
function func(num, str) {
console.log(num + ". " + str);
console.log(`${num}. ${str}`);
}
func(11, "함수가 실행되었습니다.");
}
▶ 위의 예시에서 func함수는 두 개의 매개변수 num과 str을 가지고 있습니다.
이 함수는 두 개의 console.log 문을 사용하여 두 가지 형식으로 문자열을 출력할 수 있는데,
첫 번째, 연결 연산자(+)를 사용하여 문자열을 연결하게 되면 num + “. “ + str의 형태로 출력됩니다.
두 번째, console.log 문은 템플릿 리터럴인 ${num}. ${str}의 형태를 사용하여 문자열을 출력합니다.
두 가지 형식 모두 결과값은 동일하게 11. 함수가 실행되었습니다.가 도출되어집니다.
8. 함수 유형 : 함수와 변수를 이용한 형태
▶ 함수와 변수를 이용한 형태는 예시를 보며 이해하는게 더 빠를테니 예시를 통해 살펴보도록 할게요!
1
2
3
4
5
6
7
8
9
{
const num = 12;
const str = "함수가 실행되었습니다.";
function func(num, str) {
console.log(`${num}. ${str}`);
}
func(num, str);
}
▶ 위의 예시는 const 키워드를 사용하여 num에는 12를, str에는 “함수가 실행되었습니다.”를 변수로 지정한 후 func라는 이름의 함수를 정의하였습니다.
이 때 func는 두 개의 매개변수인 num과 str을 받게 되며, 템플릿 리터럴인 ${num}. ${str}의 형태를 사용하면 두 개를 조합한 문자열인 12. 함수가 실행되었습니다.가 도출되어집니다.
9. 함수 유형 : 함수와 배열을 이용한 형태
▶ 함수와 배열을 이용한 형태는 예시를 보며 이해하는게 더 빠를테니 예시를 통해 살펴보도록 할게요!
1
2
3
4
5
6
7
8
9
10
11
{
const num = [13, 14];
const str = ["함수가 실행되었습니다.", "함수가 실행되었습니다."];
function func(num, str) {
console.log(`${num}. ${str}`);
}
func(num[0], str[0]);
func(num[1], str[1]);
}
▶ 위의 예시는 const 키워드를 사용하여 배열로 num에는 13, 14를, str에는 “함수가 실행되었습니다.”, “함수가 실행되었습니다.”를 변수로 지정한 후 func라는 이름의 함수를 템플릿 리터럴 형태로 정의하였습니다.
이 때 지정한 변수의 형태가 배열이기 때문에 num[0]과 str[0], num[1]과 str[1]에 해당하는 요소를 따로 불러와야 하며, 따라서 결과값은 아래와 같습니다.
func(num[0], str[0]); -> 13. 함수가 실행되었습니다.
func(num[1], str[1]); -> 14. 함수가 실행되었습니다.
10. 함수 유형 : 함수와 객체를 이용한 형태
▶ 함수와 객체를 이용한 형태는 예시를 보며 이해하는게 더 빠를테니 예시를 통해 살펴보도록 할게요!
1
2
3
4
5
6
7
8
9
10
{
const info = {
num: 15,
str: "함수가 실행되었습니다."
}
function func(num, str) {
console.log(`${num}. ${str}`);
}
func(info.num, info.str);
}
▶ 위의 예시는 const 키워드를 사용하여 객체로 num에는 15를, str에는 “함수가 실행되었습니다.”를 변수로 지정한 후 func라는 이름의 함수를 템플릿 리터럴 형태로 정의하였습니다.
이 때, info라는 객체를 생성한 후 변수를 지정했기 때문에 .num과 .str에 해당하는 info 요소를 각각 불러와야 하며, 결과값은 15. 함수가 실행되었습니다.가 도출되어집니다.
11. 함수 유형 : 함수와 객체 및 배열을 이용한 형태
▶ 함수와 객체 및 배열을 이용한 형태는 예시를 보며 이해하는게 더 빠를테니 예시를 통해 살펴보도록 할게요!
1
2
3
4
5
6
7
8
9
10
11
12
{
const info = [
{ num: 16, str: "함수가 실행되었습니다." },
{ num: 17, str: "함수가 실행되었습니다." },
];
function func(num, str) {
console.log(`${num}. ${str}`);
}
func(info[0].num, info[0].str);
func(info[1].num, info[1].str);
}
▶ 위의 예시는 const 키워드를 사용하여 객체로 num에는 16, 17을, str에는 “함수가 실행되었습니다.”, “함수가 실행되었습니다.”를 변수로 지정한 후 func라는 이름의 함수를 템플릿 리터럴 형태로 정의하였습니다.
이 때, info는 배열로, num과 str은 객체로 지정했기 때문에 배열인 info 요소와 객체인 .num과 .str의 요소를 각각 불러와야 하며, 따라서 결과값은 아래와 같습니다.
func(info[0].num, info[0].str); -> 16. 함수가 실행되었습니다.
func(info[1].num, info[1].str); -> 17. 함수가 실행되었습니다.
12. 함수 유형 : 객체 안에 함수를 이용한 형태
▶ 객체 안에 함수를 이용한 형태는 예시를 보며 이해하는게 더 빠를테니 예시를 통해 살펴보도록 할게요!
1
2
3
4
5
6
7
8
9
10
{
const info = {
num: 18,
str: "함수가 실행되었습니다.",
result: () => {
console.log(`${info.num}. ${info.str}`);
}
}
info.result();
}
▶ 위의 예시는 const 키워드를 사용하여 info라는 이름의 객체를 생성한 후 num, str, result라는 세 개의 속성을 지정하였습니다.
이 때, result는 결과를 나타내는 함수로 info에 대한 num과 str의 값을 도출해야하기 때문에 console.log()를 사용시 ${info.num}. ${info.str}인 리터럴 형태로 불러와야 하며, 결과를 도출하는 함수 실행은 info.result();입니다.
따라서 이를 실행하면 결과값은 18. 함수가 실행되었습니다.가 도출되어집니다.
이렇게 오늘은 데이터를 실행하는 다양한 유형에 대해 알아봤는데요,
다음엔 또 다른 유형의 데이터 실행하기를 들고 오도록 하겠습니다😁!