no image
[Javascript] Event Object
이벤트 객체 (Event Object) 이벤트 등록을 할 때 addEventListener에 두 가지 인자를 전달해 주었다. 첫 번째 인자는 이벤트 이름이고 두 번째 인자는 이벤트 핸들러라고 부르는 사용자가 만든 함수이다. 이 함수에 이벤트가 발생하면 동작될 코드들을 넣어 놓게 된다. 이벤트가 발생되어서 이벤트 핸들러 함수가 호출이 되면 이벤트 객체를 전달받게 되는데 이벤트 핸들러 함수에 매개변수를 선언해주면 이벤트 객체를 사용할 수 있다. 클릭 const btn = document.querySelector(".btn"); btn.onclick = function (e) { console.log(e); }; 위 방법으로 이벤트를 등록해 이벤트 객체를 사용할 수 있지만 나는 아래 방법으로 이벤트를 등록해서..
2022.11.10
no image
[Javascript] Event (Add, Remove)
Event란? Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다. 이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API가 생성할 수도 있습니다. Event - MDN 이벤트(Event)란 우리가 브라우저에서 버튼을 클릭하거나 로그인을 하기 위해 ID/PW를 입력하는 행동이라고 볼 수 있다. 버튼을 클릭하면 브라우저에 click 이벤트가 발생하고 ID/PW를 입력할 때 브라우저에서 keyup이나 keydown등의 이벤트가 발생한다. Event Handling 브라우저에서 발생되는 이벤트를 처리하는 걸 이벤트 핸들링이라고 부른다. 이벤트 핸들링을 하는 방법이 3가지 정도 있는데 한 번 알아보자! 1. Element..
2022.11.09
no image
[Javascript] 로또 번호 생성기
구현해야 할 것 1. 로또 번호가 출력되는 페이지를 만든다. 2. 누르면 이벤트가 발생하는 번호 생성 버튼을 만든다. 1. 번호 생성 버튼을 눌리면 로또 번호가 보이게 한다. 2. 랜덤한 숫자를 뽑는다. 3. 각 요소에 뽑은 숫자를 넣어준다. 구현 아래와 같이 HTML 파일을 작성해 주자! 로또 번호 생성기 1 2 3 4 5 6 번호 생성 번호 생성 버튼을 누르면 li 태그의 요소가 보이도록 Javascript 파일을 작성해보자! const lottoElement = document.querySelector("#lotto"); const btnElement = document.querySelector("#btn"); function buttonEvent() { lottoElement.className =..
2022.11.08
no image
[Javascript] DOM(Document Object Model)
Window 객체란? DOM을 설명하기 전에 먼저 Window라는 객체를 알아야 한다. Window 객체란 브라우저의 창을 대변한다고 볼 수 있다. Javascript에서 최상단에 존재하는 객체로 이 객체 안에는 수많은 프로퍼티들이 존재하는데 Javascript의 거의 모든 내장 객체, 내장 함수들이 Window 객체에 속해 있다. Window 객체는 Javascript 코드의 어느 곳에서나 항상 접근 할 수 있는 객체로 전역 객체(Global Object)라고도 부른다. 사실 우리가 자주 사용하는 console.log도 window.console.log로 사용해야 하지만 무엇을 사용하든 결국 윈도우 객체 내부의 것이기 때문에 window.을 생략해도 된다. 그리고 우리가 선언한 변수나 함수도 windo..
2022.11.08
no image
[Javascript] 객체
객체란? 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합 - JavaScript 객체 기본 [MDN] 객체는 실제로 존재하는 사물로 이해할 수 있다. 예를 들어 강아지를 객체라고 한다면 프로퍼티는 이름, 나이, 무게 등이 들어 갈 수 있다. 메소드는 앉아, 일어서, 기다려 등 강아지에게 시킬 수 있는 행동들이 들어갈 수 있다. const siba = { name: "siba", age: 1, weight: "5kg", alive: true, sitDown: function () {}, standUp: function () {}, wait: function () {}, }; 위와 같이 객체 안에는 어떤 데이터 타입이든 들..
2022.11.04
no image
[Javascript] 피보나치 수열 - 알고리즘
피보나치 수열이란? 수학에서 피보나치 수(영어: Fibonacci numbers)는 첫째 및 둘째 항이 1이며 그 뒤의 모든 항은 바로 앞 두 항의 합인 수열이다. 처음 여섯 항은 각각 1, 1, 2, 3, 5, 8이다. 편의상 0번째 항을 0으로 두기도 한다. 출처 - 위키백과 피보나치 수열 구현 피보나치 수열을 구현하는 방식은 다양하지만 여기서는 재귀 함수를 이용한 방식과 재귀 함수의 문제점을 개선한 메모이제이션(Memoization) 기법을 사용할 예정이다. 구현해야 할 것 1. 인자에 n을 넣었을 때 피보나치 수열의 n 번째 값을 return [ 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 ... ] 2. n = 1일때와 n = 2일 때는 1을 return 1. 재귀 함수를 이용해 ..
2022.11.03
no image
[Javascript] 형 변환
형 변환 NaN : Not a Number NaN은 다른 모든 값과 비교 했을 때에도 같지 않고, 다른 NaN과도 같지 않다. let string = "ryzen"; let num = 9; let bool = true; // 숫자형으로 형 변환 console.log(Number(string)); // NaN console.log(Number(bool)); // 1 // 문자열로 형 변환 console.log(String(num)) // 9 console.log(String(bool)) // true // 불린형으로 형 변환 console.log(Boolean(string)) // true console.log(Boolean(num)) // true 자동 형 변환 + 연산 시 자동 형 변환 + 연산은 문자..
2022.11.03
no image
[Javascript] 다양한 함수 선언 방법
함수란? 코드의 집합을 나타내는 자료형 반복되는 코드를 정의해 놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있음 기능별로 나눠 함수를 작성해 놓으면 유지보수가 쉬워짐 🌟함수도 값이다🌟 함수 선언식 (Function Declarations) 호이스팅이 일어나지만 가독성은 좋다. // 함수 선언 function 함수이름(매개변수) { // 함수 호출시 실행될 코드 } // 함수 호출 함수이름(인자) // 함수 선언 function showMessage() { console.log("Hello"); } // 함수 호출 showMessage(); // 함수의 호이스팅 showMessage(); // 함수 선언전에 호출 // 함수 선언 function showMessage() { console.log("H..
2022.11.02

[Javascript] Event Object

CloudCoke
|2022. 11. 10. 17:26

이벤트 객체 (Event Object)


이벤트 등록을 할 때 addEventListener에 두 가지 인자를 전달해 주었다. 첫 번째 인자는 이벤트 이름이고 두 번째 인자는 이벤트 핸들러라고 부르는 사용자가 만든 함수이다. 이 함수에 이벤트가 발생하면 동작될 코드들을 넣어 놓게 된다. 이벤트가 발생되어서 이벤트 핸들러 함수가 호출이 되면 이벤트 객체를 전달받게 되는데 이벤트 핸들러 함수에 매개변수를 선언해주면 이벤트 객체를 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">클릭</button>
    <script src="public/js/test.js"></script>
  </body>
</html>
const btn = document.querySelector(".btn");

btn.onclick = function (e) {
  console.log(e);
};

이벤트 객체

위 방법으로 이벤트를 등록해 이벤트 객체를 사용할 수 있지만 나는 아래 방법으로 이벤트를 등록해서 사용할 예정이다.

const btn2 = document.querySelector(".btn");

const btnHandler = function (e) {
  console.log(e);
};

btn2.addEventListener("click", btnHandler);

이벤트 객체

이벤트 객체 사용


이벤트 객체에는 여러 속성이 존재하지만 우선은 자주 사용하는 2가지 속성만 알아보자!

target 속성

target 속성은 이벤트를 발동시킨 요소를 말한다. 

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

const btnHandler = function (e) {
  console.log(e.target);
};

btn.addEventListener("click", btnHandler);

클릭 버튼을 눌렀을 때

target 속성을 이용해 Style도 변경이 가능하다. 이벤트가 발생했을 때 지정한 Style이 적용이 된다.

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

const btnHandler = function (e) {
  e.target.style = "background: green;";
};

btn.addEventListener("click", btnHandler);

클릭 버튼을 눌렀을 때

type 속성

type 속성은 어떤 이벤트가 발생했는지 확인할 때 유용하다. 

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

const btnHandler = function (e) {
  console.dir(e.type);
};

btn.addEventListener("click", btnHandler);
btn.addEventListener("mouseover", btnHandler);

이벤트 발생시 이벤트명이 출력되는 모습

type 속성은 등록된 이벤트가 실행됬을 때 어떤 이벤트 명으로 실행이 되었는지 알 수 있다.

활용하기


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">클릭</button>
    <div class="display" style="background: red"></div>
    <script src="public/js/test.js"></script>
  </body>
</html>
const btn = document.querySelector(".btn");
const display = document.querySelector(".display");

const btnHandler = function (e) {
  if (e.type === "click") display.innerHTML = "마우스를 클릭했다!";
  if (e.type === "mouseover") display.innerHTML = "마우스를 올렸다!";
};

btn.addEventListener("click", btnHandler);
btn.addEventListener("mouseover", btnHandler);

이벤트 활용하기

이벤트가 발생했을 때 이벤트 객체의 type 속성을 이용해 마우스 클릭과 마우스오버를 구분해 display에 innerHTML로 텍스트를 추가해 주었다.

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .a {
      background: red;
    }
    .b {
      background: orange;
    }
  </style>
</head>
<body>
  <button class="btn">버튼1</button>
  <button class="btn2">버튼2</button>
  <div id="display"></div>
  <script src="public/js/test.js"></script>
</body>
const btn = document.querySelector(".btn");
const btn2 = document.querySelector(".btn2");
const display = document.querySelector("#display");

function handler(e) {
  if (e.type === "click") {
    display.innerHTML = `${e.target.textContent} 클릭`;
    display.className = "a";
  } else if (e.type === "mouseover") {
    display.innerHTML = `${e.target.textContent}에 마우스를 올렸다!`;
    display.className = "b";
  }
}

function handler2(e) {
  display.innerHTML = "";
  display.className = "";
}

btn.addEventListener("click", handler);
btn.addEventListener("mouseover", handler);
btn.addEventListener("mouseout", handler2);
btn2.addEventListener("click", handler);
btn2.addEventListener("mouseover", handler);
btn2.addEventListener("mouseout", handler2);

이벤트가 발생했을 때 이벤트 객체의 type 속성을 이용해 마우스 클릭과 마우스오버를 구분해 display에 innerHTML로 텍스트를 추가해 주고 클래스명도 변경해주었다.

Event란?


Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.
이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자의 액션에 의해 발생할 수도 있고, 비동기적 작업의 진행을 나타내기 위해서 API가 생성할 수도 있습니다. Event - MDN

이벤트(Event)란 우리가 브라우저에서 버튼을 클릭하거나 로그인을 하기 위해 ID/PW를 입력하는 행동이라고 볼 수 있다.

버튼을 클릭하면 브라우저에 click 이벤트가 발생하고 ID/PW를 입력할 때 브라우저에서 keyup이나 keydown등의 이벤트가 발생한다. 

Event Handling


브라우저에서 발생되는 이벤트를 처리하는 걸 이벤트 핸들링이라고 부른다. 이벤트 핸들링을 하는 방법이 3가지 정도 있는데 한 번 알아보자!

1. Element에 직접 넣기

이 방법은 html에 요소에 style 속성을 넣는 것 처럼 이벤트도 넣을 수 있다.

이 방법을 사용하는 대부분의 이벤트이름에는 앞 글자에 on이라는 게 붙어 있다.

on[Event 이름] = "동작"
  <body>
    <button onclick="alert('hello world!')">버튼</button>
  </body>

위와 같이 코드를 작성하고 실행해 보자!

버튼이 클릭되면 hello world!라는 텍스트를 출력하는 경고창이 뜨게 된다.

Element에 직접 넣어서 이벤트 처리

이 방법은 잘 사용하지 않는다. 간단한 코드일 경우에는 괜찮지만 코드가 복잡해지면 HTML 파일의 가독성이 떨어지게 된다. 

2. DOM 속성으로 넣기

이 방법은 Element에 직접 넣어서 HTML 파일의 가독성을 해치는 단점을 해결해 준다. 이 방법은 HTML 파일과 자바스크립트 파일로 나눠서 작성해야 한다. 

<body>
    <button class="btn">버튼</button>
    <script src="public/js/practice.js"></script>
  </body>
const btn = document.querySelector(".btn");

btn.onclick = function () { // 이벤트 핸들러(Event Handler)
  console.log("hello world!");
};

1. querySelector로 .btn이라는 클래스 이름을 선택하면 만족하는 첫 번째 요소(Element) 객체를 반환해 준다. (참조 형태)

2. 요소 객체를 btn이라는 변수에 대입해준 다음 onclick이라는 속성에 함수를 넣어준다. 구체적으로 어떤 동작을 할 지 명시해주는 함수 부분을 이벤트 핸들러라고 부른다.

DOM 속성을 이용해 이벤트 처리

정말 querySelector로 존재하는 선택자를 선택했을 때 반환되는 Element가 참조형태일까?
const btn = document.querySelector(".btn");

btn.onclick = function () {
  console.log("hello world!");
};

console.log(btn.onclick);

const btn2 = document.querySelector(".btn");

btn2.onclick = function () {
  console.log("update onclick");
};

console.log(btn.onclick);
console.log(btn.onclick === btn2.onclick); // true

 

이 코드를 실행해 보면 btn2의 onclick 속성을 수정해 주었는데 btn의 onclick 속성까지 변경이 되었다.

따라서 querySelector는 Element를 참조형으로 반환한다고 볼 수 있다.

위 코드를 실행한 결과 querySelector는 Element를 참조 형태로 반환해 준다.

DOM 속성으로 이벤트 핸들링을 하는 방법에도 치명적인 단점이 있다.

하나의 이벤트에 여러 이벤트 핸들러를 등록할 수 없다는 점이다.

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

btn.onclick = function () {
  console.log("hello world!");
};

console.log(btn.onclick);

btn.onclick = function () {
  console.log("hello world!2");
};

console.log(btn.onclick);

두번째 이벤트를 등록하게되면 값이 덮어 씌여진다.

이 방법에는 기존의 값을 유지할 수 없다는 단점이 있다. 

3. addEventListener 

이 방법은 DOM 속성으로 이벤트 핸들링을 할 때 여러 핸들러를 등록하지 못하는 단점을 해결해 준다.

문법은 다음과 같다.

Element.addEventLitener("event_name", callback_function_value, [options]);

addEventListener를 이용해 이벤트를 등록하는 방법은 함수를 직접 넣어주는 방법과 함수를 선언하고 넣어주는 방법이 있다. 하나씩 살펴보자!

<body>
    <button class="btn">버튼</button>
    <script src="public/js/practice.js"></script>
  </body>

방법 1 - 익명함수를 이용해 함수를 직접 넣어주기

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

console.log("익명함수를 이용해 함수를 직접 넣어주기")
btn.addEventListener("click", function () {
  console.log("hello world!");
});

btn.addEventListener("click", function () {
  console.log("hello world2!");
});

익명함수를 이용해 함수를 직접 넣어주기

방법 2 - 함수를 선언하고 넣어주기 [권장]

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

console.log("함수를 선언하고 넣어주기");
const btnHandler = function () {
  console.log("hello world!");
};

const btnHandler2 = function () {
  console.log("hello world2!");
};

btn.addEventListener("click", btnHandler);
btn.addEventListener("click", btnHandler2);

함수를 선언하고 넣어주기

둘 다 같은 결과가 나오지만 익명함수를 이용해 함수를 직접 넣어주는 방식으로 이벤트를 등록하게 되면 이벤트를 삭제할 때 문제가 발생한다. (이벤트를 등록할 때는 함수 표현식이나 함수 선언식으로 등록을 하자!)

Event Remove


addEventListener를 이용해 등록한 이벤트를 제거하는 방법은 다음과 같다. 삭제하고 싶은 이벤트가 있다면 등록했을 때와 동일하게 인자를 removeEventListener에 넣어주면 된다.

Element.removeEventListener("event_name", callback_function_value);

먼저 [방법 1 - 익명함수를 이용해 함수를 직접 넣어주기]에서 등록한 이벤트를 제거해 보자.

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

console.log("익명함수를 이용해 함수를 직접 넣은 이벤트 제거");
btn.addEventListener("click", function () {
  console.log("hello world!");
});

btn.addEventListener("click", function () {
  console.log("hello world2!");
});

btn.removeEventListener("click", function () {
  console.log("hello world!");
});

익명함수를 이용해 함수를 직접 넣은 이벤트 제거

hello world를 출력하는 이벤트가 지워지지 않았다. 이유는 간단하다.

두 함수는 서로 다르다

두 함수는 같지 않기 때문이다. 그래서 removeListener가 삭제하려고 해도 다른 함수이기 때문에 정상적으로 삭제가 되지 않는 것이다. 그래서 [방법 2 - 함수를 선언하고 넣어주기]로 이벤트를 등록하는걸 권장한다.

그러면 [방법 2 - 함수를 선언하고 넣어주기]로 등록한 이벤트를 제거해 보자!

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

console.log("함수를 선언하고 넣어준 이벤트 제거");
const btnHandler = function () {
  console.log("hello world!");
};

const btnHandler2 = function () {
  console.log("hello world2!");
};

btn.addEventListener("click", btnHandler);
btn.addEventListener("click", btnHandler2);

btn.removeEventListener("click", btnHandler);

함수를 선언하고 넣어준 이벤트 제거

이번에는 정상적으로 hello world를 출력하는 이벤트가 제거가 되었다. 

⚠️Warning⚠️

addEvnetListener를 등록할 때 두 번째 파라미터로 callback 함수를 받게 된다.
주의해야 할 점은 callback 함수를 호출하는게 아니라 함수 값 자체를 넣어 주어야 한다는 점이다.

다음과 같은 코드를 실행해 보자!

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

const event1 = function () {
  console.log("hello world!");
};
const event2 = function () {
  console.log("hello world2!");
};

btn.addEventListener("click", event1);
btn.addEventListener("click", event2());

addEventListener 인자에 callback 함수를 호출한 결과

페이지가 로드되면 event2함수가 동작하고 버튼을 클릭하면 이벤트가 even1만 등록이 되어있다. 인자에 함수를 호출하는 코드를 넣었기 때문에 제대로 이벤트가 등록되지 않았기 때문이다. 이 부분을 잘 기억해 두자!

마무리


오늘은 이벤트를 등록하고 제거하는 방법을 알아보았다. 이벤트를 등록할 때 콜백 함수 값을 넣어야 하는데 콜백 함수를 호출하는 경우가 없도록 주의하자!

 

'Javascript' 카테고리의 다른 글

[Javascript] Script 태그 위치  (0) 2022.11.11
[Javascript] Event Object  (0) 2022.11.10
[Javascript] 로또 번호 생성기  (0) 2022.11.08
[Javascript] DOM(Document Object Model)  (0) 2022.11.08
[Javascript] 객체  (0) 2022.11.04

구현해야 할 것


<HTML>

1. 로또 번호가 출력되는 페이지를 만든다.

2. 누르면 이벤트가 발생하는 번호 생성 버튼을 만든다.

<Javascript>

1. 번호 생성 버튼을 눌리면 로또 번호가 보이게 한다.

2. 랜덤한 숫자를 뽑는다.

3. 각 요소에 뽑은 숫자를 넣어준다.

구현


아래와 같이 HTML 파일을 작성해 주자!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #lotto > li {
        display: inline-block;
        font-size: 40px;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        text-align: center;
        line-height: 80px;
        margin: 30px;
        box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
      }
      #lotto.none {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>로또 번호 생성기</h1>
    <ul id="lotto" class="none">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <button id="btn">번호 생성</button>
    <script src="public/js/practice.js"></script>
  </body>
