• TIL#1에서 변수에 관한 내용 추가

변수

변수란?

• 가변적인 데이터를 담을 수 있는 대상 혹은 공간

변수가 필요하는 이유?

• 프로그램에서 가독성을 높여주고⬆️ 유지보수에 좋다.
  • 복잡한 코드를 변수 안에 저장하면, 필요할때 변수명을 불러서 데이터 값을 불러낼 수 있다

변수를 선언하는 방법

• 선언 (declare)
• 할당 (assign) 선언 변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었다. 자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다.

  • 선언 단계: 변수명을 등록하여 자바 스크립트 엔진에 변수의 존재를 알린다.

  • 초기화 단계: 값을 저장하기 위해 메모리 공간을 확보하여 암무적으로 undefined를 할당해 초기화 한다.

    할당

    변수에 값을 할당 할 때에는 할당 연산자(=)를 사용한다.

let name; 
console.log(name);
//undefined 

let name = 'Code Kim' 
console.log(name)
// Code Kim

변수명(identifiers)의 규칙

• 대소문가 구분되며 길이에 제한이 없다(case-sensitive);
  • num과 nuM은 서로 다른 변수명이다.
• 예약어(keyword, reserved word)는 사용할 수 없다
  • let true ❌ (소문자로 이루어진 true의 명칭은 예약어이기 때문에 변수명 사용 불가)
  • the list of reserved keywords JavaScript Reserved Words
    
• 숫자로 시작해서는 안된다.
  • let 7seven ❌
• 특수문자는 ‘_’, ‘$’만 허용
  • let _userName
  • let $userName
• camelCase 권장. (snakeCase있지만 대부분 camelCase 많이 쓰는 거로 보인다)
  • let myName = ‘Code Kim’; (camelCase)
  • let my_name = ‘Javascript Lee’; (snakeCase)

var,let,const

ES6 이후, const와 let 과 등장했다. 현재는 var 대신 const와 let 쓰기를 권장하고 있다.

• scope scope: 변수 혹은 함수를 선언할 때 해당 변수 혹은 함수가 어디에서 유효한지 범위를 나타내는 개념 scope의 종류

  • global : 모든 범위(전역)에서 사용 가능

  • local : 특정 함수 내부에서만 사용 가능

  • block : if문, switch문,for문을 작성할때, 중괄호로 코드를 작성하게 되는 데, 중괄호로 감싸진 블록 내부에서만 사용 가능

    var a = 1 ;// 전역
    
    function print() {
    	var a = 1234; 
    	console.log(`지역 : ${a}`); 
       //지역 : 1234; 
    }
    print();
    
    console.log(a); //  

• Hoisting Hoisting : 선언문을 유효범위의 최상단으로 끌어올리는 행위

  
  //var --- hoisting됨 ⭕️
  console.log(a); //undefined 
  var a = 1; 
  console.log(a); //1 

  //let --- hoisting 안됨 ❌
  console.log(a) 
  
  //"ReferenceError: Cannot access 'a' before initialization"
  // (Temporal Dead ZONE)
  let a; 

  //const --- hoisting 안됨 ❌
  console.log(b) 
  
  //"ReferenceError: Cannot access 'b' before initialization"
  // (Temporal Dead ZONE)
  let b; 

  //함수선언식 (function delcaration) --- hoisiting 됨 ⭕️
  
  console.log(add(3,5))
  
  function add(x,y){
  	return x + y
  }

  //함수표현식 (function expression)--- hoisiting 됨 ❌
  
  console.log(add(3,5))
  
  function add(x,y){
  	return x + y
  }

  //new Function 객체 생성의 경우 --- hoisiting 됨 ❌
  
  console.log(add(3,5));
  var add = new Function('a','b', 'return a + b');
  
  //TypeError: add is not a function
  

  // 화살표 함수(arrow function)--- hoisiting 됨 ❌
  
  console.log(add(3,5));
  var add = (x, y) => x + y;
  //TypeError : add is not a function
  

var 문제점

• 변수 중복 선언 가능으로 , 예기치 못한 값을 반환

• 함수 레벨 스코프를 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다

• 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환된다.

  해결방안

• let, const 사용

• JS 맨 윗줄에 ‘use strict’ 선언 후 사용

let

let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다

let name;
let name = '강아지'

//"SyntaxError: Identifier 'name' has already been declared

console.log(name) // undefined
var name;
var name = '고양이'
console.log(name) // 강아지

const

const과 let과 다른점이 있다면, 반드시 선언과 초기화를 동시 진행해야 한다.

const name; 
//"SyntaxError: Missing initializer in const declaration

const name = '쿼카'

var, let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다(단, 객체 안에 프로퍼티가 변경되는 것까지 막지는 못합니다).

const name = '쿼카';
name = '코알라'
//"TypeError: Assignment to constant variable.

const animal = {
		name : '강아지',
}

console.log(animal.name); 
//강아지

animal.name = '다람쥐';
console.log(animal.name);

//다람쥐

• 참고자료 var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프 자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+)