01. 함수 : 선언적 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function func(){
var x = 100;
var y = 200;
var z = "javascript";
console.log(x,y,z);
console.log(x,y,z);
console.log(x,y,z);
console.log(x,y,z);
console.log(x,y,z);
}
func();
}
선언적 함수는 function 키워드를 사용하여 정의되며, 함수를 호출하기 전에도 해당 함수를 정의할 수 있습니다.
결과 확인하기
100 200 javascript
100 200 javascript
100 200 javascript
100 200 javascript
02. 함수 : 익명 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
// 변수 안에 들어간 함수는 이름을 다시 정의할 필요가 없다. 이러한 형태를 익명 함수라 말한다.
const func = function(){
var x = 100;
var y = 200;
var z = "javascript";
console.log(x,y,z);
}
func();
}
익명 함수(Anonymous Function)는 이름 없이 정의된 함수로, 함수 선언 시 함수의 이름이 없는 함수입니다.
결과 확인하기
03. 함수 : 매개변수 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function func(x, y, z){
console.log(x);
console.log(y);
console.log(z);
}
func(100, 200, "javascript");
}
익명 함수(Anonymous Function)는 이름 없이 정의된 함수로, 함수 선언 시 함수의 이름이 없는 함수입니다.
결과 확인하기
200
javascript
04. 함수 : 리턴값이 있는 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function func() {
const x = 100;
const y = 200;
const z = "javascript";
return x+y;
}
console.log(func());
}
리턴값 함수는 return 제어문을 사용해서 함수의 연산 결과 중 원하는 값을 지정해서 호출위치로 복구시키는 기능을 말합니다.
결과 확인하기
05. 함수 : 매개변수와 리턴값이 있는 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function func(x, y) {
return x+y;
}
console.log(func(100, 300));
}
매개변수와 리턴값을 같이 사용하는 함수는 자바스크립트 내에서 가장 많이 사용되는 형태입니다.
결과 확인하기
06. 화살표 함수 : 선언적 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function func = () => {
const x = 600;
console.log(x);
}
func();
}
매개변수와 리턴값을 같이 사용하는 함수는 자바스크립트 내에서 가장 많이 사용되는 형태입니다.
결과 확인하기
07. 화살표 함수 : 익명 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
const func = () => {
const x = 500;
console.log(x);
}
func();
}
매개변수와 리턴값을 같이 사용하는 함수는 자바스크립트 내에서 가장 많이 사용되는 형태입니다.
결과 확인하기
08. 화살표 함수 : 매개변수가 있는 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
func = (x, y) = > {
console.log(x + y);
}
func(100, 200)
}
매개변수와 리턴값을 같이 사용하는 함수는 자바스크립트 내에서 가장 많이 사용되는 형태입니다.
결과 확인하기
09. 화살표 함수 : 리턴값이 있는 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
func = () => {
const x = 100;
const y = 200;
return x+y;
}
console.log(func());
}
매개변수와 리턴값을 같이 사용하는 함수는 자바스크립트 내에서 가장 많이 사용되는 형태입니다.
결과 확인하기
10. 화살표 함수 : 매개변수와 리턴값이 있는 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
func1 = (x) => { return x; }
console.log(func(100));
//생략1
const func2 = x => { return x; }
console.log(func(100));
//생략 2
const func3 = x => return x;
console.log(func(100));
//생략 3
func3 = x => return x;
console.log(func(100));
}
매개변수와 리턴값을 같이 사용하는 함수는 자바스크립트 내에서 가장 많이 사용되는 형태입니다.
결과 확인하기
11. 함수 유형 : 함수와 매개변수를 이용한 형태
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function func (num, str) {
console.log(`${num}. ${str}`);
}
func(11, "함수가 실행되었습니다.");
}
전달 받은 변수값을, 리터럴을 활용해 간편하게 출력할 수 있다.
결과 확인하기
12. 함수 : 변수를 이용한 함수 형태
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
const num = 12;
const str = "함수가 실행되었습니다."
function func(num, str) {
console.log(num + ", " + str);
console.log(`${num}. ${str}`);
}
func(num, str);
}
함수 밖에서 선언한 변수를 전달 받아 출력할 수 있다.
결과 확인하기
13. 함수 유형 : 함수와 배열을 이용한 형태
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
const num = [13, 14];
const str = ["함수가 실행되었습니다."];
function func(num, str){
console.log(num, str);
}
func(`${num[0]}. ${str[0]}`);
func(`${num[1]}. ${str[0]}`);
}
배열에 선언된 값을 함수의 매개변수로 전달해 출력할 수 있다.
결과 확인하기
14. 함수가 실행되었습니다.
14. 함수 유형 : 함수와 객체를 이용한 형태
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
const info = {
num : 15,
str : "함수가 실행"
}
function func(num, str){
console.log(`${num}. ${str}`);
}
func(info.num, info.str);
}
객체에 선언된 값을 함수의 매개변수로 전달해 출력할 수 있다.
결과 확인하기
15. 함수 유형 : 함수와 객체 및 배열을 이용한 형태
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
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);
}
배열 안의 객체를 매개변수로 전달해 함수로 실행할 수 있다.
결과 확인하기
17. 함수가 실행되었습니다.
16. 함수 유형 : 객체안에 함수를 이용한 형태
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
const info = {
num:18,
str:"함수가 실행되었습니다.",
result: () => console.log(`${info.num}.${info.str}`)
}
info.result();
}
객체 안에 변수와 함수를 선언하고 객체 안에 선언된 변수를 매개변수로 전달해 사용할 수 있다.
결과 확인하기
17. 함수 유형 : 객체 생성자 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function Func(num, str){
this.num = num;
this.str = str;
this.result = () => {
console.log(`${this.num}. ${this.str}`);
}
}
// 인스턴스를 생성
const info = new Func(19, "함수가 실행되었습니다.");
// 재활용
const info2 = new Func(20, "함수가 실행되었습니다.");
// 호출
info.result();
info2.result();
}
객체 생성자 함수는, 비슷한 유형의 변수를 객체 내에서 지속적으로 선언하는 번거로움을 해소한다.
객체 생성자 함수를 사용할 때는 함수의 첫 문자를 대문자로 사용해주고, 인스턴스를 생성해 사용한다.
이 때, 전달받는 변수는 this.을 통해 지정하고 사용한다.
인스턴스만 새로 만들면 재활용하는데 용이하다.
결과 확인하기
20. 함수가 실행되었습니다.
18. 함수 유형 : 프로토타입 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function Func(num, str){
this.num = num;
this.str = str;
}
Func.prototype.result = function(){
console.log(`${this.num}. ${this.str}`);
}
const info = new Func(21, "함수가 실행되었습니다.");
const info2 = new Func(22, "함수가 실행되었습니다.");
info.result();
info2.result();
}
객체 생성자 함수의 단점은 함수 안에 다른 정의된 함수, 객체 등이 사용되지 않는 경우에도, 메모리를 잡아먹는다는 점이다.
따라서 객체 생성자 함수 밖에 함수를 선언하고, 생성자 함수의 이름과, prototype임을 선언해 사용한다.
그러나 가독성이 떨어진다는 단점이 있다.
결과 확인하기
22. 함수가 실행되었습니다.
19. 함수 유형 : 객체 리터럴 함수
자바스크립트(JavaScript)에서 함수는 프로그램 내에서 재사용 가능한 코드 블록을 나타내는 중요한 개념입니다.
{
function Func(num, str){
this.num = num;
this.str = str;
}
Func.prototype = {
result : function(){
console.log(`${this.num}. ${this.str}`);
}
}
const info = new Func(23, "함수가 실행되었습니다. ");
const info2 = new Func(24, "함수가 실행되었습니다. ");
info.result();
info2.result();
}
프로토타입의 함수 형태의 단점인 가독성이 떨어진다는 단점을 해결하기 위해 설계되었다.
프로토타입 함수를 객체의 형태로 설계해 함수들을 나열해 사용한다.
결과 확인하기
23. 함수가 실행되었습니다.
20. 즉시 실행 함수
자바스크립트(JavaScript)에서 함수를 실행하는 방법 중 하나입니다. 함수를 정의하고 즉시 호출하는 패턴을 나타냅니다.
{
(function () {
console.log("25. 함수가 실행되었습니다.");
})();
(() => {
console.log("25. 함수가 실행되었습니다.");
})();
}
즉시 실행 함수는 코드를 정리하고 전역 스코프의 오염을 방지하는 데 도움이 되는 유용한 패턴 중 하나입니다.
결과 확인하기
25. 함수가 실행되었습니다.
21. 파라미터 함수
자바스크립트(JavaScript)에서 함수는 파라미터(parameter)를 사용하여 함수 내에서 필요한 데이터를 전달할 수 있습니다.
{
const func = (str = "27. 함수가 실행되었습니다.") => {
console.log(str);
}
func();
}
함수의 파라미터는 함수 내에서 지역 변수처럼 동작하며, 함수 외부에서는 접근할 수 없습니다. 함수를 호출할 때 인자를 전달하여 함수 내에서 사용할 수 있습니다.
결과 확인하기
22. 재귀 함수
자바스크립트(JavaScript)에서 함수 내부에서 자기 자신을 호출하는 함수를 말합니다.
{
function factiorial(n) {
// 베이스 케이스: n이 0 또는 1인 경우 1을 반환
if(n === 0 || n === 1){
return 1;
}
// 재귀 단계: n! = n * (n-1)
else {
return n * factiorial(n - 1);
}
}
console.log(factiorial(5));
}
재귀 함수를 작성할 때,
스택 오버플로우와 같은 문제를 방지하기 위해 재귀 호출의 깊이에 주의해야 합니다.
필요에 따라 반복문으로도 같은 작업을 수행할 수 있으므로 재귀 함수를 사용할 때는
상황에 맞게 사용하는 것이 중요합니다.
결과 확인하기
23. 콜백 함수
자바스크립트(JavaScript)에서.
{
// 01. 함수를 다른 함수의 인자로 전달
function func1() {
console.log("32. 함수가 실행되었습니다.");
}
function func2(callback) {
callback();
}
func2(func1)
// 02. 반복문 콜백함수
function func3(num) {
console.log(num + ". 함수 실행되었습니다.");
}
function func4(callback) {
for (let i = 33; i <= 38; i++) {
callback(i);
}
}
func4(func3);
}
결과 확인하기
33. 함수가 실행되었습니다.
34. 함수가 실행되었습니다.
35. 함수가 실행되었습니다.
36. 함수가 실행되었습니다.
37. 함수가 실행되었습니다.
38. 함수가 실행되었습니다.
24. 비동기 함수: 콜백 함수
자바스크립트(JavaScript)에서.
{
// 01. 비동기적인 함수 호출
function func3() {
setTimeout(() => {
console.log("41. 함수 실행 동기");
}, 1000);
}
function func4() {
console.log("42. 함수 실행 동기");
}
func3();
func4();
// 02. 콜백함수 사용 -> 비동기 방식 호출
function func5(callback) {
setTimeout(() => {
console.log("43. 함수 실행 동기");
callback();
}, 1000);
}
function func6() {
console.log("44. 함수 실행 동기");
}
func5(function () {
func6();
});
}
결과 확인하기
41. 함수 실행 동기
43. 함수 실행 동기
44. 함수 실행 동기
25. 비동기 함수 : Promise
자바스크립트(JavaScript)에서.
{
function funcA() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("funcA");
resolve();
}, 1000)
})
}
function funcB() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("funcB");
resolve();
}, 1000)
})
}
function funcC() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("funcC");
resolve();
}, 1000)
})
}
function funcD() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("funcD");
resolve();
}, 1000)
})
}
funcA()
.then(funcB)
.then(funcC)
.then(funcD)
.catch((error) => {
console.log(error)
});
}
결과 확인하기
funcB
funcC
funcD
26. asyne/await
자바스크립트(JavaScript)에서.
{
async function func4() {
try {
const result = await fetch("https://l-jy16.github.io/webs2024/javascript/quiz/gineungsaShort.json");
const data = await result.json();
console.log(data);
} catch (error) {
console.log(error);
}
}
func4();
}
결과 확인하기
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…},
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}
결과 확인하기
20. 클래스
자바스크립트(JavaScript)에서.
{
}