</html>

로또 번호 생성기 메인 페이지

번호 생성 버튼을 누르면 li 태그의 요소가 보이도록 Javascript 파일을 작성해보자!

const lottoElement = document.querySelector("#lotto");
const btnElement = document.querySelector("#btn");

function buttonEvent() {
  lottoElement.className = "";
}

btnElement.addEventListener("click", buttonEvent);

1. querySelector를 이용해 id가 lotto인 요소를 lottoElement 변수에 담는다.

2. querySelector를 이용해 id가 btn인 요소를 btnElement 변수에 담는다.

3. 이벤트 핸들러에 전달할 buttonEvent 함수를 작성한다. 이 함수는 호출이 되면 lottoElement의 className을 빈 문자열로 수정해 준다.

4. btnElement에 click 이벤트를 등록해 준다. 만약 사용자가 번호 생성 버튼을 누르게 되면 buttonEvent 함수를 호출해 lottoElement의 className을 빈 문자열로 바꾸어 주게 되고 그러면 lottoElement는 class 속서에 none 값이 사라져 화면에 보이게 될 것이다.

번호 생성 버튼을 누르기 전
번호 생성 버튼을 누른 후

이번에는 랜덤한 수를 생성하는 함수를 만들어 보자!

자바스크립트 내장 객체에 있는 Math 함수를 이용해서 랜덤 한 수를 생성해 보자!

 

