2주차 회고!
- 주특기 시작전 알고리즘 주차인 한주가 지났다. 한번도 접해본적이 없어 생소하고 감이 잡히지 않았는데, 문제를 풀면 풀수록 재미도 있고 맞출때 마다 쾌감도 장난 아니였다..ㅎ
- 알고리즘 문제는 자바스크립트 언어를 통해서 풀었는데, 점점 시간이 지날수록 문제를 보고 "아 이부분은 반복문을 쓰고 어떤건 조건문을 쓰면 되겠구나"하며 풀었고, 궁금한 부분은 구글링도 하고 팀원들에게 물어보기도 하면서 해결해 나갔던것 같다.
- 팀원들의 문제 풀이를 보고 여러 메서드들도 알수 있어서 좋았고, 팀원들이랑 알고리즘 주차가 끝나도 매일 한문제씩 풀어보는게 좋을 것 같다는 얘기도 나눴다! 좋은 분들과 한주동안 공부할 수 있어서 좋았고, 다음 주차의 조원들이랑도 잘 지낼 수 있도록 해야겠다!
이번주 WIL 키워드
자바스크립트는 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
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
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
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 x = 10;
x = 15;
console.log(x); //15
var x = 12;
console.log(x); //12
ES6
//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
ES6
//로드 모듈
import 'import to loadname' from '파일 경로'
//아웃풋 모듈
export default 'module'
(6) 클래스
ES5
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 = 13
ES6
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