.addEvnetListener()
.addEventListener() : 이벤트가 발생했을 때 실행할 동작(함수)를 등록하는 메서드
- HTML, Document, Window, 등에서 특정 이벤트 발생 시 실행할 함수를 지정할 수 있음
- 클릭(
onClick), 키입력(keydown), 마우스(mousevoer) 등 다양한 이벤트 감지 - 한 요소에 여러 개의 이벤트 리스너를 추가 가능
removeEventListener()를 사용해 등록된 Event Listener를 삭제 가능
// Syntax
element.addEventListener("Event Type", fn)// Example
const handleOnClick = () => {
alert("Button Clicked!!");
};
const button = document.querySelector("button");
button.addEventListener("click", handleOnClick)preventDefault()
<a> <submit> 태그는 인터렉션 할 경우 페이지 이동 혹은 새로고침 됨
이러한 기본 설정이 되어 있는 태그들을 preventDefault()를 통해서 무효화 할 수 있음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>preventDefault() 예제</title>
</head>
<body>
<a href="https://example.com" id="prevent-link">
클릭하면 이동해야 하지만 preventDefault() 적용됨
</a>
<script>
document.querySelector("#prevent-link")
.addEventListener("click", function (event) {
event.preventDefault(); // 기본 이동 막기
console.log("링크 이동이 방지되었습니다!");
});
</script>
</body>
</html>console.
console.log는 요소를 HTML과 같은 트리 구조로 출력
- 일반적인 로깅, 디버깅, HTML 요소 출력
console.dir은 요소를 JSON과 같은 트리 구조로 출력
- DOM 요소의 속성 및 메서드 확인이 필요할 때
→ 대부분의 경우 console.log로 출력으로도 충분
if - 언제 써야 할까?
JavaScript는 인터프리터 언어로, 코드를 위에서부터 한 줄씩 읽으며 실행됨.
- 프론트엔드 개발에서 if문은 초기 검증 로직으로 자주 사용
if문의 최적 배치
- 초기 검사(if문)는 코드 최상단에 배치하는 것이 좋음
→초기 오류를 빠르게 감지 가능, 불필요한 연산을 줄여 성능 최적화
실행 흐름을 명확하게 만들어 가독성 향상
조건 검사는 최대한 초기에 수행하여, 불필요한 코드 실행을 방지하는 것이 좋음
생성자와 new
function Person(name, age) {
this.name = name;
this.age = age;
}
const user = new Person("John", 25);
console.log(user); // { name: 'John', age: 25 }Person()은 객체를 생성하는 "청사진" 역할을 하는 생성자 함수
new 키워드는 새로운 인스턴스를 생성하는 필수적인 요소
new 키워드 없이 생성자 함수를 호출한 경우 ↓
❌ ❌ ❌
function Person(name, age) {
this.name = name; // 전역 객체(window 또는 globalThis)에 name 추가
this.age = age; // 전역 객체(window 또는 globalThis)에 age 추가
}
const user = Person("John", 24);
console.log(user); // undefined
console.log(name); // "John" (전역 변수로 추가됨)
console.log(age); // 24 (전역 변수로 추가됨)삼항 연산자 Conditional (ternary) operator
설명보단 예시로 알아보는게 제일 빠름
// Example
// if문
let a = 1
let b = 2
if( a > b ) {
console.log(true);
} else {
console.log(false);
}
// 삼항연산자
let a = 3
let b = 5
const compare = (a > b) ? true : false;
console.log(compare); function()
- 함수 선언문
- 함수 표현식 + 화살표 함수(ES6)
함수 선언문
// Syntax
function a() {
console.log("Hello World");
};함수 표현식
// Syntax
// 익명 함수
let b = function() {
console.log("Hello World");
};
// 화살표 함수(ES6)
const c = () => {
console.log("Hello World");
};비교
| 구분 | 함수 선언문 (Function Declaration) | 함수 표현식 (Function Expression) |
|---|---|---|
| 이름 유무 | ✅ 반드시 함수 이름 필요 | ✅ 익명 함수 가능 (let b = function() {...}) |
| 호이스팅 | ✅ 호이스팅 O (선언 전에 호출 가능) | ❌ 호이스팅 X (선언 후에만 호출 가능) |
| 실행 시점 | 코드 실행 전에 미리 등록됨 | 변수에 할당된 후에 실행 가능 |
| 선언 방식 | 독립적인 함수로 선언됨 | 변수에 저장됨 (값처럼 사용 가능) |
| 사용 예 | 전역 또는 재사용 함수 | 콜백 함수, 동적 함수 생성 |
함수 선언문과 함수 표현식은 같은 기능을 하지만 호출 시점, 호이스팅 등이 다르다.
.indexOf() - 금칙어 설정
// 금칙어 : 콜라
function hasCola(str) {
if (str.indexOf("콜라")) {
console.log("금칙어가 있습니다.");
} else {
console.log("통과");
}
};
hasCola("와 사이다가 짱이야!"); // "금칙어가 있습니다."
hasCola("무슨소리, 콜라가 최고"); // "금칙어가 있습니다."
hasCola("콜라"); //"통과"1,3번이 의도한 바와 다르게 나온 이유
1번 : indexOf("콜라")는 주어진 문자열에서 "콜라"가 처음 등장하는 인덱스를 반환
그런데 indexOf()는 문자열에서 찾는 값이 없을 경우 -1을 반환
1번 : false에 해당하지 않으므로 true를 반환
3번 : "콜라"라는 문자열이 인덱스상 0에 위치해 있기 때문에 false 반환
올바른 정답
// 금칙어 : 콜라
function hasCola(str) {
if (str.indexOf("콜라") > -1 ) {
console.log("금칙어가 있습니다.");
} else {
console.log("통과"):
}
}
hasCola("와 사이다가 짱이야!");
hasCola("무슨소리, 콜라가 최고");
hasCola("콜라"); 
Async FE 취업 준비중.. Await .. (취업완료 대기중) ..