Math.random()

이 함수는 0 이상 1 미만의 수를 랜덤하게 반환해 준다.

Math.random() 함수 사용 예시

이 함수에 10을 곱해주면 0 이상 10 미만의 수를 랜덤 하게 반환해 준다.

Math.random() 함수에 10을 곱한 결과

 

Math.floor()

이 함수는 인자 값에 가우스 기호 씌워서 반환을 해준다고 볼 수 있다. 소수점을 버린다고 볼 수도 있다.

Math.floor() 함수 사용 예시

그럼 이번에는 두 함수를 이용해 1부터 45까지 숫자를 랜덤하게 생성하는 함수를 작성해 보자!

function randomNum() {
  const ranNum = Math.floor(Math.random() * 45 + 1);
  return ranNum;
}

 

1. Math.random 함수를 이용해 0부터 1미만의 수를 랜덤 하게 생성한다.

2. 그 값에 45를 곱해 0부터 45미만의 랜덤 한 수를 생성할 수 있도록 한다.

3. 그 값에 1을 더해 1부터 46미만의 수를 생성할 수 있도록 한다.

4. Math.floor 함수를 이용해 소수점을 버려 최종적으로 1부터 45까지의 수를 생성할 수 있도록 한다.

5. 이 값을 ranNum 변수에 담아 return해 준다.

randomNum() 함수 실행 결과

이번에는 생성한 랜덤한 수를 li 태그 안에 넣어보자!

이전에 만들었던 buttonEvent 함수를 다음과 같이 수정해 주자!

const lottoElement = document.querySelector("#lotto");
const btnElement = document.querySelector("#btn");
const liList = document.querySelectorAll("#lotto > li"); // 추가

function buttonEvent() {
  lottoElement.className = "";

// 추가
  for (let i = 0; i < 6; i++) {
    liList[i].innerHTML = randomNum();
  }
}

btnElement.addEventListener("click", buttonEvent);

1. querySelectorAll로 li 요소들을 선택해 유사 배열 형태로 liList 변수에 담는다.

2. for문을 사용해 0번 인덱스 부터 5번 인덱스까지 liList 배열에 randomNum 함수를 호출한 결과를 innerHTML을 이용해 담는다.

번호 생성을 누르면 번호가 바뀌는 모습

일단은 구현하고자 하는 것은 다 구현이 되었다.

구현을 하고 보니 문제가 생겼다.

문제점


1. 진짜 로또 번호같은 색이 없음

2. 랜덤 번호에 중복값이 존재함

해결


이번에는 진짜 로또 번호 처럼 색을 입혀보자!

이전에 작성한 HTML 파일을 다음과 같이 수정해 주자!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #lotto > li {
        display: inline-block;
        font-size: 40px;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        text-align: center;
        line-height: 80px;
        margin: 30px;
        box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
      }
      #lotto.none {
        display: none;
      }
      /* 추가 */
      /* 1~10 */
      #lotto > li.a {
        background: yellow;
      }
      /* 11~20 */
      #lotto > li.b {
        background: blue;
      }
      /* 21~30 */
      #lotto > li.c {
        background: red;
      }
      /* 31~40 */
      #lotto > li.d {
        background: gray;
      }
      /* 41~45 */
      #lotto > li.e {
        background: green;
      }
      /* 추가 */
    </style>
  </head>
  <body>
    <h1>로또 번호 생성기</h1>
    <ul id="lotto" class="none">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <button id="btn">번호 생성</button>
    <script src="public/js/practice.js"></script>
  </body>
</html>

추가된 부분을 설명하면

1 ~ 10 : a라는 클래스명을 선택해 background를 노란색

11 ~ 20 : b라는 클래스명을 선택해 background를 파란색

21 ~ 30 : c라는 클래스명을 선택해 background를 빨간색

31 ~ 40 : d라는 클래스명을 선택해 background를 회색

41 ~ 45 : e라는 클래스명을 선택해 background를 녹색

으로 꾸며주는 코드이다.

그런데 꾸며야 할 li 태그 안에는 클래스가 존재하지 않는다.

그래서 자바스크립트를 이용해 번호에 맞게 클래스명을 넣어주어야 한다.

우선은 매개변수로 판별할 숫자와 범위를 받아서 그 숫자가 범위 안에 속하는지 판별하는 함수를 작성해 보자!

function betweenNum(num, min, max) {
  if (num >= min && num <= max) {
    return true;
  }
  return false;
}

1. num이라는 매개변수와 최소와 최대를 의미하는 min, max 매개변수를 받아 num 값이 min, max 사이 값이라면 true를 반환하고 그렇지 않다면 false를 반환해주는 함수이다.

betweenNum() 함수 실행 결과

우리는 li 태그에 클래스 속성을 적용해 주어야한다. 그러려면 생성된 랜덤 숫자가 어느 범위에 속하는지 판별을 해야 한다. 특정 범위에 속한다면 문자열을 리턴해주어서 그 값을 나중에 활용할 수 있는 함수를 작성해 보자!

function rangeNum(num) {
  if (betweenNum(num, 1, 10)) {
    return "a";
  }
  if (betweenNum(num, 11, 20)) {
    return "b";
  }
  if (betweenNum(num, 21, 30)) {
    return "c";
  }
  if (betweenNum(num, 31, 40)) {
    return "d";
  }
  if (betweenNum(num, 41, 45)) {
    return "e";
  }
}

1. num이라는 매개변수를 받아서 그 값을 판별하기 위해 위에 작성한 betweenNum 함수를 이용하였다. 만약 num 값이 2라면 첫 번째 if문에 걸리게 되고 betweenNum함수를 호출하게 되는데 이때 매개변수로 받았던 2를 첫 번째 인자로 넣어주고 1~10 사이에 있는지 확인하고 싶기 때문에 두 번째 인자에는 1, 마지막 인자에는 10을 넣어주었다. 

