다연이네
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="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var a; //전역변수
</script>
</head>
<body>
<button title="fn1()"> btn 1</button>
<button title="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="//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>
[javascript/jquery] 전역변수와 지역변수 [펌]
전역변수와 지역변수
변수는 유효범위에 따라 전역변수(Global Variable)와 지역변수(Local Variable)로 구분할 수 있습니다.
- 전역변수는 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수입니다.
- 지역변수는 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수입니다. 함수 외부에서는 접근할 수 없습니다.
예제 1
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
var jbVar = 'Ipsum';
}
document.write( jbVar );
</script>
</body>
</html>
변수 jbVar의 값을 함수 외부에서는 Lorem으로, 함수 내부에서는 Ipsum으로 정했습니다. 함수 외부에서 jbVar를 불러왔으므로 전역변수의 값
Lorem
이 출력됩니다.
예제 2
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
var jbVar = 'Ipsum';
document.write( jbVar );
}
jbFunc();
</script>
</body>
</html>
함수 내부에서 jbVar의 값을 불러왔으므로 지역변수의 값
Ipsum
이 출력됩니다.
예제 3
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var jbVar = 'Lorem';
function jbFunc() {
jbVar = 'Ipsum';
document.write( jbVar );
}
jbFunc();
document.write( jbVar );
</script>
</body>
</html>
함수 내부에서 var를 사용하지 않고 변수의 값을 정하면 전역변수의 값을 변경합니다. 따라서
IpsumIpsum
을 출력합니다.
출처 : www.codingfactory.net/10401