Es6 var let const, 함수 선언식 함수 표현식, 호이스팅, == ===, Xhr, 백틱

yeonju·2020년 8월 26일
0

JavaScript

목록 보기
1/2

1. var let const

var (function-scope)

  • 재 할당 가능
var a = "yeonju";
console.log(a); // expected ouput : yeonju

var a = "changmook";
console.log(a); // expected ouput : changmook
  • 단점 : 코드량이 많아지면 값의 변화에 대해 파악이 힘들다.

    → 그래서 ES6이후 let, const 탄생

let (block-scope)

  • 재 선언 불가능
    let a = "yeonju";
    console.log(a); // expected ouput : yeonju

    let a = "changmook";
    console.log(a); 
    // Uncaught SyntaxError : 
    // Identifier 'name' has already been declared
  • 변수가 선언된 블록, 구분, 표현식 내에서만 유효 (지역변수)
    let a = "yeonju";

    if (a === "yeonju") {  
      let a = "changmook";  
      console.log(a); // expected output: changmook 
    }

    console.log(a); // expected output: yeonju
  • 전역 객체의 속성 값을 생성하지 않음
    var x = 'global';
    let y = 'global';
    console.log(this.x); // "global" 전역 객체의 속성 x를 생성
    console.log(this.y); // undefined 전역 객체의 속성 y를 생성하지 않음

const (block-scope)

  • 재 선언 불가능 (let 과의 공통점)
  • 재 할당 불가능 (let 과의 차이점)
  • 한번 할당 후 변하지 않는 데이터에서 사용 (상수)
const number = "yeonju";

try {
  number = "changmook"; // 재 할당 불가능 
} catch (err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
}

console.log(number);
// expected output: yeonju

2. 함수 선언식 표현식의 차이

함수 선언식 (일반적인 함수 선언)

function 함수명() {
	// 로직
}

함수명();
  • 호이스팅 가능

    코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 떄 맨 위로 끌어 올려진다.

함수 표현식 (유연한 자바스크립트 특징을 활용한 선언 방식)

var 함수명 = function() {
	// 로직
};

함수명();
  • 호이스팅 불가능
  • 활용
    • 클로져로 사용 (아직 모름)
    • 콜백으로 사용 (아직 모름)

3. 호이스팅(Hoisting)

  • 자바스크립트 엔진이 script태그를 만나면 자바스크립트 파일을 먼저 쭉 읽으면서 선언된 변수와 함수를 메모리에 저장하여 위에서부터 차례대로 실행된다. 즉 함수나 변수를 코드의 하단부에 선언해도 상단부에서 함수를 호출(실행)할수 있다.
  • 함수 선언식 : 가능 / 함수 표현식: 불가능
-- 실행 전
yeonju(); // 선언식
changmook(); // 표현식

function yeonju() {
  return 'small';
}

var changmook = function () {
  return 'big';
};

-- 실행 후
function yeonju() { // 위로 올라옴 
  return 'small';
}

var changmook ; // var만 올라옴. 함수로 인식하지 않고 변수로 인식했다..

yeonju(); // 'small'
changmook (); // Uncaught TypeError: changmook is not a function

changmook = function () {
  return 'big;
}

4. == / === 차이

  • == : 동등 연산자 : 값 비교
    0 == ''           //true
    0 == '0'          //true
    1 == true         //true
    false == '0'      //true
    null == undefined //true
  • === : 일치 연산자 : 값 + 타입 비교 (더 엄격)
    0 === ''           //false
    0 === false        //false
    1 === true         //false
    NaN === NaN        //false
    null === undefined //false

5. Xhr (XMLHttpRequest)

XHR객체는 서버와 상호작용하기 위하여 사용. 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. (ajax 비동기 통신에 주로 사용)

function reqListener () {
  console.log(this.responseText);
}

var request= new XMLHttpRequest();
request.addEventListener("load", reqListener);
request.open("GET", "https://velog.io/@peacebestill");
request.send();

6. Es6 백틱 (`)

ES6에서는 템플릿 리터럴이라 하는 새로운 문자열 표기법을 도입하였다. '', "" 대신 `(백틱) 문자를 사용한다.

// 이전 -> ', ", + 헷갈려 죽겠다 
'<input type="text" value="' +ar[i].title +'" id="'+ ar[i].index+'" disabled/>';

// 백틱 사용 
`<input type ="text" value="${ar[i].title}" id="${ar[i].index}" disabled/>`;

// 줄바꿈 \n , 문자열 이어주기 '+' 할 필요 없음 

-끗-

profile
안녕하세요.

0개의 댓글