JavaScript 복습

✅전개연산자(Spread Operator)

배열의 전개연산자

push를 이용할 때 전개 연산자를 사용하지 않은 코드는 array 전체가 들어가 2차원 배열이 되었지만,
전개 연산자를 사용하게 되면 array 내부의 요소 하나하나가 삽입이 된다.

const arr = [1,2,3];
let test_arr = [4,5,6];
let test_arr2 = [4,5,6];

test_arr.push(arr);
console.log(test_arr); //[4, 5, 6, [1, 2, 3]] // 2차원 배열로 arr배열 삽입됩

//ES6
test_arr2.push(...arr);
console.log(test_arr2); //[4, 5, 6, 1, 2, 3] // 1차원 배열로 arr배열 삽입됨

객체의 전개연산자

Merge 진행 시, Object 1Depth 이하의 요소들만 가져오고 싶은 경우에 전개 연산자 활용이 용이하다.

const obj = {
    "Name":"AJu",
    "Git":"zoz0312"
}
const test_obj = {
    "test1":1,
    "test2":2
}

//ES6
const a_merge = { obj, test_obj }
const b_merge = { ...obj, ...test_obj }

console.log(a_merge);
/*
{
    obj: {
        "Name":"AJu",
        "Git":"zoz0312"
    },
    test_obj: {
        "test1":1,
        "test2":2
    }
}
*/

console.log(b_merge);
/*
{
    "Name":"AJu",
    "Git":"zoz0312",
    "test1":1,
    "test2":2
}
*/

[출처] [JavaScript] 전개 연산자 ( Spread Operator )|작성자 AJu

---

✅원본 배열을 변경하는 Array.prototype 메소드

1. push()
2. pop()
3. shift()
4. unshift()
5. reverse()
6. sort()
7. splice()

---

✅숫자형 배열 오름차순, 내림차순

원본 배열이 변경됨

오름차순 정렬

let array = [30, 2, 20, 1, 1111];

let result = array.sort((a,b) => a - b);
console.log(result) // [1, 2, 20, 30, 1111]

//a-b가 0 이거나 음수이면 그대로 [a, b] -> [a, b]
//a-b가 양수이면 a와b의 자리를 바꿈 [a, b] -> [b, a]

내림차순 정렬

let array = [30, 2, 20, 1, 1111];

let result = array.sort((a,b) => b - a);
console.log(result) // [1111, 30, 20, 2, 1]

//a-b가 음수이면 a와b의 자리를 바꿈 [a, b] -> [b, a]
//a-b가 0 이거나 양수이면 그대로 [a, b] -> [a, b]

---

✅익명함수/선언적함수 차이

Hoisting

• 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
• Hoisting은 L-Value에 R-Value를 입력하는 것은 인식하지 않음
• 선언적 함수: hoisting의 대상
• 익명함수(Anontmous Function) : Hoisting의 대상이 아님.
• let과 const로 선언한 변수의 경우 Hoisting 시 변수를 초기화하지 않는다.

[출처] https://cruella-de-vil.tistory.com/37

---

✅Array.join()

배열의 모든 요소를 연결해 하나의 문자열로 만듦

const arr = ['바람', '비', '물'];

console.log(arr.join());
// 바람,비,물

console.log(arr.join(''));
// 바람비물

console.log(arr.join('-'));
// 바람-비-물

---

✅이벤트 정리

1) 마우스 이벤트

이벤트	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 떼었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

2) 키 이벤트

이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

3) 폼 이벤트

이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경 되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

4) 로드 및 기타 이벤트

이벤트	설명
load	페이지의 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소에 사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트 발생

이벤트 핸들러 : 이벤트 + 이벤트가 발생됐을 때 실행되는 동작

[출처] https://jenny-daru.tistory.com/17

---

✅innerHTML, innerText, textContent 차이

innerText : 사용자가 볼 수 있는 텍스트만 가져옴
textContent : 노드가 가지고있는 텍스트를 가져옴
innerHTML : 노드가 가지고있는 텍스트 + HTML 태그까지 가져옴

<div id='content'>
  안녕~ 
  <span style='display:none'>innerText는 나를 볼 수 없어😏</span>
</div>

[출처] https://velog.io/@kim_unknown_/JavaScript-Difftext