23.03.16 / ★★ 변수 (변수 선언, 식별자, 변수 호이스팅)

[ ★★ 변수 ★★ ]

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙인 이름
• 프로그램 언어에서 값을 저장하고 참조(값의 위치)하는 상징적인(담는 값을 떠올릴 수 있는) 이름.
• 변수 선언 키워드 : 변하는 값(var,let) , 변하지 않는 값(const)
• 저장된 값에 의해 자료형이 결정된다.
• 자료형의 기본은 문자형, 숫자형, 논리형
• 자료형 확인 키워드는 typeof
• 변수 선언 후 기본 값은 undefined

< 변수 선언 >

1-1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
1-2. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화
       1-1/2. 선언 & 초기화 단계 : var course ;   (값이 undefined로 초기화하여 할당되어있음)
2. 값 할당 : course = 'ksmart' ; 
     => var course = 'ksmart' ;    // 한 줄로 입력 가능하고 선언&초기화와 값 할당 따로 입력도 가능하다.

< 변수 선언 키워드 >

• var, let, const 
• var는기존에 사용하던 키워드, let과 const는 ES6부터 사용하기 시작했다.
• ES6이란 ECMAScript6 : Ecma라는 곳에서 정한 표준안이다.
• 엣지 같이 ES6를 지원하는 브라우저에서는 let과 const를 사용 가능하지만
• 익스플로러 같이 ES6를 지원하지 않는 브라우저에서는 사용 불가능

1. var (함수 스코프) : 재할당 가능 / 재선언 가능 -> < 변수 호이스팅 > 

var name = '홍길동' ; 
var name = '김철수' ;
// var 재선언 가능

name = '김미영' ;  
// var 재할당 가능 

// 변수 이름이 중복 사용 가능하다거나 값이 두 개가 할당이 된다는 것 아님
// 나중에 입력한 것으로 값이 바뀐다. 
// 협업할 때 내가 쓴 변수를 다른 사람이 모르고 바꿔버릴 수 있음 - var의 한계

 

※ 함수 스코프 var,function() ※

var age = 21;
if(age >= 19){
  var result = true; // 블록 안에 선언된 var
}
console.log(result); // 블록 안에 선언된 var 출력
//if 문은 함수가 아니기 때문에 밖에 있든 안에 있는 상관 없음


var result = 21; // 안에 선언된 var와 밖에 선언된 var의 변수명이 같을 때
if(result >= 19){
    var result = true; // 블록 안에 선언된 var
}
console.log(result); //var는 재선언이 가능하기 때문에 뒤에 입력된 true가 출력 된다.
//if 문은 함수가 아니기 때문에 밖에 있든 안에 있는 상관 없음



var num2 = 1; // 함수 밖에 선언된 var
    function exFn(num1){
console.log(num1);
var num2 = 5; 			// 함수 안에 선언된 var
    console.log(num2); // 함수 안에 선언된 var 출력
    }
    exFn(1);
    console.log(num2); // 함수 밖에 선언된 var 출력
// var는 함수스코프이기 때문에 함수가 끝나면 밖에서 사용할 수 없다.

2. let (블록 스코프) : 재할당 가능 / 재선언 불가능

let nameMember = '홍길동' ;

let nameMember = '김철수' ;  
// let - 변수 재선언 불가능  - 오류 발생

nameMember = '김철수'; 
//재할당 가능​

3. const (블록 스코프) : 재할당 불가능 / 재선언 불가능
    constant(상수) : 항상 같은 수 -> 변하지 않으니 당연히 재할당 재선언 안됨
    변수인데 변하지 않는다고...? -> 변수를 변하는 수라고 정의 내리기 때문에 일어나는 혼란..
    변수를 어떤 값을 저장하기 위해 확보한 메모리 공간 혹은 그 공간의 이름이라고 정의하면 이해 가능
     => const는 변하지 않는 값을 갖는 변수를 생성한다.

const memberName = '홍길동' ;

const memberName = '김철수' ; 
// 재선언 불가능 - 오류 발생

memberName = '김철수' ; 
//재할당 불가능 - 오류 발생

 

※ 블록 스코프 let,const ※

let result = 21;
if(result >= 19){
  let result = true; // 블록 안에 선언된 let
}
console.log(result); // 블록 밖에 선언된 let 출력
//if 문의 블록 안에 선언하면 블록 안에서만 사용 가능

< 변수 호이스팅 >

• var - 변수 선언 전 콘솔로그 출력 먼저 하는 것 가능 / 값 할당하기 전에 변수 선언 & 초기화 먼저 하기 가능
• let -  변수 선언 전 콘솔로그 출력 먼저 하는 것 불가능 / 값 할당하기 전에 변수 선언 & 초기화 먼저 하기 가능
• const - 변수 선언 전 콘솔로그 출력 먼저 하는 것 불가능 / 값 할당하기 전에 변수 선언 & 초기화 먼저 하기 불가능

var로 선언한 모든 변수는 코드가 실제로 이동하는 것은 아니지만, 최상위로 끌어 올려진 것처럼 동작한다.
java script는 위에서 아래부터 읽어나가기 때문에 위에 작성해 놓은 콘솔로그 부터 읽어 온다.
이때 콘솔로그 전에 name 변수가 선언되지 않았기 때문에 오류가 떠야 한다.
하지만 var를 사용했을 때 변수의 값 입력 전 상태의 선언&초기화 상태에 자동으로 할당되는 undefinded가 출력된다.
함수 선언문도  var 처럼 호이스팅이 발생한다.  /     function 함수이름()
함수 표현식은 호이스팅 발생하지 않는다.         /     var bye = function()  /  function함수가 오른쪽에 있어 표현식이 됨.

