ES6 __001 (Arrow Fuctions , String)

"this" keyword in Arrow Functions

this 키워드를 사용해야하는 경우를  arrow function 제외하고 사용할 수 있다.

const button = document.querySelector("button");

button.addEventListener("click", function () {
  console.log(this);
  console.log("clicked");
});

 

arrow function을 사용해서 this를 불러내면 window object들을 불러낼것이다.

const hi = {
  hi: "hoho",
  bye: false,
  age: 2,
  addMeet() {
    this.age++;
  },
};
console.log(hi);
hi.addMeet();
console.log(hi);

hi.addMeet();
hi.addMeet();
hi.addMeet();
hi.addMeet();
hi.addMeet();

console.log(hi);

 

Arrow Function에서의 return

const email = ["korea@korea.com", "naver@naver.com", "hoho@hoho.com"];
const haha = email.map((e, index) => {
  return {username: e.split("@")[0], index};
});
console.log(haha);


const email = ["korea@korea.com", "naver@naver.com", "hoho@hoho.com"];
const haha = email.map((e, index) => ({username: e.split("@")[0], index}));
console.log(haha);

 

Funtion에서의 기본값

function sayHello(name = "choi") {
  return "Hello " + name;
}
console.log(sayHello());
console.log(sayHello("jaja"));

const helloMechine = (name = "hihi") => {
  return "Hello " + name;
};
console.log(helloMechine());
console.log(helloMechine("chimp"));

 

Template Literals

const wrapper = document.querySelector(".wrapper");

// const addWelcome = () => {
//   const div = document.createElement("div");
//   const h1 = document.createElement("h1");
//   h1.innerText = "Hello";
//   h1.className = "hiTitle";
//   div.append(h1);
//   wrapper.appendChild(div);
// };



const addWelcome = () => {
  const div = `
    <div>
        <h1 class="hiTitle">Hello</h1>
    </div>
  `;
  wrapper.innerHTML = div;
};

addWelcome();

둘다 같은 결과를 내며 꼭 백틱(  `  )을 사용해야한다.

const wrapper = document.querySelector(".wrapper");

const laugh = ["haha", "hoho", "hehe", "jaja", "hihi"];

const list = ` 
<h1>Laugh List</h1>
<ul>
${laugh.map((item) => `<li>${item}</li>`).join("")}
</ul>
`;

wrapper.innerHTML = list;

 

const wrapper = document.querySelector(".wrapper");
const cssIncome = (css) => {
  console.log(css);
};

cssIncome(`border-radius:10px;color:blue;`);
cssIncome`border-radius:10px;color:blue;`;

// const styled = (newEle) => {
//     const el = document.createElement(newEle);
//     return el;
// };
// const title = styled("h1")`border-radius:10px;color:blue;`; 이렇게 하면 에러가 난다. 에러가 나는 이유는 funtion을 두번 호출했다는 의미이다.

const styled = (newEle) => {
  const el = document.createElement(newEle);
  return (args) => {
    console.log(args[0]);
    const styled = args[0];
    el.style = styled;
    return el;
  };
};
const title = styled("h1")`
  border-radius: 10px;
  color: blue;
`;
const span = styled("span")`
  font-size: 25px;
  color: red;
`;

title.innerText = "wow";
span.innerText = "suprised!!";

wrapper.append(title, span);

 

repeat / includes / startWithin / endWithin / forEach / map / replace ...