: 이 메서드는 주어진 함수 테스트를 통과하는 (배열의) 모든 요소를 모아 새로운 배열을 생성 하여 반환함.

⚠️ 새로운 배열을 생성하기 때문에 이전의 배열을 변형하는 것이 아니다(필터 이전 배열과 새로운 배열이 동시에 존재 함).

//syntax
Array.filter(필터용 함수);

//example
const list = ["a", "b", "c", "d"];

function eraseB (alphabet) {
  return !== "b";
}

list.filter(eraseB);
// (3) ["a", "c", "d"]

console.log(list);
// (4) ["a", "b", "c", "d"]

⭐️ createElement()

: 지정한 tagName의 HTML 요소를 만들어 반환함.

document.createElement(tagName);

appendChild()

: 괄호 안의 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임.

//syntax
parentElement.appendChild(childElement);

//example
const firstBox = document.querySelector("div:first-child");
const button = document.createElement("button");

firstBox.appendChild(button);

2. adding + saving saving data in localStorage

JSON.stringify()

: JavaScript 값이나 객체를 JSON 문자열로 변환하여 반환. localStorage 에는 문자열 이외의 값을 저장할 수 없기 때문에 다른 타입의 값은 JSON.stringify() 함수를 사용하여 문자열 타입으로 변환 후 저장한다.

const array = ["a", "b", "c", "d"];

localStorage.setItem("string", JSON.stringify(array));

JSON.parse()

: JSON의 문자열의 구문 분석 후 JavaScript 값이나 객체를 생성함.

const getValue = localStorage.getItem("string");
parsedData = JSON.parse(getValue);

console.log(parsedData); // ["a", "b", "c", "d"]

+

forEach()

: 주어진 함수를 배열 안의 각각의 아이템들에 대해 실행함.

array.forEach((alphabet) => {
        console.log("This is " + alphabet);
});

// This is a
// This is b
// This is c
// This is d

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

...and some more.

✦ Math module

: 수학적인 상수와 함수를 위한 속성과 메서드를 가진 (JS) 내장 객체.

⭐️ Math.random()

: 0 ~ 1 사이의 구간에서 부동소숫점(float) 난수(random number)를 반환함.

console.log(Math.random());
// 0.825667262142701

Math.floor()

: "always rounds down and returns the largest integer less than or equal to a given number."

console.log(Math.floor(5.1)); // 5
console.log(Math.floor(5.9)); // 5

Math.ceil()

: "always rounds up and returns the smaller integer greater than or equal to a given number."

Math.round()

: 입력값을 반올림한 수와 가장 가까운 정수 값을 반환함.

console.log(Math.round(3.1)); // 3
console.log(Math.round(3.7)); // 4

Math.trunc()

: 주어진 값의 소수부분을 제거하고 숫자의 정수부분을 반환함.

console.log(Math.trunc(4.98072)); // 4
console.log(Math.trunc(-8.0001)); // 8

• Example

const quotes = [
  {quote = "Ain't no thing like me, except me!", 
   author = "Rocket",},
];

const quote = document.querySelector("#quotes span:first-child");
const author = document.querySelector("#quotes span:last-child");

const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = randomQuote.quote;
author.innerText = randomQuote.author;

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

✦ setInterval(), setTimeout()

: setInterval() 의 경우 웹페이지의 특정 부분을 주기적으로 업데이트 해줘야하거나 변경된 데이터를 주기적으로 받아와야 하는 경우 사용한다(ex. 시계).

setTimeout() 은 실행하고자 하는 함수를 일정시간 이후에 실행시켜준다.

• Syntax

setInterval(실행하려는 함수, 반복주기(millisec));

setTimeout(실행하려는 함수, 일정시간(millisec));

✦ Date 객체

: Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도로도 활용할 수 있다. new Date() 을 호출하면 새로운 Date 객체가 만들어진다.

getHours() getMinutes() getSeconds() getFullYear() getMonth()

...

등등의 메서드를 사용해 날짜/시간에 관한 정보를 얻을 수 있다.

// 인수없이 호출하면 현재 날짜와 시간이 저장된 객체가 반환됨.
const date = new Date();
console.log(date); // -> Tue Jun 20 2023 20:38:25 GMT+0900 (Korean Standard Time)

✦ padStart()

: padStart 메서드는 현재 문자열의 시작을 다른 문자열로 채워 주어진 길이를 만족하는 새로운 문자열을 반환한다.