2. 만약 결과 값이 참이라면 문자열 a를 return하고 아니라면 다음 if 문으로 넘어가게 된다.

3. 우리는 이 값을 이용해 li 태그에 클래스 속성을 추가할 예정이다.

rangeNum() 함수 실행 결과

이제 li 태그에 클래스 속성을 추가해보자!

const lottoElement = document.querySelector("#lotto");
const btnElement = document.querySelector("#btn");
const liList = document.querySelectorAll("#lotto > li");

function buttonEvent() {
  lottoElement.className = "";

  for (let i = 0; i < 6; i++) {
    const num = randomNum(); // 추가
    liList[i].innerHTML = num; // 수정
    liList[i].className = rangeNum(num); // 추가
  }
}

btnElement.addEventListener("click", buttonEvent);

1. randomNum()에서 생성한 수를 여러번 사용하고 싶기 때문에 변수 num을 선언해 대입해 주었다.

2. liList에 innerHTML 속성에 num값을 대입해주었다.

3. liList에 className 속성에 rangeNum함수에 인자로 num을 넣어서 리턴된 값을 대입해 주었다.

번호 생성을 누르면 li의 class 속성이 변하는 모습

위에 그림에서 보이는 것처럼 로또 번호에 중복 값이 존재 한다. 이 중복 값을 제거해 보자!

나는 처음에 아래 처럼 코드를 작성해 보았다. 아래 코드는 1부터 45의 랜덤 한 수를 중복 없이 6개 생성해 주는 함수이다.

function randomNumCreate() {
  const randomNumArr = [randomNum()];
  for (let i = 0; i < 5; i++) {
    let temp = randomNum();
    for (let j = 0; j < randomNumArr.length; j++) {
      if (randomNumArr[j] === temp) {
        randomNumArr.splice(j, 1);
        i--;
      }
    }
    randomNumArr.push(temp);
  }
  return randomNumArr;
}

1. 배열에 랜덤한 값이 1개 들어있는 randomNumArr이라는 변수에 대입한다.

2. 6개의 로또 번호 중 1개는 이미 만들어져 있기 때문에 for문을 5번만 반복시킨다.

3. temp라는 변수에 랜덤 한 값을 대입한다.

4. randomNumArr의 배열 길이만큼 내부 for문을 돌려서 배열 안에 있는 값이 위에서 생성한 랜덤 값과 같다면 그 값을 지우고 i의 값을 1 줄여주어서 상위에 있는 for문이 한번 더 돌 수 있도록 해준다.

5. 내부 for문이 끝나면 randomNumArr 배열에 위에서 생성한 랜덤값을 넣어준다.

6. 최종적으로는 길이가 6인 randomNumArr 배열을 return 한다.

randomNumCreate() 함수 실행 결과

이 함수를 이용하기 위해 buttonEvent 함수를 수정하자!

const lottoElement = document.querySelector("#lotto");
const btnElement = document.querySelector("#btn");
const liList = document.querySelectorAll("#lotto > li");

function buttonEvent() {
  lottoElement.className = "";
  const ranNum = randomNumCreate(); // 추가

  for (let i = 0; i < 6; i++) {
    liList[i].innerHTML = ranNum[i]; // 수정
    liList[i].className = rangeNum(ranNum[i]); // 수정
  }
}

btnElement.addEventListener("click", buttonEvent);

1. randomNumCreate 함수의 결과 값을 ranNum 변수에 대입한다.

2. ranNum의 i 번째 요소를 liList의 i 번째 요소의 innerHTML 속성에 대입한다.

3. rangeNum함수를 이용해 ranNum의 i 번째 요소가 어느 구간에 속하는지 판별한 뒤 결괏값을 liList의 i 번째 요소의 className 속성에 대입한다.

최종 코드


전체 코드를 보면 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #lotto > li {
        display: inline-block;
        font-size: 40px;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        text-align: center;
        line-height: 80px;
        margin: 30px;
        box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.5);
      }
      #lotto.none {
        display: none;
      }
      /* 1~10 */
      #lotto > li.a {
        background: yellow;
      }
      /* 11~20 */
      #lotto > li.b {
        background: blue;
      }
      /* 21~30 */
      #lotto > li.c {
        background: red;
      }
      /* 31~40 */
      #lotto > li.d {
        background: gray;
      }
      /* 41~45 */
      #lotto > li.e {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1>로또 번호 생성기</h1>
    <ul id="lotto" class="none">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
    <button id="btn">번호 생성</button>
    <script src="public/js/practice.js"></script>
  </body>
</html>
const lottoElement = document.querySelector("#lotto");
const btnElement = document.querySelector("#btn");
const liList = document.querySelectorAll("#lotto > li");

function randomNum() {
  const ranNum = Math.floor(Math.random() * 45 + 1);
  return ranNum;
}

function betweenNum(num, min, max) {
  if (num >= min && num <= max) {
    return true;
  }
  return false;
}

function rangeNum(num) {
  if (betweenNum(num, 1, 10)) {
    return "a";
  }
  if (betweenNum(num, 11, 20)) {
    return "b";
  }
  if (betweenNum(num, 21, 30)) {
    return "c";
  }
  if (betweenNum(num, 31, 40)) {
    return "d";
  }
  if (betweenNum(num, 41, 45)) {
    return "e";
  }
}

function randomNumCreate() {
  const randomNumArr = [randomNum()];
  for (let i = 0; i < 5; i++) {
    let temp = randomNum();
    for (let j = 0; j < randomNumArr.length; j++) {
      if (randomNumArr[j] === temp) {
        randomNumArr.splice(j, 1);
        i--;
      }
    }
    randomNumArr.push(temp);
  }
  return randomNumArr;
}

function buttonEvent() {
  lottoElement.className = "";
  const ranNum = randomNumCreate();

  for (let i = 0; i < 6; i++) {
    liList[i].innerHTML = ranNum[i];
    liList[i].className = rangeNum(ranNum[i]);
  }
}

btnElement.addEventListener("click", buttonEvent);

최종 결과물

마무리


 

추가적으로 정렬 기능이 필요할 것 같다. 그리고 randomNumCreate 함수도 조금 더 다듬으면 좋을 것 같다.

시간이 되면 수정한 결과물도 올릴 예정이다.

'Javascript' 카테고리의 다른 글

[Javascript] Event Object  (0) 2022.11.10
[Javascript] Event (Add, Remove)  (0) 2022.11.09
[Javascript] DOM(Document Object Model)  (0) 2022.11.08
[Javascript] 객체  (0) 2022.11.04
[Javascript] 피보나치 수열 - 알고리즘  (0) 2022.11.03

Window 객체란?


DOM을 설명하기 전에 먼저 Window라는 객체를 알아야 한다. Window 객체란 브라우저의 창을 대변한다고 볼 수 있다. Javascript에서 최상단에 존재하는 객체로 이 객체 안에는 수많은 프로퍼티들이 존재하는데 Javascript의 거의 모든 내장 객체, 내장 함수들이 Window  객체에 속해 있다. Window 객체는 Javascript 코드의 어느 곳에서나 항상 접근 할 수 있는 객체로 전역 객체(Global Object)라고도 부른다.

window 객체안에 수 많은 객체와 메소드가 존재한다.

사실 우리가 자주 사용하는 console.log도 window.console.log로 사용해야 하지만 무엇을 사용하든 결국 윈도우 객체 내부의 것이기 때문에 window.을 생략해도 된다. 그리고 우리가 선언한 변수나 함수도 window 객체 안에 등록이 된다.

function a() {
  console.log("hello world");
}
var aa = "hello";

사용자가 선언한 변수나 함수도 window 객체 안에 등록이 된 모습

그렇다면 DOM이란 무엇일까?

DOM이란?


문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. DOM 소개 - MDN

 DOM이란 window객체 안에 존재하는 document라는 객체를 말한다. 이 객체는 HTML 문서 전체를 객체로 표현한 것이다. 

그리고 이 객체안에는 문서의 구조나 스타일, 내용 등을 변경 할 수 있는 메소드들이 존재한다. 메소드들은 브라우저마다 표준으로 제공하는 기능 이외에도 추가적인 기능을 제공하는 경우도 있다.

그렇다면 DOM은 브라우저에서만 사용할 수 있을까?

about:blank 페이지의 요소들
document 객체를 출력해본 결과 about:blank 페이지의 요소들이 출력된다.
document 객체 자체를 출력하고 싶은 경우 dir 메소드를 사용한다.
Node.js에서 document 객체를 출력해본 결과 document가 정의되어 있지 않다고 출력된다.

Document 객체는 Javascript의 요소가 아니라 브라우저에서 제공하는 Window 객체의 한 요소이다. 그래서 Node.js에서는 출력이 되지 않는다.

