javascript ES5 와 ES6 문법의 차이
1.변수 선언의 방식이 다르다.
ES5 의 변수 선언시
var는 Function Scope를 사용한다.
var 는 block scope가 아닌 function scope이기 때문에 if 조건문의 block 과는 상관없이 외부에서도 접근이 가능하다.
기존의 var keywork의 scope는 전역범위로 스크립트 파일 어디서나 참조하여 사용이 가능하다.
var keyworkd의 장점은 함수 호이스팅이 되기 때문에 var로 생성안하고 그냥 변수로 사용해도 Error없이 생성되어 사용이 가능하였다.
하지만 이러한 경우 스크립트 파일이 많아지거나 길어질 경우 개발자가 의도하지 않게 동일한 변수명에 다른 값을 넣어서 시스템에 문제를 발생시킬수 있는 여지가 있다.
ES6 에서의 변수 선언시
let과 const가 존재 하며 이 두가지의 변수 선언에 사용되는 문법은 Block Scope를 따른다.
let , const는 function scope가 아닌 block scope이기 떄문에 if 문안에있는 block에서 생성된 변수 b 는 if문이 끝남과 동시에 사라지기 때문에 외부에서 b를 참조할수 없어 Reference Error가 발생한다.
let - block scope로 일반 변수 생성시 사용 , 중복 선언시 Type Error를 발생시킨다.
장점은 잘못된 변수 사용으로 인해 발생하는 오해의 소지를 줄여주기때문에 정확한 사용으로 생산성
const - block scope로 JavaScript에서 상수용 변수로 사용된다 , 처음 생성시 초기값을 지정해주어야 한다.
주의할 점은 변수에 담긴 값이 불변이라기보다는 재할당이 불가능하다는 의미이다.
함수(function) 선언 방식의 변경
ES5
function plus (a,b) { return a+b; } var plus = function(a,b) { return a+b; }
ES6
let plus = (a,b) => {return a+b}
This사용법
ES5
ES5같은 경우 객체내에있는 메소드를 실행시 메소드의 this는 메소드가 선언된 해당 객체를 가리킨다.
하지만 객체안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고있기 떄문에 함수 안에서 this.name , this.age를 하여도 아무 값이 나오지 않는다.
ES6
ES6에서의 this는 자신을 둘러싸고 있는 this를 바라보기때문에 따로 바인딩이나 변수에 담을 필요없이 사용 가능합니다 .
문자열 처리 방법
ES5
' '(Single quotation) , " "( Double quotation)으로 구분해야해서 + 연산자로 항상 이어줘야 했고 길어지면 불편함을 느낄수 있고 복잡하다. 또한 SIngle quotation과 Double quotation을 자유롭게 사용하지 못하고 맞춰서 사용해야 한다
ES6
ES6로 넘어오면서 ``(백틱 or 억음 부호) 와 ${}를 통해 한줄로 표현가능하며 Single quotation 과 Double quotation을 자유롭게 사용할 수 있다.
모듈
ES5
ES5 에선 require 를 통해 모듈화를 할 수 있었다.<script> src = "slider.js"; </script> <script> src = "script.js"; </script> var slider = require(./slider.js) //위와 같이 함으로써, slider.js를 임포트할 수 있었다. 이러한 방법으로 파일 자체를 사용할 수 있다.
ES6
ES6 부터는 import/export 로 모듈을 관리할 수 있다.
모듈은 실현가능한 특정 프로그램의 그룹니다.
그리고 이것은 다른 파일의 변수, 함수를 참조한다.
클래스와 같은 모듈이 로딩될 때, import와 export를 이용해 사용될 수 있다.하나의 모듈만 공유할 때
//로드 모듈 import 'import to loadname' from '파일 경로' //아웃풋 모듈 export default 'module' /// import Carousel from "./carousel"; cosnt carousel = new Carousel();여러 모듈을 사용할 때
아웃풋 관점에서, export는 사용하고 싶은 곳에 붙이고, import는 다음과 같이 사용하면 된다.import {a1, a2, ...} from '파일 경로'} // import { multi, SuperMulti } from "./Multiplay"; console.log(multi(5)); // 50 console.log(SuperMulti(6)); // 600 //Multiplay.js export const i = 10; export function multi(x) { return i * x; } export function superMulti(x) { return i * x * 10; } // //모든 모듈을 전달받기 위해서는 import를 아래와 같이 작성하면 된다. import * as ‘object name’ form ‘파일 경로’ import * as lib from "./multiply"; console.log(lib.multi(5)); // 50
주특기로 들어간지 2일째 되는날이다.
React를 공부하면서 오늘은 리엑트가 어떻게 흘러가는지와 컴포넌트 , jsx라는 문법도 알게 되었다,
리엑트는 블럭 같이 재사용할 부분을 나눠서 관리할수 있다는 장점이 있다.
아직은 시작한지 얼마 되지 않아 신기하고 재미있는 부분만 가득이다.
props 자바스크립트 처럼 데이터를 매개변수로 전송하여 return 을 할때 html 과 비슷한 jsx 문 법을 사용하요 화면을 표출할수 있는것도 알게 되어 너무 재밌었다,
월요일까지는 props, useState 를 조금더 깊게 파고 들어 공부를 해봐야겠다,