• Syntax

String.padStart(targetLength, padString);

• Example

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  const hour = String(date.getHours()).padStart(2, 0); //padStart() 메서드는 문자열을 변형하므로 Date 객체에서 가져오는 값을 문자열(String)로 바꿔주어야 한다. => String()
  const minute = String(date.getMinutes()).padStart(2, 0);
  const second = String(date.getSeconds()).padStart(2, 0);

  clock.innerText = `${hour}:${minute}:${second}`
}

getClock();
setInterval(getClock, 1000);

참고

• https://ko.javascript.info/date
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

✦ local storage

: localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있다. 저장한 데이터는 세션 간에 공유된다(= 새로 고침해도 저장한 데이터는 유지됨). 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있다.

✧ localStorage.setItem(keyName, value) : key와 vaule 쌍 추가. ✧ localStorage.getItem(keyName) : key에 해당하는 value 받아오기. ✧ localStorage.removeItem(keyName) : key와 해당 value를 삭제. ✧ localStorage.clear() : 모든 것을 삭제. ✧ localStorage.key(index) : 인덱스에 해당하는 key를 받아옴. ✧ localStorage.length : 저장된 항목의 개수를 얻음.

//ex1)
localStorage.setItem("username", "sonya");
const savedUsername = localStorage.getItem("username");

console.log(savedUsername); //sonya

//ex2)
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

function onLoginSubmit(event) { //유저 정보가 submit 됐을 경우에
  event.preventDefault(); //잠시 멈추고
  loginForm.classList.add("hidden"); //form을 숨긴 다음
  const username = loginInput.value; //input에 입력된 value를 변수 username에 저장한다.
  localStorage.setItem("username", username); //그 다음 localStorage에 value인 username을 "username"이라는 key 아래에 저장한다.
  paintGreetings(username); //유저 정보 저장이 완료되면 greeting을 화면에 보여준다.
}

function paintGreetings (username) { //username을 인자로 받는다.
  greeting.innerText = `Hello ${username}!` //먼저 greeting의 텍스트를 Hello {username}으로 바꿔준 후
  greeting.classList.remove("hidden"); //hidden 클래스를 없애준다(결과적으로 greeting이 보여짐).
}

const savedUsername = localStorage.getItem("username"); //localStorage에서 username 값 가져와 변수 savedUsername에 저장하기.

if (savedUsername === dull) { //만약 savedUsername에 아무런 유저 정보가 저장되어 있지 않을 경우,
  //show the form, form을 화면상에 보이게 한다.
  loginForm.classList.remove("hidden"); //hidden 클래스를 없애 form을 보이게 한다.
  loginForm.addEventListener("submit", onLoginSubmit); //이후 input에 값이 submit되면 함수 onLoginSubmit을 실행한다.
    } else { //하지만 저장된 유저 정보가 존재하는 경우에는
  //show the greetings, greeting을 보여준다.
  paintGreetings(savedUsername) //savedUsername을 인자로 전달하여 paintGreetings 함수를 실행한다. 
    }

(+2023/06/20)

localStorage에는 string 타입의 값만 저장할 수 있다.

value에 string이 아닌 값을 저장하려면, JSON.stringify()을 사용한다.

 ✧ 자바스크립트 템플릿 리터럴 : ES6부터 새로 도입된 문자열 표기법으로, 내장된 표현식을 허용하는 문자열 리터럴이다. 문자열 생성 시 따옴표 대신 백틱을 사용한다. 여러 줄로 이루어진 문자열과 문자 보간기능을 사용할 수 있다.

• 문법

  `string text`
  

string text line 1 string text line 2

string text ${expression} string text

tag string text ${expression} string text

