์ด ๊ธ์ ํ๋ก ํธ์๋ ์ง๋ฌด ๋ฉด์ ์ง๋ฌธ๊ณผ ๊ด๋ จ๋ Github ์ ์ฅ์ front-end-interview-handbook ๋ฒ์ญ๋ณธ์ผ๋ก, ์ ์ฅ์์ Translations ํด๋์ ๋ด์ฉ๊ณผ ๋์ผํฉ๋๋ค.
ํ๋ก ํธ์๋ ๋ฉด์ ์ง๋ฌธ - JS ์ง๋ฌธ์ ๋ํ ํด์ค์
๋๋ค.
Pull Request๋ฅผ ํตํ ์ ์, ์์ ์์ฒญ ํ์ํฉ๋๋ค.
function foo() {}
์ var foo = function() {}
์ฌ์ด์์ foo
์ฌ์ฉ์ ์ฐจ์ด์ ๋ํด ์ค๋ช
ํ์ธ์.let
, var
, const
๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑ๋ ๋ณ์๋ค์ ์ฐจ์ด์ ์ ๋ฌด์์ธ๊ฐ์?๋๊ธฐ ํจ์๋ ๋ธ๋กํน์ธ ๋ฐ๋ฉด, ๋น๋๊ธฐ ํจ์๋ ๊ทธ๋ ์ง ์์ต๋๋ค. ๋๊ธฐ ํจ์์์๋ ๋ค์ ๋ช ๋ น๋ฌธ์ด ์คํ๋๊ธฐ ์ ์ ์ ๋ช ๋ น๋ฌธ์ด ์๋ฃ๋ฉ๋๋ค. ์ด ๊ฒฝ์ฐ, ํ๋ก๊ทธ๋จ์ ๋ช ๋ น๋ฌธ์ ์์๋๋ก ์ ํํ๊ฒ ํ๊ฐ๋๊ณ ๋ช ๋ น๋ฌธ ์ค ํ๋๊ฐ ๋งค์ฐ ์ค๋ ์๊ฐ์ด ๊ฑธ๋ฆฌ๋ฉด ํ๋ก๊ทธ๋จ ์คํ์ด ์ผ์์ค์ง๋ฉ๋๋ค.
๋น๋๊ธฐ ํจ์๋ ์ผ๋ฐ์ ์ผ๋ก ํ๋ผ๋ฏธํฐ๋ฅผ ํตํด์ ์ฝ๋ฐฑ์ ๋ฐ๊ณ , ๋น๋๊ธฐ ํจ์๊ฐ ํธ์ถ๋ ํ ์ฆ์ ๋ค์ ์ค ์คํ์ด ๊ณ์๋ฉ๋๋ค. ์ฝ๋ฐฑ์ ๋น๋๊ธฐ ์์ ์ด ์๋ฃ๋๊ณ ํธ์ถ ์คํ์ด ๋น์ด ์์ ๋๋ง ํธ์ถ๋ฉ๋๋ค. ์น ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๋ก๋ํ๊ฑฐ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ฟผ๋ฆฌํ๋ ๋ฑ์ ๋ฌด๊ฑฐ์ด ์์ ์ ๋น๋๊ธฐ์์ผ๋ก ์ํํ์ฌ, ๋ฉ์ธ ์ค๋ ๋๊ฐ ๊ธด ์์ ์ ์๋ฃํ ๋๊น์ง ๋ธ๋กํนํ์ง ์๊ณ ๋ค๋ฅธ ์์ ์ ๊ณ์ํ ์ ์์ต๋๋ค(๋ธ๋ผ์ฐ์ ์ ๊ฒฝ์ฐ UI๊ฐ ์ค์ง๋จ).
์ด๋ฒคํธ ๋ฃจํ๋ ์ฝ ์คํ์ ๋ชจ๋ํฐํ๊ณ ํ์คํฌ ํ์์ ์ํํ ์์ ์ด ์๋์ง ํ์ธํ๋ ๋จ์ผ ์ค๋ ๋ ๋ฃจํ์ ๋๋ค. ์ฝ ์คํ์ด ๋น์ด ์๊ณ ํ์คํฌ ํ์ ์ฝ๋ฐฑ ํจ์๊ฐ ์๋ ๊ฒฝ์ฐ, ํจ์๋ ํ์์ ์ ๊ฑฐ๋๊ณ ์คํ๋ ์ฝ ์คํ์ผ๋ก ํธ์๋ฉ๋๋ค.
Philip Robert์ talk on the Event Loop๋ฅผ ์์ง ํ์ธํ์ง ์์ ๊ฒฝ์ฐ ํ์ธํ์ญ์์ค. JavaScript ๋ถ์ผ์์ ๊ฐ์ฅ ๋ง์ ์กฐํ์๋ฅผ ๊ธฐ๋กํ ๋์์ ์ค ํ๋์ ๋๋ค.
function foo() {}
์ var foo = function() {}
์ฌ์ด์์ foo
์ฌ์ฉ์ ์ฐจ์ด์ ๋ํด ์ค๋ช
ํ์ธ์.์ ์๋ ํจ์ ์ ์ธ์ธ ๋ฐ๋ฉด, ํ์๋ ํจ์ ํํ์์
๋๋ค. ์ฃผ์ํ ์ฐจ์ด์ ์ ํจ์ ์ ์ธ์ ํจ์๋ฐ๋๊ฐ ํธ์ด์คํธ๋์ง๋ง, ํจ์ ํํ์์ ๋ฐ๋๋ ํธ์ด์คํธ๋์ง ์์ต๋๋ค(๋ณ์์ ๋์ผํ ํธ์ด์คํ
๋์์ ๊ฐ์ง). ํธ์ด์คํ
์ ๋ํ ์์ธํ ์ค๋ช
์ ์ง๋ฌธ ์์ ํธ์ด์คํ
์ ์ฐธ์กฐํ์ญ์์ค. ํจ์ ํํ์์ ์ ์ํ๊ธฐ ์ ์ ํธ์ถํ๋ ค๊ณ ํ๋ฉด Uncaught TypeError : XXX is not function
์๋ฌ๊ฐ ๋ฐ์ํฉ๋๋ค.
ํจ์ ์ ์ธ
foo() // 'FOOOOO'
function foo() {
console.log('FOOOOO')
}
ํจ์ ํํ์
foo() // Uncaught TypeError: foo๋ ํจ์๊ฐ ์๋๋๋ค
var foo = function() {
console.log('FOOOOO')
}
let
, var
, const
๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑ๋ ๋ณ์๋ค์ ์ฐจ์ด์ ์ ๋ฌด์์ธ๊ฐ์?var
ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ธ๋ ๋ณ์๋ ํจ์๊ฐ ์์ฑ๋ ํจ์๋ ํจ์ ๋ฐ์์ ์์ฑ๋ ํจ์์ ์ ์ญ ์ค๋ธ์ ํธ๋ก ์ ์ฉ๋ฉ๋๋ค. let
๊ณผ const
๋ ๋ธ๋ก ์ค์ฝํ์
๋๋ค. ์ฆ, ๊ฐ์ฅ ๊ฐ๊น์ด ์ค๊ดํธ(function, if-else ๋ธ๋ก, for-loop) ๋ด์์๋ง ์ ๊ทผํ ์ ์์ต๋๋ค.
function foo() {
// ํจ์ ๋ด์์ ๋ชจ๋ ๋ณ์์ ์ ๊ทผํ ์ ์์ต๋๋ค.
var bar = 'bar'
let baz = 'baz'
const qux = 'qux'
console.log(bar) // "bar"
console.log(baz) // "baz"
console.log(qux) // "qux"
}
console.log(bar) // ReferenceError: bar is not defined
console.log(baz) // ReferenceError: baz is not defined
console.log(qux) // ReferenceError: qux is not defined
if (true) {
var bar = 'bar'
let baz = 'baz'
const qux = 'qux'
}
// var๋ก ์ ์ธ๋ ๋ณ์๋ ํจ์ ์ค์ฝํ์ ์ด๋์์๋ ์ ๊ทผํ ์ ์์ต๋๋ค.
console.log(bar) // "bar"
// let๊ณผ const๋ก ์ ์๋ ๋ณ์๋ ์ ์๋ ๋ธ๋ก ์ธ๋ถ์์ ์ ๊ทผํ ์ ์์ต๋๋ค.
console.log(baz); // ReferenceError: baz is not defined
console.log(qux); // ReferenceError: qux is not defined
var
๋ ๋ณ์๊ฐ ํธ์ด์คํธ๋๋๋ก ํ์ฉํฉ๋๋ค. ์ฆ, ๋ณ์๊ฐ ์ ์ธ๋๊ธฐ ์ ์ ์ฝ๋์์ ์ฐธ์กฐ๋ ์ ์์ต๋๋ค. let
๊ณผ const
๋ ์ด๋ฅผ ํ์ฉํ์ง ์๊ณ ๋์ ์๋ฌ๋ฅผ ๋์ง๋๋ค.
console.log(foo) // undefined
var foo = 'foo'
console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
let baz = 'baz';
console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
const bar = 'bar'
var
์ ์ฌ์ฉํ์ฌ ๋ณ์๋ฅผ ๋ค์ ์ ์ธํด๋ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์์ง๋ง, let
๊ณผ const
๋ ์๋ฌ๋ฅผ ๋ฐ์์ํต๋๋ค.
var foo = 'foo'
var foo = 'bar'
console.log(foo) // "bar"
let baz = 'baz'
let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
let
์ ๋ณ์์ ๊ฐ์ ์ฌํ ๋นํ ์ ์์ง๋ง, const
๋ ์ฌํ ๋นํ ์ ์๋ค๋ ์ ์ด ๋ค๋ฆ
๋๋ค.
// ๊ด์ฐฎ์ต๋๋ค
let foo = 'foo'
foo = 'bar'
// ์์ธ๊ฐ ๋ฐ์ํฉ๋๋ค
const baz = 'baz'
baz = 'qux'
๋จผ์ ๊ฐ๊ฐ์ ์๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
// ES5 ํจ์ ์์ฑ์
function Person(name) {
this.name = name
}
// ES6 ํด๋์ค
class Person {
constructor(name) {
this.name = name
}
}
๊ฐ๋จํ ์์ฑ์์ ๊ฒฝ์ฐ์๋ ๋งค์ฐ ์ ์ฌํฉ๋๋ค.
์์ฑ์์ ์ฃผ์ ์ฐจ์ด์ ์ ์์์ ์ฌ์ฉํ ๋ ๋ฐ์ํฉ๋๋ค. Person
์ ํ์ ํด๋์ค์ด๋ฉด์ studentId
ํ๋๋ฅผ ์ถ๊ฐ๋ก ๊ฐ์ง๊ณ ์๋ Student
ํด๋์ค๋ฅผ ๋ง๋ค๊ณ ์ ํ๋ค๋ฉด, ์ด๊ฒ์ด ์ฐ๋ฆฌ๊ฐ ์ถ๊ฐ๋ก ํด์ผํ ์ผ์
๋๋ค.
// ES5 ํจ์ ์์ฑ์
function Student(name, studentId) {
// ์ํผ ํด๋์ค์ ์์ฑ์๋ฅผ ํธ์ถํ์ฌ ์ํผ ํด๋์ค์์ ์์๋ ๋ฉค๋ฒ๋ฅผ ์ด๊ธฐํํฉ๋๋ค.
Person.call(this, name)
// ์๋ธ ํด๋์ค์ ๋ฉค๋ฒ๋ฅผ ์ด๊ธฐํํฉ๋๋ค.
this.studentId = studentId
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student
// ES6 ํด๋์ค
class Student extends Person {
constructor(name, studentId) {
super(name)
this.studentId = studentId
}
}
ES5์์ ์์์ ์ฌ์ฉํ๋ ๊ฒ์ด ํจ์ฌ ๋ ๋ถํธํ๋ฉฐ, ES6 ๋ฒ์ ์ด ์ดํดํ๊ณ ๊ธฐ์ตํ๊ธฐ๊ฐ ๋ ์ฝ์ต๋๋ค.
ํ์ดํ ํจ์์ ํ ๊ฐ์ง ๋ถ๋ช
ํ ์ด์ ์ function
ํค์๋๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ ํจ์๋ฅผ ์์ฑํ๋๋ฐ ํ์ํ ๋ฌธ๋ฒ์ ๋จ์ํํ๋ ๊ฒ์
๋๋ค.
๋ํ, ํ์ดํ ํจ์ ๋ด์ this
๋, this
๊ฐ ํจ์๋ฅผ ํธ์ถํ๋ ๊ฐ์ฒด์ ์ํด ๊ฒฐ์ ๋๋ ์ผ๋ฐ ํจ์์ ๋ค๋ฅด๊ฒ, ์ฃผ๋ณ ์ค์ฝํ์์ ๋ฌถ์
๋๋ค.
๋ ์์ปฌ์ค์ฝํ this
๋ ํนํ React ์ปดํฌ๋ํธ์์ ์ฝ๋ฐฑ์ ํธ์ถํ ๋ ์ ์ฉํฉ๋๋ค.
์์ฑ์ ๋ด๋ถ์์ ํ์ดํ ํจ์๋ฅผ ๋ฉ์๋๋ก ์ฌ์ฉํ๋ ์ฃผ๋ ์ฅ์ ์, ํจ์ ์์ฑ์ this
์ ๊ฐ์ด ์ค์ ๋๊ณ ๊ทธ ์ดํ์๋ ๋ณ๊ฒฝํ ์ ์๋ค๋ ๊ฒ์
๋๋ค.
๋ฐ๋ผ์, ์์ฑ์๊ฐ ์๋ก์ด ๊ฐ์ฒด๋ฅผ ์์ฑํ๋๋ฐ ์ฌ์ฉ๋ ๋, this
๋ ํญ์ ๊ทธ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ ๊ฒ์
๋๋ค.
์๋ฅผ ๋ค์ด, ์ฐ๋ฆฌ๊ฐ ์ธ์๋ก first name์ ๋ฐ๊ณ , ๊ทธ ์ด๋ฆ์ console.log
๋ก ์ถ๋ ฅํ๋ Person
์์ฑ์๊ฐ ์๋ค๊ณ ํด๋ด
์๋ค. ํ๋๋ ์ผ๋ฐ ํจ์์ด๊ณ , ๋ค๋ฅธ ํ๋๋ ํ์ดํ ํจ์์ผ ๋,
const Person = function(firstName) {
this.firstName = firstName;
this.sayName1 = function() { console.log(this.firstName); };
this.sayName2 = () => { console.log(this.firstName); };
};
const john = new Person('John');
const dave = new Person('Dave');
john.sayName1(); // John
john.sayName2(); // John
// ์ผ๋ฐ ํจ์์ 'this'๊ฐ์ ๋ณ๊ฒฝํ ์ ์์ง๋ง, ํ์ดํ ํจ์๋ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
john.sayName1.call(dave); // Dave (because "this" is now the dave object)
john.sayName2.call(dave); // John
john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
john.sayName2.apply(dave); // John
john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
john.sayName2.bind(dave)(); // John
var sayNameFromWindow1 = john.sayName1;
sayNameFromWindow1(); // undefined (because 'this' is now the window object)
var sayNameFromWindow2 = john.sayName2;
sayNameFromWindow2(); // John
์ฌ๊ธฐ์์ ์ฃผ์ ์ฅ์ ์ this
๋ ์ผ๋ฐ ํจ์์ ๋ํด ๋ณ๊ฒฝ๋ ์ ์์ง๋ง, ์ปจํ
์คํธ๋ ํญ์ ํ์ดํ ํจ์์ ๋ํด ๋์ผํ๊ฒ ์ ์ง๋๋ค๋ ๊ฒ์
๋๋ค. ๋ฐ๋ผ์ ํ์ดํ ํจ์๋ฅผ ์ฑ์ ๋ค๋ฅธ ๋ถ๋ถ์ผ๋ก ์ ๋ฌํ๋ ๊ฒฝ์ฐ์๋ ์ปจํ
์คํธ ๋ณ๊ฒฝ์ ๋ํด ๊ฑฑ์ ํ ํ์๊ฐ ์์ต๋๋ค.
์ด๋ ํนํ React ํด๋์ค ์ปดํฌ๋ํธ์์ ์ ์ฉํ ์ ์์ต๋๋ค. ์ผ๋ฐ ํจ์๋ฅผ ์ฌ์ฉํ๋ ํด๋ฆญ ํธ๋ค๋ฌ์ ๊ฐ์ ํด๋์ค ๋ฉ์๋๋ฅผ ์ ์ํ ๋ค์, ํด๋น ํด๋ฆญ ํธ๋ค๋ฌ๋ฅผ ํ์ ์ปดํฌ๋ํธ์ prop์ผ๋ก ์ ๋ฌํ๋ฉด ์์ ์ปดํฌ๋ํธ์ ์์ฑ์์์ this
๋ ๋ฐ์ธ๋ํด์ผํฉ๋๋ค.
๋์ ํ์ดํ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด, ๋ฉ์๋๊ฐ this
๊ฐ์ ์ฃผ์ ๋ ์์ปฌ ์ปจํ
์คํธ์์ ์๋์ผ๋ก ๊ฐ์ ธ์ค๊ธฐ ๋๋ฌธ์ this
๋ฅผ ๋ฐ์ธ๋ฉํ ํ์๊ฐ ์์ต๋๋ค.
(์ข์ ๋ฐ๋ชจ, ์ํ ์ฝ๋๋ ์ด ๊ธฐ์ฌ๋ฅผ ์ฐธ์กฐํ์ธ์.)
๊ณ ์ฐจ ํจ์๋ ๋ค๋ฅธ ํจ์๋ฅผ ๋งค๊ฐ ๋ณ์๋ก ์ฌ์ฉํ์ฌ ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ฑฐ๋, ๊ฒฐ๊ณผ๋ก ํจ์๋ฅผ ๋ฐํํ๋ ํจ์์
๋๋ค. ๊ณ ์ฐจ ํจ์๋ ๋ฐ๋ณต์ ์ผ๋ก ์ํ๋๋ ์ด๋ค ์ฐ์ฐ์ ์ถ์ํํ๊ธฐ ์ํ ๊ฒ์
๋๋ค. ์ ํ์ ์ธ ์์๋ ๋ฐฐ์ด๊ณผ ํจ์๋ฅผ ์ธ์๋ก ์ทจํ๋ map
์
๋๋ค. map
์ ๊ณ ์ฐจ ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด์ ๊ฐ ํญ๋ชฉ์ ๋ณํํ๊ณ , ๋ณํ๋ ๋ฐ์ดํฐ๋ก ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค. JavaScript์์ ํํ ๋ณผ ์ ์๋ ๋ค๋ฅธ ์๋ก forEach
, filter
, reduce
๊ฐ ์์ต๋๋ค. ๋ค๋ฅธ ํจ์์์ ํจ์๋ฅผ ๋ฐํํ๋ ๋ง์ ์ฌ์ฉ์ฌ๋ก๊ฐ ์๊ธฐ ๋๋ฌธ์ ๊ณ ์ฐจ ํจ์๋ ๋ฐฐ์ด์ ์กฐ์ํ ํ์๊ฐ ์์ต๋๋ค. Array.prototype.bind
๋ JavaScript์์ ๊ทธ๋ฌํ ์์ ์ค ํ๋์
๋๋ค.
Map
๊ฐ ์์๋ฅผ ๋๋ฌธ์ ๋ฌธ์์ด๋ก ๋ณํํด์ผํ๋ ์ด๋ฆ๋ค์ ๊ฐ์ง ๋ฐฐ์ด์ด ์๋ค๊ณ ๊ฐ์ ํด ๋ณด๊ฒ ์ต๋๋ค.
const names = ['irish', 'daisy', 'anna']
์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
const transformNamesToUppercase = function(names) {
const results = [];
for (let i = 0; i < names.length; i++) {
results.push(names[i].toUpperCase());
}
return results;
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
.map(transformerFn)
์ ์ฌ์ฉํ๋ฉด ์ฝ๋๊ฐ ๋ ์งง์์ง๊ณ ์ ์ธ์ ์ด์ด์ง๋๋ค.
const transformNamesToUppercase = function(names) {
return names.map(name => name.toUpperCase());
};
transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
๋์คํธ๋ญ์ณ๋ง์ ES6์์ ์ฌ์ฉํ ์ ์๋ ํํ์์ผ๋ก ๊ฐ์ฒด๋ ๋ฐฐ์ด์ ๊ฐ์ ์ถ์ถํ์ฌ ๋ค๋ฅธ ๋ณ์์ ๋ฐฐ์นํ๋ ๊ฐ๊ฒฐํ๊ณ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
๋ฐฐ์ด ๋์คํธ๋ญ์ณ๋ง
// ๋ณ์ ํ ๋น.
const foo = ['one', 'two', 'three']
const [one, two, three] = foo
console.log(one) // "one"
console.log(two) // "two"
console.log(three) // "three"
// ๋ณ์ ๊ตํ
let a = 1
let b = 3
;[a, b] = [b, a]
console.log(a) // 3
console.log(b) // 1
๊ฐ์ฒด ๋์คํธ๋ญ์ณ๋ง
// ๋ณ์ ํ ๋น.
const o = { p: 42, q: true }
const { p, q } = o
console.log(p) // 42
console.log(q) // true
ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ์ฌ์ฉํ๋ฉด ๋ฌธ์์ด ๋ณด๊ฐ์ ํ๊ฑฐ๋ ๋ฌธ์์ด์ ๋ณ์๋ฅผ ํฌํจํ๋ ์์ ์ ๊ฐ๋จํ๊ฒ ์ํํ ์ ์์ต๋๋ค. ES2015 ์ด์ ์๋ ์๋์ ๊ฐ์ดํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด์์ต๋๋ค.
var person = { name: 'Tyler', age: 28 };
console.log('Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!');
// 'Hi, my name is Tyler and I am 28 years old!'
ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ์ฌ์ฉํ๋ฉด, ๋์ ์ด๋ ๊ฒํด๋ ๊ฐ์ ์ถ๋ ฅ์ ๋ง๋ค ์ ์์ต๋๋ค.
const person = { name: 'Tyler', age: 28 };
console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
// 'Hi, my name is Tyler and I am 28 years old!'
ํ
ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ์ฌ์ฉํ๊ณ ์์ผ๋ฉฐ ${}
ํ๋ ์ด์คํ๋ ์์ ํํ์์ ์ฝ์
ํ ์ ์๋ค๋ ๊ฒ์ ๋ํ๋ด๊ธฐ ์ํด ๋ฐ์ดํ('
)๊ฐ ์๋ ๋ฐฑํฑ(`)์ ์ฌ์ฉํ๋ค๋ ๊ฒ์ ์ ์ํ์ธ์.
๋๋ฒ์งธ ์ ์ฉํ ์ฌ์ฉ์ฌ๋ก๋ ๋ค์คํ ๋ฌธ์์ด์ ๋ง๋๋ ๊ฒ์ ๋๋ค. ES2015 ์ด์ ์๋ ์๋์ ๊ฐ์ด ๋คํ์ ๋ฌธ์์ด์ ๋ง๋ค ์ ์์์ต๋๋ค.
console.log('This is line one.\nThis is line two.');
// This is line one.
// This is line two.
๋๋ ์ฝ๋์์ ์ฌ๋ฌ ์ค๋ก ๋๋ ์ง ๊ธด ๋ฌธ์์ด์ ์ฝ๊ธฐ ์ํด ํ ์คํธ ํธ์ง๊ธฐ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ์คํฌ๋กค ํ ํ์๊ฐ ์๋๋กํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ ์ ์์ต๋๋ค.
console.log('This is line one.\n' +
'This is line two.');
// This is line one.
// This is line two.
๊ทธ๋ฌ๋ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ๋น์ ์ด ์ถ๊ฐํ ๊ฐ๊ฒฉ ๊ทธ๋๋ก ์ ์ง๋ฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์์ ์์ฑํ ๊ฒ๊ณผ ๋์ผํ ๋ค์คํ ์ถ๋ ฅ์ ์์ฑํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ดํ๋ฉด ๋ฉ๋๋ค.
console.log(`This is line one.
This is line two.`);
// This is line one.
// This is line two.
ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ๋ ๋ค๋ฅธ ์ฌ์ฉ์ฌ๋ก๋ ๊ฐ๋จํ ๋ณ์ ๋ณด๊ฐ์ ์ํ ํ ํ๋ฆฟ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋์ฒดํ์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค.
const person = { name: 'Tyler', age: 28 };
document.body.innerHTML = `
<div>
<p>Name: ${person.name}</p>
<p>Name: ${person.age}</p>
</div>
`
.innerHTML
์ ์ฌ์ฉํ๋ฉด ์ฝ๋๊ฐ XSS์ ์ํฅ์ ๋ฐ์ ์ ์์ต๋๋ค. ์ฌ์ฉ์๋ก๋ถํฐ ์
๋ ฅ๋ฐ์ ๋ฐ์ดํฐ์ธ ๊ฒฝ์ฐ ํ์ํ๊ธฐ ์ ์ ๋ฐ์ดํฐ๋ฅผ ์์ ํ๊ฒ ๋ง๋์ธ์!
currying์ ๋ ์ด์์ ๋งค๊ฐ ๋ณ์๊ฐ ์๋ ํจ์๊ฐ ์ฌ๋ฌ ํจ์๋ก ๋ถ๋ฆฌ๋ ํจํด์ผ๋ก, ์ง๋ ฌ๋ก ํธ์ถํ๋ฉด, ํ์ํ ๋ชจ๋ ๋งค๊ฐ ๋ณ์๊ฐ ํ ๋ฒ์ ํ๋์ฉ ๋์ ๋ฉ๋๋ค. ์ด ๊ธฐ๋ฒ์ ํจ์ํ ์คํ์ผ๋ก ์์ฑ๋ ์ฝ๋๋ฅผ ์ฝ๊ณ , ํฉ์ฑํ๊ธฐ ๋ ์ฌ์์ง ๊ฒฝ์ฐ ์ ์ฉํ ์ ์์ต๋๋ค. ํจ์๋ฅผ curryingํ๋ ค๋ฉด, ํ๋์ ํจ์๋ก ์์ํ์ฌ, ํ๋์ ๋งค๊ฐ ๋ณ์๋ฅผ ์ทจํ๋ ์ผ๋ จ์ ํจ์๋ก ๋ถ๋ฆฌํด์ผ ํฉ๋๋ค.
function curry(fn) {
if (fn.length === 0) {
return fn
}
function _curried(depth, args) {
return function(newArgument) {
if (depth - 1 === 0) {
return fn(...args, newArgument)
}
return _curried(depth - 1, [...args, newArgument])
}
}
return _curried(fn.length, [])
}
function add(a, b) {
return a + b
}
var curriedAdd = curry(add)
var addFive = curriedAdd(5)
var result = [0, 1, 2, 3, 4, 5].map(addFive) // [5, 6, 7, 8, 9, 10]
ES6์ spread ๋ฌธ๋ฒ์ ํจ์ํ ํจ๋ฌ๋ค์์์ ์ฝ๋ฉํ ๋ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. ์๋ํ๋ฉด Object.create
, slice
๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ํจ์๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ ๋ฐฐ์ด์ด๋ ๊ฐ์ฒด์ ๋ณต์ฌ๋ณธ์ ์ฝ๊ฒ ๋ง๋ค ์ ์๊ธฐ ๋๋ฌธ์
๋๋ค. ์ด ์ธ์ด ๊ธฐ๋ฅ์ Redux๋ Rx.js๋ฅผ ์ฌ์ฉํ๋ ํ๋ก์ ํธ์์ ๋ง์ด ์ฌ์ฉ๋ฉ๋๋ค.
function putDookieInAnyArray(arr) {
return [...arr, 'dookie']
}
var result = putDookieInAnyArray(['I', 'really', "don't", 'like']) // ["I", "really", "don't", "like", "dookie"]
var person = {
name: 'Todd',
age: 29
}
var copyOfTodd = { ...person }
ES6์ rest ๊ตฌ๋ฌธ์ ํจ์์ ์ ๋ฌํ ์์์ ์์ ์ธ์๋ฅผ ํฌํจํ๋ ์ฝ์์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ๋ฐ์ดํฐ์ ๋ฐฐ์ด์ ์ฑ์ฐ๊ธฐ๋ณด๋ค๋ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ๋ฐฐ์ด๋ก ์ฑ์ฐ๋ spread ๊ตฌ๋ฌธ์ ๋ฐ๋์ ๋น์ทํ๋ฉฐ, ๋ฐฐ์ด์ด๋ ๊ฐ์ฒด ๋์คํธ๋ญ์ณ๋ง ํ ๋น๋ฟ๋ง ์๋๋ผ ํจ์ ์ธ์์์๋ ์๋ํฉ๋๋ค.
function addFiveToABunchOfNumbers(...numbers) {
return numbers.map(x => x + 5);
}
const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
const { e, f, ...others } = {
e: 1,
f: 2,
g: 3,
h: 4,
}; // e: 1, f: 2, others: { g: 3, h: 4 }
์ด๊ฒ์ Javascript ํ๊ฒฝ์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค.
ํด๋ผ์ด์ธํธ(๋ธ๋ผ์ฐ์ ํ๊ฒฝ)์์๋, ๋ณ์/ํจ์๊ฐ ์ ์ญ ์ค์ฝํ(window
)์ ์ ์ธ๋์ด์๋ ํ ๋ชจ๋ ์คํฌ๋ฆฝํธ๊ฐ ์ด๋ฅผ ์ฐธ์กฐํ ์ ์์ต๋๋ค. ๋๋, ๋ณด๋ค ๋ชจ๋ํ ์ ๊ทผ ๋ฐฉ์์ ์ํด RequireJS๋ฅผ ํตํด ๋น๋๊ธฐ ๋ชจ๋ ์ ์(AMD)๋ฅผ ์ด์ฉํฉ๋๋ค.
์๋ฒ(Node.js)์์ ์ผ๋ฐ์ ์ธ ๋ฐฉ๋ฒ์ CommanJS๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์
๋๋ค. ๊ฐ ํ์ผ์ ๋ชจ๋๋ก ์ทจ๊ธ๋๋ฉฐ, ๋ณ์์ ํจ์๋ฅผ module.exports
๊ฐ์ฒด์ ๋ถ์ฌ์ ๋ด๋ณด๋ผ ์ ์์ต๋๋ค.
ES2015์์๋ AMD ๋ฐ commonJS๋ฅผ ๋ชจ๋ ๋์ฒดํ๊ธฐ ์ํ ๋ชจ๋ ๋ฌธ๋ฒ์ ์ ์ํฉ๋๋ค. ์ด ๊ธฐ๋ฅ์ ๋ธ๋ผ์ฐ์ ๋ฐ ๋ ธ๋ ํ๊ฒฝ ๋ชจ๋์์ ์ง์๋ฉ๋๋ค.
์ ์ ํด๋์ค ๋ฉค๋ฒ(์์ฑ/๋ฉ์๋)๋ ํด๋์ค์ ํน์ ์ธ์คํด์ค์ ๋ฌถ์ด์ง ์์ผ๋ฉฐ, ์ด๋ค ์ธ์คํด์ค๊ฐ ์ด๋ฅผ ์ฐธ์กฐํ๋์ง์ ๊ด๊ณ์์ด ๋์ผํ ๊ฐ์ ๊ฐ์ง๋๋ค. ์ ์ ์์ฑ์ ์ผ๋ฐ์ ์ผ๋ก ์ค์ (configuration) ๋ณ์์ด๋ฉฐ ์ ์ ๋ฉ์๋๋ ์ผ๋ฐ์ ์ผ๋ก ์ธ์คํด์ค์ ์ํ์ ์์กดํ์ง ์๋ ์์ ์ ํธ๋ฆฌํฐ ํจ์์ ๋๋ค.
์ข์ ๊ธ ๋ฒ์ญ ๊ฐ์ฌํฉ๋๋ค