[JavaScript] ES6 간단한 문법

Destructuring

Destructuring, 구조분해할당은 배열이나 객체의 속성을 해체하여 그 값을 원하는 변수에 다시 담을 수 있게 하는 표현식이다.

const player = {
  name: "Lebron James",
  club: "La Lakers",
  address: {
    city: "Los Andgeles",
  },
};

console.log(player.address.city); // 출력 => Los Andgeles

위 코드에서 city를 쓰려면 변수가 상당히 길다.

const player = {
  name: "Lebron James",
  club: "La Lakers",
  address: {
    city: "Los Andgeles",
  },
};

const {
  name,
  club,
  address: { city },
} = player;

console.log(club); // 출력 => Los Andgeles

길게 쓸 필요 없이 딱 하나로만 가능하다.

function addressMaker(city, state) {
  const newAddress = { city, state }; // city: city -> city
  console.log(newAddress);
}

addressMaker("Austin", "Texas"); // 출력 => {city: "Austin", state: "Texas"

function addressMaker2(address) {
  const { city, state } = address;
  const newAddress2 = {
    city,
    state,
    contry: "US",
  };

  console.log(
    `${newAddress2.city}, ${newAddress2.state}, ${newAddress2.contry}`
  );
}

addressMaker2({ city: "Austin", state: "Texas" }); // Austin, Texas, US

---

Template literal

`(백틱) 을 이용해 문자열 내에서 변수를 사용할 수 있다.

let name = "Javascript";
console.log(`Hello World! I'm ${name}.`); // 출력 => Hello World! I'm Javascript.

---

For문

프로그래밍에서 특정한 작업을 반복적으로 실행할 수 있도록 해주는 반복문 중 하나다.

let incomes = [6200, 6700, 7500];
let total = 0;
for (const income of incomes) {
  console.log(income);
  // 첫번째 출력 => 6200
  // 두번째 출력 => 6700
  // 세번째 출력 => 7500
  total += income;
}
console.log(total); // 20400

let fullName = "abc";
for (const char of fullName) {
  console.log(char);
  // 첫번째 출력 => a
  // 두번째 출력 => b
  // 세번째 출력 => c
}

---

Spread operator(…)

배열, 객체, 문자열 등의 값을 복사할 수 있다.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];

console.log(arr2); // 출력 = > [1, 2, 3, 4, 5, 6]

말 그대로 복사하는 것이기 때문에,

let contacts = ["Mary", "Joel", "Danny"];
let personalFreiends = ["David", ...contacts, "Lily"]; // "Mary", "Joel", "Danny"
contacts.push("John");
console.log(personalFreiends); // 출력 => ["David", "Mary", "Joel", "Danny", "Lily"]

contacts에 추가된 John은 출력되지 않는다.

---

Arrow Functions

Arrow Functions, 화살표 함수는 코드의 가독성을 높이고 함수 선언을 간단하게 만들어준다.

const DinnerMenu = function (food) {
  return `I'm going to eat a ${food} for lunch`;
};

const DinnerMenu = (food = "burger") => `I'm going to eat a ${food} for lunch`;
// 아무것도 입력하지 않으면 food가 burger로 넣어진다.
console.log(DinnerMenu("chicken")); // 출력 => I'm going to eat a chicken for lunch

---

var, let, const

변수를 선언하는 키워드들 중 하나다.

var

var 으로 선언된 변수는 호이스팅(변수 선언이 함수나 스크립트의 상단으로 이동되어 변수 선언 전에도 사용할 수 있음)된다. 전역 범위를 가진다.

var example = 5;
console.log(example); // 출력 => 5

let

let 는 블록 범위를 가진다. var과 달리 호이스팅되지 않는다.

let example = 5;
example = 10;

const

const 는 블록 범위를 가지고, 재할당, 재선언이 안된다.

const example = 10;
example = 5; // TypeError: "example2" is read-only
console.log(example);

const example = [];
example.push(5); //push는 재선언이 아니기 때문에 가능하다.
console.log(example);