* *표현식 삽입법* (expression interpolation)
: template literals를 이용하면 이를 더욱 읽기 쉽도록 활용할 수 있음.
```javascript
//일반 문자열
function onLoginSubmit() {
  event.preventDefault();
  const username = loginInput.value;
  console.log("hello " + username + "!"); //hello username!
}

▼▼▼

//템플릿 리터럴
function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  console.log(`hello ${username}!`); //hello username!
}

• 줄바꿈 : 템플릿 리터럴을 이용하면 쉽게 줄바꿈이 가능하다.

  function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  console.log(`hello ${username}!
  how was your day?`);
  }
  //hello username
  //how was your day?

참고

• https://curryyou.tistory.com/185
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

✦ className, classList

: className 은 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

classList 는 공백으로 구분된 문자열인 Element.className 을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다.

//className 이용
const h1 = querySelector("div.hello:first-child h1");

function handleTitleClick() {
  if(h1.className === "active") {
     h1.className = "";
     } else {
       h1.className = "active";
     }
}

h1.addEventListener("click", handleTitleClick);

//classList 이용
const h1 = querySelector("div.hello:first-child h1");

function handleTitleClick() {
  const clickedClass = "clicked";
  if(h1.classList.contains("clickedClass")) {
     h1.classList.remove(clickedClass);
     } else {
       h1.classList.add(clickedClass);
     }
}

h1.addEventListener("click", handleTitleClick);

classList 메서드

1. add(String) : 지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.

2. remove(String) : 지정한 클래스 값을 제거한다.

3. contains(String) : 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.

const h1 = querySelector("div.hello:first-child h1");

function handleTitleClick() {
 const clickedClass = "clicked";
  if(h1.classList.contains(clickedClass)) {
     h1.classList.remove(clickedClass);
     } else {
      h1.classList.add(clickedClass); 
     }
}

h1.addEventListener("click", handleTitleClick);

4. ⭐️ toggle(String), toggle(String, force) :

✧String : 토글하고 싶은 Class의 String형. ✧force : 껐다, 켰다하는 방식이 아니라, 끄거나 키거나 둘 중 하나만 되는 듯. true 로 설정되어있을 경우 클래스가 추가됨(remove안됨). 반대로 false 로 설정돼있다면 클래스가 제거됨(add안됨).

*"If included, turns the toggle into a one way-only operation."* - MDN

//1. toggle(String)
const h1 = querySelector("div.hello:first-child h1");

function handleTitleClick() {
  //toggle이 울트라 캡짱이야...
 h1.classList.toggle("clicked"); 
}

h1.addEventListener("click", handleTitleClick);

//2. toggle(String, force)
const h1 = querySelector(div.hello:first-child h1);

function handleTitleClick() {
  //더 클릭해봐도 변한 그 상태 그대로 유지된다.
 h1.classList.toggle("clicked", force); 
}

h1.addEventListener("click", handleTitleClick);

참고

• https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle
• https://developer.mozilla.org/ko/docs/Web/API/Element/classList

: 프로그래밍하고 있는 시스템에서 일어나는 사건 혹은 발생(MDN), 예를 들어 유저가 특정 버튼을 클릭하거나, 혹은 특정 키를 입력했을 때. 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려줄 수도 있다. 이를 통해 웹페이지와 유저 간의 상호 작용이 가능하다.

이벤트의 종류에는 여러가지가 있다.

1. 마우스 이벤트 :

click : 마우스 클릭할 때 발생. mouseover : 커서가 요소 안으로 이동될 때 발생. mouseenter : 커서가 요소 위로 이동될 때 발생. mouseleave : 커서가 요소 밖으로 이동될 때 발생.

2. 키보드 이벤트 :

keydown : 키가 눌렸을 때 발생. keyup : 키를 더이상 누르고 있지 않을 때 발생(손가락을 키에서 떼었을 때).

등이 있다.

✦ addEventListener("event", eventHandler)

: 이벤트를 등록하는 가장 권장되는 방식. 이 방식을 이용하면 여러 개의 이벤트 핸들러를 등록할 수 있다. 이벤트 핸들러 란 특정 요소에서 발생하는 이벤트는 처리하기 위해 작성하는 함수이다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.

1)

const h1 = document.querySelector("div.hello:first-child h1");

//이벤트 핸들러(함수)
function handleMouseClick() {
  h1.style.color = "blue";
}

h1.addEventListener("click", handleMouseClick); //헤더1을 클릭하면 헤더1의 폰트 색이 바뀐다. 

2)

function handleWindowResize() {
 document.body.style.backgroundColor = "turquoise"; 
}

window.addEventListener("resize", handleWindowResize); //윈도우의 사이즈가 바뀌면 배경색 또한 turquoise 색으로 바뀐다. 

✧ 타겟에 따라 이벤트의 종류도 달라진다.

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
 const currentColor = h1.style.color;
  let newColor;
  if (currentColor === "blue") {
    newColor = "tomato";
  } else {
    newColor = "blue";
  }
  h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick)

참고

• https://developer.mozilla.org/en-US/docs/Web/API/UI_Events
• https://opentutorials.org/course/1375/6761
• https://goddaehee.tistory.com/269

how to bring elements from HTML to JS

✦ getElementById("id")

: 요소의 id 속성으로 불러오기.

HTML)
...
<body>
  <h1 class = "web" id = "title">My website</h1>
</body>
...

JS)
const title = document.getElementById("title");
console.log(title); //<h1 class = "web"id = "title">My website</h1>

✦ getElementsByClassName("className")

: 요소의 class 이름으로 불러오기. 한꺼번에 많은 요소들을 불러와야 할 때 사용한다. 리턴 값은 배열.

const.web = document.getElementsByClassName("web");
console.log(web); //<h1 class = "web"id = "title">My website</h1>

✦ getElementsByTagName("tagName")

: 요소의 tag 이름으로 불러오기. 한꺼번에 많은 요소들을 불러와야 할 때 사용한다. 리턴 값은 배열.

const title = document.getElementsByTagName("h1");

⚠️ getElementsByClassName / getElementsByTagName 에서 "s"를 빼먹지 말자. 이들은 대응하는 요소를 담은 컬렉션(배열)을 반환하기 때문에 중간에 "s"가 들어간다.

⚠️ 한 개의 요소가 아닌 배열을 반환한다. 따라서 첫번째 줄에 있는 코드는 작동하지 않을 것이다.

//doesn't work
document.getElementsByTagName("h1").innerText = "jolly !";
//works !
document.getElementByTagName("h1")[0].innerText = "jolly !";

두번째 코드처럼 인덱스를 사용해 요소를 얻고 그 요소에 값을 할당하게 되면 기존 의도대로 동작한다.

✦ querySelector("css selector")

: 요소의 CSS 선택자로 불러오기. 주어진 CSS 선택자에 대응하는 요소 중 첫번째 요소를 반환한다.

HTML)
...
<body>
  <div class = "box">
    <h1>My website</h1>
    <h1>My website</h1>
    <h1>My website</h1>
    <h1>My website</h1>
    <h1>My website</h1>
  </div>
</body>
...

JS)
const title = document.querySelector(".box h1");
title.innerText = "His website";//첫번째 h1이 "My website"에서 "His website"로 바뀐다.

✦ querySelectorAll("css selector")

: 자식 요소 중 주어진 CSS 선택자에 대응하는 모든 요소를 반환한다(=컬렉션/배열 반환).

const all = document.querySelectorAll("h1");
all[1].innerText = "I want to change all of it.";

✧ 이들은 모두 DOM 요소들을 제어하기 위한 함수(메서드)들이다. : DOM = Document Object Model. XML/HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다(계층적 구조로 이루어져 있음). (사진: http://www.tcpschool.com/javascript/js_dom_concept)

자바스크립트는 DOM 요소들을 제어하여 새로운 HTML 요소나 속성을 추가할 수 있고, 반대로 존재하는 HTML 요소나 속성을 제거할 수도 있다. 또한 HTML 문서의 모든 HTML/CSS를 변경할 수 있으며, 새로운 이벤트를 추가할 수 있다.

const.title = document.querySelector(".web h1");
title.innerText = "Your website"; //"My website"가 "Your website"로 변함.

참고

• https://ko.javascript.info/searching-elements-dom
• http://www.tcpschool.com/javascript/js_dom_concept

conditional

: 조건문. → if...else문.

if (condition) {
  //executed if the condition is true. 
    } else {
      //executed if the condition is false.
}

1. if뒤에 바로 오는 소괄호()에는 조건이 들어간다. true 혹은 false를 리턴.
2. else안의 코드는 조건이 false를 반환할 때 실행된다.

→ if... else if...

// are you allowed to drink?
const age = parseInt(prompt("How old are you?"));

if (isNaN(age)) {
  alert("Please type in your real age.");
} else if (age < 18) {
   console.log("You are too young to drink.");
} else if (age >= 18 && age <= 50) {
  console.log("You can drink.");
} else if (age > 50 && age <= 80) {
  console.log("You shouldn't drink too much.");
} else if (age > 80) {
  console.log("Always be happy.");
}

++ MDN 예시: 아이가 부모님의 쇼핑을 도와주면 10달러를 용돈으로 받게 되고, 도와주지 않는다면 5달러를 받게 되는 조건문.

let shoppingDone = false;
let childsAllowance; 

if (shoppingDone === true) {
  childsallowance = 10;
} else {
  childsAllowance = 5;
}

✦ 연산자 : 1. && = 논리 연산자 AND. 한 쪽이 false면 조건 자체가 false가 된다.

true && true === true; //both of the statements should be true for condition to be true. 
true && false === false;
false && true === false;
false && false === false;

2. || = 논리 연산자 OR. 한 쪽만 true여도 조건은 true가 된다.

   true || true === true;
   true || false === true;
   false || true === true;
   false || false === false; // both of the statements have to be false for condition to be false.

3. ! = 논리 연산자 NOT. true연산자를 false로 반환.

   const happy = !true; // false 반환
   const sad = !false; // true 반환

4. 비교연산자 ==: 동등. !=: 부등. ===: 일치. !==: 불일치.

• ==와 ===의 차이 : ===는 비교하는 변수의 값 뿐만 아니라 변수의 유형까지 고려한다. 반면 ==의 경우, 변수 값을 기반으로 변수의 유형을 수정한다.

  //==비교연산자
  1 == '1' //true
  1 == true //true
  0 == [] //true
  null == undefined //true
  

//===비교연산자 1 === '1' //false 1 === true // false 'true' === true //false

//cf1 true == 'true' //false. true는 1로 변환되고 'true'는 NaN으로 변환되기 때문에 이 statement는 거짓이다. //cf2 undefined == 'undefined' // false. undefined의 숫자형은 NaN, 'undefined'역시 NaN으로 변환. NaN == NaN이 false이기 때문에 반환되는 값은 false.

(❗️마지막 cf는 https://stackoverflow.com/questions/11363659/why-does-true-true-show-false-in-javascript 참조)
***
✦ **```isNaN```**: 데이터 타입이 number가 아닌지 맞는지 구별해주는 function. ```true``` 혹은 ```false```를 반환한다. 
```javascript
const a = 5;
console.log(isNaN(a)); // false 반환.

