자바스크립트(JavaScript)-with와 함수 push를 사용하여 배열 출력해보기

이번주와 저번주는 장마철이라 비가 많이오네요. 다들 비 조심하세요!!

오늘은 이전에 배웠던 걸 복습하기 위해서 간단하게 with와 push를 사용하여 alert로 웹 페이지 접속시 출력문이 나오게 해보았습니다.

<!DOCTYPE html>

<head>

<title>Document</title>

//1번 with와 변수 output를 이용하여 변수 한번에 출력

var Stulist= {

이름: 'kobalja',

학번: 520727,

과목: '자바스크립트',

과목코드: 20200727,

총학생인원: 100 + '명'

};

var output = '';

with(Stulist) {

output += '이름: ' + 이름 + '\n';

output += '학번: ' + 학번 + '\n';

output += '과목: ' + 과목 + '\n';

output += '과목번호 ' + 과목코드 + '\n';

output += '총학생인원: ' + 총학생인원 + '\n';

}

alert(output);

변수 output을 빈 공간으로 선언하고 with로 Stulist라는 변수안에 있는 속성을 한번에 출력하게 변수를 주고 alert(output)으로 출력하게 하였습니다. 개체의 속성을 출력할 때 with(객체){코드} 를 사용하면 객체의 속성을 사용하기 쉽기 때문에 사용하였습니다.

//2번 함수로 student와 함수안에 변수 생성 후 메서드 넣고 배열안에 push로 추가하여 Stuoutput으로 배열 출력

function student(Name, Stunum, Major, MajorCode) {

var Stuform= {

이름: Name,

학번: Stunum,

과목: Major,

과목코드: MajorCode,

toString: function () {

return this.이름 + ' ' + this.학번 + ' ' + this.과목 + ' ' + this.과목코드;

}

};

return Stuform;

}

var arr = [];

arr.push(student('kobalja', 520727, '자바스크립트', 20200727));

arr.push(student('Mr.Sin', 520726, '자바', 20200726));

arr.push(student('Mr.In', 520713, '제이쿼리', 20200723));

arr.push(student('Mrs.Han', 520712, 'Mysql', 20200725));

arr.push(student('Mrs.Kim', 520719, '자바스크립트', 20200721));

var Stuoutput = '이름' + ' ' + '학번' + ' ' + '과목' + ' ' + '과목코드\n';

for (var index in arr) {

Stuoutput += arr[index] + '\n';

}

alert(Stuoutput);

student라는 함수안에 Stuform 즉 학생 정보라는 변수를 생성하고 그 변수 안에 이름과 학번, 과목, 과목코드들의 속성을 생성시켰고 이름 학번 과목 등 순서대로 출력하기 위해 toString함수를 생성하여 반환값 안에 this를 이용하여 속성들을 순서대로 두어 함수를 만들었습니다. 그리고 변수 전체를 한번더 반환하였습니다.

그 다음 배열안에 넣고 배열로 출력하기 위해서 arr=[]; 를 사용하여 빈 배열을 만들고 push를 이용하여 student라는 함수 전체를 배열안에 집어 넣었습니다. 그리고 배열을 깔끔하게 출력하기 위해 Stuoutput이라는 변수를 생성하여 배열안의 모든 값을 출력하기 위해 for반복문을 만들고 반복문 안에 Stuoutput += arr[index] + '\n'; 라는 구문을 넣고 alert(Stuoutput)으로 출력하였습니다.

</script>

</head>

<body>

</body>

</html>