[JavaScript] 기초 공부 2

console.log()

개발자 도구의 콘솔 창에 메시지를 출력하는 디버깅용 도구

// 기본 사용법
console.log("안녕하세요!");  // 문자열 출력
console.log(123);           // 숫자 출력

// 여러 값 동시 출력
const 이름 = "길동";
const 나이 = 80;
console.log("이름:", 이름, "나이:", 나이);

// 객체 출력
const 사용자 = {
    이름: "길동",
    직업: "개발자"
};
console.log(사용자);

// 배열 출력
const 취미 = ["코딩", "운동", "독서"];
console.log(취미);

 

실사용 예시

// 에러 메시지
console.error("에러가 발생했습니다!");

// 경고 메시지
console.warn("주의하세요!");

// 정보 메시지
console.info("알려드립니다.");

// 테이블 형태로 출력
console.table([
    {이름: "길동", 나이: 25},
    {이름: "장군", 나이: 28}
]);

---

alert()

사용자에게 알림 팝업 창을 보여주는 함수

// 단순 메시지 출력
alert("안녕하세요!");

// 변수 값 출력
const 메시지 = "환영합니다!";
alert(메시지);

// 계산 결과 출력
const 점수 = 85;
alert(`당신의 점수는 ${점수}점입니다!`);

 

실사용 예시

// 폼 제출 완료 알림
function 제출완료() {
    if(폼검증()) {
        alert("제출이 완료되었습니다!");
    } else {
        alert("입력 정보를 확인해주세요.");
    }
}

// 로그인 성공/실패 알림
function 로그인체크(아이디, 비밀번호) {
    if(로그인성공) {
        alert("로그인 되었습니다!");
    } else {
        alert("아이디 또는 비밀번호가 잘못되었습니다.");
    }
}

---

prompt()

사용자로부터 입력을 받을 수 있는 대화상자를 표시

// 기본 입력 받기
const 이름 = prompt("이름을 입력하세요:");

// 기본값 설정
const 나이 = prompt("나이를 입력하세요:", "20");

// 입력 값 활용
const 취미 = prompt("취미를 입력하세요:");
if(취미) {
    console.log(`${취미}를 좋아하시는군요!`);
} else {
    console.log("취미를 입력하지 않으셨네요.");
}

 

실사용 예시

// 간단한 계산기
function 덧셈계산기() {
    const 숫자1 = prompt("첫 번째 숫자를 입력하세요:");
    const 숫자2 = prompt("두 번째 숫자를 입력하세요:");
    
    // 입력값을 숫자로 변환
    const 결과 = Number(숫자1) + Number(숫자2);
    
    alert(`계산 결과: ${결과}`);
}

// 사용자 정보 입력
function 사용자정보입력() {
    const 이름 = prompt("이름:");
    const 이메일 = prompt("이메일:");
    
    if(이름 && 이메일) {
        alert(`${이름}님, 환영합니다!\n입력하신 이메일: ${이메일}`);
    } else {
        alert("모든 정보를 입력해주세요.");
    }
}

---

console.log() | alert() | prompt() 주의사항

1. console.log()
   • 실제 서비스에서는 필요한 로그만 남기고 불필요한 로그는 제거해야 한다.
   • 민감한 정보는 절대 console.log()로 출력하지 않는다.
2. alert()
   • 사용자 경험(UX)을 방해할 수 있으므로 꼭 필요한 경우에만 사용한다.
   • 모던 웹에서는 모달이나 토스트 메시지 등 다른 UI 요소를 선호한다.
3. prompt()
   • 사용자 경험이 좋지 않아 실제 서비스에서는 잘 사용하지 않는다.
   • 대신 폼(form) 입력이나 모달 창을 사용하는 것이 좋다.
   • 입력값의 유효성 검사가 필요하다.

---

비교 연산자

두 값을 비교하기 위해 사용한다. 참 또는 거짓으로 결과 값으로 나온다.

• 동등 (값이 같다) : ==
• 부등 (다르다) : !=
• 일치 (데이터 타입까지 동일하다) : ===

var x = 5;
var y = 6;
x == y => false

 

• 우변보다 좌변이 큼 : >
• 우변보다 좌변이 크거나 같음 : >=
• 우변보다 좌변이 작음 : <
• 우변보다 좌변이 작거나 같음 : <=

---

논리 연산자

참 또는 거짓을 연산할 때 사용한다. 비교문을 조합해서 복잡한 조건문을 만든다.

• 그리고(AND) : &&
• 또는(OR) : ||
• 부정(NOT) : !

나이가 19세 이상이거나 액면가가 40세 이상이면 주류판매 가능

age >= 19 || faceOld >= 40

---

기타 연산자

• 삼항 연산자 (?)
• 단항 연산자 (delete, typeof)
• 비트 연산자 (&, |, ^, ~, <<. .>>, >>>)

( 명제 ) ? 참일경우 리턴값 : 거짓일 경우 리턴값
ex)
( 1 < 2 ) ? 2 : 1
이 경우 2는 1보다 크기에 참이므로 값이 2 반환

---

조건문

조건의 참/거짓 여부에 따라 원하는 코드를 실행한다.

• 조건은 참 또는 거짓을 결과로 가지는 비교연산자나 논리연산자의 조합으로 작성할 수 있다.

 

if 문은 if, else 키워드의 조합으로 조건문을 완성한다.

• 하나의 조건만 검사 : 만약 ~ 한다면

if(조건문){
	실행 코드
} else if (또 다른 조건식) {
	실행 코드
} else {
	실행 코드
}

 

 

switch문은 switch, case 키워드의 조합으로 조건문을 완성한다.

switch (표현식) {
	case 값1 :
    	표현식 == 값1 일 때 실행 코드
        break;
    case 값2 :
    	표현식 == 값2 일 때 실행 코드
        break;
    default:
    	모든 조건에 속하지 않을 때의 실행 코드
}