JavaScript 입문(1) - 모던 자바스크립트 | 김민준

[출처 : https://learnjs.vlpt.us]

템플릿 리터럴

ES5 : 

function hello(name) {
  return "hello, " + name
}
console.log(hello("AGAL"));

ES6 : 

function hello(name) {
  return `hello, ${name}`
}
console.log(hello("AGAL"));

*함수에서는 return이 사용된 순간, 함수가 종료된다.

---

화살표 함수

const hello = (name) => {
  return `hello, ${name}`
}
console.log(hello("AGAL"));

함수 내부에서 어떤 값을 바로 return 할 경우 :

const hello = (name) => `hello, ${name}`;
console.log(hello("AGAL"));

*화살표 함수에서 가리키는 this는 함수가 속해 있는 곳을 가리키지 않는다.

---

비구조할당(객체 구조 분해)

특정 값을 객체에서 빼온다.

const gundam = {
  name: "퍼스트 건담",
  code: "RX-78-2"
  pilot: "아무로 레이"
}

function print1(ms) { 
  console.log(`${ms.name}의 형식넘버는 ${ms.code}이며, 파일럿은 ${ms.pilot}입니다.`);
}
function print2(ms) {
  const {name, code, pilot} = ms
  console.log(`${name}의 형식넘버는 ${code}이며, 파일럿은 ${pilot}입니다.`);
}
function print3({name, code, pilot}) {
  console.log(`${name}의 형식넘버는 ${code}이며, 파일럿은 ${pilot}입니다.`);
}

print1(gundam) // 퍼스트 건담의 형식넘버는 RX-78-2이며, 파일럿은 아무로 레이입니다.
print2(gundam) // 퍼스트 건담의 형식넘버는 RX-78-2이며, 파일럿은 아무로 레이입니다.
print3(gundam) // 퍼스트 건담의 형식넘버는 RX-78-2이며, 파일럿은 아무로 레이입니다.

---

객체 내에 있는 함수

const dog = {
  sound: "멍멍",
  say: function(){
    console.log(this.sound)
  }
}
const cat = {
  sound: "야~옹"
}

cat.say = dog.say;
dot.say(); // "멍멍"
cat.say(); // "야~옹"

const catSound = cat.say;
cat();  // TypeError: Cannot read property 'sound' of undefined

*function 키워드로 만든 함수에서 가리키는 this는 함수가 속해 있는 곳을 가리킨다.

 ex) 객체 내부의 function 키워드 함수(say)의 this는 함수가 속한 객체(dog)를 가리킨다. 

---

Getter 와 Setter 함수

getter

getter 함수는 특정 값을 조회하려고 할 때마다, 특정 코드를 실행시키고 연산된 값을 받아서 사용한다.

const number = {
  a: 1,
  b: 2,
  get sum() {
    console.log("sum 함수가 실행됩니다.")
    return this.a + this.b;
  }
}
console.log(number.sum);  
// "sum 함수가 실행됩니다."  :5줄
// 3                        :9줄
numbers.b = 5;
console.log(number.sum);  // 6

setter

특정 값을 설정하려고 할 때마다, 특정 코드를 실행시키고 연산된 값을 받아서 사용한다.

const gundam = {
  _name: "퍼스트 건담",
  set name(name) {
    console.log(`${name}(으)로 바뀝니다.`)
    this._name = name;
  }
}
console.log(gundam._name);  // "퍼스트 건담"                :8줄
gundam.name = "제타 건담";   // "제타 건담(으)로 바뀝니다."  :4줄
console.log(gundam._name);  // "제타 건담"                  :10줄

* key에 _를 붙이는 이유는 setter 함수와 겹치지 않도록 하기 위해서

* setter 함수는 파라미터를 무조건 설정해야 한다.

---

for ... of

배열 안에 있는 요소를 반복문으로 사용

const numbers = [10, 20, 30, 40, 50];

for (let number of numbers) {
  console.log(number)    // 10, 20, 30, 40, 50
}

---

Object 내장 함수

const gundam = {
  code: "RX-78-2",
  name: "First Gundam",
  pilot: "Amuro Ray"  
}

console.log(Object.keys(gundam))   // ["code", "name", "pilot"]
console.log(Object.values(gundam))   // ["RX-78-2", "First Gundam", "Amuro Ray"]
console.log(Object.entries(gundam))   // [["code", "RX-78-2"], ["name", "First Gundam"], ["pilot", "Amuro Ray"]]

---

for ... in

객체 안에 있는 키값을 반복문으로 사용

const gundam = {code: "RX-78-2", name: "First Gundam", pilot: "Amuro Ray"}

for (ley key in gundam) {
  console.log(`${key}: ${gundam.key}`);   // code: RX-78-2, name: First Gundam, pilot: Amuro Ray
}

---

continue와 break

continue

특정 조건이 만족되었을 때 continue로 이후의 코드는 스킵하고 다음 루프가 실행된다. 

break

특정 조건이 만족되었을 때 반복문을 끝낸다.