728x90
변수와 자료형
1.변수 선언
1)지역변수 & 전역변수
지역변수 : 함수 내부에서 'var 변수명;'
전역변수 : 함수 내부에서 '변수명;'
전역변수 : 함수 밖에서 '변수명;' 혹은 'var 변수명;'
// 함수 외부
str1 = "전역변수";
var str2 = "var전역변수";
// 함수 내부
var str1 = "지역변수1"
var str3 = "지역변수2"
console.log('str1 : ' + str1); /* 지역 변수 */
console.log('this.str1 : ' + this.str1); /* 함수 안에 있는 전역변수 */
console.log('window.str1 : ' + window.str1);/* 전역변수 : 함수 내부에서는 전역변수를 this.나 window.을 찍어서 구분해줘야한다 */
// 자바 때, 매개변수도 지역변수. 구분을 위해서 this썼었음
// js도 위처럼 this나 window 써서 구분해줌
console.log('str2 : ' + str2); // var전역변수
console.log('this.str2 : ' + this.str2); // var전역변수
console.log('window.str2 : ' + window.str2); // var전역변수
console.log('str3 : ' + str3); // 지역변수
console.log('this.str3 : ' + this.str3); // undefined : 없다는 얘기 // 지역변수인데 전역변수 구분용 접두어를 붙여놨으니 undefined
console.log('window.str3 : ' + window.str3); // undefined : js에서는 정의가 안된 데이터 '취급'함
- 지역변수 : 함수 내부에서 'var 변수명;'으로 선언하면 지역변수가 됨
- 전역변수 :
함수 내부에서 '변수명; '으로 선언하거나 함수 밖에서 '변수명;' 혹은 'var 변수명;'으로 선언하면 전역변수가 됨
2)우선권 : 전역과 지역변수의 우선권
전역변수와 지역변수가 동일한 이름인 경우,
함수 내부에서 변수 명을 호출하면 지역변수가 우선권을 가짐
window. this. : 전역변수와 지역변수 구분하는 코드
전역 변수 사용 시 'window. 변수 명;' 혹은 'this.변수 명;'으로 표현하여 지역변수와 구분
전역변수는 해당 window내에서 어디든 사용할 수 있으며, 지역변수는 해당 함수 내에서만 사용 가능
window.onload = function()
페이지가 로드되면 자동으로 실행하는 함수
한 페이지에서 하나의 onload함수만 기술 가능 페이지가 로드가 되면 한번에 여러개 실행되고 싶으면 한번에 하나만 가능해서 단점으로 생각해서 제이쿼리에서 여러개 실행가능하게 만들어둠
window.onload = function(){
추가자료
https://itworldyo.tistory.com/101
2.자료형
JS에서는 자료형 별로 변수 타입이 지정되지 않고,
리터럴에 의해서 자료형 결정
JS 데이터 타입
string
number
boolean
Array(object)
Object(object)
function
<h3>자료형</h3>
<p>자바스크립트에서는 자료형 별로 변수 타입이 지정되지 않고 리터럴에 의해서 자료형 결정</p>
<button onclick="typeTest();">자료형 테스트</button>
<script>
function typeTest(){
var name = "강건강"; // 문자열
var age = 20; // 숫자
var check = true; // 논리값
var hobby = ['축구', '야구', '농구']; // 배열
var user = { // 객체
name: '강건강',
age: 20,
id: 'user01'
};
var testFunction = function(num1, num2){
var sum = num1 + num2;
alert(sum);
};
// 콘솔창에서 '값' 확인
console.log(name);
console.log(age);
console.log(check);
console.log(hobby); // (3) ['축구', '야구', '농구']
console.log(user); // {name: '강건강', age: 20, id: 'user01'}
console.log(testFunction); // ƒ (num1, num2){
// var sum = num1 + num2;
// alert(sum);
// }
// 콘솔창에서 '타입' 확인
console.log(typeof(name)); // string
console.log(typeof(age)); // number
console.log(typeof(check)); // boolean
console.log(typeof(hobby)); // object // array
console.log(typeof(user)); // object
console.log(typeof(testFunction)); // function
// typeof연산자 : 값의 자료형을 확인하는 연산자
}
</script>
728x90
반응형
'JavaScript' 카테고리의 다른 글
| [JS] 함수(Function) : 매개인자로 전달하기, 함수 리턴처리, 매개변수로 함수 전달, 함수 리턴, 내장함수 (0) | 2022.07.27 |
|---|---|
| [JS] 배열(Array) : 선언 & 초기화 & 메소드 종류 (0) | 2022.07.26 |
| [JS] 조건문과 반복문 (0) | 2022.07.25 |
| [JS] 데이터 형변환 & 연산자 (0) | 2022.07.25 |
| [JS] HTML태그에 접근하기 : document.getElementByXXX() (0) | 2022.07.22 |