항해99 10기 3주차 WIL

• Node.js,

• JavaScript의 ES란?, ES5/ES6 문법 차이를 설명하세요.

 

 

⭐ES란?

 

ECMASCRIPT의 약어 뜻하며 자바스크립트의 표준, 규격을 나타내는 용어입니다

 

 

 

ES5, ES6 구분이 필요한 이유는, 버전 차이에 따른 기능 추가가 뚜렷했기 때문입니다..

뒤에 숫자는 버전을 뜻하는데 ES5(2009년) ES6(2015년) 출시하였습니다.

 

 

 

⭐ES5(ECMAScript5)는 무엇인가요?

 

'엄격 모드’라 해서 작성 하는 ‘use strict’도 이 때 나온 기능이며.

2009년에 발표된 ES5의 주요 기능은 아래와 같습니다.

 

 

• “use strict”
• String[number] access
• Multiline strings
• String.trim()
• Array.isArray()
• Array forEach()
• Array map()
• Array filter()
• Array reduce()
• Array reduceRight()
• Array every()
• Array some()
• Array indexOf()
• Array lastIndexOf()
• JSON.parse()
• JSON.stringify()
• Date.now()
• Date toISOString()
• Date toJSON()
• Property getters and setters
• Reserved words as property names
• Object methods
• Object defineProperty()
• Function.bind()
• Trailing commas

 

⭐ES5 문법

 

ES5 의 변수 선언시 var는 Function Scope를 사용한다.

var 는 block scope가 아닌 function scope이기 때문에 if 조건문의 block 과는 상관없이 외부에서도 접근이 가능하다.

 기존의 var keywork의 scope는 전역범위로 스크립트 파일 어디서나 참조하여 사용이 가능하다.

 

function scopeVariableWindow() {
    var var1 = 1;

    if(true){
        var var2 = 2;
    }
    console.log(var1);  // 출력결과 : 1
    console.log(var2);  // 출력결과 : 2
}

var keyworkd의 장점은 함수 호이스팅이 되기 때문에 var로 생성안하고 

그냥 변수로 사용해도 Error없이 생성되어 사용이 가능하였다.
 하지만 이러한 경우 스크립트 파일이 많아지거나 길어질 경우 개발자가 의도하지 않게 

동일한 변수명에 다른 값을 넣어서 시스템에 문제를 발생시킬수 있는 여지가 있다.

 

 

 

⭐ES6(ECMAScript6)는 무엇인가요?

 

ECMAScript 2015로도 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다.

ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다. 현재 주요 기능은 아래와 같습니다  

 

• The let keyword
• The const keyword
• Arrow Functions
• For/of
• Map Objects
• Set Objects
• Classes
• Promises
• Symbol
• Default Parameters
• Function Rest Parameter
• String.includes()
• String.startsWith()
• String.endsWith()
• Array.from()
• Array keys()
• Array find()
• Array findIndex()
• New Math Methods
• New Number Properties
• New Number Methods
• New Global Methods
• Iterables Object.entries
• JavaScript Modules

 

 

 

 

 

⭐ES6 문법

 

const and let

 

ES6 에서의 변수 선언시 let과 const가 존재 하며 이 두가지의 변수 선언에 사용되는 문법은

기존 ES5의 var와 달리 Block Scope를 따른다.

 

 

const는 변수 선언을 위한 ES6의 새로운 키워드입니다

const는 var보다 강력하고 일단 사용되면 변수를 다시 할당할 수 없습니다.

즉, 객체와 함께 사용할 때를 제외하고는 변경 불가능한 변수 입니다.

 

이 기능은 선택자를 대상으로 하는 데 매우 유용합니다. 예를 들어 이벤트를 실행하는 단일 단추가 있거나

JavaScript에서 HTML 요소를 선택하려면 var 대신 const를 사용해야한다.

이것은 var가 '호이스팅(hoisting)'이기 때문입니다.

변수를 재할당하지 않으려면 항상 상수를 사용하는 것이 좋습니다.

 

// ES5
var MyBtn = document.getElementById('mybtn');

// ES6
const MyBtn = document.getElementById('mybtn');

위의 코드에서 const는 변경되지 않으며 재할당할 수 없습니다. 새로운 값을 제공하려고 하면 오류가 반환됩니다.

let은 새로운 값을 가질 수도 있고 재할당할 수도 있습니다. 변경 가능한 변수가 생성됩니다.

let name = '철수';

name = '영희';

console.log(name);
// 출력 => 영희

let은 const와 동일하게 모두 블럭 범위라는 점입니다. 즉, 변수는 범위 내에서만 사용할 수 있습니다.

 

 

------------------------------------------------------------------------------------------------------------------------------------------

 

위의개념을 정리하였으나 쉽게 와닿거나 한번에 이해가지는 않았다  , 

ES6의 문법을 너무 당연하게 생각하고 배웠기때문에

ES5의 문법을 다시 공부 하거나 개념을 집어넣기보다는

 

아 ES6과는 다른 방식이였구나 .  단점을 보안하기 위해 만들어졌구나

 

const  let 라는 변수를 너무 당연하게 쓰고있었는데

 

이전에쓰던  var의 문제점들이 있어서 새로운 변수 선언방식이

생긴거구나  var 와  const / let의 차이를 한번더  생각해보고 기억해야겠구나!

정도의 느낌으로 다가가니까  이해가 될수있었던거 같다 :)