[JS] 기본 문법

뭉크의 개발·2021년 9월 1일
JavaScriptcomputerjQuerryvisualstudiocode컴공
0

기본 용어

표현식과 문장

표현식이란?

  • 값을 만들어내는 간단한 코드.

  • 예) 

    273 //속성
10 + 20 + 30 * 2 //요소들
'RintIanTta' //속성

    문장이란?

  • 하나 이상의 표현식이 모인 것.

  • 문장이 모여 프로그램 구성.

  • 문장의 끝에는 세미콜론을 찍어 문장을 종결.

  • 하나의 표현식에도 세미콜론만 찍히면 문장.

  • 예)

    10 + 20 + 30 * 2
var rintiantta = 'Rint' + 'Ian' + 'Tta';
alert('Hello JavaScript..!');
273;

키워드

키워드란?

  • 자바스크립트가 처음 만들어질 때 정해진 특별한 의미가 있는 단어.

  • 모든 브라우저에서 표와 같은 28개의 키워드를 지원.

  • 키워드는 재정의 불가능

미래에 사용될 가능성이 있는 자바스크립트 키워드

  • W3C에서는 자바스크립트 프로그램 작성 시 아래 키워드를 사용하지 않기를 권고.
  • const나 debugger 같은 키워드는 이미 일부 브라우저에서 사용.
  • 빨간 밑줄은 이미 ECMAScript 6와 7에서 사용하는 키워드들.

식별자

  • 자바스크립트에서 이름을 붙일 때 사용.
  • 예) 변수명과 함수명

생성 시 규칙

  • 키워드를 사용 불가.
  • 숫자로 시작하면 불가.
  • 특수문자는 _와 $만 허용.
  • 공백문자 포함 불가(2개의 식별자가 연속으로 나타나는 표현식은 없다.)
  • 모든 언어가 사용 가능하나 알파벳 사용 관례.
    생성자 함수의 이름은 대문자로 시작.
    변수와 인스턴스, 함수, 메서드의 이름은 항상 소문자로 시작.
    식별자가 여러 단어로 이루어지면 각 단어의 첫 글자는 대문자로 시작.
  • Input, Output 같은 의미있는 단어 사용.

종류

  • 크게 네 종류.

!tip
~.abc -> 속성,
~.abc -> 메서드

식별자 구분

alert('Hello World') -> 함수
Array.length -> 속성
input -> 변수
propmt('Message','Defstr') -> 함수
Math.PI -> 속성
Math.abs(-271) -> 메서드

주석(Commend)

  • 프로그램 진행에 영향을 끼치지 않음.
  • 코드의 특정 부분을 설명.

HTML태그 주석

  • < !-- -->로 문자열을 감싸 생성.
<!DOCTYPE html>
<html>
<head>
     **<!-- 주석입니다. -->**
     <script>
     </script>
</head>
<body>
    ** <!-- <h1>주석입니다. </h1> --> **
</body>
</html>

JavaScript 주석

  • //를 사용해 한 줄 주석 표현.
  • / 와 / 을 사용해 여러 줄 주석 표현.

출력

JavaScript 출력

  • 기본 출력 방법 : alert()함수를 사용할 구성 예제.
<!DOCTYPE html>
<html>
<head>
    <script>
    
    </script>
</head>
<body>

</body>
</html>

alert() 함수

  • 가장 기본적인 출력 방법.
  • 브라우저에 경고창을 띄울 수 있음.
  • alert() 함수의 사용 예 : 함수의 괄호 안에는 문자열 입력.
~위 예제
<scipt>
     alert('Hello JavaScript..!');
</script>

매개변수

  • 함수의 괄호 안에 들어가는 것.
  • alert([String message])

문자열

문자열이란?

  • 문자를 표현할 떄 사용하는 자료의 형태.
  • alert() 함수의 매개 변수로 쓰인 'Hello JavaScript..!'
  • 문자열을 만드는 방법 : 큰따옴표(""), 작은따옴표('')
    두 가지 방법 중 어떤 문자열로도 사용 가능하지만 일관되게 사용.

예외적인 문자열 사용법

이스케이프 문자의 사용

  • 한가지 따옴표로만 사용하고 싶을 때.

이스케이프 문자란?

  • 특수한 기능을 수행하는 문자.
  • 따옴표를 사용하고 싶을 때 이스케이프 문자를 사용. (역 슬래시 )
<script>
      alert("This is \"string\"");
      alert('This is \'string\'');
</script>

자주 사용하는 이스케이프 문자

-\n : 문자열 줄 바꿈 할 때 사용
-\t : 일부 웹 브라우저에서는 경고창이 보이지 않음.

문자열 연결

  • 연결 연산자 +로 연결 가능

숫자

숫자 자료형

  • 정수와 유리수의 구분 없이 숫자는 모두 숫자.
  • 문자열과 마찬가지로 alert()함수의 괄호 안에 사용.

