자바스크립트 수업 내용 정리하기(2023.03.02)

자바스크립트 수업 내용

수업 내용

• TEST
• 배열 : 데이터 불러오기 : forEach문
• 배열 : 데이터 불러오기 : for of
• 배열 : 데이터 불러오기 : for in
• 배열 : 데이터 불러오기 : map( )

 

TEST

 

1. 선언적 함수

function func(){
    document.write("선언적 함수가 실행되었습니다.");
};
func();

값 : 선언적 함수가 실행되었습니다.

2. 익명 함수

const func = function(){
	document.write("익명 함수가 실행되었습니다.")
};
func();

값 : 익명 함수가 실행되었습니다.

3. 함수를 이용해서 "함수가 실행되었습니다." 10번 실행하기

function func(){
	for(let i=1; i<=10; i++){
    	document.write("함수가 실행되었습니다.");
    };
};
func();

값 : 함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.
     함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.함수가 실행되었습니다.
     함수가 실행되었습니다.함수가 실행되었습니다.

4. 리턴값 함수

function func(){
	const str = "리턴값 함수가 실행되었습니다."
    return str;
};
document.write(func());

값 : 리턴값 함수가 실행되었습니다.

5. 매개변수 함수

function func(str){
	document.write(str);
}:
func("매개변수 함수가 실행되었습니다.");

6. 화살표 함수 : 선언적 함수

func = () => document.write("화살표 함수가 실행되었습니다.")
func();

값 : 화살표 함수가 실행되었습니다.

7. 함수를 이용해서 행 10칸, 열 10칸 테이블(표) 만들기

function func(){
    let table = "<table border='1'>";
    for(let i=1; i<=10; i++){
        table += "<tr>";
        for(let j=1; j<=10; j++){
            table += "<td>" + j + "</td>";
        }
        table += "</tr>";
    }
    table += "</table>";
    document.write(table);
};
func();

 

See the Pen 함수 테이블 by dongjin6539 (@dongjin6539) on CodePen.

 

 

 

배열 : 데이터 불러오기 : forEach문

• forEach( )문은 배열의 데이터가 있을 경우 사용합니다.
• forEach( )문 안에는 함수가 들어가는 콜백 함수입니다.
• forEach( )문은 element(값), index(인덱스), array(배열)을 불어오는 특징이 있습니다.

const num = [100, 200, 300];

num.forEach(function(element, index, array){
    document.write(element, "<br>");
    document.write(index, "<br>");
    document.write(array, "<br>");
});

값
100
0
100,200,300
200
1
100,200,300
300
2
100,200,300

참고

• forEach문은 화살표 함수로 생략할 수 있습니다!!

const num = [100, 200, 300, 400, 500];

// forEach문
num.forEach(function(el){
    document.write(el);
});

//forEach문 : 화살표 함수
num.forEach((el) => {
    document.write(el);
});

//forEach문 : 화살표 함수 : 괄호 생략(매개변수가 한 개일때 사용가능합니다.)
num.forEach(el => {
    document.write(el);
});

//forEach문 : 화살표 함수 : 괄호 생략 + 중괄호 생략
num.forEach(el => document.write(el));

 

배열 : 데이터 불러오기 : for of

• for of 문은 문자열이나 배열과 같은 반복 가능 자료에서 사용하는 반복문입니다.
• forEach 문에서 사용했던 소스 코드를 for of 문에서도 사용할 수 있습니다.
• for of문은 element 값 출력하는데 사용합니다.

const arr = [100, 200, 300, 400, 500];

for(let i of arr){
    document.write(i);
};

값 : 100200300400500

 

배열 : 데이터 불러오기 : for in

• for in문은 반복해서 객체의 값을 불러오는데 많이 사용됩니다.
• for in문은 index 인덱스 출력하는데 사용합니다.

const arr = [100, 200, 300, 400, 500];

for(let i in arr){
    document.write(i);
};

값 : 01234

 

배열 : 데이터 불러오기 : map( )

• forEach문과 비슷하며, element(값) index(인덱스) array(배열)을 출력하는데 사용합니다.

const arr = [100, 200, 300];

num.map(function(el, i, a){
    document.write(el);
    document.write(i);
    document.write(a);
});

값
100
0
100,200,300
200
1
100,200,300
300
2
100,200,300

 

참고 홈페이지

https://dongjin6539.github.io/web2023/javascript/javascript02.html