자바스크립트 변수
상수와 변수
상수(Constant)
- 변하지 않는 수
- 변경이 없음 숫자 10은 10이다 값이 바뀔일이 없음
- 변수와 구분하기 위한 목적으로 상수의 이름은 모두 대문자로 작성 표기
- 코드가 실행 중인 상황에서 값을 변경할 수 없다
- 상수를 공식적으로 지원하는 것은 ECMAScript 2015 버전부터 지원함
- 이전까진 IE에선 상수를 지원하지 않아서 굳이 사용하지 않았음.
- 앞으로 상수가 얼마나 활발하게 사용이 될진 아직 모름
변수 (Variables)
- 자료를 담는 공간(그릇) == 메모리 공간
- 변수의 값은 메모리cpu에 저장됨
- 한개의 값만 저장 할 수 있다.
- 변하는 수 : 어떤값을 넣느냐에 따라 값이 변동됨
- 데이터 유형에 따라 값을 복사를 할수도 있고 참조 할수도 있다.
- 변수는 값이 담긴 데이터로 접근하도록 하는 식별자이다.
- var 키워드로 변수 선언
var 변수이름 = 정보유형;
// 변수(Variable) VS 상수(Constant)
var bim = 'LG bim';
const HOUR = 60;
// 변수는 실행 중인 상황에서 값을 변경할 수 있는 반면
console.log('bim', bim);
// 상수는 실행 중인 상황에서 값을 변경할 수 없다
console.log('HOUR', HOUR);
//값 변경
bim = 'samsung';
HOUR = 120;
console.log('bim', bim); //바뀜
console.log('HOUR', HOUR); //오류발생
변수 할당(대입)
- = 할당의 의미
var a = 10; => 숫자10을 변수 a에 값을 할당하다.- 언제든지 값은 변할수 있다.
a = 7 + 2; a의 값은 9로 변경됨
변수 정의 패턴
한개의 var 키워드에 변수선언
var x, y, z;
// 값을 할당하지 않고 선언만 하는 경우
// undefined 원시 데이터 유형 값으로 변수에 할당(복제)된다.
var 키워드를 변수 이름마다 사용해서 선언 : 일반적으로 많이 쓰는 방법
var x;
var y;
var z;
// 선언 이후에 값(Data)을 변수에 할당한다.
x = '바버';
y = 999;
z = null;
변수 선언과 동시에 값을 할당 : 일반적으로 많이 쓰는 방법
var x = 10;
var y = 50;
var singleton pattern : var 키워드를 한번만 사용하는 코딩 패턴(방법)
var a=1, b=2, c=9;
// 아래와 같이 개행 가능
var a=1,
b=2,
c=9;
변수명 작성 규칙
이름 앞에 숫자 No 하지만 뒤는 Ok
- =>
var 999qkqj; Error - =>
var qkqj999; Ok
이름 사이의 공백 No 공백대신 언더바
- =>
var my name; Error - =>
var my_name; Ok
이름 앞에 특수문자는 $, _ 만 가능
- =>
var ^^#@_name; Error - =>
var $name; Ok : $가 붙은 변수는 주로 제이쿼리를 담은 변수를 나타냄
변수명이 모두를 대문자로 사용하지 않는다.
- => 오류가 발생하는 것은 아니지만 이름이 전부 대문자이면 관례적으로 상수로 인식한다.
- =>
var SMART_PHONE; ==> 상수로 인식 - => 상수선언은
const 이름 = '값'; ==> const STORAGE;
카멜 케이스(camelCase) 표기법
- 대문자를 변수 이름에 사용하는 경우는 카멜 케이스 표기법을 따르는 경우가 많다.
var smartPhone;
참고 및 주의사항
- 한국어도 가능하지만 크롬말고 다른 브라우저는 인식 못할수도 있음
- 예약어 사용 안됨
변수 값의 복사, 참조의 구분
값 복사 : 데이터가 원시데이터형일 때 복사가 된다.
- 원시 데이터(Primitive Data Type) 유형 5가지
- undefined , null , Number , String , Boolean
// 실행구문 1
// x에 10을 대입
x = 10;
// x의 변수값 복사
y = x;
console.log('x: ',x); // 10
console.log('y: ',y); // 10
// 실행구문 2 (x값 변동, y의 값은?? )
// x 변수의 상태가 변경 ( === 값이 변경)
x = 5;
// z에 연산된 값 할당
z = x * y -150;
console.log('x: ',x); // 5
console.log('y: ',y); // 10 ==> y값은 변동되지 않음 처음 복사한값 그대로
console.log('z: ',z); // -100
// 실행구문 3 (x값 변동, y값 연산된 값은??, z의 값은???)
// x 변수의 상태가 변경 ( === 값이 변경)
x = -15;
// y의 연산결과 : y = -15 + 10
y = x + 10;
console.log('x: ',x); // -15
console.log('y: ',y); // -5
console.log('z: ',z); // -100
//==> z의연산의 위치는 변수x,y의 값이 바뀌기전임 그래서 위의 z값과 같음
참조 : 주소를 가르키고있다 개념으로 자료형 데이터 일때 참조됨
- 참조형 데이터(Reference Data Type) == 자료형데이터
- 객체(Object), 함수(Function Object), 배열(Array Object)
// tea_time 변수에 배열데이터 할당
// == tea_time 변수가 배열테이터 참조
var tea_time = ['cake', 'coffee'];
// food 변수가 tea_time에 할당된 값을 참조.
var food = tea_time;
console.log('tea_time:', tea_time); // ['cake', 'coffee']
console.log('food:', food); // ['cake', 'coffee']
//실행구문 2
tea_time[2] = 'ice-cream';
console.log(tea_time); // ["cake", "coffee", "ice-cream"]
console.log(food); // ["cake", "coffee", "ice-cream"]
// => 참조된값이 바뀌면 변경된다.
var a = 10;
var b = a;
var c = {x: a};
var d = c; // c에 참조된 객체를 d도 참조함.
console.log('a:',a);
console.log('b:',b);
console.log('c:',c);
console.log('d:',d);
//변수 데이터값 변경
a = 100;
b = 200;
c.x = 300;
console.log('a:',a);
console.log('b:',b);
console.log('c.x:',c.x);
console.log('d.x:',d.x); // c에 참조된 객체를 d도 참조하고 있기에 값이 변경됨.
//---------------- 중요한 개념 ----------------------
// 변수c가 참조하고 있는 객체에서 키인 x는 객체가 아님
// x라는 이름을 가진 변수 라서 데이터 값이 복사됨.
// 대신 변수d는 변수c의 객체를 참조 하고 있기에 c의 키인 x가 변경되면 변경된 값을 가지고있음
전역변수와 지역변수
전역 : global scope variable
var mouse = '매직 마우스';
console.log(1, mouse);
지역 변수 : local scope variable
function localScope() {
var mouse = '돌핀 마우스';
console.log(2, mouse);
}
localScope();
console.log(3, mouse);
매개 변수 : parameter
function callMe(who, when, where, how) {
// 매개변수는 해당 함수의 내부에서 접근이 가능하다.
// console.log('a', who);
console.log('who:', who);
console.log('when:', when);
console.log('where:', where);
console.log('how:', how);
}
callMe('boy', 'yesterday', 'school', 'using smartphone');
// console.log('b', who); // Reference Error
멤버 변수
var phone = {
'name': 'iPhone',
'version': 7
}
그외