JavaScript 기초 - 1

강신찬·2025년 6월 12일

javascript 공부

React 공부에 앞서서 자바스크립트를 다시 한 번 훑어보고 가려고 정리합니다.

변수

자바스크립트에서는 문자는 항상 ""로 감싸주어야 한다.
예약어는 변수명으로 쓸 수 없다.
let 은 한번 선언 후 바꿀 수 있음. 최초로 let으로 선언하고 이후에는 let을 생략
const는 절대 바뀌지 않는 상수를 선언할 때 씀. 대문자로 선언하는게 좋음.
변수는 문자와 숫자, $와 _만 사용 가능
첫글자는 숫자가 될 수 없음
변수명은 읽기 쉽고 이해할 수 있게 선언
변수를 선언하고 변수를 다른 곳에 넣을 때는 ${ }로 넣기

자료형

문자형
- "",'',`` 으로 표현할 수 있음.
- "",''의 차이는 없음
- ``은 문자 내부의 변수를 표시할 때 사용하면 편리, 표현식을 넣을수도 있음.
- 문자형도 더하기 가능. 하나의 문장으로 합쳐줌.
- 숫자형과 문자형을 합치면 문자형으로 변환되서 하나의 문장으로 합쳐줌.
숫자형
- Number
- 사칙연산 가능
  = 논리형(Boolean)
- true / false
null
- 존재하지 않음
undefined
- 할당하지 않음.
객체형과 심볼형도 있음.
typeof 연산자는 타입이 무엇인지 알 수 있음.

대화상자

alert
- 메시지를 띄우고 확인버튼을 누르기 까지 떠있음. 확인 버튼만 있음.
- 상호작용 보다는 정보전달의 목적
prompt
- 사용자에게 어떤 값을 입력받을 때 사용
- 취소를 누르면 null을 반환함
- Defalt값도 입력 가능
- 두 개의 인수를 받을 수 있는데 첫 번째 인수는 메시지, 두 번째 값은 입력받을 디폴트값
  - prompt( 메시지, 디폴트값);
confirm
- 뭔가를 안내하거나 물어볼 때 사용, 사용자의 액션을 한 번 확인 해줄 때
- alert과 다른점은 취소 버튼도 있음.
- 확인을 누르면 true, 취소를 누르면 false가 입력 됨. 이 값을 활용
단점
- 스크립트 일시 정지
- 스타일링 불가능(위치와 모양 정하기 불가)

형변환

prompt로 입력 받은 값은 무조건 문자형. 다른 타입으로 활용하려면 형변환이 필요함. 자동 형변환이 있기 때문에 명시적 형변환을 꼭 해주어야 함.

형변환 메소드의 각 맨 앞은 대문자로 써야함.
String() -> 문자형으로 변환
Number() -> 숫자형으로 변환
- 인수에 숫자가 아닌 값이 들어가면 NaN이 됨.
- true와 false 는 1과 0으로 변환 됨.
- null은 0이 됨
- undefined는 NaN이 됨
Boolean() -> 논리형으로 변환
- 숫자 0, 빈문자열 '', null, undefined, NaN ==> false 반환 그 이외에는 전부 true
- 숫자 0은 false, "0"은 true, 문자 ''은 false, ' '은 true

연산자

덧셈 +
뺄셈 -
나눗셈 /
곱셈 *
- 거듭제곱 **
나머지 %
곱셈과 나눗셈은 덧셈 뺄셈보다 우선순위를 가짐. 덧셈 뺄셈을 먼저하고 싶으면 괄호

let num = 10; num = num + 5; -> num += 5; 가능, 사칙연산 전부 가능
증가 연산자 ++, 감소 연산자 --
- 뒤에 쓰느냐 앞에 쓰느냐에 따라 차이가 있음.
- 뒤에 적으면 증가시키기 전에 값을 변수에 할당. 앞에 적으면 증가시킨 값을 변수에 할당

비교연산자, 조건문

<
>
<=
>=
==
- =을 하나 쓰는것은 할당을 의미
- 동등연산자는 이상한 결과를 출력할 때가 있음.
- ===이렇게 세개를 쓰면 타입까지 비교함. 가능하면 일치연산자를 쓰는것이 좋음.
  
  1 과 '1'을 비교하면 알 수 있음. 1 == '1' => true, 1 === '1' => false
!=
- 다른가 같은가는 결과를 논리형으로 출력함.
if
- if( age > 19 ) { console.log("어서오세요") };
- if 문에 조건에 해당될 때만 중괄호 코드 실행
else
- else { console.log("안녕히가세요") } if문의 조건에 해당하지 않는 나머지일 때 중괄호 안에 코드가 실행
else if
- else if( age === 19 ) { console.log("수능 대박터지세요") } 조건이 여러가지의 분기를 가질 때 사용.
비교연산자에도 우선순위가 있음.
- && > ||

논리 연산자

|| (OR)
- 여러 개 중 하나라도 true 면 true, 즉, 모든 값이 false 일때만 false를 반환
&& (AND)
- 모든 값이 true 일 때만 true, 하나라도 false가 있으면 false
! (NOT)
- true 면 false, false면 true
조건을 줄 때는 최소한의 데이터를 뽑는 조건을 앞에 두는 것이 좋다. (성능 향상)

반복문 loop

동일한 작업을 여러번 반복
for문

        초기값     조건   코드 실행 후 작업
for (let i = 0;  i< 10;     i++) {
  // 반복할 코드
}

while 문

let i = 0;
while(i<10) {
 console.log(i);
 i++;
}

do.. while 문

do { }while(){}
//여기에서 두에 있는 중괄호 코드는 무조건 한번은 실행됨

break;
- 반복문 종료
continue;
- 아무것도 수행하지 않고 지나가서 다음 코드 실행시키게 하기
명확한 횟수가 정해져 있다면 for문, 아니라면 while문을 쓰는 것이 꿀팁

switch 문

if, else 문과 효과가 같음.
break;를 만나기전 까지 모두 조건에 해당하는 아래 코드 모두 실행함.

switch(param){
  case '사과' :
    console.log('100원입니다');
    break;
  case '배' :
    console.log('200원입니다');
    break;
  case '망고' : //가격이 동일할 경우 이렇게 해주면 망고든 바나나든 300원 로그가 찍힘.
  case '바나나' :
    console.log('300원입니다');
    break;
  default :
    console.log('그런 과일 없음');
}