console.log(memberId); // undefinded

var memberId = 'cookie';



// 실제로 위의 코드가 읽히는 과정
// 변수 선언 키워드가 var 일 때만 가능한 과정

var memberId;

console.log(memberId); // undefinded

memberId = 'cookie';

 

- let을 썼을 때 변수 선언 전에 콘솔로그 먼저 확인을 하면 오류가 나는 것을 알 수 있다. 
  호이스팅이 아예 발생하지 않는 것은 아니다. 콘솔로그를 먼저 읽도록 하면 var 처럼 let 변수의 선언 부분도 마치 가장    위에 있는 것 처럼 동작한다. 하지만 var와 다르게 값을 undefined로 초기화 해주지 않기 때문에 오류가 발생한다.
  const도 마찬가지다.

console.log(memberLevel, 'memberLevel'); // 아직 변수 선언 전이라서 오류남
let memberLevel; // 변수 선언 & 초기화
console.log(memberLevel, 'memberLevel'); // 변수 선언은 됐으나 undefined 상태 (초기화 값)
memberLevel = '관리자'; // 값 할당
console.log(memberLevel, 'memberLevel'); // 관리자 콘솔창에 출력된다.

뒤에 변수 선언과 값을 할당해줘도 이미 오류 나서 그 뒤는 아예 처리가 안됨 - 오류 부분 지우거나 수정해야함

let memberLevel; // 변수 선언 & 초기화
console.log(memberLevel, 'memberLevel'); // 변수 선언은 됐으나 undefined 상태 (초기화 값)
memberLevel = '관리자'; // 값 할당
console.log(memberLevel, 'memberLevel'); // 관리자 memberLevel이 콘솔창에 출력된다.

- const도 마찬가지로 변수 선언 전에 콘솔로그를 먼저 출력하면 오류가 난다. (호이스팅x)
   단, let과 차이점은 초기화 값이 없으면 아예 선언조차 안 된다는 점.

const memberIdNum; // 변수 선언 & 초기화
memverIdNum = '123456-78910' // 값 할당

 

변수 선언&초기화&값할당 먼저하고 콘솔로그 출력하면 출력 완료

const memverIdNum = '123456-78910' 
console.log(memverIdNum);

 

< 변수 선언문과 표현식 >

• 표현식 : 값으로 평가될 수 있는 문
• 문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위
• 토큰 : 키워드, 식별자 , 연산자, 리터럴, 세미콜론, 마침표 등 문법적 의미를 가지는 코드의 기본 요소

var result = 40 + 50  (문) ; (문장의 끝)
var result (변수 선언문) = 40 + 50 (표현식) ;
var(변수 선언 키워드) result(변수 이름/식별자) =(연산자) 40(리터럴/값) +(연산자) 50(리터럴/값) ;

• 값 : 표현식이 평가되어 생성한 결과
• 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 생성하는 표기법(값, 표현식)
•               정수 리터럴, 부동소수점 리터럴, 문자 리터럴, null 리터럴, functionfn() { } - 호이스팅 등....

 

< 변수 이름 / 식별자 >

• 담고 있는 값을 알 수 있도록 의미있는 단어 사용한다.
• 문자, 숫자와 특수문자는 _(언더스코어)와 $(달러) 만 사용한다.
• 첫 글자는 문자, 언더스코어, 달러로 시작한다. (숫자 X)
• 예약어(reserved word)는 사용할 수 없다.  -  보통 프로그램에서 알려줌...
• 카멜 표기법 : 소문자로 시작, 2번째 단어 첫글자는 대문자로 시작 (memberPass)
• 파스칼 표기법 : (클래스의 이름에도 사용) 대문자로 시작, 2번째 단어 첫글자 대문자로 시작 (MemberPass)
• 스네이크 표기법 : 모두 소문자, 단어 사이에 언더바 사용 (member_pass) / DB 쪽에서 많이 사용함 ( 대소문자를 구분하지 못하기 때문 )
• 헝가리안 표기법 : 변수명 앞에 자료형 붙임 (변수 데이터 타입이 String - strMemberPass) , 유지보수시 자료 타입을 변경하면 변수 이름도 싹 바꿔줘야해서 실제로 거의 사용 x

<  메서드 단어의 사용 규칙 >

• 지키지 않으면 메서드 생성 불가능한 것은 아니지만 협업을 위해 지키도록 한다.
• get -> return -> 값을 가지고 온다.
• set -> 해당 객체의 필드에 값을 삽입한다.
• to -> 메서드 뒤에 오는 명에 맞는 형으로 변환하여 반환한다.
• is -> boolean 형태의 값을 반환한다.
• add -> 데이터 누적

 

GC(garbage collector) : 애플리케이션이 할당한 메모리공간을 주기적으로 검사하여 더 이상 사용되지 않은 메모리를 해제하는 기능 (java에도 있음)

 

파비콘 설정 안할 때 파비콘 제거해주는 코드

<link rel="icon" href="data:,"> <!-- 파비콘 제거 -->

 

코드가 너무 길어질 경우 js파일에 따로 빼서 작업하고 src로 넣어준다.

<script type="text/javascript" src="js/ksmart47.js"></script>