자바스크립트 기초 (1)

크롱·2023년 3월 25일
0

JavaSrcipt

목록 보기
1/53

코딩앙마 자바스크립트 기초 강의를 듣고 정리하였습니다.

🌞 형 변환

String(), Number(), Boolean()

  • String() -> 문자형으로 변환

  • Number() -> 숫자형으로 변환
    Number("문자") // NaN
    🌟Number(null) // 0
    ex. prompt 에서 취소를 누르면 null이 할당됨.
    🌟Number(undefined) // NaN

  • Boolean() -> 불린형으로 변환

False

  • 숫자 0
  • 빈 문자열 '' , 공백은 true
  • null
  • undefined
  • NaN (Not a number)
<script>
console.log (
 Boolean(1),
 Boolean(123),
 Boolean("javascript")
)
// true 를 반환

console.log (
 Boolean(0),
 Boolean(""),
 Boolean(null)
 Boolean(undefined)
 Boolean(NaN)
)
// false 를 반환
</script>


🌞 기본 연산자

나머지(%)

홀수 : X % 2 = 1
짝수 : Y % 2 = 0

거듭제곱

<script>
 
 const num = 2**3
 console.log(num);
 //8

</script>

연산자 줄임

<script>
let num = 10;

// num = num + 5
num += 5 

console.log(num);
//15

</script>

증가 연산자, 감소 연산자

<script>
let num = 10;
let result = num++;

console.log(result);
//10이 나옴.
</script>
<script>
let num = 10;
let result = ++num;

console.log(result);
//11이 나옴.
</script>

🌞 비교 연산자, 조건문(if, else)

조건문

<script>
   const age = 19;
   
   if(age > 19) {
      console.log('환영합니다.');
   } else if (age === 19) {
   console.log('수능 잘치세요.');
   } else {
   console.log ('안녕히 가세요.');
}   

// 수능 잘치세여
</script>

🌞 논리 연산자

  • || : or
    하나라도 true 면 true !
    모든 값이 false 일때만 false 반환
  • && : and
    모든값이 true 면 true
    하나라도 false 면 false 반환
  • ! : Not
    true 면 false
    false면 true

|| Or

<script>
// Or
// 이름이 Tom 이거나, 성인이면 통과

const name ="Mike"
const age = 30;

if (name ==="Tom" || age > 19) {
	console.log("통과");
 }
 
// "통과"

</script>

&& AND

<script>
// AND
// 이름이 Mike 이고 성인이면 통과

const name ="Tom"
const age = 30;

if (name ==="Mike" && age > 19) {
	console.log("통과");
 } else {
 	console.log('돌아가')
 }
 
// "돌아가"

</script>

! NOT

<script>
// NOT
// 나이를 입력받아 성인 아니면 돌아가라고...

const age = prompt('나이가...?');
const isAdult = age > 19;

if (!isAdult) {
	console.log('돌아가..')
}

console.log('당신은 성인입니다.')

// age가 10일 경우 "돌아가"
// age가 20일 경우 "당신은 성인입니다."

</script>

우선순위

<script>
// 우선순위
// 남자이고, 이름이 Mike 이거나 성인이면 통과

const gender ='F';
const name ='Jane';
const isAdult = true;

if(gender==='M' && name === 'Mike' || isAdult){
	console.log('통과')
} else {
	console.log('돌아가')
}

// 결과는 '통과'
//&& 부터 심사하기때문에 || isAdult가  마지막으로 
//심사되어서 true로 반환

if(gender==='M' && (name === 'Mike' || isAdult)){
	console.log('통과')
} else {
	console.log('돌아가')
}

// 돌아가 반환.


</script>

🌞 반복문 (for, while, do while)

for 반복문

;로 ( )의 값을 구분

<script>
//1부터 10까지 로그

for(let i = 1; i< 11 ; i++){
	console.log(i)
}
//1부터 10까지 반환
</script>

while과 do..while

do while 보다 while을 더 자주 사용

<script>
//while
let i = 0;

while(i<10) {
	console.log(i);
    i++;
} 
//0부터 9까지 반환

//do..while
let i = 0;

do {
  console.log(i);
  i++;
}while(i<10)

//0부터 9까지 반환
</script>

break, continue

  • break
    무한반복문 while(true) 에서 빠져나와봅시당
<script>
//break

while(true){
  const answer = confirm('계속 할까용?');
  if(!answer){
     break;
  }
}

</script>
  • continue ,짝수만 반환해보기
<script>
  for(i=0; i<10; i++){
 	if(i%2){
    continue;
    }
    console.log(i)
}
// 0 2 4 6 8 반환.
//i가 홀수일때 if문이 참이되어 continue를 실행시켜
//콘솔로그로 넘어가지 않고 바로 ( )로 넘어간다.
</script>
  • 명확한 횟수가 정해져있다면 for 문, 그게 아니라면 while

🌞 switch

모든 switch는 if else로 작성 가능

<script>
let fruit = prompt('어떤 과일을 사고싶나요?');

switch(fruit) {
  case '사과' :
    console.log('100원 주삼.');
    break;
  case '바나나' :
    console.log('200원 주삼.');
    break;
  case '수박' :  
  case '멜론' :
    console.log('300원 주삼.');
    break;
  default:
    console.log('그런 과일 없습니다');
}
//break를 쓰지 않으면 ㅡ 바나나 입력시 그 뒤 200원 300원 그런 과일 없습니다 까지 다나옴.
</script>

🌞 함수 function

함수 선언문을 사용하자

함수 선언문 - 어디서든 호출 가능

<script>

sayHello(); // ok

function sayHello() {
	console.log('hi');
}


</script>

함수 표현식

<script>
let sayHello = function() {
	console.log('hi');
}

sayHello(); // 항상 밑에서 호출
</script>

화살표 함수 arrow function

  • function 을 생략할 수 있다
  • 한줄일경우 일반 괄호를 사용할 수 있다
  • let을 이용
<script>
let add = (num1, num2) => (
 return num1 + num2;
)

let add = (num1, num2) => num1 + num2;
//리턴문이 한줄이면 괄호도 생략가넝

//인수가 하나여도 괄호 생략 가넝
let sayHi = name => `Hello, ${name}`;

//인수가 없다면?
let showError = () => {
	alert('error!');
}

//
let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};
</script>
profile
👩‍💻안녕하세요🌞

0개의 댓글