[JavaScript]ES5와 ES6의 차이(1) - 변수와 함수

ES5와 ES6의 차이(1)

변수

ES5

  <script>
    // ES5
    var no = 100;
    var no = 10; // 전역변수: 동일변수 존재해도 오류 발생하지 않음
    console.log("1. no = ", no);
    doA();

    {
      console.log("2. no = ", no); // 전역변수
      var no = 20;
      console.log("3. no = ", no); // 전역변수 변경
    }

    function doA() {
      console.log("4. no = ", no); // 전역변수
      no = 30; // 전역변수 선언 또는 변경, 동일 이름 지역변수 undefined
      console.log("5. no = ", no);
      var no = 40;
    }

    console.log("6. no = ", no);
  </script>

실행 결과(ES5)

 

ES6

let과 const의 등장!

  <script>
    // ES5: var scope: method level scope
    // ES6: let scope: block level scope, { scope }, 동일 이름 불가, 선언 후 초기화, scope 명확
    // let no = 100;
    no = 10;
    // 전역변수: 동일변수 존재해도 오류 발생하지 않음
    // error:SyntaxError: Identifier 'no' has already been declared
    console.log("1. no = ", no);
    doA();

    {
      // console.log("2. no = ", no);
      // Uncaught ReferenceError: Cannot access 'no' before initialization
      let no = 20;
      console.log("3. no = ", no); // 전역변수 변경
    }

    function doA() {
      // console.log("4. no = ", no); // 전역변수
      // Uncaught ReferenceError: Cannot access 'no' before initialization
      let no = 30;
      console.log("5. no = ", no);
      // let no = 40; // error:SyntaxError: Identifier 'no' has already been declared
    }

    console.log("6. no = ", no);

    console.log("--- const 상수 ---");
    const MAX_COUNT = 30; // 상수는 선언과 동시에 초기화 해줘야 함!
    console.log("MAX_COUNT = ", MAX_COUNT);


  </script>

실행 결과(ES6)

 

함수

ES5

  <script>
    // ES5: 함수 선언
    /* 두 개의 숫자를 받아서 최댓값 반환하는 함수 */
    function max(a, b) {
      if (a >= b) {
        return a;
      } else {
        return b;
      }
    }
    console.log(max(1, 2));

    /* "안녕 광주 5반 최고짱!!!" 문자열 반환하는 함수 */
    function hello() {
      return "안녕 !!!";
    }
    console.log(hello());

    /* "xxx"를 받아서 xxx + " 반가워!!!" 문자열 결합해서 반환하는 함수 */
    function helloXxx(str) {
      return (str + " 반가워!!!");
    }
    console.log(helloXxx("누구누구야"));


  </script>

실행 결과(ES5)

 

ES6

arrow function의 등장

  <script>
    // ES5: 함수 선언
    /* 두 개의 숫자를 받아서 최댓값 반환하는 함수 */
    let max = (a, b) => {
      if (a >= b) {
        return a;
      } else {
        return b;
      }
    }
    
    console.log(max(1, 2));

    /* "안녕 광주 5반 최고짱!!!" 문자열 반환하는 함수 */
    let hello = () => {
      return "안녕 !!!";
    }
    
    console.log(hello());

    /* "xxx"를 받아서 xxx + " 반가워!!!" 문자열 결합해서 반환하는 함수 */
    let helloXxx = (str) => (str + " 반가워!!!");
    
    console.log(helloXxx("누구누구야"));


  </script>

실행 결과(ES6)