다연이네

[days02] js 변수(함수를 변수에 담을때, 지역변수, 전역변수) 본문

Web/JavaScript

[days02] js 변수(함수를 변수에 담을때, 지역변수, 전역변수)

　다연　 2020. 12. 10. 20:15
반응형

함수를 변수에 담을 때 

1) 함수 자체를 변수에 담는 경우 (자료형: function)

2) 함수의 return값을 변수에 담는 경우 (자료형: number)

<script>
function sum(a,b) {
	var result = a+b;
	return result;
}
 
var fn = sum; //함수 자체를 fn 변수에 담음 (자료형: function)
console.log(fn(3,4)); //7

var fn2 = sum(5,6); //return 값을 받음 (자료형: number)
console.log(fn2); //11
</script>

 

전역변수와 지역변수

- 함수밖에서 변수를 선언하면 var과 상관없이 무조건 전역변수가 되고 
- 함수안에서는 var가 있으면 지역변수, 없으면 전역변수이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
	var a; //전역변수
</script>

</head>
<body>

<button onclick="fn1()"> btn 1</button>
<button onclick="fn2()"> btn 2</button>
<script>
	
	var a; //전역변수
	function fn1() {
		//var a="100"; //a변수는 함수 내에서만 사용하는 지역변수
		a=150;
		name="admin"; //변수선언없이 바로 값 할당
		alert(a+"/"+name); //var선언 안함 => 전역변수
        			//js는 변수를 var키워드로 선언하지 않고 사용 가능
	}
	
	function fn2() {
		alert(a+"/"+name); 
		//btn 1 을 누르고 난 후 btn 2를 누르면 값이 뜨고
		//btn 1을 누르지 않은 상태라면 undefined이 뜸
        //만약 전역변수 값으로 undefinded 대신 200이 있었다면, 200이 먼저 뜨고
        //btn1을 누른 다음에야 150이 뜬다
	}
</script>



<script>
	var a;  //내부적으로 위로 올린다 (그래서 위에 선언하던 아래 선언하던 상관 없음)
	
	age=20; //var 없어도 전역변수
	//함수밖에서는 var쓰든안쓰든 전역이고
	//함수안에서는 var쓰면 지역 안쓰면 전역
</script>

</body>
</html>

 

var x =10 / ""/ true  
var x = new Number() / new String() / new Boolean =>자료형은 object

둘의 차이

<script>
	var x =10; //number
	var x = new Number(); //number형 만들 수 있음 (그러나 이렇게 쓰진 않음)
					
	var y = "string";
	var y = new String(); //이렇게 문자형 만들수 있으나 이리 쓰지는 않음
	
	var z = true;
	var z = new Boolean(); //얘도 안써 (성능 떨어짐)
	
	Number, String, Boolean은 자바로 치면 클래스(객체)
	number, string, boolean랑 다른 것(얘넨 typeof 연산자)
</script>
 	var name1 = "kenik";
 	var name2 = new String("kenik");//찍히긴 하는데 권장하지 않음(성능 하락)
 	console.log(name1 ==name2); //true
 	console.log(name1 ===name2); //false 	자료형 string != object
 	
 	
 	//자바에서도
 	//String name = "admin";
 	//String name = new String("admin"); 해도 되지만.. 잘 안쓰듯..

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<script>
	var car = "bmw"; //string
	var car = {name:"bmw"
		, model:525
		, color:"red"	//필드
		//메소드 안에 있는 this는 소유 객체를 나타낸다.
		, info : function(){   //메소드
			return this.name+"/"+this.model+"/"+this.color;
			}
		}; // 중괄호 : 객체
	//alert(typeof car); //object
	console.log(car.name); // 객체명.필드명(속성명)	필드=property
	console.log(car["model"]); //이렇게 해도 됨
	console.log(car.info());
	
	var fndisp = car.info; //괄호가 없으면 그 함수 자체를 변수안에 담겠다는 뜻 자료형:function
	//console.log(fndisp()); 결과가 이상하게 나온다 왠 admin
	
</script>
</body>
</html>

 

 

반응형
저작자표시 비영리

'Web > JavaScript' 카테고리의 다른 글

[days03] 문제  (0) 2020.12.11
[days02] 문자열 메소드  (0) 2020.12.10
[days02] js 자료형(data type)  (0) 2020.12.10
[days02] js 연산자  (0) 2020.12.10
[days02] js 위치와 기본 특징  (0) 2020.12.10
'Web/JavaScript' Related Articles more
Comments