오늘은 자바스크립트 기초를 다시 한번 공부해보는 시간을 가져 보겠습니다.

유튜브에 코딩앙마라는 분이 정말 잘 정리 해주셔서 보면서 다시 한번 상기시킬 수 있었습니다.

이번 시간은 영상에서 함수 전까지만 하고 다음번에 함수편 부터 다시 시작해보겠습니다.

그럼 시작하겠습니다.

출처:
유튜브: 코딩앙마

---

자바스크립트 기초

• 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만원