01. 선언적 함수
선언적 함수는 함수를 선언할 때 함수 이름과 함수 내용을 함께 작성하는 방식입니다.
{
function func(){
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
호이스팅
변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야 하는 것이 맞지만, var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않습니다.
02. 익명 함수
익명 함수란 이름이 없는 함수를 의미합니다.
보통 함수를 정의할 때 함수 이름을 지정하는데, 익명 함수는 이러한 이름이 없습니다.
대신 변수에 함수 자체를 할당하여 사용합니다.
{
const func = function(){
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
즉시 실행 함수
익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수도 있습니다.
'즉시 실행 함수'는 선언과 동시에 함수가 실행되며 함수명이 없기 때문에 재호출 할 수 없습니다.
보통 처음 한 번만 실행하는 초기화 코드에 사용됩니다.
03. 매개변수 함수
매개변수 함수는 입력값을 받아 처리하는 함수를 의미합니다.
함수를 정의할 때 매개변수를 정의하여 함수 내부에서 사용할 수 있도록 할 수 있습니다.
매개변수 함수는 다른 함수와 함께 사용하여 더욱 유용하게 사용될 수 있습니다.
{
function func(str){
document.write(str);
}
func("실행되었습니다.
");
function c(str1, str2){
document.write(str1, str2);
}
c("실행3","실행4");
// 매개변수 함수는 값을 2개 이상 쓸 수 있습니다.
}
결과 확인하기
04. 리턴값 함수
함수는 입력값을 받아서 처리하고 결과를 출력하는 기능을 수행합니다.
이때, 함수에서 처리한 결과값을 호출한 곳으로 전달하는데, 이를 리턴값이라고 합니다.
{
function func(){
const str ="실행되었습니다.";
return str;
}
document.write(func());
}
결과 확인하기
05. 화살표 함수 : 선언적 함수
함수와 화살표 함수는 똑같지만 function을 약식으로 표현한 것입니다.
{
func = () => {
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
화살표 함수 표현 방식
function 키워드를 생략하고 부등호 '='과 '>'을 합쳐 약식으로 표현합니다.
06. 화살표 함수 : 익명 함수
함수와 화살표 함수는 똑같지만 function을 약식으로 표현한 것이다.
화살표 함수는 가독성을 높이기 위해 익명 함수로 제일 많이 씁니다.
{
const func = () => {
document.write("실행되었습니다.
");
}
func();
// 화살표 함수는 가독성을 높이기 위해 익명 함수로 제일 많이 씁니다.
}
결과 확인하기
화살표 함수 표현 방식
function 키워드를 생략하고 부등호 '='과 '>'을 합쳐 약식으로 표현합니다.
07. 화살표 함수 : 매개변수 함수
함수와 화살표 함수는 똑같지만 function을 약식으로 표현한 것이다.
{
func = (str) => {
document.write(str);
}
func("실행되었습니다.
");
}
결과 확인하기
화살표 함수 표현 방식
function 키워드를 생략하고 부등호 '='과 '>'을 합쳐 약식으로 표현합니다.
08. 화살표 함수 : 리턴값 함수
함수와 화살표 함수는 똑같지만 function을 약식으로 표현한 것이다.
{
func = () => {
const str = "실행되었습니다
";
return str;
}
document.write(func());
}
결과 확인하기
화살표 함수 표현 방식
function 키워드를 생략하고 부등호 '='과 '>'을 합쳐 약식으로 표현합니다.
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
화살표 함수 방식을 이용해 익명 함수와 매개변수, 리턴값을 같이 쓸 수 있습니다.
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
화살표 함수 방식을 이용해 익명 함수와 매개변수, 리턴값을 같이 쓸 수 있습니다.
여기서 괄호를 생략할 수 있습니다.
{
const func = str => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴값 생략
화살표 함수 방식을 이용해 익명 함수와 매개변수, 리턴값을 같이 쓸 수 있습니다.
여기서 괄호와 리턴을 생략할 수 있습니다.
{
const func = str => str;
document.write(func("실행되었습니다."));
}
결과 확인하기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴값 생략
화살표 함수 방식을 이용해 선언적 함수와 매개변수, 리턴값을 같이 쓸 수 있습니다.
여기서 괄호와 리턴을 생략할 수 있습니다.
{
func = str => str;
document.write(func("실행되었습니다."));
}
결과 확인하기
react에서 가장 많이 사용되는 방식입니다. 하지만 this를 못쓴다는 단점이 있습니다.
13. 함수 유형 : 함수와 매개변수를 이용한 형태
매개변수를 이용해 기본값을 지정하고 함수를 호출합니다.
{
function func(num, str1, str2){
document.write(num +". "+str1+"가 "+str2+"되었습니다.
");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
14. 함수 유형 : 함수와 변수를 이용한 형태
변수를 이용해 기본값을 지정하고 함수를 호출합니다.
{
function func(num, str1, str2){
document.write(num +". "+str1+"가 "+str2+"되었습니다.
");
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "리액트";
const youCom1 = "실행";
func(youNum1, youStr1, youCom1);
func(youNum2, youStr2, youCom1);
func(youNum3, youStr3, youCom1);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
15. 함수 유형 : 함수와 배열을 이용한 형태
배열을 이용해 배열 안에 기본값을 지정하고 함수를 호출합니다.
{
function func(num, str1, str2){
document.write(num +". "+str1+"가 "+str2+"되었습니다.
");
}
const num = [1, 2, 3];
const info = ["함수", "자바스크립트", "리액트", "실행"];
func(num[0],info[0],info[3]);
func(num[1],info[1],info[3]);
func(num[2],info[2],info[3]);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
16. 함수 유형 : 함수와 객체를 이용한 형태
객체를 이용해 객체안에 기본 키와 값을 지정하고 함수를 호출합니다.
{
function func(num, str1, str2){
document.write(num +". "+str1+"가 "+str2+"되었습니다.
");
}
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행"
}
func(info.num1, info.name1, info.word);
func(info.num2, info.name2, info.word);
func(info.num3, info.name3, info.word);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
17. 함수 유형 : 함수와 객체, 배열을 이용한 형태
객체와 배열을 함께 이용해 함수를 호출합니다.
객체와 배열을 이용한 데이터 구조를 다룰 때 특히 유용합니다.
{
function func(num, str1, str2){
document.write(num +". "+str1+"가 "+str2+"되었습니다.
");
}
const info = [
{
num: 1,
name: "함수",
word: "실행"
},{
num: 2,
name: "자바스크립트",
word: "실행"
},{
num: 3,
name: "리액트",
word: "실행"
}
];
func(info[0].num, info[0].name,info[0].word);
func(info[1].num, info[1].name,info[1].word);
func(info[2].num, info[2].name,info[2].word);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
18. 함수 유형 : 객체 안에 함수를 이용한 형태
객체 안에 함수를 정의하여 함수를 호출합니다.
일반적인 방법은 객체 리터럴을 이용하여 객체를 정의하고, 속성으로 함수를 추가하는 것입니다.
{
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행",
result1: function(){
document.write(info.num1 +". "+info.name1+"가 "+info.word+"되었습니다.
");
},
result2: function(){
document.write(info.num2 +". "+info.name2+"가 "+info.word+"되었습니다.
");
},
result3: function(){
document.write(info.num3 +". "+info.name3+"가 "+info.word+"되었습니다.
");
}
}
info.result1();
info.result2();
info.result3();
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
19. 함수 유형 : 객체생성자 함수
객체 생성자 함수는 객체를 생성하기 위해 사용되는 함수입니다.
객체 생성자 함수는 일반 함수와 구분하기 위해 대문자로 시작하는 이름을 사용합니다.
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
this.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
}
}
// 인스턴스
const info1 = new func("100", "함수", "실행");
const info2 = new func("200", "자바스크립트", "실행");
const info3 = new func("300", "리액트", "실행");
// 실행문
info1.result();
info2.result();
info3.result();
}
결과 확인하기
200. 자바스크립트가 실행되었습니다.
300. 리액트가 실행되었습니다.
this
this는 현재 실행 중인 함수가 속한 객체를 가리키는 키워드입니다.
함수를 정의하는 시점에서 this는 정의된 함수와는 아무런 연관이 없으며, 함수가 호출되는 시점에 this가 결정됩니다.
this의 값은 함수 호출 방식에 따라 결정됩니다.
1. 함수를 일반적으로 호출하는 경우: this는 전역 객체를 가리킵니다.
2. 메서드를 호출하는 경우: this는 메서드를 호출한 객체를 가리킵니다.
3. 생성자 함수를 호출하는 경우: this는 생성된 객체를 가리킵니다.
this 키워드는 함수가 호출되는 방식에 따라 결정되므로, 함수를 정의할 때 this가 어떤 객체를 가리키는지 잘 이해하고 사용해야 합니다.
20. 함수 유형 : 프로토타입 함수
프로토타입 함수는 모든 객체가 상속하는 함수입니다.프로토타입 함수는 생성자 함수의 prototype 객체에 메서드를 추가하여 정의합니다. 이 메서드는 생성된 객체가 상속받아 사용할 수 있습니다.
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
};
func.prototype.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
};
// 인스턴스
const info1 = new func("101", "함수", "실행");
const info2 = new func("201", "자바스크립트", "실행");
const info3 = new func("301", "리액트", "실행");
// 실행문
info1.result();
info2.result();
info3.result();
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
프로토타입 함수를 이용하여 객체 간에 메서드를 공유하고, 메모리 사용량을 최소화할 수 있습니다.
21. 함수 유형 : 객체리터럴 함수
객체를 직접 정의하고 생성하는 함수입니다.
객체 리터럴 함수는 중괄호({})를 사용하여 객체를 정의하고, 필요한 속성과 메소드를 추가하여 객체를 생성합니다.
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
};
func.prototype = {
result1: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
},
result2: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
},
result3: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
}
};
// 인스턴스
const info1 = new func("102", "함수", "실행");
const info2 = new func("202", "자바스크립트", "실행");
const info3 = new func("302", "리액트", "실행");
// 실행문
info1.result1();
info2.result2();
info3.result3();
}
결과 확인하기
202. 자바스크립트가 실행되었습니다.
302. 리액트가 실행되었습니다.
객체 리터럴 함수를 사용하면 객체를 간단하게 생성할 수 있으며, 객체의 속성과 메소드를 직접 정의할 수 있어서 코드의 가독성을 높일 수 있습니다.
또한, 객체 리터럴 함수를 사용하여 생성된 객체는 다른 변수나 함수의 인자로 전달될 수 있습니다.
22. 함수 종류 : 즉시 실행 함수
즉시 실행 함수는 JavaScript에서 함수를 선언하고 즉시 실행하는 방법 중 하나입니다.
주석표시를 아래의 방법으로 표현합니다.
{
// function func(){
// document.write("함수가 실행되었습니다.");
// }
// func();
(function (){
document.write("500. 함수가 실행되었습니다.
");
})();
(() => {
document.write("501. 함수가 실행되었습니다.
");
})();
}
결과 확인하기
501. 함수가 실행되었습니다.
23. 함수 종류 : 파라미터 함수
파라미터 함수는 JavaScript에서 함수의 매개변수로 전달되는 함수를 의미합니다.
즉, 다른 함수에서 파라미터로 함수를 받아서 사용하는 것입니다.
{
function func(str = "600. 함수가 실행되었습니다.
"){
document.write(str);
}
func();
}
결과 확인하기
파라미터 함수를 사용하면 코드의 재사용성을 높이고, 코드를 간결하게 작성할 수 있습니다.주로 콜백 함수, 이벤트 핸들러 등에서 사용됩니다.
24. 함수 종류 : 아규먼트 함수
아규먼트 함수는 함수 내에서 사용되는 객체로, 함수 호출 시 전달된 인자들을 배열 형태로 저장하고 있습니다.
이 객체를 사용하여 함수 내에서 전달된 인자들을 동적으로 처리할 수 있습니다.
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2");
}
결과 확인하기
25. 함수 종류 : 재귀 함수
재귀 함수(Recursion)는 함수가 자기 자신을 호출하는 방식으로 동작하는 함수를 말합니다.
이러한 방식은 일반적인 루프(반복문) 대신 사용할 수 있습니다.
{
function func(num){
if(num<=1){
document.write("함수가 실행되었습니다.");
} else {
document.write("함수가 실행되었습니다.
");
func(num-1);
}
}
func(10);
}
결과 확인하기
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
하지만, 재귀 함수는 함수 호출 스택(Call Stack)을 사용하기 때문에, 많은 수의 호출이 일어날 경우에는 스택 오버플로우(Stack Overflow)와 같은 문제가 발생할 수 있습니다.
또한, 재귀 함수는 일반적인 루프보다 호출 오버헤드가 크기 때문에, 성능에 영향을 미칠 수 있습니다. 따라서, 재귀 함수를 사용할 때에는 호출 횟수와 호출 스택의 크기를 적절하게 조절해야 합니다.
26. 함수 종류 : 콜백 함수
콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 작업이 끝난 후에 호출되는 함수를 말합니다.
콜백 함수는 자바스크립트에서 비동기 처리를 구현하는 가장 일반적인 방법 중 하나입니다.
아래의 주석부분을 콜백 함수로 표현한 것입니다.
{
// function func1(){
// document.write("1.함수 실행");
// }
// function func2(){
// document.write("2.함수 실행");
// }
// func1();
// func2();
function func(){
document.write("2.함수 실행");
}
function callback(str){
document.write("1.함수 실행");
str();
}
callback(func);
}
결과 확인하기
콜백 함수는 비동기 처리뿐만 아니라, 이벤트 처리(event handling) 등에서도 사용됩니다. 콜백 함수를 사용하면 함수 간의 결합도(coupling)를 낮출 수 있으며, 코드의 재사용성을 높일 수 있습니다.
하지만, 콜백 함수가 중첩(nesting)되는 경우에는 코드의 가독성이 떨어지고, 콜백 지옥(callback hell)이라는 문제가 발생할 수 있습니다.
따라서, ES6에서는 프로미스(Promise)와 async/await을 도입하여, 비동기 처리를 더욱 편리하게 다룰 수 있게 되었습니다.
27. 함수 종류 : 콜백 함수(반복문)
콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 작업이 끝난 후에 호출되는 함수를 말합니다.
callback() 함수는 num이라는 매개변수를 받아서 1부터 10까지 반복하면서 num에 전달된 함수를 호출하고 있습니다.
{
function func(index){
console.log("함수가 실행되었습니다." + index);
}
function callback(num){
for(let i=1; i<;=10; i++){
num(i);
}
}
callback(func);
}
결과 확인하기
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10
28. 함수 종류 : 콜백 함수(동기/비동기)
동기적으로 콜백 함수를 호출하면, 해당 함수의 실행이 끝날 때까지 다음 코드의 실행을 멈춥니다. 이는 즉시 값을 반환하는 함수와 달리, 콜백 함수를 실행하는 함수가 값을 반환할 때까지 기다리는 것을 의미합니다.
비동기적인 콜백 함수는 비동기 작업이 완료되면 즉시 실행되지 않을 수 있으며, 따라서 다른 작업을 수행할 수 있습니다. 비동기 작업이 완료되면 콜백 함수가 실행되고, 결과를 처리합니다. 이러한 비동기 작업은 대개 콜백 함수를 인수로 사용하는 함수로 처리됩니다.
{
//01
function funcA(){
console.log("funcA가 실행되었습니다.");
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();
//02
function funcA(){
setTimeout(() => {
console.log("funcA가 실행되었습니다.");
}, 1000)
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();
//03
function funcA(callback){
setTimeout(() => {
console.log("funcA가 실행되었습니다.");
callback();
}, 1000);
}
function funcB(){
console.log("funcB가 실행되었습니다.");
}
funcA(function(){
funcB();
});
//04(콜백지옥)
function funcA(callback){
setTimeout(() => {
console.log("funcA가 실행되었습니다.");
callback();
}, 1000);
}
function funcB(callback){
setTimeout(() => {
console.log("funcB가 실행되었습니다.");
callback();
}, 1000);
}
function funcC(callback){
setTimeout(() => {
console.log("funcC가 실행되었습니다.");
callback();
}, 1000);
}
function funcD(){
setTimeout(() => {
console.log("funcD가 실행되었습니다.");
}, 1000);
}
funcA(function(){
funcB(function(){
funcC(function(){
funcD();
});
});
});
}
결과 확인하기
funcA가 실행되었습니다.
funB가 실행되었습니다.
//02
funcB가 실행되었습니다.
funcA가 실행되었습니다.
//03
funcA가 실행되었습니다.
funB가 실행되었습니다.
//04
funcA가 실행되었습니다.
funB가 실행되었습니다.
funC가 실행되었습니다.
funD가 실행되었습니다.
동기적인 콜백 함수를 사용하면 코드의 실행 순서를 보장할 수 있으므로, 복잡한 작업을 수행할 때 유용합니다. 그러나 동기적인 콜백 함수를 사용하면 실행 속도가 느려질 수 있으므로, 비동기적인 콜백 함수를 사용하여 코드의 실행 속도를 높일 수 있습니다.
비동기적인 콜백 함수를 사용하면 대규모 애플리케이션에서 코드의 실행 속도를 높일 수 있으며, 애플리케이션의 응답성을 향상시킬 수 있습니다. 그러나 비동기적인 코드는 보다 복잡하며, 코드의 실행 순서를 파악하기 어려울 수 있습니다.
29. 함수 종류 : promise 함수
Promise는 JavaScript에서 비동기 작업을 다룰 때 사용되는 객체입니다. 비동기 작업은 특히 네트워크 요청이나 파일 읽기와 같이 시간이 걸리는 작업을 다룰 때 유용합니다. Promise는 비동기 작업의 성공 또는 실패와 같은 결과를 다루는데 도움이 됩니다.
{
function funcA() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("funcA가 실행되었습니다.");
resolve();
}, 1000);
});
}
function funcB() {
console.log("funcB가 실행되었습니다.");
}
funcA().then(() => {
funcB();
});
}
결과 확인하기
funB가 실행되었습니다.
Promise 객체는 세 가지 상태를 가질 수 있습니다
1. 대기(Pending): 초기 상태로, 작업이 성공적으로 완료되거나 실패할 때까지 대기합니다.
2. 이행(Fulfilled): 작업이 성공적으로 완료되었을 때의 상태입니다.
3. 거부(Rejected): 작업이 실패했을 때의 상태입니다.
30. async/await
async 함수: 함수 선언 앞에 async 키워드를 붙이면 해당 함수는 항상 Promise를 반환합니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다.
await 키워드: await는 async 함수 내에서만 사용 가능하며, Promise가 이행될 때까지 기다리고 해당 값을 반환합니다.
{
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function funcA() {
await delay(1000);
console.log("funcA가 실행되었습니다.");
}
function funcB() {
console.log("funcB가 실행되었습니다.");
}
async function example() {
console.log("시작");
await funcA();
funcB();
console.log("끝");
}
// 함수 호출
example();
}
결과 확인하기
funcB가 실행되었습니다.
funcA가 실행되었습니다.
끝
31. 콜백, Promise, async/await의 차이점
✍️ 콜백 함수 (Callback)
- 콜백은 함수를 다른 함수의 매개변수로 전달하여 비동기 작업이 완료되면 실행되도록 하는 방식입니다.
- 주로 이벤트 핸들링, 타이머 함수 (setTimeout, setInterval), 비동기 I/O 작업 등에서 사용됩니다.
- 코드가 콜백 함수로 중첩되면 콜백 지옥(callback hell)이 발생할 수 있습니다.
- 에러 처리가 비교적 어려울 수 있습니다.
✍️ Promise
- Promise는 비동기 작업을 더 구조적으로 다루기 위한 객체입니다.
- 성공 또는 실패와 같은 비동기 작업의 최종 결과를 처리하기 위해 사용됩니다.
- then 메서드를 사용하여 성공적인 경우의 처리를 등록하고, catch 메서드를 사용하여 실패한 경우의 처리를 등록합니다.
- 에러 처리가 명시적으로 가능하며, .catch를 사용하여 전역적으로 에러를 처리할 수 있습니다.
- 코드를 읽기 쉽게 만들고, 콜백 지옥을 피할 수 있습니다.
✍️ async/await
- async와 await는 Promise를 더 간결하게 다룰 수 있도록 하는 키워드입니다.
- async 함수 내에서 await를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다.
- 코드를 순차적으로 작성하고 읽기 쉽게 만들어줍니다.
- try-catch 블록을 사용하여 에러를 처리할 수 있습니다.
요약하면, 콜백은 기본적이고 직접적인 비동기 처리 방식이며, Promise는 비동기 코드를 구조적으로 다룰 때 사용되며, async/await는 Promise를 더 간결하게 다룰 수 있도록 하는 새로운 문법입니다. 각각의 선택은 상황에 따라 다르며, 코드의 가독성과 유지보수성을 고려하여 선택하는 것이 중요합니다.
32. 함수 종류 : 내부 함수_클로저
클로저(Closure)는 내부 함수가 외부 함수의 변수에 접근할 수 있는 특성을 가리킵니다. 클로저는 함수가 정의될 때의 환경을 기억하고, 함수가 이 환경에 대한 참조를 유지하면서 외부 함수의 실행 컨텍스트를 벗어나도 사용할 수 있게 해줍니다. 이로 인해 외부 함수의 변수에 접근할 수 있는 함수를 생성할 수 있습니다.
{
function funcA() {
const printA = "클로저";
function funcB() {
console.log(printA);
}
return funcB;
}
const closure = funcA();
closure();
}
결과 확인하기
33. 클래스
클래스는 객체 지향 프로그래밍의 핵심 개념 중 하나로, 객체를 생성하기 위한 템플릿이나 청사진 역할을 합니다. 클래스를 사용하면 객체의 속성과 메서드를 하나의 구조로 정의하고, 이를 기반으로 객체를 생성할 수 있습니다.
{
class study{
constructor(num, name, job){
this.num = num;
this.name = name;
this.job = job;
}
result(){
console.log(this.num + ". 내 이름은 "+this.name+"이며, 직업은 "+this.job+"입니다.");
};
}
const info1 = new study("1", "여다슬", "웹퍼블리셔");
const info2 = new study("2", "여다슬", "프론트엔드 개발자");
info1.result();
info2.result();
}
결과 확인하기
2. 내 이름은 여다슬이며, 직업은 프론트엔드 개발자입니다.
34. 클래스 상속
클래스 상속은 객체 지향 프로그래밍에서 한 클래스가 다른 클래스의 속성(멤버 변수)과 동작(메서드)을 상속받는 개념을 의미합니다. 이를 통해 코드의 재사용성을 높이고, 새로운 클래스를 만들 때 기존 클래스의 기능을 그대로 사용하거나 수정하여 새로운 클래스를 정의할 수 있습니다.
{
class study{
constructor(num, name, job){
this.num = num;
this.name = name;
this.job = job;
}
result(){
console.log(this.num + ",내 이름은 "+this.name+"이며, 직업은 "+this.job+"입니다.");
};
}
class study2 extends study {
constructor(num, name, job, age){
super(num, name, job);
this.age = age;
}
result(){
console.log(this.num + ",내 이름은 "+this.name+"이고, 직업은 "+this.job+"이며, 나이는 "+this.age+"살 입니다.");
};
}
const info1 = new study("1", "여다슬", "웹퍼블리셔");
const info2 = new study2("2", "여다슬", "프론트엔드 개발자", 24);
info1.result();
info2.result();
}
결과 확인하기
2. 내 이름은 여다슬이고, 직업은 프론트엔드 개발자이며, 나이는 24살입니다.
super는 JavaScript에서 클래스 내에서 부모 클래스의 생성자 또는 메서드를 호출하는 특별한 키워드입니다. super를 사용하여 부모 클래스의 구성 요소에 접근하고 상속을 관리할 수 있습니다.