const b = "hello";
console.log(isNaN(b)); //true 반환. 

참고

• https://www.javascript.com/learn/conditionals
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#%EC%A1%B0%EA%B1%B4_%EC%82%BC%ED%95%AD_%EC%97%B0%EC%82%B0%EC%9E%90
• https://velog.io/@vvsogi/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%99%EB%93%B1%EC%9D%BC%EC%B9%98-%EC%97%B0%EC%82%B0%EC%9E%90-%EC%99%80-%EC%B0%A8%EC%9D%B4%EC%A0%90

return

: return 명령문은 1. 함수 실행을 종료하고, 2. 주어진 값을 함수 호출 지점으로 반환한다.

function add(a, b) {
  return a + b;
}

const addResult = add(1, 2);

console.log(addResult); // 3

함수 본문에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단된다(return을 호출하는 지점에서 즉시 실행을 멈춤). 값을 제공한 경우 함수를 호출한 곳에 그 값을 반환한다. 이때 값을 명시하지 않으면 undefined를 반환한다.

const calculator = {
  plusTwo: function (a) {
    return a + 2;
  }, 
  minusTwo: function (a) {
    return a - 2;
  }, 
  timesTwo: function (a) {
    return a * 2;
  }, 
  divideTwo: function (a) {
    return a / 2;
  }, 
  square: function (a) {
    return a * a;
  }
}

