3일차(4) javascript 기초 : function(2)
- 어디까지 참조하면 어떤 값이 추출되는지 연습하기!!
<예제9>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_dataType9.html</title>
</head>
<body>
<h1>javascript data type</h1>
<script>
let getMembers=function(){
let members=[
{num:1, name:"바나나", addr:"서울"},
{num:2, name:"딸기", addr:"부산"},
{num:3, name:"복숭아", addr:"대전"}
];
return members;
};
let myUtil={
send: function(){
console.log("전송합니다.");
},
hole: function(){
console.log("구멍을 뚫어요!");
}
};
// 구멍을 뚫으려면
myUtil.hole()
// 전송하려면
myUtil.send()
</script>
</body>
</html>
- 함수Function처럼, 배열Array 안에도 뭐든 저장할 수 있다.(array, function, string, number, ...)
- 참조 위치별 데이터 타입을 확인하고, 함수를 실행하는 법 익히기.
let myUtil={
send: function(){},
hole: function(){}
};- send라는 방, hole이라는 방 안에 function(){}을 넣은 형태
- 사용할 특정 기능이 object의 특정 방 안에 들어가 있을 수도 있다.
- console에서 실행하려면 myUtil.send() 로 작성.
<button onclick="myUtil.send()">전송하기</button>
<button onclick="myUtil.hole()">구멍뚫기</button>
- 위와 같이 작성하면 myUtil object 내부의 함수(value값)가 실행되는 버튼을 만들 수도 있다.
** function ( ) { } 의 작성법과 → 앞에 반드시 소괄호()가 있음
object { } 의 작성법을 구분하기! → {key:value} 형태로 작성함
console.log를 사용한 테스트. 위 이미지 순서대로
- console 참조
- console object의 log 참조
- console object의 log 실행(call)
- console object의 log에 return값을 입력하여 실행 (string type)
<예제10> 매개변수
- 단순히 호출만 하는 것이 아니고, 함수 안에서 사용될 어떤 값을 전달해야만 동작하는 함수가 있다.
→ 따라서 함수 안에서 어떤 값을 받을 준비를 해두어야 한다!
→ 매개변수 : "함수가 전달하는 값을 받을 매개체가 되는 변수"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step01_dataType10.html</title>
</head>
<body>
<h1>javascript data type</h1>
<script>
/*
function(msg){}
에서 msg는 매개 변수이다.
함수에 전달되는 값을 전달받을 변수이며
let을 선언하지 않는다.
매개변수는 해당 함수 안에서만 사용할 수 있다.
*/
let str="안녕하세요";
// 함수에 전달되는 값을 msg라는 매개변수에 전달받을 준비하기
let printMsg=function(msg){
//msg에 뭐가 전달될지는 모르겠지만 아래와 같이 사용할거야!
console.log("----------");
console.log(msg);
console.log("----------");
};
printMsg("hello!");
printMsg("who are you");
printMsg(123);
printMsg(str);
printMsg("bye!");
</script>
</body>
</html>
let printMsg=function(msg){}
→ msg라는 변수 선언 (한번에 여러개도 선언 가능)
- printMsg 라는 함수가 설정되어, 전달하는 값이 프린트된다!
값을 전달하지 않으면 undefined가 뜬다.
printMsg("hello!");
printMsg("who are you");
printMsg(123);
printMsg("bye!");
- 한번 호출하는 값이 자동으로 들어가는 변수이다.
- msg 는 함수가 호출하는 값을 받을 매개체로 기능한다.
(단, 입력하는 데이터타입을 강제할 수 없기 때문에 사용자가 지정된 데이터타입을 넣지않으면 오류가 날 수 있다.)
대입연산자 = 를 통해서 값이 매개변수에 대입된다.
첫번째 호출: mgs="hello!"
두번째 호출: mgs="who are you"
세번째 호출: mgs=999
네번째 호출: mgs="bye!"
let str="안녕하세요";
printMsg(str);
위와 같이 쓴다면 msg=str 가 대입된다.
→ printMsg("") 따옴표안에 들어가는 값뿐만 아니라, 이미 위에서 만들어둔 값을 대입하는 것도 가능하다.
'국비교육(22-23)' 카테고리의 다른 글
| 4일차(1)/javascript 기초 : function 요약 (0) | 2022.10.11 |
|---|---|
| [참고] Chrome에서 javascript 실행 과정 살펴보기 (breakpoints, step over, step into) (0) | 2022.10.07 |
| 3일차(3)/javascript 기초 : function(1) (0) | 2022.10.07 |
| 3일차(2)/javascript 기초 : dataType (0) | 2022.10.07 |
| 3일차(1)/Javascript 기초 : dataType (1) | 2022.10.07 |