public class Student{
// 필드 (멤버 변수)
private String name; // 인스턴스 변수
public static String schoolName; // 클래스 변수, static 변수
// 메소드
public setName(String name /*메소드 지역 변수*/){
this.name = name;
int num = 10; // 메소드 지역 변수
if(){
int a = 20; // if 지역 변수
}
}
}
<pre>
(js 파일)
var num1; // 전역 변수 (선언된 후 같은 문서 내 어디서든 사용 가능)
num2; // 전역 변수 (변수명 앞에 아무런 키워드가 없으면 전역 변수가 된다.)
function test(){
var num3; // function 지역 변수
num4; // 전역 변수 (변수명 앞에 아무런 키워드가 없으면 전역 변수가 된다.)
if(조건식){
var num5; // if 지역 변수 -> function 지역 변수
num6; // 전역 변수 (변수명 앞에 아무런 키워드가 없으면 전역 변수가 된다.)
}
num5;
}
</pre>
<script>
console.log("[script 태그 내부]");
console.log("num1 : " + num1);
console.log("num2 : " + num2);
</script>
var str = "JS 코드를 함수 내부가 아닌 "
+ "JS파일 또는 script 태그 밑에 바로 작성하면 "
+ "HTML 렌더링 시 바로 수행된다."
console.log(str);
// 변수 선언 위치에 따른 구분
var num1 = 10; // 전역 변수
num2 = 20; // 전역 변수
var num1 = 20;
console.log("num1 : " + num1);
console.log("num2 : " + num2);
function test(){
var num3 = 3; // function의 지역 변수
num4 = 4; // 전역 변수
if(true){ // 무조건 if문 수행
let num5 = 5; // function 지역 변수
num6 = 6; // 전역 변수
}
console.log("num5 : " + num5);
}
test();
// console.log("num3 : " + num3); // error
console.log("num4 : " + num4); // function 종료 후에도 사용 가능
// console.log("num5 : " + num5); // error
console.log("num6 : " + num6); // function 내부 if문 종료 후에도 사용 가능
변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope
변수, 변수명 중복 X, 블록{} 레벨 scope
상수, 변수명 중복 X, 블록{} 레벨 scope
1순위 : const
(JS는 특정 요소를 선택해서 사용하는 경우가 많아서 상수에 고정시켜 둠)
2순위 : let
3순위 : var (ES6 이후부터 사용 빈도가 많이 적어짐)
자바스크립트는 변수 선언 시 별도의 자료형을 지정하지 않음
-> 변수에 대입되는 값(리터럴)에 의해서 자료형이 결정됨
- string (문자열)
- number (숫자) -> 정수 / 실수 모두 포함
- boolean (논리값)
- object (객체) -> 배열(Array), 자바스크립트 객체{k:v, k:v}
- function (함수)
- undefined (정의되지 않은 변수) -> 변수가 선언만 됐지, 값이 대입되지 않음
[참고]- null (참조하는 게 없음) -> document.getElementById("오타") (가장 흔한 경우)
-> id가 일치하는 요소가 없어서 참조할 수 없다. (null은 타입보다는 값(리터럴)의 개념)
<button onclick="typeTest()">자료형 확인</button>
<div id="typeBox"></div>
// 자료형 확인
function typeTest(){
const typeBox = document.getElementById("typeBox");
let temp; // 선언 후 값을 초기화 하지 않음 == undefined
typeBox.innerHTML = "temp : " + temp;
// string
const name = "김민석";
// typeof 변수명 : 해당 변수의 자료형을 검사하는 연산자
typeBox.innerHTML += "<br>name : " + name + " / " + typeof name;
const gender = 'm';
typeBox.innerHTML += "<br>gender : " + gender + " / " + typeof gender;
// 자바스크립트는 char 자료형이 존재하지 않는다!
// "", '' 모두 string 리터럴 표기법
// number
const age = 20;
const height = 178.3;
typeBox.innerHTML += "<br>age : " + age + " / " + typeof age;
typeBox.innerHTML += "<br>height : " + height + " / " + typeof height;
// boolean
const isTrue= true;
typeBox.innerHTML += "<br>isTrue : " + isTrue + " / " + typeof isTrue;
//object
// java ({} 사용)
// int[] arr = {1,2,3,4,5};
// javascript ([] 사용)
const arr = [10, 30, 70, 50];
typeBox.innerHTML += "<br>arr : " + arr + " / " + typeof arr;
for(let i=0; i<arr.length; i++){
typeBox.innerHTML += "<br>arr[" + i + "] : " + arr[i];
}
// 자바스크립트 객체는 K:V (Map 형식)
const user = {"id" : "user01", "pw" : "pass01"};
typeBox.innerHTML += "<br>user : " + user + " / " + typeof user;
// 객체 내용 출력 방법 1
typeBox.innerHTML += "<br>user.id : " + user.id;
typeBox.innerHTML += "<br>user.pw : " + user.pw;
// 객체 내용 출력 방법 2 (객체 전용 for문 for ... in)
for(let key in user ){
// user 객체의 키(id, pw)를 반복할 때마다 하나씩 얻어와 key 변수에 저장
typeBox.innerHTML += "<br>user[" + key + "] : " + user[key];
}
console.log(user); // 콘솔 출력 시 보기 더 좋음
// function (함수도 자료형이다!)
// 1) 변수명 == 함수명
const sumFn = function(n1, n2){ // 익명 함수
return n1+n2;
}
// 함수명만 작성한 경우 -> 함수에 작성된 코드가 출력됨
typeBox.innerHTML += "<br>sumFn : " + sumFn + " / " + typeof sumFn;
// 함수명() 괄호를 포함해서 작성하는 경우 -> 함수 호출(수행)
typeBox.innerHTML += "<br>sumFn(10, 20) : " + sumFn(10, 20);
typeBox.innerHTML += "<br>sumFn(30, sumFn) : " + tempFn(30, sumFn);
}
function tempFn(n3, fn){
return n3 + fn(10, 20);
}
데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장
-> 숫자(Number), Boolean, null, undefined, 문자열(string)
메모리의 위치(주소)에 대한 간접적인 참조를 통해 메모리에 접근