😊Tip
log 메소드는 파라미터로 전달받은 값을 위주로 출력하는 반면, dir 메소드는 객체의 속성을 좀 더 자세하게 출력해준다.
log 메소드는 여러 값을 쉼표로 구분해서 전달하면 전달받은 모든 값을 출력해준다.
dir 메소드는 여러 값을 전달하더라도 첫 번째 값만 출력해준다.
값에 좀 더 중점을 둔 log 메소드는 대상을 HTML 형태로 출력해주고, 객체의 속성에 좀 더 중점을 둔 dir 메소드는 대상을 객체 형태로 출력해준다.

그렇다면 이번에는 DOM을 조작해 보자!

DOM 조작


일단 아래와 같이 HTML 파일을 작성을 한 후 파일을 열어보자!

  <body>
    <h1 id="title"></h1>
    <span>span2</span>
    <h2 id="DOM-title">
      DOM
      <span class="sp">span1</span>
      <span class="sp">span1</span>
      <span class="sp">span1</span>
    </h2>
    <script src="public/js/practice.js"></script>
  </body>

위에 작성한 HTML 코드를 실행한 결과

DOM을 조작하기 위해서는 먼저 조작하고 싶은 HTML 요소부터 선택해야 한다. 선택하는 방법은 다음과 같다.

window.document.getElementById()


이 메소드는 id 속성 이름을 인자로 받아서 해당 id 속성을 가진 요소를 가져오는 메소드이다.

인자값으로는 id 속성 이름을 string으로 전달해 주어야 한다.

Javascript 파일에 다음과 같이 작성해보자!

const domTitle = document.getElementById("DOM-title"); // DOM-title이라는 id를 가진 요소 선택
console.log(domTitle);

DOM-title이라는 id 속성을 가진 HTML의 요소가 반환된 모습

window.document.getElementsByTagName()


이 메소드는 HTML의 태그 이름을 인자로 받아서 해당하는 태그 전체를 선택하는 메소드이다.

인자값으로는 태그 이름을 string으로 전달해 주어야 한다.

이 메드에는 Element에 s가 붙어 있는데 태그 이름으로 요소를 찾는 경우 여러 개의 요소가 선택될 수 있기 때문에 Element에 s가 붙어 있다. 그리고 실행결과 유사배열인 HTMLCollection을 리턴한다는 점도 기억해두자! (배열인데 요소 내용들이 객체)

Javascript 파일에 다음과 같이 작성해보자!

const spanList = document.getElementsByTagName("span"); // span이라는 이름을 가진 태그 전부 선택
console.log(spanList);

HTML에 존재하는 span 태그가 전부 선택되어 HTMLCollection으로 반환된 모습

window.document.getElementsByClassName()


이 메소드는 class 속성 이름을 인자로 받아 해당 class 속성을 가진 요소 전체를 선택하는 메소드이다.

인자값으로는 class 속성 이름을 string으로 전달해 주어야 한다.

이 메드에도 Element에 s가 붙어 있는데 class 속성으로 요소를 찾는 경우 여러 개의 요소가 선택될 수 있기 때문에 Element에 s가 붙어 있다. 그리고 실행결과 유사배열인 HTMLCollection을 리턴한다는 점도 기억해두자! (배열인데 요소 내용들이 객체)

Javascript 파일에 다음과 같이 작성해보자!

const spList = document.getElementsByClassName("sp"); // sp라는 class명을 가진 요소 전부 선택
console.log(spList);

sp라는 class 속성을 가진 HTML 요소가 전부 선택되어 HTMLCollection으로 반환된 모습

HTMLCollection에 들어가는 요소들의 순서는 HTML 태그에서 봤을 때 깊이와는 상관없이 무조건 위에서부터 차례대로 들어간다!

아래와 같이 HTML 파일을 작성을 한 후 파일을 열어보자!

  <body>
    <h1 id="title"></h1>
    <ul>
      <div>
        <div>
          <div><li class="ls ls1">list1</li></div>
        </div>
      </div>
      <li class="ls ls2">list2</li>
      <li class="ls ls3">list3</li>
      <li class="ls ls4">list4</li>
      <li class="ls ls5">list5</li>
    </ul>
    <script src="public/js/practice.js"></script>
  </body>

위에 작성한 HTML 코드를 실행한 결과

const lsList = document.getElementsByClassName("ls");
console.log(lsList);

 

HTML 태그에서 봤을 때 깊이와는 상관없이 위에서부터 HTMLCollection에 들어간 모습

유사배열(Array-Like Object)이란?
위와 같이 배열과 유사하게 생긴 객체를 말한다.
0부터 시작하는 숫자 형태의 index가 존재하고 length 속성이 존재한다.
하지만 배열의 기본 메소드는 사용할 수 없다. (for ... of 문은 사용 가능)

index 존재/length 속성 존재/배열은 아님

const lsList = document.getElementsByClassName("ls");

for (let element of lsList) {
  console.log(element);
}

HTMLCollection에서 for ... of 문

그런데 만약 다음과 같은 HTML에서 h2 안에 있는 span을 선택하려면 어떻게 해야 할까?

  <body>
    <h1 id="title"></h1>
    <span>span2</span>
    <h2 id="DOM-title">
      DOM
      <span>span1-1</span>
      <span>span1-2</span>
      <span>span1-3</span>
    </h2>
    <script src="public/js/practice.js"></script>
  </body>

위에 작성한 HTML 코드를 실행한 결과

먼저 h2를 선택한 다음 그 값을 이용해 span을 선택하면 된다.

const domTitle = document.getElementById("DOM-title");
const spList = domTitle.getElementsByTagName("span");

for (let i = 0; i < spList.length; i++) {
  console.log(spList[i]);
}

span1-1 ~ span1-3까지 출력된 모습

하지만 이렇게 쓰면 코드가 길어진다. 그렇다면 조금 더 편리한 방법이 없을까?

 

querySelector를 사용하면 된다!

querySelector는 CSS 선택자를 이용해 요소를 선택할 수 있다.

일단 다음과 같이 HTML 파일을 작성해 보자!

<body>
    <h1 id="title"></h1>
    <ul>
      <div>
        <li class="ls ls1">list1</li>
      </div>
      <li class="ls ls2">list2</li>
      <li class="ls ls3">list3</li>
      <li class="ls ls4">list4</li>
      <li class="ls ls5">list5</li>
    </ul>
    <script src="public/js/practice.js"></script>
 </body>

위에 작성한 HTML 코드를 실행한 결과

window.document.querySelector()


이 메소드는 선택하고 싶은 태그나 id, class 속성을 CSS 선택자를 사용하듯이 인자값으로 넣어주면 된다.

만약 ul 태그 안에 div 태그안에 li 태그를 가진 요소를 선택하고 싶으면 다음과 같이 코드를 작성해 주면 된다.

const qs = document.querySelector("ul > div > li");
console.log(qs);

ul 태그 안에 div 태그안에 li 태그를 가진 요소를 선택한 겱과

만약 ul 태그 안에 class가 ls5인 요소를 선택하고 싶으면 다음과 같이 코드를 작성해 주면 된다.

const qs = document.querySelector("ul > .ls5");
console.log(qs);

ul 태그 안에 class가 ls5인 요소를 선택한 결과

그렇다면 ls라는 class 이름을 가진 요소들을 선택하려면 어떻게 해야할까?

window.document.querySelectorAll()


이 메소드는 선택하고 싶은 태그나 id, class 속성을 CSS 선택자를 사용하듯이 인자값으로 넣어주면 된다.

이 메소드에는 All이 붙어 있는데 여러 개의 요소를 선택하고 싶을때 사용하는 메소드라 그렇다. 실행결과는 유사배열인 NodeList를 리턴한다! (배열인데 요소 내용들이 객체)

ls라는 class 이름을 가진 요소들을 선택하려면 다음과 같이 코드를 작성해 주면 된다.

const lsList = document.querySelectorAll(".ls");
console.log(lsList);

ls라는 class 이름을 가진 요소들을 선택한 결과

만약 ls라는 class 이름을 가진 요소들의 텍스트를 수정하고 싶다면 어떻게 해야될까?

element.innerHTML

이 속성은 요소 안에 있는 HTML을 문자열로 리턴해 준다.

innerHTML에 값을 대입하면 값이 덮어씌워진다.

일단 ls라는 class 이름을 가진 요소들이 어떤 값을 가지고 있는지 확인해 보자!

const lsList = document.querySelectorAll(".ls");

for (let i = 0; i < lsList.length; i++) {
  console.log(lsList[i].innerHTML);
}

ls라는 class 이름을 가진 요소들을 innerHTML을 이용해 확인한 결과

이 요소들을 1-1 ~ 1-5로 한 번 바꿔 보자!

const lsList = document.querySelectorAll(".ls");

for (let i = 0; i < lsList.length; i++) {
  lsList[i].innerHTML = `list1-${i + 1}`;
  console.log(lsList[i].innerHTML);
}

ls라는 class 이름을 가진 요소들을 innerHTML을 이용해 수정해본 결과
ls라는 class 이름을 가진 요소들을 innerHTML을 이용해 수정해본 결과

잘 변경된걸 확인 할 수 있다.

마무리


우리가 만든 함수나 변수도 window 객체안에 등록이 되는걸 오늘 처음 알았다.

브라우저를 잘 다루려면 DOM에 대해 조금 더 자세히 알아봐야 겠다.

