// Array.of()
const alphabet = ["a", "b", "c", "d"];
const alphabet = Array.of("a", "b", "c", "d")const alphabet = Array.of("a", "b", "c", "d", 1, 2, 3);;
console.log(alphabet);

const buttons = document.getElementsByClassName("btn");
console.log(buttons);
// buttons는 Array가 아니기 때문에
// 아래와 같이 forEach를 사용할 수 없다.
buttons.forEach((button) => {
  button.addEventListener("click", () => console.log("I ve been clickeds"));
});
----------------
Array.from(buttons).forEach((button) => {
  button.addEventListener("click", () => console.log("I ve been clickeds"));
});

/**
 * Array.find()
 */
const friends = [
  "[email protected]",
  "[email protected]",
  "[email protected]",
  "[email protected]",
];

const target1 = friends.find((friend) => friend.includes("@yahoo.com"));
// 조건을 넣어주면 forEach를 돌리면서 그에 맞는 값을 리턴해준다
// 찾은 첫번째 값만 반환해준다
// 없으면 undefined반환한다
console.log(target1);

/**
 * Array.findIndex()
 */
const target2 = friends.findIndex((friend) => friend.includes("@yahoo.com"));
// 인덱스가 필요할때!
// 없으면 -1반환한다
console.log(target2);
const userName = friends[target2].split("@")[0];
const email = "yahoo.com";
console.log(`${userName}@${email}`);

if (target2 !== -1) {
  friends.fill("*".repeat(5), target2 + 1);
  // target부터 모든 변수는 다 채울값으로 채워줌
}
console.log(friends);

const sayHi = (aName = "anon") => {
  return "Hello " + aName;
};

==>
/**
* 변수
*/
const sayHi = (aName = "anon") => {
	return `Hello ${aName}`;
}
/**
 * 함수
 */
const add = (a, b) => a + b;
console.log(`hello how are you ${add(6, 6)}`);

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

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

setTimeout(addWelcome, 1000);

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

const alphas = ["A", "B", "C", "D"];

const ul = document.createElement("ul");
const list = `
    <h1>Alphabet</h1>
    <ul>
        ${alphas.map(alpha => `<li>${alpha}</li>`).join("")}
    </ul>
    `;
wrapper.innerHTML = list;

/**
 * Cloning Styled Components
 */

const styled = (aElement) => {
  const el = document.createElement(aElement);
  return (args) => {
    const styles = args[0];
    el.style = styles;
    return el;
  };
};

// 아래 코드는 함수를 두변 연속 호출 하는 꼴이기 때문에
// 위 함수에서 클로저로 함수를 또 한번 호출할 필요가 있다.
const title = styled("h1")`
  background-color: red;
  color: blue;
`;

const subTitle = styled("span")`
  color: green;
`;

title.innerText = "We just cloned";
subTitle.innerText = "Styled Components";

document.body.append(title, subTitle);

/**
 * includes()
 */
const isEmail = (email) => email.includes("@");
console.log(isEmail("[email protected]")); // true
console.log(isEmail("myEmail")); // false

/**
 * repeat()
 */
const CC_NUMBER = "6060"; // ************6060로 보여주기
const displayName = `${"*".repeat(10)}${CC_NUMBER}`;
console.log(displayName); // **********6060

/**
 * startsWith(), endsWith()
 */
const name = "Mr. abc";
console.log(name.startsWith("Mr")); // true
console.log(name.endsWith("abc")); // true

function Hello() {
  return "hi";
}
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(function (name) {
  return name + " ❤️";
});
console.log(hearts);

const Hello = () => {
  return "hi";
};
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map((name) => {
  return name + " ❤️";
});
console.log(hearts);

const Hello = () => "hi";
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(name => name + " ❤️");
console.log(hearts);

const thisTest = {
  cnt: 0,
  addCnt() {
    this.cnt++;
  },
  addCnt2: () => {
    this.cnt++;
  },
};
console.log(thisTest.cnt); // 0
thisTest.addCnt();
console.log(thisTest.cnt); // 1
thisTest.addCnt2;
console.log(thisTest.cnt); // 1

const sayHi = (aName = "anon") => {
	return `Hello ${aName}`;
}

console.log(sayHi());
console.log(sayHi('chaehyeon'));