나머지 연산자 %

  • 좌변을 우변으로 나눈 나머지를 표시하는 연산자.
<script>
    alert(10 % 7);
</script>

3

불

불리언(boolean) 자료형

  • 참과 거짓이라는 값을 표현.

비교 연산자

논리 연산자

  • 논리 부정 연산자 : 참을 거짓으로, 거짓을 참으로 바꿈
    (!true->거짓, !false->참)

논리곱(AND)

  • 좌변과 우변이 모두 참일 때만 참

논리합(OR)

  • 좌변과 우변이 모두 거짓일 때만 거짓

Short Circuit

내용이 복잡하여 따로 포스팅!

변수

변수

  • 값을 저장할 때 사용하는 식별자.
  • 숫자뿐 아니라 모든 자료형 저장 가능.
  • 변수를 사용하려면?
  1. 변수 선언
  2. 변수에 값 할당

  • 변수 선언 방법.
    var 식별자;

    <script>
     // 변수를 선언합니다.
     var pi;
</script>

  • 숫자가 들어간 변수는 숫자와 관련된 연산자,
    문자열이 들어간 변수는 문자열과 관련된 연산자 사용.

<script>
     // 변수를 선언 및 초기화 합니다.
     var radius = 10;
     var pi = 3.14159265;
     
     // 출력합니다.
     alert(2 * pi * radius);
</script>
  • var 키워드를 사용해 여러 변수를 한꺼번에 선언.
    쉼표를 사용해 식별자를 연속으로 입력.
<script>
    // 변수를 선언 합니다.
    var radius, pi;
    
    // 변수에 값을 할당합니다.
    radius = 10;
    pi = 3.14159265;
    
    // 출력합니다.
        alert(2 * pi * radius);
</script>

자료형

  • 문자열, 숫자, 불리언과 같은 것.
  • 자바스크립트에는 총 여섯 가지 자료형이 있음.
  • cf. undefined 자료형
  1. 선언되지 않거나 할당되지 않은 변수.
  2. 변수에 저장해도 의미가 없음.
<script>
   // 변수를 선언합니다.
   var stringVar = 'String'
   var numberVar = 273;
   var booleanVar = true;
   var functionVar = function () { };
   var objectVar = {}; //객체, dbject
</script>

복합 대입 연산자

  • 변수 value를 10으로 초기화.
  • 이후 += 복합 대입 연산자를 사용해 value의 기존 값에 10을 더함.
  • 결과는 20 출력.
<script>
    // 변수를 선언합니다.
    var value = 10;
    
    // 연산자를 사용합니다.
    value += 10;
    
    // 출력합니다.
    alert(value);
</script>
  • 변수 list를 빈 문자열('')로 초기화.
  • += 복합 대입 연산자를 사용해 문자열.
  • HTML 문서의 body 태그에 넣음.
<body>
<script>
     window.onload = function () {
     // 변수를 선언합니다.
     var list = '';
     
     // 연산자를 사용합니다.
     list += '<ul>';
     list += '     <li>Hello</li>';
     list += '     <li>JavaScript..!</li>';
     list += '</ul>';
     
     // 문서에 출력합니다.
     document.body.innerHTML = list;
     };
</script>
</body>

증감 연산자

  • 복합 대입 연산자를 간략하게 사용한 형태.

  • 해당 문장을 실행하기 전에 값을 더하는 것이 전위.

변수의 특성

  • 변수는 하나만 담을 수 있음.

자료형

  • 숫자, 문자열, 불리언 같은 자료의 형태
  • typeof 연산자
<script>
     alert(typeof ('String'));
     alert(typeof (273));
</script>

단항 연산자

  • 양수를 음수로 바꾸거나 음수를 양수로 바꾸는 - 기호

typeof 연산자

  • typeof 52 //nuber
  • typeof(typeof 52) //string
  • typeof 1 + '문자열' //number문자열
  • typeof(1 + '문자열') //string
  • typeof(1) + '문자열' //number문자열

이항 연산자

  • 양쪽에 항을 써서 사용 : +, -, *, / 연산자

Undefined 자료형

undefined

  • 정의하지 않은 자료형 의미
  • 선언하지 않은 식별자 alpha 사용
<script>
     //문자열
     alert(typeof ('String'));
     //숫자
     alert(typeof (273));
     //불
     alert(typeof (true));
     //함수
     alert(typeof (function () { }));
     //객체
     alert(typeof ({}));
     //undefined
     alert(typeof (alpha));
</script>
  • 존재하지 않는 것은 undefined 자료형으로 표현.
  • 변수로 선언하지 않은 식별자가 갖는 자료형.
  • 변수를 선언했지만 초기화하지 않았을 때 undefined 자료형을 갖음.

입력

문자열을 입력하는 방법

숫자를 입력 받는 방법

  • 문자열을 입력 받은 후 숫자로 변환.
  • 문자열을 입력을 할 때 사용하는 함수는 prompt() - 매개변수 두 개 필요.
  • 입력 칸에 변수를 입력하면 내부적으로 코드 변경.