const plusResult = calculator.plusTwo(2); // 4
const minusResult = calculator.minusTwo(plusResult); // 2
const timesResult = calculator.timesTwo(minusResult); // 4
const divideResult = calculator.divideTwo(timesResult); // 2
const squareResult = calculator.sqaure(divideResult); //4

//example: korean age calculator

function calculateKrAge(ageOfForeiner) {
  return ageOfForeigner + 2;
}

const krAge = calculateKrAge(20);
console.log(krAge); // 22

• return 이후 함수는 사라지고 결과를 남긴다.
• return 이후 적힌 함수는 실행되지 않으므로 꼭 필요한 코드라면 return 이전에 적도록 한다.

✦ array

: 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 배열 안에는 모든 타입의 데이터가 들어갈 수 있다.

const me = "fat";
const anything = [1, 2, 3, false, true, undefined, "text", me]; //all data types allowed.

• .push() 를 사용해 배열에 값을 추가할 수도 있다.

  const shopping = ["milk", "pork", "pizza", "potato", "watermelon"];
  console.log(shopping);
  shopping.push("eggs"); // add value: "eggs"
  console.log(shopping); // ["milk", "pork", "pizza", "potato", "watermelon", "eggs"]

• 리스트를 수정할 수 있다.

  shopping[2] = "water"; //리스트의 (visually)세번째 값을 수정해준다.
  console.log(shopping); // ["milk", "pork", "water", "potato", "watermelon", "eggs"]

