[JS] 기본 문법

39381 단어 JavaScript 컴공 visualstudiocode computer jQuerry JavaScript

기본 용어

표현식과 문장

표현식이란?

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

예)

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>

불

불리언(boolean) 자료형

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

비교 연산자

논리 연산자

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

논리곱(AND)

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

논리합(OR)

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

Short Circuit

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

변수

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

변수 선언
변수에 값 할당

변수 선언 방법.
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 자료형

선언되지 않거나 할당되지 않은 변수.
변수에 저장해도 의미가 없음.

<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은 문제발생 가능.

Author And Source

이 문제에 관하여([JS] 기본 문법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@paenge1004/JavaScript-기본-문법

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

20장 strict mode란?

바로 계산과 지연 계산

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다