🥸 웹앱개발 이모저모/Java Script

[JS] 입출력, 변수, 자료형, 초기화

무콩이 2023. 4. 16. 16:21

자바 스크립트의 입력

prompt() : 사용자의 입력을 받을 수 있음 , 팝업창 형태

  • 리턴 값은 string 또는 null
    • 값을 입력하고 확인 버튼을 누르면 string으로 반환, 취소 버튼을 누르게 되면 null이 반환됨
var name = prompt("이름을 입력하시오."); //입력
document.write(name); //출력

입력받은 이름은 name 변수에 저장 → name을 브라우저 화면에 출력함

출력

  • doucument.write() : 브라우저 출력
  • console.log() : 콘솔 출력 → 더 많이 씀
  • var name = prompt("이름을 입력하시오."); //입력 console.log(name); //콘솔창에 출력
  • alert() : 알림창으로 출력
  • var name = prompt("이름을 입력하시오."); //입력 alert(name); //알림창형태로 출력

자바스크립트 소스를 작성할 때 지켜야할 규칙

  • 대소문자 구별하기
  • 들여쓰기 : 보기 좋도록 !
  • 문장 끝은 세미콜론 ;
  • 주석 사용하여 메모하기
    • //한줄 주석
    • /* 여러줄 *
  • 식별자는 규칙 지키기
    • 첫 글자는 영문자나 밑줄(_), 달러 기호($)
    • 두 단어 이상이 모여 하나의 식별자를 만들 경우 하이픈(-)이나 밑줄(_)로 연결 >> 공백 사용 X
      • 보통 대문자를 사용하여 단어가 바뀜을 표시함
      • ex ) num1, checkTime, _*do_*java_script, java-script
  • 예약어는 식별자로 사용할 수 없음

변수

  • 선언 방식
    • var
    • let
    • const

호이스팅

var로 선언하면 호이스팅이 가능함

원래는 변수를 사용하려면 사용하기 전에 변수를 선언해줘야함

그러나 호이스팅은 변수를 사용한 후 변수를 선언해도 아래에 선언된 변수가 위에서 사용된 변수라고 인식해줌.

let a = 10 ;
console.log(a);

console.log(b);
var b = 20;

출력 결과 >>

b를 먼저 출력하고 값을 선언해줌 console.log(b) 당시에는 b의 값이 정의 되지 않았으므로 undefined를 출력함 → 선언을 나중에해도 오류는 없음 (호이스팅)

자료형

typeof() 연산자로 자료형 확인 가능

템플릿 문자열

` 기호로 생성 ‘(작은따옴표)랑 다름

console.log의 매개변수로 사용가능

${표현식}으로 사용 표현식은 계산되어서 문자열에 들어감

console.log(`3+4 = ${3+4}`);
// 3+4 = 7 이렇게 출력됨
console.log("3+4 = ", 3+4);
//위와 같은 의미

console.log(`올해는 ${new Date().getFullYear()}년 입니다.`);
//올해는 2023년 입니다. 이렇게 출력됨

배열

var ary1 = ["test1", "test2", 10];

[]로 생성하고 여러가지 타입을 넣을 수도 있음 ⇒ 복합형

인덱스로 요소에 접근

객체

key:value 형식

var me = {
    firstName : "kim",
    lastName : "hajin",
    number : 15
}
console.log(me.firstName); //객체 내의 값인 kim 출력

me.nickName = "무콩"; 
//객체명.key명 = "value값"; 으로 값 추가도 가능함

key로 value에 접근함 , 여러타입 넣기 가능 ⇒ 복합형

{}에는 function도 들어갈 수 있음

연산자

+연산자

문자열과 문자열을 연결함 : 연결 연산자로 사용됨

“20” + 10 = 2010 을 반환해줌

20 + 10 = 30을 하고 싶다면 ? 형변환이 필요함

Number(숫자형으로 바꾸고 싶은 변수명)

.. -,*,/ 등의 연산자는 “20” - 10 이런식이어도 숫자로 자동 형변환되어 계산됨

비교연산자

보통은 ==이 같은가? 를 의미함

=== : 자료형까지 완벽하게 같은지를 판단하는 연산자

!== : 자료형까지 같이 않은가를 판단하는 연산자

ex ) “2” == 2 ⇒ true (2라는 값은 같으므로) , “2” === 2 ⇒ false (값은 같지만 자료형이 다르기때문)

초기화하기

  • 삼항 연산자
      let test;
      test = test ? test : "초기화합니다"; //test에 값이 없으므로 false -> "초기화합니다" 가 들어감
      console.log(test); //초기화합니다 출력
      test = test ? test : "초기화2"; //test에 값이 있으므로 test값 그대로 return
      console.log(test); //원래 값이 초기화합니다 출력
  • 불 표현식 ? 참 : 거짓
  • || 연산자
      let test;
      test = test || "초기화"; //test에 값이 없으므로 "초기화"가 값으로 들어감
      console.log(test); //초기화 출력
      test = test || "초기화2"; //test 값이 있으므로 test 값 그대
      console.log(test); //원래 값이 test , 초기화 출력
  • 변수 = A || B : 변수가 참이면 A || 거짓이면 B