배열
1. 배열 선언
let arr = [];
2. 배열 원소 초기화 (인덱스로 접근)
arr[0] = 123;
arr[1] = 456;
arr[5] = 5555;
3. 배열 길이값
console.log(arr.length); // 6
4. 초기화되지 않은 배열 원소
console.log(arr[2]); // undefined
Array 메소드
1. push()
push() 메소드는 하나 이상의 요소를 배열의 가장 마지막에 추가한다.
원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환한다.
let arr = [];
arr.push("마지막에");
arr.push("원소가");
arr.push("추가됩니다.");
console.log(arr);(3) ['마지막에', '원소가', '추가됩니다.']
0: "마지막에"
1: "원소가"
2: "추가됩니다."
length: 3
[[Prototype]]: Array(0)
2. pop()
pop() 메소드는 배열의 가장 마지막 요소를 제거하고, 그 제거된 요소를 반환합니다.
따라서 pop() 메소드를 실행할 때마다 배열의 길이는 1씩 줄어들게 됩니다.
let elem = arr.pop();
console.log(elem); // 추가됩니다.
console.log(arr.length); // 2
3. shift()
shift() 메소드는 pop() 메소드와는 달리 배열의 가장 마지막 요소가 아닌 첫 요소를 제거하고, 그 제거된 요소를 반환한다.
따라서 shift() 메소드도 실행할 때마다 배열의 길이가 1씩 줄어들게 된다.
let elem = arr.shift();
console.log(elem); // 추가됩니다.
console.log(arr.length); // 2
4. unshift()
unshift() 메소드는 하나 이상의 요소를 배열의 가장 앞에 추가한다.
원본 배열은 추가한 요소의 수만큼 길이(length)가 늘어나게 되며, 요소를 성공적으로 추가하면 배열의 총 길이를 반환한다.
let arr = [];
arr.unshift("첫번째에");
arr.unshift("원소가");
arr.unshift("추가됩니다.");
console.log(arr);(3) ['추가됩니다.', '원소가', '첫번째에']
0: "추가됩니다."
1: "원소가"
2: "첫번째에"
length: 3
[[Prototype]]: Array(0)+) pop()과 push() 메소드를 사용하면 배열을 스택(stack)이라는 데이터 구조처럼 사용할 수 있으며,
shift()와 push() 메소드를 사용하면 배열을 큐(queue)라는 데이터 구조처럼 사용할 수 있다.
5. reverse()
reverse() 메소드는 배열 요소의 순서를 전부 반대로 교체한다.
가장 앞에 있던 요소가 가장 뒤에 위치하며, 가장 뒤에 있던 요소는 가장 앞에 위치하게 된다.
let reverse = arr.reverse();
console.log(reverse); // (4) ['라', '다', '나', '가']
6. sort()
sort() 메소드는 해당 배열의 배열 요소들을 알파벳 순서에 따라 정렬한다.
이 메소드는 배열 요소를 모두 문자열로 보고 정렬하므로, 숫자나 불리언과 같은 타입의 요소들은 잘못 정렬될 수도 있다.
let sort = reverse.sort();
console.log(sort); // (4) ['가', '나', '다', '라']
7. splice()
splice() 메소드는 기존의 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 배열의 내용을 변경한다.
'splice(시작 인덱스, 제거할 요소 개수, 해당 인덱스 앞 추가될 원소)' 형식으로 메소드를 사용한다.
let arr = ["A", "B", "C", "D"];
arr.splice(2, 0, "추가");
console.log(arr);Array(5)
0: "A"
1: "B"
2: "추가"
3: "C"
4: "D"
length: 5
[[Prototype]]: Array(0)
8. filter()
filter() 메소드는 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 결괏값이 true인 요소들만을 새로운 배열에 담아 반환한다.
let arr = [1, 2, 3, 4, 5];
let filter = arr.filter((x) => x % 2 == 0);
console.log(filter);Array(2)
0: 2
1: 4
length: 2
[[Prototype]]: Array(0)
9. map()
map() 메소드는 해당 배열의 모든 요소에 대하여 반복적으로 명시된 콜백 함수를 실행한 후, 그 실행 결과를 새로운 배열에 담아 반환한다.
let arr = [1, 2, 3, 4, 5];
let map = arr.filter((x) => x % 2 == 0).map((x) => x ** 2);
console.log(map); // (2) [4, 16]
10. reduce()
reduce() 메소드는 해당 배열의 모든 요소를 하나의 값으로 줄이기 위해, 두 개의 인수를 전달받는 콜백 함수를 실행한다.
이때 명시된 콜백 함수에 배열의 첫 번째 요소와 두 번째 요소를 인수로 전달하고 실행한다.
그 결과 반환된 결괏값과 세 번째 요소를 다시 인수로 전달하고 실행한다.
이러한 동작을 반복하여 모든 배열 요소를 인수로 전달하고, 마지막으로 반환된 결괏값을 반환한다.
let arr = [1, 2, 3, 4, 5];
let sum = arr.filter((x) => x % 2 == 0).map((x) => x ** 2).reduce((a, b) => a + b);
console.log(sum); // 20
11. indexOf()
indexOf() 메소드는 해당 원소의 인덱스 값을 반환한다.
let arr = ["가", "나", "다", "라"];
let index = arr.indexOf("다");
console.log(index); // 2
console.log(arr.indexOf("A")); // -1
json 변환
let person = {
name: "길동",
age: 22,
}
// 객체 -> json
let json = JSON.stringify(person);
console.log(json);
// json -> 객체
let copy = JSON.parse(json);
console.log(copy.name); // 길동
console.log(copy.age); // 22
타이머 함수
*setInterval
setInterval(() => {
console.log("일정한 간격마다 출력");
}, 1000);
*setTimeout
setTimeout(() => {
console.log("일정한 간격 후에 한번");
}, 3000);
*타이머
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div>
<span id="counter">0</span>
<button id="start">시작</button>
<button id="stop">정지</button>
</div>
</body>
<script>
let start = document.getElementById("start");
let stop = document.getElementById("stop");
let counter = document.getElementById("counter");
let num = 0;
let intervalNum;
start.addEventListener("click", (e) => {
if (!intervalNum) {
intervalNum = setInterval(() => {
num++;
counter.innerText = num;
}, 360);
}
});
stop.addEventListener("click", (e) => {
if (intervalNum) {
clearInterval(intervalNum);
intervalNum = 0;
}
});
</script>
</html>
입력 유효값 확인
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
input:invalid {
border-color: red;
background-color: yellow;
}
.error-message {
display: none;
}
input:invalid + .error-message {
display: inline;
}
</style>
</head>
<body>
<form id="form-person" onsubmit="return validateForm(event)">
<input type="text" name="name" id="name" />
<input type="number" name="age" id="age" oninput="validateAge()" />
<span class="error-message">18세 이상이어야 합니다.</span>
<input type="submit" />
</form>
</body>
<script>
function validateAge() {
let numberElem = document.getElementById("age");
let age = numberElem.value;
if (age < 18) {
numberElem.setCustomValidity("18세 이상이어야 합니다.");
} else {
numberElem.setCustomValidity("");
}
}
function validateForm(e) {
let form = document.getElementById("form-person");
let result = form.checkValidity();
if (result) {
return true;
}
return true;
}
</script>
</html>
