오늘은 자바스크립트 기초를 다시 한번 공부해보는 시간을 가져 보겠습니다.
유튜브에 코딩앙마라는 분이 정말 잘 정리 해주셔서 보면서 다시 한번 상기시킬 수 있었습니다.
이번 시간은 영상에서 함수 전까지만 하고 다음번에 함수편 부터 다시 시작해보겠습니다.
그럼 시작하겠습니다.
출처:
유튜브: 코딩앙마
자바스크립트 기초
confirm, prompt, alert
1. confirm
- 사용자에게 확인을 받기 위한 용도로 쓰인다.
코드
const name = confirm('당신은 누구입니까?');
console.log(name)결과 화면
- 확인 클릭 시: true
- 최소 클릭 시: false
2. prompt
- 사용자에게 입력 받기 위한 용도로 쓰인다.
코드
//prompt의 첫번째 인수는 사용자에게 메시지를 보여주고 2번째 인수는 default 값을 제공한다.
const name = prompt('당신은 누구입니까?', '저는 누구 입니다.');
console.log(name)출력 결과
3. alert
코드
const name = alert('당신은 누구입니까?');
console.log(name)confirm, prompt, alert의 단점
- 스크립트가 일시 정지 된다.
- 스타일링이 불가능하다.
그럼에도 불과하고 빠르고 간단하게 적용이 가능해서 많이 사용 한다고 합니다.
명시적 형변환
String()
- 괄호안의 자료형을 문자형으로 변환 해준다.
Number()
- 괄호안의 자료형을 숫자형으로 변환 해준다. 숫자가 아니라 문자형이 들어가면 NaN이 된다. Number("문자") // NaN
- Number(true) : 1
- Number(false) : 0
주의사항
- Number(null) //0
- Number(undefined) //NaN
Boolean() : false만 기억하면 된다.
- false : 밑에 있는 값들은 모두 false고 이외의 것들은 true를 반환한다.
- 숫자 0
- 빈 문자열 ''
- null
- undefined
- NaN
주의사항
-
Boolean(0) // false
-
Boolean('0') // true
-
Boolean('') // false
-
Boolean(' ') //true
나머지(%)
홀수: x % 2 = 1
짝수: y % 2 = 0
어떤 값이 들어와도 5를 넘기면 안될 때
x % 5 = 0 ~ 4 사이의 값만 반환
연산자 줄여 쓰기
let num = 10;
num = num + 5;
num += 5; // 위와 같은 코드증가 감소 연산자
let num = 10;
let result = num++; //10 +가 뒤에 나오면 기존 10을 먼저 표기하고 더한다.
let result = ++num; //11 +가 앞에 가야지 1을 더한 값을 표기
비교 연산자, 조건문
console.log(10 > 5); // true
console.log(10 == 5); // false
console.log(10 != 5); // true==(동등 연산자) : 타입은 비교 안한다.
const a = 1;
const b = '1';
console.log(a == b); //true===(일치 연산자) : 타입 까지 비교한다. 가급적 일치 연산자를 쓰는 것이 좋다.
const a = 1;
const b = '1';
console.log(a === b); //false조건문
if문
코드가 한줄이면 {}이 생락 가능하나 가능한 써주는게 좋다. 통일성과 가독성을 위해
if(age > 20) {
console.log('하이');
}논리 연산자
|| (OR)
- a || b
- 여러개 중 하나라도 true 면 true. 즉, 모든값이 false 일때만 false를 반환
- 첫번째 true를 발견하는 즉시 평가를 멈춘다.
&& (AND)
- a && b
- 모든 값이 true 면 true. 즉, 하나라도 false 면 false를 반환
- 첫번째 false를 발견하면 즉시 평가를 멈춘다.
! (NOT)
- !a
- true면 flase로 변환
- false면 true로 변환
평가
'운전면허가 있고 시력이 좋은 여군'이 있는 프로그램을 작성시
- 운전면허: 전체군인의 80%
- 시력: 전체군인의 60%
- 여군: 전체군인의 7%
이럴때는 순서를 조정해서 여군 부터 걸러내면 처음부터 93%를 걸러 낼 수 있어 작은 %부터 걸러 내는게 좋다.
-> 여군인데 시력이 좋고 운전면허가 있는 사람
간단한 예제
||(OR)
- TOM이거나 성인이거나
const name = 'TOM';
const adult = 10;
if(name === 'TOM' || adult > 19){
console.log('통과');
} else {
console.log('불통');
}
//결과: 통과&&(AND)
- 톰이어야 되고 성인이어야 된다.
const name = 'TOM';
const adult = 10;
if(name === 'TOM' && adult > 19){
console.log('통과');
} else {
console.log('불통');
}
//결과: 불통!(NOT)
- 성인이면 들어오고 아니면 돌아가기
const age = prompt('나이?');
const isAdult = age > 19;
if(isAdult){
console.log('들어오세요')
} else if(!isAdult) {
console.log('나가세요')
}우선순위
- &&가 || 보다 우선 순위가 높다.
남자이고, 이름이 Mike 이거나 성인이면 통과하는 코드를 짜 보겠습니다.
코드
const gender = 'M';
const name = 'Mike';
const isAdult = true;
if(gender === 'F' && name === 'Jane' || isAdult ){
console.log('통과')
} else {
console.log('나가세요')
}
//결과 : 통과
// 이유: &&가 ||보다 우선 순위가 높아서 마지막에 isAdult가 true이므로 통과가 나온다.
//if((gender === 'F' && name === 'Jane') || isAdult ) <- 이것과 똑같다코드
const gender = 'M';
const name = 'Mike';
const isAdult = true;
if(gender === 'F' && (name === 'Jane' || isAdult)){
console.log('통과')
} else {
console.log('나가세요')
}
//결과 : 나가세요반복문
문제: 0~9 까지 숫자 반복하기
for 문
for(let i = 0; i < 10; i++){
console.log(i);
}while 문
let i = 0;
while(i<10){
console.log(i++)
}- 명확한 횟수가 정해져 있을 때는 for문 아닐때는 while문을 쓴다.
do.. while 문
let i = 0;
do {
console.log(i);
i++
// i++
//console.log(i); 이렇게 작성하면 1~10 까지 출력 초기 i값에 1을 더해서 나오게 된다. 주의!!!
} while(i < 10)- while과 do.. while의 차이점
do.. while에서는 do에서 먼저 코드를 실행하고 while에서 조건을 체크 하기 때문에 while과는 다르게 do.. while은 적어도 한번은 실행한 다는 것이 차이가 있다.
반복문 빠져 나오기
break, continue
break : 멈추고 빠져나옴
- confirm에서 확인을 누르면 무한 반복하고 취소를 눌러야 멈추는 코드.
while(true){
let answer = confirm('계속 할까요?');
if(!answer){
break
}
}continue : 멈추고 다음 반복으로 진행
코드
var i = 0;
var n = 0;
while (i < 5) {
i++;
if (i === 3) {
continue;
}
n += i;
}
console.log(n)
//결과: 12- i를 0부터 4까지 반복하고 i값이 3이면 반복문을 종료하고 다시 반복문의 처음으로 돌아여 루프문의 다음 반복문을 실행한다.
switch문
- 고치기 전 코드
let fruit = prompt('과일');
switch(fruit){
case '사과':
console.log('100만원');
break;
case '바나나':
console.log('200만원');
break;
case '키위':
console.log('300만원');
break;
case '멜론':
console.log('500만원');
break;
case '수박':
console.log('500만원');
break;
default:
throw new Error('과일이 없습니다.');
}
//결과: 사과를 입력하면 100~500만원 에러문구 까지 다 실행된다.
//이유: 반복문이기 때문에 멈춰주지 않으면 끝까지 실행된다. 그렇기 때문에 break로 멈춰 주어야 한다.- 솔루션 코드
let fruit = prompt('과일');
switch(fruit){
case '사과':
console.log('100만원');
break;
case '바나나':
console.log('200만원');
break;
case '키위':
console.log('300만원');
break;
case '멜론':
case '수박':
console.log('500만원'); // 멜론과 수박의 결과 값이 같으면 이런식으로 합칠 수가 있다
break;
default:
throw new Error('과일이 없습니다.');
}
//결과: 100만원 
코딩하는 아재입니다.