[JavaScript] nomadcoders 바닐라 JS 💛 1강~5강 요약

1. 콘솔에 값을 출력하는 방법

console.log(출력내용) 메서드를 사용해서 콘솔에 메세지나 변수값을 출력합니다.
콘솔은 페이지 우클릭 > 검사 > 상단 메뉴바 Console 을 통해 열 수 있습니다.

console.log("String:", "Hello, world!");
console.log("Number:", 1234);
console.log("Object:", {name: "youn", age: 22});
console.log("Array:", [1, 2, 3, 4]);

콘솔 출력 결과

2. Object(객체)에 대해서

객체는 다양한 property(속성)과 function(메서드)를 가질 수 있으며, 객체 지향 프로그래밍의 기본적인 단위로 사용됩니다.

//Object(객체)
const person = { 
  	//property(속성)
    name: "youn", 
    age: 22, 
  	//function(메서드)
    greet: function() {
        console.log("Hello, " + this.name);
    }
};
//객체 사용하기
console.log(person.name); // "youn"
console.log(person.age);  // 22
person.greet();           // "Hello, youn"

3. const와 let의 차이점

JavaScript에서 const와 let은 모두 변수를 선언하는 데 사용됩니다. 하지만 재할당 가능성에 있어 차이가 있습니다.

let으로 선언된 변수는 새로운 값으로 재할당할 수 있습니다.

let y = 5;
y = 20; // 유효함
console.log(y); // 20

const로 선언된 변수는 초기 할당 이후에 재할당할 수 없습니다. 하지만 객체나 배열인 경우, 객체의 속성이나 배열의 요소는 변경할 수 있습니다.

const b = 10; //변수일 때
b = 20; // 재할당 불가능
//
const obj = { key: 'value' }; //객체일 때
obj.key = 'newValue'; // 속성은 변경 가능
console.log(obj.key); // 'newValue'
//
const arr = [1, 2, 3]; //배열일 때
arr.push(4); // 요소 변경 가능
console.log(arr); // [1, 2, 3, 4]

4. NaN이 무엇인가?

"Not-a-Number"의 약자로, 숫자가 아닌 값을 나타내는 특수한 값입니다.

• NaN의 자료형 : number
• NaN 값을 확인하려면 Number.isNaN() 또는 isNaN() 함수를 사용합니다.

  console.log(Number.isNaN(NaN)); // true
  console.log(isNaN(NaN));        // true

• NaN은 자기 자신과도 같지 않은 유일한 값입니다.

  console.log(NaN === NaN); // false

5. null과 undefined의 차이점

null과 undefined는 모두 값이 없음을 나타내지만, 의미와 용도가 다릅니다.

undefined

• 변수를 선언했지만 값을 할당하지 않았을 때

let x;
console.log(x); // undefined

• 객체에 존재하지 않는 속성에 접근할 때

let obj = { name: "Alice" };
console.log(obj.age); // undefined

• 반환값이 없는 함수

function greet() {
    console.log("Hello");
}
let result = greet();
console.log(result); // undefined

• 함수 호출할 시 인자를 제공하지 않았을 때

function printMessage(message) {
    console.log(message);
}
printMessage(); // undefined

null

• 의도적으로 비어있음
  null은 의도적으로 값이 없음을 나타낼 때 사용합니다. 현재 값이 없지만 나중에 가질 수 있음을 명확히 합니다.

let y = null;
console.log(y); // null

• 객체의 초기화
  변수가 나중에 객체를 가리킬 것임을 명확히 하기 위해 null로 초기화할 수 있습니다.

let obj = null;
// 나중에 obj에 객체를 할당할 계획
obj = { name: "youn" };

null vs undefined

1. 타입
   undefined는 undefined 타입입니다.
   null은 object 타입입니다.

+) 둘 다 자료형일까?

undefined와 null 모두 자료형이라고 할 수 있지만, 그 타입은 다릅니다!
undefined는 그 자체로 자료형이고, null은 object 타입으로 분류되지만, 이는 역사적인 이유 때문입니다.

console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"

2. 의도
   undefined 는 자바스크립트가 자동으로 할당하는 값입니다.
   null은 프로그래머가 의도적으로 할당하는 값으로, 변수가 현재 아무 값도 가지고 있지 않음을 나타냅니다.

6. ===과 ==의 차이점

===와 ==는 모두 비교 연산자이지만, 그 작동 방식에 차이가 있습니다.

===는 엄격한 동등 연산자로 타입과 값이 모두 같아야 참(true)을 반환합니다.

==는 느슨한 동등 연산자로 값만 비교하며, 비교 전에 타입을 자동으로 변환하여 검사합니다.

0 vs false

console.log(0 === false); // false
console.log(0 == false); // true (false가 숫자 0으로 변환됨)

null vs undefined

console.log(null === undefined); // false
console.log(null == undefined); // true (값이 없음을 나타내므로 같다고 간주)

7. parseInt()가 무엇인가?

문자열을 정수로 변환하는 데 사용하는 함수입니다!

parseInt(변환할 문자열, n진수);

• 선택적으로 n진수를 지정할 수 있으며, 지정하지 않으면 문자열 형식에 따라 10진수 또는 16진수(0x/0X로 시작 시)로 해석됩니다.
• 변환할 수 없는 경우 NaN을 반환합니다.

let num = parseInt("123");
console.log(num); // 123

8. getElementById, getElementByClassName, getElementByTagName

1. getElementById

