what to do
23.01.22~23.01.26 언어학습 주차 javascript
23.01.27~23.01.28 프로그래밍 주차 / 달리기반 알고리즘 문제풀이
javascrip에서의 ES5, ES6
ES?
ES라는 것은 [Javascript의 표준 규격]으로 ECMA Script의 약자이다. 브라우저내에서 사용자를 끌어들이기 위해 이것저것 기능을 추가하다보니 너무 달라지는 경향을 보여 표준규격을 정하게 된 것이 European Computer Manufacturers Association (ECMA, 현 ECMA International)인 것이다.
ES5, ES6는 사이에 6년이라는 시간차이가 있는 만큼 많은 기능들이 추가 되었다. 추가된 기능을 정리해보자.
ES5에는 없는 ES6의 기능
1. let, const
ES5에서는 var키워드를 사용해 암묵적 재할당이 가능한 상태로 사용이되었다. var가 [함수 레벨 스코프]를 가지고 있기때문이다.
하지만 다음과 같은 단점이 존재했기에 ES6에서는 [블록 레벨 스코프]를 사진 let과 const키워드를 추가해 사용하게 되었다.
var 의 대표적단점
1. 암묵적 결합(재선언, 재할당 모두 가능)
2. 생략가능
3. 변수 호이스팅
4. 함수레벨스코프
기타) 전역변수가 가지는 문제점 등등..
2. 화살표함수
함수의 간결함을 나타낼 수 있는 화살표 함수의 추가로 가독성과 유지보수성을 높여준다. 단, 기존의 함수와 this 바인딩이 다르다.
화살표 함수의 경우 lexical this를 따른다.
화살표 함수 내에선 매개변수가 1개일때 괄호()를 생략할 수 있으며, 함수 내에 한줄의 코드가 있다면 소괄호{}와 return도 생략할 수 있다.
▼ 예시
//기존의 함수 표현
function example (a, b){
return a+b;
}
//화살표 함수로 나타낼 경우
const example = (a, b) => a+b;3. default parameter
기존 함수의 경우 매개변수에 초기값을 작성하기 위해 함수 내부 로직이 필요했으나 default parameter이 추가되면서 다음과 같이 바뀌었다
▼ 예시
//ES5
var Myname = function(name){
var name = name || "Jin";
return name
}
// ES6
var Myname = function(name="Jin"){
return name
}4. 문자열 처리
ES5에서는 '', ""으로 구분해서 + 연산자로 이어줘야 했고 , 구 quotation의 사용 용도가 달랐다.
ES6로 넘어오면서 `` 백틱 ${}를 통해 한줄로 표현이 가능하며, ''과 ""을 구분없이 자유롭게 사용이 가능하다.
▼ 예시
//ES5
var msg = "저는 " + name + "입니다 나이는 " + age + "살이며 \"" + country + "\"에 살고있습니다.";
var dynamicElement = '';
dynamicElement += "<p>" + name + "</p>";
dynamicElement += "<p>" + age + "</p>";
dynamicElement += "<p>" + country + "</p>";
//ES6
let msg = `저는 ${name}입니다 나이는 ${age}살이며 "${country}"에 살고있습니다.`;
</source>
<source lang="javascript>
let dynamicElement = `
<p>${name}</p>
<p>${age}</p>
<p>${country}</p>
`;5. class
지금까지는 자바스크립트에 class가 없어 함수와 객체를 class처럼 사용하였다. (프로토타입기반의 프로그램이라 없었다 생각)
단, 생성자 함수와 동일하게 동작하지 않고 호이스팅이 발생하지 않아 let, const 키워드처럼 동작한다.
6. 모듈
ES5이전에는 각 기능별로 js파일을 나누고 관리하는 것이 불가능하였다.
ES5에서는 require를 통해 모듈화를 할 수 있었다.
(파일 자체를 사용하는 방식)
ES6에서는 import 와 export를 사용해 모듈을 관리할 수 있게 되었다. 해당하는 파일의 변수, 함수를 참조하는 것으로 주고 받고가 나뉘게 되면서 여러 모듈을 따로따로 관리해 사용이 용이해졌다.
7. 비구조화 할당
배열이나 객체의 요소를 해체하여 별개의 변수로 추출해 사용이 가능하다.
▼ 예시
//ES5
var res = $('body').data(),
first = res.first,
second = res.second
//ES6
var { first, second } = $('body').data();
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); 10
console.log(b); 20
console.log(rest); [30, 40, 50]8. 프로미스
콜백함수에서 발생되는 콜백지옥을 해결하기 위해 도입되었고,
프로미스 후속처리 메서드들을 통해 에러처리가 효과적으로 바뀌었다.
9. string 메서드 추가
includes : 포함되어있는지
startWith : 시작되는지
endWith : 끝나는지
boolean값을 반환해 문자열 메소드로 검사 로직을 수행할 수 있다.
ex) 이메일에 포함되는지, "김"씨로 시작하는지, .com으로 끝나는지 등
결론
ES6가 현재 현재 활발하게 사용되고 있음에 따라 ES6에 해당하는 문법과 내용들을 잘 알아야 하는 것은 맞지만 ES5를 사용해 만들어진 많은 코드들이 존재하기 때문에 ES5의 내용을 무시해서는 안된다고 생각되어진다.
ES6에서 자주 사용되는 함수들의 사용에 익숙해져야 한다.
용도를 떠올리기 쉽게 정리해보자
.map() : 배열을 전체적으로 수정할때 (ex. 자연수 1부터 n까지의 배열, 각 배열에 3을 곱한 배열 등..)
.filter : 전체 배열안에서 원하는 조건에 해당하는 값만 배열로 만들고 싶을때 (ex. 홀수의 배열, 짝수의 배열 등..)
.reduce() : 콜백함수의 동작을 사용해 결과로 배열을 만들고 싶을때 (ex. 합의 배열, 곱의 배열 등...)