참고

 

 

 

 

 

 

'Javascript' 카테고리의 다른 글

[Javascript] Event (Add, Remove)  (0) 2022.11.09
[Javascript] 로또 번호 생성기  (0) 2022.11.08
[Javascript] 객체  (0) 2022.11.04
[Javascript] 피보나치 수열 - 알고리즘  (0) 2022.11.03
[Javascript] 형 변환  (0) 2022.11.03

[Javascript] 객체

CloudCoke
|2022. 11. 4. 17:41

객체란?


관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합 - JavaScript 객체 기본 [MDN]

객체는 실제로 존재하는 사물로 이해할 수 있다. 

예를 들어 강아지를 객체라고 한다면

프로퍼티는 이름, 나이, 무게 등이 들어 갈 수 있다.

메소드는 앉아, 일어서, 기다려 등 강아지에게 시킬 수 있는 행동들이 들어갈 수 있다.

const siba = {
  name: "siba",
  age: 1,
  weight: "5kg",
  alive: true,

  sitDown: function () {},
  standUp: function () {},
  wait: function () {},
};

위와 같이 객체 안에는 어떤 데이터 타입이든 들어갈 수 있다. 

그렇다면 속성과 메소드는 정확히 무엇일까?

속성(Property)


Object = { Property_Name : Property_Value }

속성 이름(Property Name)과 속성 값(Property Value) 형식으로 구성되는 데이터이다.

속성 이름을 작성할 때 나름의 규칙이 있다.

1. 첫 번째 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작해야 한다.
2. 띄어쓰기는 지양한다.
3. 하이픈(-)도 지양한다. 

위 사항을 어기고 싶으면 속성 이름을 따옴표로 감싸 주면 된다.

const user = {
	name: "cloudcoke",
    bornYear: 1997,
    "content type": "text/javascript",
    other: {
    	hello: "world!",
    }
}

 

객체의 속성 값을 사용하고 싶다면 두 가지 방법이 있다.

점 표기법

Object.Property_Name
console.log(user.name)

console.log(user.bornYear)

console.log(user.other.hello)

점 표기법으로 속성 값 출력

점 표기법으로는 속성 이름 작성 규칙을 어긴 속성은 사용하지 못한다.

console.log(user.content type)

console.log(user."content type")

속성 이름 작성 규칙을 어긴 속성을 점 표기법으로 출력해 보려고 했을때

그렇다면 이런 속성들은 어떻게 사용할 수 있을까?

대괄호 표기법

Object['Property_Name']
console.log(user['name'])

console.log(user['bornYear'])

console.log(user['content type'])

console.log(user['other']['hello'])

대괄호 표기법으로 속성 값 출력

대괄호 표기법을 사용하면 속성 이름 작성 규칙을 어긴 속성들도 사용할 수 있다.

[번외] 존재하지 않는 속성에 접근

만약 존재하지 않는 속성에 접근하면 어떻게 될까?

console.log(user.hi)

console.log(user['hi'])

존재하지 않는 속성에 접근한 결과

위와 같이 undefined가 출력되는 걸 볼 수 있다.

메소드(Method)


객체 안에 들어가 있는 함수를 말한다.

객체 안에는 어떠한 값이라도 들어갈 수 있는데 함수도 들어갈 수 있다.

예를 들어 우리가 자주 사용하는 console.log도 메소드이다.

console.log("Hello")

console이라는 객체 안에 log라는 함수에 인자로 "Hello"를 전달해 주면 콘솔에 "Hello"라는 문자열을 출력해 주는 것이다. (실제 동작은 다를 수 있음)

그렇다면 실제로 메소드를 한 번 만들어 보자!

const greeting = {
  methodName: "greeting",
  working: true,
  sayHello: function (name) {
    console.log(`Hello ${name}`);
  },
  sayBye: function (name) {
    console.log(`Bye ${name}`);
  },
};

인사를 하는 메소드를 작성해 보았다.

한번 메소드를 사용해 보자!

greeting.sayHello("cloudcoke")

greeting.sayBye("cloudcoke")

점 표기법으로 메소드 실행

greeting["sayHello"]("cloudcoke")

greeting["sayBye"]("cloudcoke")

대괄호 표기법으로 메소드 실행

두 방법 모두 잘 작동한다.

객체 생성


객체를 생성하는 3가지 방법을 알아보자!

1. 객체 생성자 함수 사용하기

첫 번째 방법은 new 키워드를 사용해 객체를 생성하는 방법이다.

const user = new Object();
console.log(user)

객체 생성자 함수를 사용해 빈 객체 생성하기

2. 객체 리터럴 방식 사용하기

두 번째 방법은 { }를 사용해 객체를 생성하는 방법이다.

const user = {}
console.log(user)

객체 리터럴 방식을 사용해 빈 객체 생성하기

이 방식이 제일 간편하고 안전하기 때문에 많이 사용한다고 한다!

3. 생성자 함수 사용하기

객체를 찍어내는 함수다.

사용자가 함수 안에 속성을 미리 정의해 놓고 그 함수를 new 키워드를 사용해 객체로 생성한다.

function User() {}

const user = new User()
console.log(User)

생성자 함수를 사용해 빈 객체 생성하기

객체 속성 다루기


this

객체 내부에는 this라는 특수한 키워드가 존재한다.

this 키워드는 지금 동작하고 있는 코드를 가진 객체를 가리킨다.

const person = {
  firstName: "cloud",
  lastName: "coke",
  greeting: function () {
    console.log(`Hi I'm ${this.firstName}${this.lastName}`);
  },
};
person.greeting()

person 객체의 greeting 메소드를 실행한 결과

위 코드에서 this는 person을 가리키고 있는 것이다.

그리고 this 키워드는 객체가 각각 다른 이름으로 인스턴스화 되어도 언제나 정확한 값을 사용하게 해준다고 한다.

const person1 = {
  name: "cloud",
  greeting: function () {
    console.log(`Hi I'm ${this.name}`);
  },
};

const person2 = {
  name: "coke",
  greeting: function () {
    console.log(`Hi I'm ${this.name}`);
  },
};
person1.greeting()

person2.greeting()

인스턴스화 된 객체의 greeting 메소드를 실행한 결과

두 객체의 메소드는 동일하지만 this가 가리키는 객체는 다른걸 알 수 있다. person1의 greeting 메소드는 person1의 name 속성 값인 cloud를 출력하고 person2의 greeting 메소드는 person2의 name 속성 값인 coke를 출력하고 있다.

객체 속성 추가

이번에는 객체에 속성을 추가해 보자!

일단 빈 객체를 생성하겠다.

const foo = {}

빈 객체 생성

빈 객체에 name 속성과 bornYear 속성을 추가하고 값 넣어보자!

foo.name = "cloudcoke"

foo['bornYear'] = 1997

foo 객체에 name 속성과 bornYear 속성을 추가한 결과

잘 들어간 걸  확인할 수 있다.

그럼 이번에는 속성 값을 수정해보자!

객체 속성 수정

foo 객체의 name 속성 값을 "구름맛콜라"로 수정해주고 bornYear 속성을 2022로 수정해주겠다.

foo.name = "구름맛콜라"

foo['bornYear'] = 2022

foo 객체의 name 속성 값과 bornYear 속성 값을 수정한 결과

객체 속성 존재 여부 확인

in 연산자를 이용해 객체 속성이 존재하는지 확인해보자!

"name" in foo

"bornYear" in foo

"age" in foo

in 키워드를 이용해 객체안에 속성이 존재하는지 확인한 결과

객체 속성 제거

이번에는 delete 키워드를 이용하여 객체의 속성 제거해서 빈 객체를 만들어 보자!

delete foo.name

delete foo['bornYear']

delete 키워드를 이용해 객체 속성을 제거한 결과

깨끗하게 지워졌다.

마무리


객체를 배우기 전까지는 자바스크립트는 객체로 이루어져 있다는 말이 와닿지 않았는데 이제 왜 그런지 알 것 같다.

참조

피보나치 수열이란?


수학에서 피보나치 수(영어: Fibonacci numbers)는 첫째 및 둘째 항이 1이며 그 뒤의 모든 항은 바로 앞 두 항의 합인 
수열이다. 처음 여섯 항은 각각 1, 1, 2, 3, 5, 8이다. 편의상 0번째 항을 0으로 두기도 한다.
출처 - 위키백과

피보나치 수열 구현


피보나치 수열을 구현하는 방식은 다양하지만 여기서는 재귀 함수를 이용한 방식과 재귀 함수의 문제점을 개선한 메모이제이션(Memoization) 기법을 사용할 예정이다.

구현해야 할 것
1. 인자에 n을 넣었을 때 피보나치 수열의 n 번째 값을 return [ 1, 1, 2, 3, 5, 8, 13, 21, 34, 55 ... ]
2. n = 1일때와 n = 2일 때는 1을 return

1. 재귀 함수를 이용해 피보나치 수열 구현

먼저 재귀 함수를 이용해 피보나치 수열을 구현해 보자.

