2주차 회고!
- 주특기 시작전 알고리즘 주차인 한주가 지났다. 한번도 접해본적이 없어 생소하고 감이 잡히지 않았는데, 문제를 풀면 풀수록 재미도 있고 맞출때 마다 쾌감도 장난 아니였다..ㅎ
- 알고리즘 문제는 자바스크립트 언어를 통해서 풀었는데, 점점 시간이 지날수록 문제를 보고 "아 이부분은 반복문을 쓰고 어떤건 조건문을 쓰면 되겠구나"하며 풀었고, 궁금한 부분은 구글링도 하고 팀원들에게 물어보기도 하면서 해결해 나갔던것 같다.
- 팀원들의 문제 풀이를 보고 여러 메서드들도 알수 있어서 좋았고, 팀원들이랑 알고리즘 주차가 끝나도 매일 한문제씩 풀어보는게 좋을 것 같다는 얘기도 나눴다! 좋은 분들과 한주동안 공부할 수 있어서 좋았고, 다음 주차의 조원들이랑도 잘 지낼 수 있도록 해야겠다!
이번주 WIL 키워드
1.JavaScript의 ES란?
-
자바스크립트는 1990년대 Netscape 회사의 Brendan Eich라는 사람에 의해서 최초로 개발되었다. 자바스크립트가 잘 되자 MS사에서 Jscript라는 언어를 개발해 IE에 탑재했는데, 이 두 스크립트가 너무 제 각각이라, 표준이 필요하게 되었다.
-
표준을 위해 자바스크립트를 ECMA(European Computer Manufactures Association)라는 정보와 통신시스템의 비영리 표준기구에 제출했고, 표준에 대한 작업을 ECMA-262라는 이름으로 1996년 11월에 시작해 1997년 6월에 채택되었다.
-
여기서 ES란, ECMA Script의 약자이고, ES5는 ECMA Script5의 규격을 따른다고 생각하면 된다.
JavaScript와 ECMA Script
- 자바스크립트는 프로그래밍 언어이고, ECMA 스크립트는 규격, 표준 즉, 스펙을 말한다.
2. ES5와 ES6의 문법차이
- ES5는 2009년에 발표되었고, ES6는 2015년에 발표되었다.
ES5와 ES6의 차이점
- 템플릿 리터럴
- 화살표 함수
- this
- 변수선언
- 모듈
- 클래스
(1) 템플릿 리터럴
- 템플릿 리터럴 덕분에 문자열 표현이 간단해졌다.
- 템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신 백틱(
`)으로 문자열을 감싸 표현하는 기능을 말한다. - 템플릿 리터럴을 사용하면 플레이스 홀더(
${variable(속성?)})을 사용해 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
ES5
var name = "miri";
var age = 28;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");ES6
var name = "miri";
var age = 28;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);(2) 화살표 함수
- 함수 선언법이 좀더 간단해졌다.
ES5
//함수 선언식
function str(arg1, arg2) { console.log("용민"); }
//생성자 함수(많이 사용하지 않음)
var str = new Function("arg1", "arg2", "console.log('용민')");
//함수리터럴(익명함수 만들때 사용)
var str = function(arg1, arg2) { console.log("용민"); };
//참고
여기서 익명 함수란 말 그대로 이름이 없는 함수를 뜻한다.
ex) var bar = function (a, b) {...};
반대로 기명 함수는 이름이 있는 함수이다.
ex) var bar = function funcName(a, b) {...}ES6
var str = (arg1, arg2) => {
console.log("용민");
};
//화살표 함수에 인자가 하나밖에 없으면 괄호 생략가능
var str = arg1 => console.log(arg1);
//한줄로 표현이 가능하다면 중괄호 생략 가능
var str = func => ({ id: "31" });
//화살표 함수가 객체를 반환한다면 위와 같이 표현 가능(3) this의 다른 동작
ES5
- ES5의 경우 객체 내 메소드 실행시 this는 메소드가 선언된 해당 객체를 가리킨다.
- 하지만 객체 안에서 선언된 함수의 this는 해당 객체가 아닌 window를 바라보고 있기 때문에 함수 안에서 this.name, this.age 를 해도 아무 값이 나오지 않는다.
- 이런 경우, 해결방안으로 innerInfo.call(this) 를 통해 this 를 바인딩 시켜주거나 this를 해당 변수에 담아서 var self = this 와 같은 방식으로 접근해 사용하면 된다.
var thisTest = {
name : "김현진",
age : 25,
info : function() {
console.log(this)
console.log(this.name , this.age)
function innerInfo() {
console.log(this)
return this.name + ":" + this.age
}
return innerInfo()
}
}
// 실행결과
// {name: "김현진", age: 25, info: ƒ}
// 김현진 25
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
// ":undefined"ES6
- ES6에서의 this는 자신을 둘러싸고 있는 this를 바라보기 때문에 따로 바인딩이나 변수에 담을 필요 없다.
let thisTest = {
name : "김현진",
age : 25,
info() {
console.log(this)
console.log(this.name , this.age)
innerInfo = () => {
console.log(this)
return this.name + ":" + this.age
}
return innerInfo()
}
}
// 실행결과
// {name: "김현진", age: 25, info: ƒ}
// 김현진 25
// {name: "김현진", age: 25, info: ƒ}
// "김현진:25"//생성자 함수의 인스턴스의 경우, this는 인스턴스를 가리킴
function Obj(value) {
this.value = value;
}
var obj = new Obj(0);
console.log(obj.value); // 0//화살표 함수를 쓰면 함수가 선언된 스코프에 자동 바인딩 된다.
var obj = {
value: 10,
// 메소드 호출
show: function () {
console.log(this.value); // 10
// 함수 호출
function show_01 () {
console.log(this.value); // undefined
}
show_01();
// 화살표 함수
function show_02 = () => {
console.log(this.value); // 10
}
show_02();
}
}
obj.show();(4) 변수선언
ES5
- var만 존재한다, var는 변수를 선언할 때 사용되는 키워드로 재할당과 재선언에 자유롭다.
var x = 10;
x = 15;
console.log(x); //15
var x = 12;
console.log(x); //12ES6
- let, const가 추가되었다.
- let은 한번 선언된 변수에 동일 이름으로 선언할 수 없다.(값 재할당은 가능)
- const는 한번 초기화된 변수에 재할당/재선언할 수 없다.
//let 예시
let x = 10;
x = 15;
console.log(x); //15
let x = 12; // Identifier 'x' has already been declared
//const 예시
const x = 10;
console.log(x); // 10;
x = 15; // TypeError: Assignment to constant variable.(5) 모듈
ES5
- ES5 이전에는 각 기능별로 JS 파일을 나누고 개발 및 관리하는 것이 불가능했다.
ES6
- ES6 부터는 import/export 로 모듈을 관리할 수 있다.
- 모듈은 실현가능한 특정 프로그램의 그룹이고, 이것은 다른 파일의 변수, 함수를 참조한다.
- 클래스와 같은 모듈이 로딩될 때, import와 export를 이용해 사용될 수 있다.
//로드 모듈
import 'import to loadname' from '파일 경로'
//아웃풋 모듈
export default 'module'(6) 클래스
ES5
- ES5에선 class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다.
var Add = function(arg1, arg2) {
this.arg1 = arg1;
this.arg2 = arg2;
};
Add.prototype.calc = function() {
return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2);
};
var num = new Add(5, 8);
console.log(num.calc()); // 5 + 8 = 13ES6
- ES6 부터는 class 키워드를 사용해서 선언할 수 있다.
class Add {
constructor(arg1, arg2) {
this.arg1 = arg1;
this.arg2 = arg2;
}
calc() {
return this.arg1 + "+" + this.arg2 + "=" + (this.arg1 + this.arg2);
}
}
var num = new Add(5, 8);
console.log(num.calc()); // 5 + 8 = 13