✦ object

: 현실의 사물을 프로그래밍에 반영한 것! 객체는 속성의 컬렉션이다. 속성의 값이 함수인 경우에는 메서드(method)라고 부른다.

const sonya = {
  age: 20, // property 속성. 키(속성명): 값(속성값)
  nationality: "korean",
  sex: "female",
  married: false,
  sayHello: function(name) {
    console.log("Hello " + name + ", nice to meet you!");
  }; // method 메서드.
} 

console.log(sonya); // {age: 20, nationality: "korean", sex: "female", married: false, sayHello: f}
sonya.height = 154;
console.log(sonya); // {age: 20, nationality: "korean", sex: "female", married: false, height: 154, sayHello: f}

sonya.sayHello("Sonya"); // Hello Sonya, nice to meet you!

✦ function

: 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.

function sayHello(name) {
  console.log("Hello " + name + ", nice to meet you!");
}

sayHello("sonya"); // Hello sonya, nice to meet you!

• argument(인수): 함수를 호출할 때 값을 전달함(=전달인자). 호출할 때마다 수시로 바뀌는 값이기 때문에 변수가 아닌 값으로 정의한다.
• 매개변수(parameter): 함수 내부에 있는 인자, 함수가 호출되며 전달한 인수의 값이 변수에 담기게 된다.

  function add(a, b) { // 매개변수
  console.log(a + b);
  }
  

add(3 + 5); // 인수

***
** *object, function을 이용하여 계산기 만들기*
```javascript
const calculator = {
  add: function (a, b) {
    console.log(a + b);
  }, 
  subtract: function (a, b) {
    console.log(a - b);
  },
  times: function (a, b) {
    console.log(a * b);
  },
  divide: function (a, b) {
    console.log(a / b);
  },
  powerOf: function (a, b) {
    console.log(a ** b);
  }
}

calculator.add(1, 2); // 3
calculator.subtract(5, 7); // -2
calculator.times(10, 7); // 70
calculator.divide(30, 2); // 15
calculator.powerOf(2, 6); // 64

참고

• https://www.zerocho.com/category/JavaScript/post/572c6f759a5f1c4db2481ee3
• https://velog.io/@colki/JS-parameter-%EC%99%80-argument-%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EC%9D%B8%EC%88%98-%EC%9D%B8%EC%9E%90

✦ const, let

• const: 변수 재선언 불가능, 변수 재할당 불가능.
• let: 변수 재선언 불가능, 변수 재할당 가능.

  const myName = "sonya";
  console.log(myName); // sonya
  

myName = "jane"; console.log(myName); // Uncaught TypeError: Assignment to constant variable. //const로 변수를 선언할 경우 변수 재할당이 불가능하다.

```javascript
let myName = "sonya";
console.log(myName); // sonya

myName = "jane";
console.log(myName); // jane
//let으로 변수를 선언할 경우 변수 재할당이 가능하다.

* var

• var는 ES6 이전에 사용되던 키워드. 변수 재선언이 되어도 에러가 일어나지 않아 오류를 일으킬 수 있다(이제는 사용하지 말 것).

  var this = "duckling";
  console.log(this); // duckling
  

var this = "piglet"; colsole.log(this); // piglet

- [JavaScript에서 ```var``` 를 사용하면 안되는 이유 ](https://hoondev.tistory.com/101)

basic datatypes

✦ number

• integer (정수) - 1, 4, 11
• float (부동소수점) - 0.1, 4976.23

  const a = 5;
  console.log(a + 3);
  

8

### ✦ string
- text - "hello", "nowhere"
```javascript
let myName = "sonya";
console.log("my name is " + myName);

>> my name is sonya

✦ boolean

• true / false

✦ null

• nothing, 아무것도 없는 상태

  const nothing = null;
  console.log(nothing);
  

null

### ✦ undefined
- 변수가 존재하지만 값이 주어지지 않았을 때. 
```javascript
let something;
console.log(something);

>> undefined