• 용도: 주어진 ✨id 속성✨을 가진 요소를 선택
• 인자: 선택할 요소의 id 문자열
• 반환 값: 주어진 id 값을 가진 첫 번째 요소를 반환합니다. 요소가 없으면 null을 반환합니다.
• 특징: id는 HTML 문서에서 유일해야 하므로, 반환되는 요소는 하나입니다.

let element = document.getElementById("uniqueElement");
console.log(element); 
// html 문서에서 : <div id="uniqueElement"></div>

2. getElementsByClassName

• 용도: ✨주어진 클래스 이름을 가진 모든 요소✨ 선택
• 인자: 선택할 요소의 클래스 이름 문자열

let elements = document.getElementsByClassName("myClass");
console.log(elements); 
// HTML문서에서 myClass 클래스 이름 요소 전부 가져 옴
 //<div class="myClass">Item 1</div>
 //<div class="myClass">Item 2</div>
 //<div class="myClass">Item 3</div>

3. getElementsByTagName

• 용도: ✨주어진 태그 이름을 가진 모든 요소✨ 선택
• 인자: 선택할 요소의 태그 이름 문자열

 let elements = document.getElementsByTagName("p");
console.log(elements);
// HTML문서에서 p태그 전부 가져 옴
//<p>Paragraph 1</p>
//<p>Paragraph 2</p>
//<p>Paragraph 3</p>

9. ✨ querySelector와 querySelectorAll

• 용도: ✨CSS 선택자✨를 사용하여 특정 조건에 맞는 요소를 선택합니다.
• 사용 방법: CSS 선택자를 인자로 받아 해당하는 요소를 선택합니다.
• 인자: CSS 선택자
• 반환 값: 선택한 첫 번째 요소(querySelector) 또는 모든 요소(querySelectorAll)를 반환합니다.

let elementByQuery = document.querySelector("#uniqueElement");
let elementsByQueryAll = document.querySelectorAll(".myClass");

10. getElementBy 시리즈와 querySelector의 차이점

1. 선택 방법:
   getElementBy 시리즈 : id, 클래스 이름, 태그 이름 등을 기준으로 요소 선택
   querySelector 및 querySelectorAll : 💛CSS 선택자💛를 사용하여 요소를 선택합니다.

2. 유연성:
   querySelector 및 querySelectorAll은 CSS 선택자를 사용하기 때문에 더 유연하고 다양한 선택 기준을 제공합니다.

11. preventDefault()를 왜 쓰는가?

preventDefault() 메서드는 이벤트의 기본 동작(Default)을 막는 데(prevent) 사용됩니다.

loginForm.addEventListener("submit", onLoginSubmit);
function onLoginSubmit(event){/* 엔터나 버튼을 누를 때 발생 */
    event.preventDefault();//event의 기본 행동인 새로고침을 방지함
}

12. setInterval이 무엇인가?

setInterval()은 반복적인 작업을 수행하기 위해 사용되는 타이머 함수입니다!

setInterval(반복할 함수, 실행 간격(ms), 함수인자1, 함수인자2, ...);

📣 코드를 실행하면 지정한 간격이 지난 후 함수를 처음 실행하므로, 실행 직후 한 번 수행 된 후 반복 수행되길 바란다면 setInterval 사용 전에 함수 호출을 한 번 해줘야합니다!

function sayHello() {
    console.log("Hello, world!");
}

sayHello(); //실행직후 바로 한 번 실행
// 1초마다 sayHello 함수를 실행
let intervalId = setInterval(sayHello, 1000);

// 5초 후에 interval을 중지
setTimeout(function() {
    clearInterval(intervalId); // interval을 중지
}, 5000);

13.toggle이 무엇인가?

존재하면 제거하고, 존재하지 않으면 추가하는 동작을 토글이라고 합니다!
if문을 사용하여 지정해야하는 동작을 간단하게 할 수 있습니다!
element.classList.toggle("className");

/* if문으로 구현하기 */
    if (h1.classList.contains(clickedClass)) { /* class list가 clicked class를 포함하는가? */
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass); //특정 class만 조작하기
    }
/* toggle로 구현하기 (class list로 구현한 코드와 완벽히 같음) */
    h1.classList.toggle("clicked");

14. padStart()가 무엇인가?

padStart()는 문자열을 특정 길이로 채우는 함수입니다.
주어진 길이보다 문자열의 길이가 짧은 경우 지정된 문자열을 시작 부분에 추가합니다!

문자열.padStart(문자열 길이, [빈 부분 채울 문자열])

let str = "123";
console.log(str.padStart(5, "0")); // "00123"
console.log(str.padStart(7, "abc")); // "abcb123"
console.log(str.padStart(2)); // "123" (출력할 문자열이 지정한 문자열 길이보다 길기 때문에, 출력하고자 했던 문자열을 그대로 출력함)

• "7".padStart(20,"012345");
  
  7이 자리할 마지막 한 자리를 제외한 19자리를 함수의 인자로 지정한 "012345"가 연속되도록 채웁니다.

• "7".padStart(2, "012");
  
  7이 자리할 마지막 한 자리를 제외한 1자리를 함수의 인자로 지정한 "012"가 연속되도록 채웁니다. 한 자리만 여유가 있으므로 "012"중 0이 남은 1칸을 자리했음을 확인할 수 있습니다.

• "789".padStart(2, "0");
  
  출력할 문자열이 이미 지정한 문자열 길이보다 길기 때문에, 출력하고자 했던 문자열을 그대로 출력합니다!