피보나치 수열의 n번째 항의 값은 (n-1) 번째 항과 (n-2) 번째 항의 합과 같다.

그리고 n=1일때와 n=2일 때는 값이 이다.

function fibo(n) {
  if (n === 1 || n === 2) {
    return 1;
  }
  return fibo(n - 1) + fibo(n - 2);
}

처음에는 위와 같이 코드를 작성했다.

n=1일 때와 n=2일 때는 조건문을 사용해 1을 return 해주고 그렇지 않다면 (n-1)항과 (n-2) 번째 항을 더한 값을 return 하도록 작성했다.

하지만 이 코드에는 문제가 있다.

바로 같은 계산을 또 한다는 것이다.

console.log(fibo(6));
  • fibo(1) => 1
  • fibo(2) => 1
  • fibo(3) => fibo(2) + fibo(1)
  • fibo(4) => fibo(3) + fibo(2) => fibo(2) + fibo(1) + fibo(2)
  • fibo(5) => fibo(4) + fibo(3) => fibo(3) + fibo(2) + fibo(2) + fibo(1) => fibo(2) + fibo(1) + fibo(2) + fibo(2) + fibo(1)
  • fibo(6) => fibo(5) + fibo(4) => fibo(4) + fibo(3) + fibo(3) + fibo(2) => fibo(3) + fibo(2) + fibo(2) + fibo(1) + fibo(2) + fibo(1) + fibo(2) => fibo(2) + fibo(1) + fibo(2) + fibo(2) + fibo(1) + fibo(2) + fibo(1) + fibo(2)

보이는 것과 같이 같은 계산이 반복되고 n의 값이 클 수록 반복되는 부분이 많아지고 있다.

그렇다면 이미 저장한 값은 저장해 놓으면 어떨까?

2. 메모이제이션 기법을 사용해 피보나치 수열 구현

메모이제이션(Memoization) 기법이란?
- 한 번 구한 결과를 메모리 공간에 메모해 두고 같은 식을 다시 호출하면 메모한 결과를 그대로 가져오는 기법이다.
- 다이나믹 프로그래밍을 구현하는 방법 중 한 종류

메모이제이션 기법을 사용해 반복되는 값은 저장해 놓았다가 그 값이 필요할 때 사용하면 조금 더 속도가 빨라질 것 같다.

let memo = {};

function fibo(n) {
  let result;

  if (n in memo) {
    result = memo[n];
  } else {
    if (n == 1 || n == 2) {
      result = 1;
    } else {
      result = fibo(n - 1) + fibo(n - 2);
    }
    memo[n] = result;
  }
  return result;
}

재귀 함수 코드를 다음과 같이 수정해보았다.

일단 값을 저장할 memo라는 객체를 전역으로 선언하고 함수를 선언했다.

함수를 살펴보면 이전 코드와 유사하다.

다른 점이라면 만약 객체 memo에  n이라는 속성명이 존재한다면 result에 memo 객체의 n이라는 속성명을 가진 속성 값을 대입해 준다는 점이다.

만약 속성명이 존재하지 않는다면 재귀함수 코드를 실행한 다음 결과 값을 result에 대입해준 후 memo객체의 n이라는 속성명으로 result 값을 대입해준다.

console.log(fibo(6));
console.log(memo);

메모이제이션 실행 결과

두 방식의 실행 속도 차이


두 방식의 속도가 어느정도 차이나는 지 한번 확인해 보자

n값이 클 수록 차이가 많이 난다.

console.time("피보나치 - 재귀함수");
function fibo(n) {
  if (n === 1 || n === 2) {
    return 1;
  }
  return fibo(n - 1) + fibo(n - 2);
}

fibo(50);
console.timeEnd("피보나치 - 재귀함수");

재귀함수로 피보나치 수열의 50번째 값을 구한 시간

console.time("피보나치 - 메모이제이션");
let memo = {};

function fibo(n) {
  let result;

  if (n in memo) {
    result = memo[n];
  } else {
    if (n == 1 || n == 2) {
      result = 1;
    } else {
      result = fibo(n - 1) + fibo(n - 2);
    }
    memo[n] = result;
  }
  return result;
}

fibo(50);
console.timeEnd("피보나치 - 메모이제이션");

엄청난 속도의 차이를 볼 수 있다!

마무리


 

어떤 코드가 더 좋은 코드인가는 상황에 따라 다를 수 있다.

n 값이 크지 않다면 두 코드의 속도 차이는 거의 없었다. (오히려 재귀 함수 코드가 더 빠를 때도 있었다.)

n 값이 작은 상황에서는 읽기 쉽고 이해하기 쉬운 재귀함수를 이용한 코드가 더 좋다고 생각한다.

하지만 n 값이 커지게 되면 속도 차이가 매우 벌어지는 결과를 볼 수 있듯이 n 값이 큰 상황에서는 메모이제이션 기법을 사용한 코드가 더 좋다고 생각한다.

결국 좋은 코드를 작성하려면 상황을 잘 파악해야 된다고 생각한다.

 

'Javascript' 카테고리의 다른 글

[Javascript] DOM(Document Object Model)  (0) 2022.11.08
[Javascript] 객체  (0) 2022.11.04
[Javascript] 형 변환  (0) 2022.11.03
[Javascript] 다양한 함수 선언 방법  (0) 2022.11.02
[Javascript] 함수  (0) 2022.11.01

[Javascript] 형 변환

CloudCoke
|2022. 11. 3. 15:38

형 변환

  • NaN : Not a Number
  • NaN은 다른 모든 값과 비교 했을 때에도 같지 않고, 다른 NaN과도 같지 않다.
let string = "ryzen";
let num = 9;
let bool = true;

// 숫자형으로 형 변환
console.log(Number(string)); // NaN
console.log(Number(bool)); // 1

// 문자열로 형 변환
console.log(String(num)) // 9
console.log(String(bool)) // true

// 불린형으로 형 변환
console.log(Boolean(string)) // true
console.log(Boolean(num)) // true

변수들을 형 변환해 출력한 결과

자동 형 변환

+ 연산 시 자동 형 변환

  • + 연산은 문자열을 연결하는 기능이 강함
  • 문자열 + 문자열을 제외한 데이터 타입 ⇒ 문자열로 형 변환 후 + 연산
  • 문자열을 제외한 데이터 타입 + 문자열을 제외한 데이터 타입 ⇒ 숫자형으로 형 변환 후 + 연산
  • NaN+ 연산을 하면 NaN 이 나옴
let string = "ryzen";
let num = 9;
let bool = true;

console.log(string + num); // ryzen + 9 => ryzen9
console.log(string + bool); // ryzen + true => ryzentrue
console.log(num + bool); // 9 + 1 => 10

변수들을 + 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("NaN과 + 연산");
console.log(NaN + string); // NaN + ryzen => NaNryzen
console.log(NaN + num); // NaN + 9 => NaN
console.log(NaN + bool); // NaN + 1 => NaN

변수들을 NaN과 + 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("undefined와 + 연산");
console.log(undefined + string); // undefined + ryzen => undefinedryzen
console.log(undefined + num); // NaN + 9 => NaN 
console.log(undefined + bool); // NaN + 1 => NaN

변수들을 undefined와 + 연산한 결

let string = "ryzen";
let num = 9;
let bool = true;

console.log("null과 + 연산");
console.log(null + string); // null + ryzen => nullryzen
console.log(null + num); // 0 + 9 => 9
console.log(null + bool); // 0 + 1 => 1

변수들을 null과 + 연산

- * / % **연산 시 자동 형 변환

  • 연산 되는 두 값을 모두 숫자형으로 변환한 후 연산
  • NaN- * / % **연산을 하면 NaN이 나옴

- 연산 시 자동 형 변환

// - 연산 
let string = "ryzen";
let num = 9;
let bool = true;

console.log(string - num); // NaN - 9 => NaN
console.log(string - bool); // NaN - 1 => NaN
console.log(num - bool); // 9 - 1 => 8

변수들을 - 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("NaN과 - 연산");
console.log(NaN - string); // NaN - NaN => NaN
console.log(NaN - num); // NaN - 9 => NaN
console.log(NaN - bool); // NaN - 1 => NaN

변수들을 NaN과 - 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("undefined와 - 연산");
console.log(undefined - string); // NaN - NaN => NaN
console.log(undefined - num); // NaN - 9 => NaN 
console.log(undefined - bool); // NaN - 1 => NaN

변수들을 undefined와 - 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("null과 - 연산");
console.log(null - string); // 0 - NaN => NaN
console.log(null - num); // 0 - 9 => -9
console.log(null - bool); // 0 - 1 => -1

변수들을 null과 - 연산한 결과

* 연산 시 자동 형 변환

// * 연산
let string = "ryzen";
let num = 9;
let bool = true;

console.log(string * num); // NaN * 9 => NaN
console.log(string * bool); // NaN * 1 => NaN
console.log(num * bool); // 9 * 1 => 9

변수들을 * 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("NaN과 * 연산");
console.log(NaN * string); // NaN * NaN => NaN
console.log(NaN * num); // NaN * 9 => NaN
console.log(NaN * bool); // NaN * 1 => NaN

