변수

* 01. 변수

- 데이터를 저장하는 장소

- 데이터를 읽고 쓸 수 있는 장소

* 02. 변수 생성 방법

1) 변수 하나 생성

var 변수이름 = 값;

2) 변수 여러 개 생성

var 변수이름1 = 데이터;

var 변수이름2 = 데이터;

...

or

var 변수이름1 = 데이터[, 변수이름2 = 데이터, ...]; 

3) 변수이름 만들 때 주의사항

 - 숫자 시작 안 됨

 ex) var 1st = 10; // 에러 발생

 - 대소문자 구분

 ex)

 var name = "hello";

 var Name = "hello";

 >> name 변수와 Name 변수는 서로 다른 변수

 - 변수의 시작은 대문자가 아닌 "소문자"로 시작

 ex) var Name = "hello"; 대신

var name = "hello"; 

 >> 변수는 대문자, 소문자 구분 없이 생성 가능하지만, 암묵적인 규칙.

 - 상수 변수의 경우 모두 "대문자"로 생성

 ex) var DB_NAME = "yourSQL";

 >> 상수 변수란, 한 번 저장한 후 수정할 수 없는 변수.

 - 여러 단어가 조합될 경우 낙타 표기법(camelcase)으로 작성

 ex)

 var userName = "hey";

 var selectMenuIdx = "0";

 - 이미 정의된 예약어(keyword) 사용 안됨

 cf. 예약어 : break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with 등.

* 04. 변수에 저장할 수 있는 데이터 종류

1) 데이터 위치 

 - "="를 기준으로 우측 / 변수는 "="를 기준으로 좌측에

 ex) var name = "이름";

 >> name (변수) "=" "이름"(데이터)

2) 데이터 종류

 - 저장할 수 있는 데이터의 종류는 다음과 같다 : 

숫자(number), 논리(boolean), 문자(String), 함수 (Function), 클래스 (class), 클래스 인스턴스(class Instance), undefined, null

- 데이터 형? 변수에 저장(보관)할 수 있는 값

(1) 숫자형(Number) : 정수형, 실수형 구분 가능

 - 정수형 10진수 : 일상생활에서 사용하는 숫자. 소수점 없음.

 - 정수형 16진수 : 0x으로 시작하며 숫자 0~9, 문자 A~F를 사용해 숫자를 표현. 색상값을 나타낼 때 사용.

 - 실수형 : 소수점을 갖는 숫자.

 ex) var age = "25";

(2) 문자형(String)

 ex) var id = "don't play";

(3) 논리형(Boolean) : true(참), false(거짓)

(4) 특수형(Undefined) : 변수는 선언했지만, 값이 아직 할당되지 않은 상태 

 ex) var username; // 기본값 undefined // 변수의 기본 초기값

 ex)

var data1;

alert("data1 = " + data1);

>> [출력 결과] 

data1 = undefined

 ex)

function myFunc(data1) {

alert ("data1 = " + data1);

}

myfunc("value1");

myfunc();

>> [출력 결과]

data1 = value1;

data1 = undefined;

  

(5) 특수값(Null) : 값이 아직 없다는 의미. undefined와 같은 의미로 사용.

"객체"를 담은 변수를 초기화할 때 사용하는 값.

cf. Undefined와 Null의 차이?

undefined : 변수의 기본 초깃값

null         : 객체를 담을 변수를 초기화할 때 사용하는 값

(6) 함수(Function) 

(7) 클래스(Class)

(8) 객체(Object)

* 05. 변수값이 자동으로 읽혀지는 경우

1) 우측에 변수를 두는 경우 

(변수에 들어있는 값이 읽혀 다른 변수에 대입하는 경우)

- A = B

: B에 들어있는 데이터 중 숫자, 문자, 논리 데이터만이 복사되며, 배열, 함수, 객체 데이터 등은 데이터가 들어있는 주소가 A로 복사.

2) 함수 호출 시 변수를 매개변수 값으로 사용하는 경우

- function(A);

3) 연산자와 함께 사용하는 경우

- A = B 연산자 C;

* 06. 변수를 활용한 데이터 중복 제거 및 재사용

- 실무에서 변수를 주로 사용하는 경우는 데이터를 저장하는 용도이기도 하지만, 데이터 재사용성에도 있다.

* 07. 변수에 어떤 값이 들어있는지 확인하기

1) alert()

- alert(data);

- 특정 정보(data)를 사용자에게 메시지 창으로 알려주기 위해 사용.

2) document.write()

- document.write(data, [data, ...]);

- HTML 문서의 body 영역에 <div>와 같은 HTML 태그 내용을 출력.

- 브라우저 화면에 '바로' 출력할 수 있는 기능

3) console.log()

- console.log(data, [data, ...]);

- 버그 : 논리적인 오류

- 디버깅 : 버그를 찾아 없애는 작업

=> console.log()는 전문 디버깅 함수

- 크롬, 사파리에서만 사용 가능, 출력값은 inspector 화면의 콘솔 영역에 출력.

* 08. 주석

1) 주석이란?

- 주로 작성한 코드에 설명을 달아놓기 위해서 사용, 실행이 되지 않는 소스!

- 개발자들간의 협업, 유지보수를 위해 반드시 필요한 프로그래밍의 일부분.

2) 주석 만드는 방법

(1) 한 줄 주석

// 여기에 설명 입력하기.

- 간단한 주석을 작성할 때 사용.

(2) 여러 줄 주석

/*

여기에 설명 입력하기.

*/

- 긴 주석을 작성할 때 사용.

* 09. 배열

1) 배열이란?

- 변수 하나에 '여러 개의 데이터'를 담을 수 있는 데이터 형이다.

*그렇다면 '같은' 자료형의 데이터를 여러 개 입력할 수 있음? 

2) 배열 생성 방법

var 변수이름 = [data, [,...]];

or

var 변수이름 = new Array(data, [,...]);

3) 배열 요소 접근

배열이름[n];    // 배열의 n번째 방에 있는 데이터에 접근한다는 의미.

* 10. 변수 종류

1) 변수 종류

(1) 전역 변수

- 전역에서 사용하는 데이터를 담는 변수. 어디서든 접근해서 사용이 가능.

(2) 지역 변수

- 특정 영역에서만 사용할 수 있는 변수. 함수 내부에 만들어지는 변수.

(3) 매개 변수(parameter)

- 함수 외부에서만 함수 내부로 데이터를 전달하기 위한 용도로 사용하는 변수

(4) 멤버 변수(property)

- 클래스 내부에 만들어지며 주로 객체에서 사용하는 정보를 담는 변수.

2) 전역 변수

<script>

var global = "전역변수";             // 전역변수

window.onload = function() {

global2 = "전역변수";          // 함수 내부에서 var 없이 변수에 값을 대입하면 "전역변수"가 됨. window.global2와 같다.

}

function func1() {

var global3 = "전역변수?";    // func1 내에서 만들어진 변수이므로 "지역변수"다.

}

</script>

3) 지역 변수

<script>

window.onload = function() {

var g = "전역변수";          

}

function func1() {

var g = "전역변수?";

}

</script>

이 때, window.onload에서 생성된 var g != func1()에서 생성된 var g

왜냐하면, 각자 함수 내에서 생성된 변수는 그 함수 내에서만 사용이 가능하기 때문이당.

5) 멤버 변수

<script>

function MyClass() {

this.name = "변수";                                    // MyClass 클래스의 멤버 변수 name!

}

MyClass.prototype.showName = function() {          // MyClass 클래스의 멤버 함수 or 메소드 showName!

document.write("name = ", this.name);

}

var objClass = new MyClass();

objClass.showName();

</script>