이벤트 등록을 할 때 addEventListener에 두 가지 인자를 전달해 주었다. 첫 번째 인자는 이벤트 이름이고 두 번째 인자는 이벤트 핸들러라고 부르는 사용자가 만든 함수이다. 이 함수에 이벤트가 발생하면 동작될 코드들을 넣어 놓게 된다. 이벤트가 발생되어서 이벤트 핸들러 함수가 호출이 되면 이벤트 객체를 전달받게 되는데 이벤트 핸들러 함수에 매개변수를 선언해주면 이벤트 객체를 사용할 수 있다.
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에 넣어주면 된다.
먼저 [방법 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 함수를 호출하는게 아니라 함수 값 자체를 넣어 주어야 한다는 점이다.
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 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 속성에 대입한다.
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을 조작하기 위해서는 먼저 조작하고 싶은 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 태그에서 봤을 때 깊이와는 상관없이 무조건 위에서부터 차례대로 들어간다!
두 객체의 메소드는 동일하지만 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 키워드를 이용해 객체 속성을 제거한 결과
깨끗하게 지워졌다.
마무리
객체를 배우기 전까지는 자바스크립트는 객체로 이루어져 있다는 말이 와닿지 않았는데 이제 왜 그런지 알 것 같다.
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
// - 연산
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
// 함수 선언
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))