<script>
      //변수를 선언합니다.
      var input = prompt('Message', 'DefStr');
      
      //출력합니다.
      alert(input);
</script>

confirm() 함수

  • 불을 입력 받을 때 사용.
  • prompt() 함수와 비슷한 방식으로 사용.
  • 사용자가 확인을 누르면 true 리턴.
  • 취소를 누르면 false 리턴.
  • 변수 input에 불이 들어가고 곧바로 변수 input을 출력.
<script>
      //변수를 선언합니다.
      var input = confirm('수락하시겠습니까?');
      
      //출력합니다.
      alert(input);
</script>

숫자와 문자열 자료형 변환

문자열과 숫자를 더하는 자료형

  • 숫자와 문자열을 덧셈 연산하면 문자열 우선.

문자열과 숫자를 곱하는 자료형

  • 더하기 연산자를 제외한 사칙 연산자는 숫자가 우선.

강제로 자료형 변환 시키기

  • 다른 자료형을 숫자로 : Number()함수.
  • 다른 자료형을 문자열로 : String()함수.

Number() 함수

  • 숫자로 바꾸려면 Number() 함수 사용.
  • 아래 코드는 문자열로 입력받고 숫자로 변환.
<script>
      //변수를 선언합니다.
      var input = prompt('숫자를 입력해주세요.', '숫자);
      var numberInput = Number(input);
      
      //출력합니다.
      alert(typeof (numberInput) + ': " + nuberInput);
</script>

NaN

  • NaN(Not a Number) 값 출력 : 숫자가 아닌 값 입력 시.
  • NaN은 자료형 숫자이나 자바스크립트로 나타낼 수 없는 숫자를 의미.
  • 자바스크립트는 복소수 표현이 불가능하므로 복소수는 NaN 표시.
<script>
      //변수를 선언합니다.
      var number = Math.sqrt(-3);
      
      //출력합니다.
      alert(number);
</script>

불 자료형 변환

Boolean() 함수

  • 불자료형으로 변환할 때 사용
  • 아래 코드의 다섯 가지 경우가 false로 변환(다섯가지 제외, true)
  • 문자열 '0'과 문자열 'false'는 문자열이므로 true
<script>
     alert(Boolean(0));
     alert(Boolean(NaN));
     alert(Boolean(''));
     alert(Boolean(null));
     alert(Boolean(undefined));
</script>

조건문 사용/ 논리 부정 연산자 사용

  • 자동으로 불리언 자료형으로 변환.
    - undefined 자료형은 false
<script>
     alert(!!0);
     alert(!!NaN);
     alert(!!'');
     alert(!!null);
     alert(!!undefined);
</script>

일치 연산자

자동 자료형 변환

  • 비교 연산자를 사용할 때 뜻하지 않는 경우가 발생.
  • 네가지 모두 true 출력.
<script>
     alert('' == false);
     alert('' == 0);
     alert(0 == false);
     alert('273' == '273');
</script>

일치 연산자의 용도

  • 자료형이 다른 것을 확실하게 구분 짓고 싶을 때 사용.

=== : 양 변의 자료형과 값이 일치합니다.
!== : 양 변의 자료형과 값이 다릅니다.

  • 아래 예제 코드의 결과는 모두 false.
<script>
    alert('' === false);
    alert('' === 0);
    alert(0 === false);
    alert('273' === 273);
</script>

참고!

템플릿 문자열 - ECMAScript 6

  • 템플릿 문자열은 이스케이프 기호로 감싸서 만들고, 내부에 ${표현식} 사용.
  • 표현식이 계산되어 들어감.

개선 전

<script>
     alert('표현식 273 + 52의 값은' (273 + 52) + '입니다.');
<script>

개선 후

<script>
     alert(`표현식 273 + 52의 값은 ${273 + 52}입니다.`);
</script>

let 키워드와 const 키워드 - ECMAScript6

<script>
   var v1 = 52;
   let v2 = 273;
   const v3 = 103;
</script>

차이점

var : 변수, 전역 scope, 재선언 가능
let : 변수, 해당 scope, 재선언 불가
const : 상수, 해당 scope, 재선언 불가

  • 상수는 선언 시 초기화해야 함.(하지 않으면 에러)
{
   //scope A
   var v1 = 52;
 }
 { 
   //scope B
   alert(v1);
 }
 alert(v1);

-> 대부분의 프로그래밍 언어에서 에러이지만, 자바스크립트에서는 에러가 아님.
var 키워드는 전역 scope이기 때문이다.

  • 전역의 경우 자원 낭비 가능성.
  • let 키워드는 자원을 적절하게 이용할 수 있음.
  • let 변수는 해당 scope에서만 사용.
  • 비동기 함수 사용시 var은 문제발생 가능.
profile
뭉크의 개발
C#, Unity
다음 포스트

[JS] 조건문

0개의 댓글