ES6부터 새롭게 등장한 템플릿 리터럴. 덕분에 문자열 표현이 훨씬 간단해졌다.
템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능을 말한다.
템플릿 리터럴을 사용하면 플레이스 홀더(${variable})를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
var name = "현진";
var age = 25;
console.log("저의 이름은 " + name + "이고, 나이는 " + age + "살 입니다.");
var name = "현진";
var age = 25;
console.log(`저의 이름은 ${name}이고, 나이는 ${age}살 입니다.`);
ES6부터 새롭게 등장한 화살표 함수로 함수 선언법이 좀 더 간단해졌다.
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) {...}
var str = (arg1, arg2) => {
console.log("용민");
};
var str = arg1 => console.log(arg1);
///화살표 함수에 인자(argument)가 하나밖에 없다면 괄호를 생략할 수 있다.
또한 한줄로 표현이 가능하다면 위와 같이 중괄호({})를 생략할 수 있다.
var str = func => ({ id: "31" });
///화살표 함수가 객체를 반환한다면 위와같이 표현해줄 수 있다.
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에서의 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"
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();
ES5에선 var 밖에 존재하지 않았다. var 는 변수를 선언할 때 사용되는 키워드로,
재할당과 재선언에 굉장히 자유롭다.
var x = 10;
x = 15;
console.log(x); //15
var x = 12;
console.log(x); //12
ES6부터 let, const가 추가되었다.
let은 한번 선언된 변수에 동일한 이름으로 선언할 수 없다.
하지만, 값은 재할당 할 수 있다.
let x = 10;
x = 15;
console.log(x); //15
let x = 12; // Identifier 'x' has already been declared
const x = 10;
console.log(x); // 10;
x = 15; // TypeError: Assignment to constant variable.
그리고, let, const는 블록 스코프 또는 Function 스코프 내부에 선언되면 해당 스코프 밖에서 안에 있는 변수를 참조할 수 없다. 쉽게 설명하자면, 중괄호로 묶인 부분 내부에 선언된 let, const를 중괄호 외부에서 참조할 수 없다는 것이다.
그러나 밖에서 안에 있는 const, let은 참조할 수는 있다.
if (true) {
var i = 0;
}
console.log(i); // 0
if (true) {
let j = 10;
}
console.log(j); // ReferenceError
if (true) {
const k = 100;
}
console.log(k); // ReferenceError
function f() {
var v = 5;
console.log(v); // 5
}
console.log(v); // ReferenceError: v is not defined
if (true) {
var i = 0;
}
console.log(i); // 0
정리하자면 다음과 같다.
재 선언 / 재 할당 / Block scope / Function scope
var O O 외부에서 내부 참조 가능 외부에서 내부 참조 불가
let X O 외부에서 내부 참조 불가 외부에서 내부 참조 불가
const X X 외부에서 내부 참조 불가 외부에서 내부 참조 불가
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 = 13
ES6
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
클래스의 상속과 오버라이딩은 super를 사용해서 수행할 수 있다.
var AddSquare = function(arg1, arg2) {
Add.call(this, arg1, arg2);
};
Object.assign(AddSquare.prototype, Add.prototype);
AddSquare.prototype = {
calc: function() {
// 메소드는 생략될 수 없습니다.
Add.prototype.calc.call(this);
},
calcSquare: function() {
this.pow = Math.pow(this.arg1 + this.arg2, 2);
return "(" + this.arg1 + "+" + this.arg2 + ")^2=" + this.pow;
}
};
var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 =169
class AddSquare extends Add {
constructor(arg1, arg2) {
super(arg1, arg2);
}
calc() {
super.calc();
}
calcSquare() {
this.pow = Math.pow(this.arg1 + this.arg2, 2);
return "(" + this.arg1 + "+" + this.arg2 + ") ^ 2 =" + this.pow;
}
}
var numSquare = new AddSquare(5, 8);
console.log(numSquare.calc()); // 5 + 8 = 13
console.log(numSquare.calcSquare()); // (5 + 8) ^ 2 = 169
#1 처음 개념잡기를 조금만 더 빨리 했었더라면 문제를 더 많이 풀어보지 않았을까 하는 아쉬움과 문제풀이를 위해 사용된 함수들을 좀더 파고들고 공부하지 않은것이 조금 아까웠습니다.
아무것도 모른채로 문제를 푸는것보다 조금이라도 개념정리를 하고 문제를 푼다면 이후로도 더 잘풀릴꺼라는 팀원의 말을 듣고 우선 개념정리 및 자바스크립트에서 코드를 작성할때 사용하는 방법들 등의 개념이나 원리등을 완벽히는 아니더라도 조금은 알고 문제풀이를 진행해서 그런지 이전보다 훨씬 더 잘풀렸던 느낌은 정말 좋았습니다. 하지만 그 개념정리에 시간을 투자하다보니 스스로 문제풀이를 좀더 많이 못풀어본게 아쉬움이 많이 남았습니다.
#2 여러가지 함수 사용법을 좀더 익히지 못한게 아쉬웠습니다.알고리즘 문제를 풀기 위해서 IF문과 For문을 이해하기 위해서 가장 많은 시간을 들였는데요, 우선 if 와 for문을 통해서 내가 푸는법을 익히고 어떻게 푸는지 원리를 이해했기 때문에 다른 함수를 사용해서 푸는 법도 내가 if 문으로 풀었던 것을 조금 변형시켰구나 혹은 비슷한 원리인데 좀더 간결하고 짧게 사용했구나 라고 이해할수 있어서 편했지만,
역시나 시간이 부족한 탓에 그런 함수들을 좀더 익히지 못하고 일단 시험을 대비해서 내가 할수있는 부분들 위주로 공부하다보니 다른 함수들을 알지만 제대로 사용못하는 그런 상황이 된게 조금 아쉬웠습니다.
늘 사용하던 함수만 사용하면 다양한 코드사용을 못하기 때문에 내가 사용해보지 못한 함수들을 좀더 적극적으로 배우고 사용할려는 노력이 있었으면 더 좋았을것 같습니다.
수영으로 치자면 물속에서 숨쉬는 호흡법도 모르는데 자유형은 어떻게 하는지, 배영은 어떻게 하는지를 찾아보고 있으면서 왜 안될까 하는 짜증과 분노 그리고 모의고사에서 한문제를 2,3시간씩 걸려서 풀고 나오면서 오는 허탈함 때문에 정말 중간중간 하차할까 하는 생각이 몇번이나 들었던 챕터였다.
지나고나니 드는 생각이지만 그래도 견디고 견뎠더니 뭐라도 얻어냈다. 그거 하나로 나름 만족해하며 회차를 마무리하고있다.
1챕터의 허탈함인 좀 더 잘 만들수 있었을텐데 하는 아쉬움처럼 이번 회차에서도 아쉬움이 있다면 좀 더 함수식을 다양하게 쓰는법을 익히지 못한 아쉬움이다.
문제를 풀 수 있게 되었다는 사실만으로도 사실 너무나도 기쁘고 행복했다. 하지만 내가 알고있는것은 아주 극히 일부분이라는 것이라는 문제들을 풀어가며 알게되었다.
지금도 열심히 했다. 하지만 더 열심히 해야한다. 그리고 더 잘해야 한다.
내가 바라는 내가 되기위해선 좀 더 뛰어야 한다.