3일차(3) javascript 기초 : function(1)
[함수를 호출하는 목적]
1. 어떤 동작을 하기 위해
2. 어떤 값을 받아오기 위해
3. 어떤 동작도 하고 동작의 결과값도 받아오기 위해
<예제7>
<!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_dataType7.html</title>
</head>
<body>
<h1>javascript data type</h1>
<script>
/*
함수를 호출하는 목적
1. 어떤 동작을 하기 위해
2. 어떤 값을 받아오기 위해
3. 어떤 동작도 하고 동작의 결과값도 받아오기
*/
//원숭이를 냉장고에 밀어 넣는 함수
let pushMonkey=function(){
console.log("냉장고 문을 열어요");
console.log("원숭이를 넣어요");
console.log("냉장고 문을 닫아요");
};
let getFortune=function(){
//어떤 복잡한 과정을 통해서 오늘의 운세를 얻어왔다고 가정하자
let fortune="동쪽으로 가면 귀인을 만나요";
//return 이라는 예약어를 이용해서 string type 데이터를 함수를 호출한 그위치로 되돌려준다.
return fortune;
};
// 1. 어떤 동작을 하기위한 목적인 함수 호출
pushMonkey();
// 2. 어떤 값을 받아오기 위한 목적인 함수 호출
let fortuneToday=getFortune();
// 3. 어떤 동작도 하고 동작의 결과값도 받아오기
let isDelete=confirm("삭제할까요?");
let yourName=prompt("이름을 입력하세요!");
</script>
</body>
</html>
1. 어떤 동작을 하기 위해
→ pushMonkey, alert (텍스트 출력하기, 알림창 띄우기)
2. 어떤 값을 받아오기 위해
→ getFortune (결과값으로 string 값을 가져온 것)
3. 어떤 동작도 하고 동작의 결과값도 받아오기
→ confirm, prompt
- prompt : 사용자에게 어떤값을 입력받아서 string type으로 받아온다.(동작+값 받아오기)
참고) 함수를 call하는것뿐만 아니라 함수를 call하면서 어떤 값을 전달할 수도 있다.
→ alert("안녕")
ex) 삭제할까요? 라는 알림창을 띄우고(동작), 사용자의 동작에 따라 true/false의 값도 가져온다.(값)
javascript에서 함수를 호출한 위치에는 반드시 어떤값이 리턴된다.
함수 안에서 return이라는 예약어로 어떤 값도 리턴하지 않으면 자동으로 undefined가 리턴된다.
<예제8>
- object 값으로 무엇이든 리턴할 수 있다.
ex) num, string, function, boolean, ...
<!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_dataType8.html</title>
</head>
<body>
<h1>javascript data type</h1>
<script>
let getData=function(){
//어떤 복잡한 과정을 거쳐서 얻어낸 object라고 가정
let obj={num:1, name:"바나나", addr:"서울"}
//return 예약어를 이용해서 함수를 호출한 곳으로 object type 돌려주기
return obj;
};
let getFriends=function(){
//어떤 복잡한 과정을 거쳐서 얻어낸 array라고 가정
let friends=["바나나", "딸기", "복숭아", "사과", "오렌지"]
return friends;
};
let a=getData; //function
let b=getData(); //object
let c=getData().num; //number
let d=getData().name; //string
let e=getData().addr; //string
let f=getFriends()[0]; //string "바나나"
let g=getFriends()[1]; //string "딸기"
let h=getFriends()[2]; //string "복숭아"
//↑매 차례마다 새롭게 함수 호출하는 것!
</script>
</body>
</html>
- getData → object type을 리턴
- getfriends → array type을 리턴
let a=getData; → function 참조
let b=getData(); → object type 리턴
let c=getData().num; → number type 리턴
let d=getData().name; → string type 리턴
let e=getData().addr; → string type 리턴
- getFriends 가 무엇인지 확인 : 함수
- getFriends 함수 실행 : array 리턴
- getFriends 함수의 0번째 데이터 : array에서 추출된 값 리턴
- getFriends 함수의 1번째 데이터 : array에서 추출된 값 리턴
- getFriends 함수의 2번째 데이터 : array에서 추출된 값 리턴
- 페이지가 로딩되는 시점에 나타나는 함수는 어디에서든지(전역에서) 접근이 가능한 자원이다.(글로벌 영역=빨간색 영역)
- 각각의 색깔(함수) 영역 안에서 만들어진 변수는 그 영역 안에서만 쓸 수 있다.
함수안에서 let 된것과 함수 밖에서 let 된것은 다르다.(함수 밖에서는 함수안에 있는 변수는 가려진다)
- console 창에서는 글로벌 영역에서 정의된 것밖에 쓸 수 없다.
getFriends().push("포도")
> 6
getFriends()
> (5) ['바나나', '딸기', '복숭아', '사과', '오렌지']
Q. console 창에서 위와 같이 입력했을 때, array에 "포도"가 추가되어 6개가 되지 않은 이유는?
A. 함수 호출시 받아오는 데이터는 동일하다. 각각은 서로에게 영향을 미치지 않는 분리된 개념이다.
함수를 호출할때마다 새로운 배열을 만들어 가져오는 것이다.
(가져오는 사물함의 내용물value은 같지만 사물함 번호key가 다르다)
'국비교육(22-23)' 카테고리의 다른 글
| [참고] Chrome에서 javascript 실행 과정 살펴보기 (breakpoints, step over, step into) (0) | 2022.10.07 |
|---|---|
| 3일차(4)/javascript 기초 : function(2) (0) | 2022.10.07 |
| 3일차(2)/javascript 기초 : dataType (0) | 2022.10.07 |
| 3일차(1)/Javascript 기초 : dataType (1) | 2022.10.07 |
| 2일차(7)/javascript 기초 : dataType (1) | 2022.10.06 |