1. 함수(function)란?
- 특정 입력을 통해 연산을 처리한 후 결과를 반환하는 것.
- blackbox의 형태 : 내부의 일이 어떻게 처리되는지 알 수 없음.
2. 함수를 선언하는 법
- 선언적 함수
- 익명 함수 : 함수 선언부에 함수이름이 없음.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<script>
var upper = "abcd";
</script>
<script>
console.log(upper);
// function
// 함수란 특정 입력을 통해 연산을 처리한 후 결과를 반환하는 것
// >> blackbox의 형태 : 내부의 일이 어떻게 처리되는지 알 수 없음.
// 함수를 선언하는 법
// 2가지
// 함수 호출
// pow1();
// pow2();
// 함수의 내용보기
console.log(pow1);
console.log(pow2); // undefined
// 1. 선언적 함수 : 함수 선언부에 이름이 있음. 호이스팅 (어디에 선언해도 호출할 수 있음.)
function pow1() {
console.log("pow1()")
}
// 2. 익명 함수 : 함수 선언부에 함수이름이 없음.
var pow2 = function() {
console.log("pow2()")
}
// scope >> 캡슐화
console.log(apple); // undi. var apple;이니깐.
var apple = "사과"; // 맨 위에 var apple;이 자동으로 선언됨.
console.log(apple);
</script>
</head>
<body>
<script>
console.log(upper)
</script>
</body>
</html>
<script>
var num = 10; // 전역변수
function myFunc() {
var num = 20; // var가 붙으면서 지역변수가 됨.
}
myFunc(); // 호출해야 값이 바뀜.
console.log(num); // 전역의 내용 10.
</script>
<script>
var num = 10; // 전역변수
function myFunc() { // 지역의 위치. 전역변수 생성
num = 20;
console.log("1 :: " + num);
function myFunc2() {
}
}
myFunc(); // 호출 안 하면 1 :: 내용 안 나옴.
console.log("2 :: " + num); // 전역의 내용
</script>
<script>
var num = 10;
function myFunc() {
var num = 20;
console.log("1 :: " + num);
function myFunc2() {
}
}
myFunc();
console.log("2 :: " + num);
</script>
<script>
var num = 10; // 전역변수
function myFunc() {
alert(num); // undi . 수행할 때 var num = 20;이 있어서 이미 한 줄 위에 var num;이 자동으로 선언됨(호이스팅). 그래서 undi
var num = 20;
alert(num); // 20
myFunc();
function myFunc() {
alert("inner");
}
}
myFunc(); // 호출해야 값이 바뀜.
console.log(num); // 전역의 내용 10
</script>
<script>
var dan = 3;
document.write(dan + " * 1 = " + (dan * 1), "<br>");
document.write(dan + " * 2 = " + (dan * 2), "<br>");
document.write(dan + " * 3 = " + (dan * 3), "<br>");
document.write(dan + " * 4 = " + (dan * 4), "<br>");
document.write(dan + " * 5 = " + (dan * 5), "<br>");
document.write(dan + " * 6 = " + (dan * 6), "<br>");
document.write(dan + " * 7 = " + (dan * 7), "<br>");
document.write(dan + " * 8 = " + (dan * 8), "<br>");
document.write(dan + " * 9 = " + (dan * 9), "<br>");
function print99dan(dan) { // 파라미터 작성시 데이터 타입을 쓰지 않음.
document.write(dan + " * 1 = " + (dan * 1), "<br>");
document.write(dan + " * 2 = " + (dan * 2), "<br>");
document.write(dan + " * 3 = " + (dan * 3), "<br>");
document.write(dan + " * 4 = " + (dan * 4), "<br>");
document.write(dan + " * 5 = " + (dan * 5), "<br>");
document.write(dan + " * 6 = " + (dan * 6), "<br>");
document.write(dan + " * 7 = " + (dan * 7), "<br>");
document.write(dan + " * 8 = " + (dan * 8), "<br>");
document.write(dan + " * 9 = " + (dan * 9), "<br>");
return 10;
}
var ret = print99dan(7);
console.log(ret); // 10
print99dan(9);
</script>
<script>
// 생성자 함수 (객체를 생성하려고 쓰는 거)
// this? : 미래에 생성될 객체의 주소값
function Student(no, name, kor, eng, mat) {
this.no = no;
this.name = name;
this.kor = kor;
this.eng = eng;
this.mat = mat;
this.toString = function() {
return no + " :: " + name + " :: " + (kor+mat+eng)
}
}
var s1 = new Student(1,"홍길동", 90, 90, 90);
var s2 = new Student(2,"홍길");
var s3 = new Student(3,"홍길동", 80, 90, 90, 50);
var s4 = {no: 4, name: "박길", kor: 60, eng:70, mat:80};
console.log(s1.no);
console.log(s1.name);
console.log(s1.kor);
console.log(s1.eng);
console.log(s1.mat);
console.log(s2); // 파라미터 개수 안 맞아도 오류 안 남. undi
console.log(s3); // 개수 초과하면 넘친 건 표시 안 됨.
console.log(s4);
document.write(s1 + "<br>");
document.write(s2 + "<br>");
document.write(s3 + "<br>");
document.write(s4 + "<br>");
</script>
'자바스크립트' 카테고리의 다른 글
| JS Scope & JS Hoisting (w3schools) (0) | 2021.02.20 |
|---|---|
| Part 01. 부록02- jQuery 21. 02. 19. (0) | 2021.02.20 |
| Part 01. 03장- 형변환 21. 02. 19. (0) | 2021.02.20 |
| Part 01. 02장- 기본 연산자 21. 02. 19. (0) | 2021.02.20 |
| Part 01. 01장- 변수 21. 02. 18. (0) | 2021.02.19 |