변수들을 NaN과 * 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("undefined와 * 연산");
console.log(undefined * string); // NaN * NaN => NaN
console.log(undefined * num); // NaN * 9 => NaN 
console.log(undefined * bool); // NaN * 1 => NaN

변수들을 undefined와 * 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("null과 * 연산");
console.log(null * string); // 0 * NaN => NaN
console.log(null * num); // 0 * 9 => 0
console.log(null * bool); // 0 * 1 => 0

변수들을 null과 * 연산한 결과

/ 연산 시 자동 형 변환

// / 연산
let string = "ryzen";
let num = 9;
let bool = true;

console.log(string / num); // NaN / 9 => NaN
console.log(string / bool); // NaN / 1 => NaN
console.log(num / bool); // 9 / 1 => 9

변수들을 / 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("NaN과 / 연산");
console.log(NaN / string); // NaN / NaN => NaN
console.log(NaN / num); // NaN / 9 => NaN
console.log(NaN / bool); // NaN / 1 => NaN

변수들을 NaN과 / 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("undefined와 / 연산");
console.log(undefined / string); // NaN / NaN => NaN
console.log(undefined / num); // NaN / 9 => NaN 
console.log(undefined / bool); // NaN / 1 => NaN

변수들을 undefined와 / 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("null과 / 연산");
console.log(null / string); // 0 / NaN => NaN
console.log(null / num); // 0 / 9 => 0
console.log(null / bool); // 0 / 1 => 0

변수들을 null과 / 연산한 결과

% 연산 시 자동 형 변환

// % 연산
let string = "ryzen";
let num = 9;
let bool = true;

console.log(string % num); // NaN % 9 => NaN
console.log(string % bool); // NaN % 1 => NaN
console.log(num % bool); // 9 % 1 => 0

변수들을 % 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("NaN과 % 연산");
console.log(NaN % string); // NaN % NaN => NaN
console.log(NaN % num); // NaN % 9 => NaN
console.log(NaN % bool); // NaN % 1 => NaN

변수들을 NaN과 % 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("undefined와 % 연산");
console.log(undefined % string); // NaN % NaN => NaN
console.log(undefined % num); // NaN % 9 => NaN 
console.log(undefined % bool); // NaN % 1 => NaN

변수들을 undefined와 % 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("null과 % 연산");
console.log(null % string); // 0 % NaN => NaN
console.log(null % num); // 0 % 9 => 0
console.log(null % bool); // 0 % 1 => 0

변수들을 null과 % 연산한 결과

** 연산 시 자동 형 변환

// % 연산
let string = "ryzen";
let num = 9;
let bool = true;

console.log(string ** num); // NaN ** 9 => NaN
console.log(string ** bool); // NaN ** 1 => NaN
console.log(num ** bool); // 9 ** 1 => 9

변수들을 ** 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("NaN과 ** 연산");
console.log(NaN ** string); // NaN ** NaN => NaN
console.log(NaN ** num); // NaN ** 9 => NaN
console.log(NaN ** bool); // NaN ** 1 => NaN

변수들을 NaN과 ** 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("undefined와 ** 연산");
console.log(undefined ** string); // NaN ** NaN => NaN
console.log(undefined ** num); // NaN ** 9 => NaN 
console.log(undefined ** bool); // NaN ** 1 => NaN

변수들을 undefined와 ** 연산한 결과

let string = "ryzen";
let num = 9;
let bool = true;

console.log("null과 ** 연산");
console.log(null ** string); // 0 ** NaN => NaN
console.log(null ** num); // 0 ** 9 => 0
console.log(null ** bool); // 0 ** 1 => 0

변수들을 null과 ** 연산한 결과

비교 연산 시 자동 형 변환

관계 비교 연산 시 자동 형 변환

  • < <= > >= 연산 시 자동 형 변환
  • 특별한 경우를 제외하면 두 값 모두 숫자형으로 변환 후 연산
console.log(1 < "2") // 1 < 2 => true
console.log(2 <= true) // 2 <= 1 => false
console.log("3" > false) // 3 > 0 => true
console.log("four" >= 1) // NaN >= 1 => false

관계 비교 연산을 한 결과

같음 비교 연산 시 자동 형 변환

  • === !== == != 연산 시 자동 형 변환
  • **일치 비교(=== !==)**는 형 변환이 일어나지 않음
  • **동등 비교(== !=)**는 숫자형으로 형 변환이 일어남
// 일치 비교 (값과 타입까지 비교)
console.log(1 === 1) // 1 === 1 => true
console.log(1 === "1") // 1 === "1" => false
console.log(1 === true) // 1 === true => false
console.log(true === "1") // true === "1" => false

일치 비교 연산시 결과

// 동등 비교 (값만 비교)
console.log(1 == "1"); // 1 == 1 => true
console.log(1 == true); // 1 == 1 => true
console.log(true == "1"); // 1 == 1 => true
console.log("true" == 1); // NaN == 1 => false

동등 비교 연산시 결과

 

'Javascript' 카테고리의 다른 글

[Javascript] 객체  (0) 2022.11.04
[Javascript] 피보나치 수열 - 알고리즘  (0) 2022.11.03
[Javascript] 다양한 함수 선언 방법  (0) 2022.11.02
[Javascript] 함수  (0) 2022.11.01
[Javascript] 변수와 상수  (0) 2022.10.31

함수란?

  • 코드의 집합을 나타내는 자료형
  • 반복되는 코드를 정의해 놓고 필요할 때마다 호출하므로 반복 작업을 피할 수 있음
  • 기능별로 나눠 함수를 작성해 놓으면 유지보수가 쉬워짐

🌟함수도 값이다🌟

함수 선언식 (Function Declarations)

  • 호이스팅이 일어나지만 가독성은 좋다.
// 함수 선언
function 함수이름(매개변수) {
    // 함수 호출시 실행될 코드
}

// 함수 호출
함수이름(인자)
// 함수 선언
function showMessage() {
  console.log("Hello");
}

// 함수 호출
showMessage();

함수 선언식으로 함수 선언 후 호출

// 함수의 호이스팅
showMessage(); // 함수 선언전에 호출

// 함수 선언
function showMessage() {
  console.log("Hello");
}

함수 선언전 호출

익명 함수 (Anonymous Function)

  • 이름이 붙어 있지 않는(함수명이 없는) 함수
  • 호이스팅이 일어나지 않는다.
  • 선언 후 실행하지 않으면 에러가 난다.
  • 함수 표현식에서 사용한다.
// 익명 함수 선언
function (매개변수) {
    // 함수 호출 시 실행될 코드
}
// 익명 함수 선언만 한 경우
function (name) {
  console.log(name + "님 어서오세요!");
}

// 에러 메시지
Uncaught SyntaxError: Function statements require a function name

익명 함수를 선언만 할 경우

// 익명 함수 즉시 실행
(function (name) {
  console.log(name + "님 어서오세요!");
})("CloudCoke");

익명 함수를 즉시 실행한 경우

함수 표현식 (Function Expressions)

  • 호이스팅이 일어나지 않는다.
  • 가독성이 조금 떨어진다.
// 함수 선언과 동시에 변수 선언 및 변수 초기화
const 변수이름 = function (매개변수) {
    // 함수 호출시 실행될 코드
}

// 함수 호출
변수이름(인자)
const showMessage = function () {
  console.log("Hi");
};

// 함수도 값이다
console.log(showMessage);

// 함수 호출
showMessage();

함수 표현식으로 함수 선언 후 호출

화살표 함수 (Arrow Function)

  • 함수 표현식을 조금 더 간결한 문법으로 만드는 방법이다.
  • ES6에서 추가된 문법
// 기본적인 화살표 함수 선언
const 변수 이름 = (매개 변수) => {
    // 함수 호출 시 실행될 코드
}

// 함수 호출
변수 이름(인자)

화살표 함수 문법

// 함수 표현식으로 함수 선언시
const sum = function (a, b) {
  return a + b;
};

console.log(sum(1, 2));

함수 표현식으로 함수 선언 후 호출

// function 키워드 생략
const sum = (a, b) => {
    return a + b;
};

console.log(sum(1,2))

화살표 함수로 함수 선언 후 호출

// 함수의 유일한 문장이 return일 때 return 및 중괄호({}) 생략
const sum = (a, b) => a + b

console.log(sum(1,2))

화살표 함수 return 생략

// 만약 매개 변수가 1개일 경우에는 ()도 생략 가능(선택 사항)
// 매개 변수가 없는 함수는 () 필요!!!

// 함수 표현식
const sum = function (a) {
    return a + 1;
};

console.log(sum(1))

// 화살표 함수
const sumArrow = a => a + 1

console.log(sumArrow(1))

화살표 함수 () 생략

참고

'Javascript' 카테고리의 다른 글

[Javascript] 피보나치 수열 - 알고리즘  (0) 2022.11.03
[Javascript] 형 변환  (0) 2022.11.03
[Javascript] 함수  (0) 2022.11.01
[Javascript] 변수와 상수  (0) 2022.10.31
[Javascript] 연산자  (2) 2022.10.28