JS - 기본 문법

Jaa-van·2023년 3월 16일

JavaScript

1. HTML

기본적으로 헤더 바디 스크립트로 나뉘어있다
메타데이터는 헤드에 들어간다
실질적으로 보이는건 아니지만 title 이나 import export 등 이 들어간다

바디는 정적으로 페이지에 보여주는 부분
폰트나 크기나 색상 등을 CSS라고 한다

콘솔은 자바스크립트에서 전체적으로 사용할 수 있는 객체
객체는 key 와 value로 이루어져 있어
{}로 표시

key : value 순으로 표시된

npm package - nodemon

package j

터미널 실행 종료 ctrl c

script
npm run hello 를 하면 value 가 실행된다

2. 용어

@표현식
값을 만들어 내는 간단한 코드
ex)
273
10+20
'RintIanTta' 등

@문장
하나 이상의 표현식이 모인 것
; 또는 줄바꿈을 통해 종결을 알려준다
ex)
10+20 ;
let rintiantta = 'Rint' + 'Ian' + 'Tta'

@프로그램
문장이 모여 프로그램을 만든다

@키워드
자바스크립트가 처음부터 정해놓은 특별한 의미가 있는 단어

@식별자
프로그래밍 언어에서 이름을 붙일 때 사용하는 단어
규칙
1. 키워드를 사용하면 안 됩니다
2. 숫자로 시작하면 안됩니다
3. 특수문자는 -와 $만 허용합니다
4. 공백을 포함할 수 없습니다

클래스는 대문자로 시작한다
변수, 인스턴스, 함수, 메소드는 소문자로 시작한다
여러 단어로 이루어진 식별자는 대문자로 시작한다

@주석
프로그램 코드를 설명할 때 사용하며 프로그램 진행에는 전혀 영향을 주지 않는다.

HTML 태그 주석
로 주석을 감싸 생성한다
자바스크립트 주석
한 줄의 주석은 // 를 통해 만들고
여러 줄의 주석은 / 와 /를 통해 표현합니다

3. 오류

@오류를 확인하는 방법
구글 크롬 개발자 도구에서 검사
(ctrl+shift+I)

ReferenceError
Uncaught ReferenceError: 00 is not defined
00을 잘못 입력했을 경우 나타나는 에러
-> 00 을 수정해주면 해결된다
SyntaxError(구문오류)
Uncaught SyntaxError : Invalid or unexpeted token
토큰(기호)를 잘못 입력했을 경우 나타나는 에러
' 나 ( 등을 열고 닫지 않은 경우 발생한다
-> 기호를 신경써서 마무리하면 해결된다

4. 자료와 변수

@변수
함수 ~let~
이름이 붙은 저장소
ex) 온라인 쇼핑몰 애플리케이션에서 상품이나 방문객의 정보를 저장할 때 사용한다

명명 규칙

변수 명은 문자와 숫자, $와 -만 들어갈 수 있습니다
첫 글자는 숫자가 될 수 없습니다

@상수
함수 ~const~
변화하지 않는 변수

5. 연산자와 수학

연산자의 종류
1. + 덧셈
2. - 뺄셈
3. * 곱셈
4. / 나눗셈
5. % 나머지
6. ** 거듭제곱

@ % 나머지 연산자
%와 관련없고 a % b 는 a를 b로 나눈 후 그 나머지를 정수로 반환해 준다

@ ** 거듭제곱 연산자
a b 는 a를 b번 곱한 값이 반환된다

@ + 연산자의 문자열 연결
문자열을 + 로 연산하면 문자열을 병합합니다

~피연산자 중 어느 하나라도 문자열이면 다른 하나도 문자열로 변환된다~

연산은 왼쪽에서 오른쪽으로 순차적으로 진행되기 때문에
2 + 2 + '1' 의 경우 '221'이 아니라 '41'이 된다

하지만 다른 연산자의 경우 피연산자가 숫자가 아닌 경우 그 형을 숫자형으로 바꾸게 됩니다
6 - '2' = 4 ( '2'를 숫자형으로 변환)

단항 연산자로 사용하면 Number(...)과 같이 숫자형으로 변환시켜준다
alert ( +true ); // 1
alert ( "") ; // 0

이항 덧셈 연산자를 사용하면 기존의 문자열로 변해서 연결한다
이럴 경우 단항 덧셈 연산자를 사용해 피연산자를 숫자형으로 변환시켜준다

@ = 할당연산자
우선순위가 3으로 매우 낮아 표현식의 계산이 먼저 이루어진 이후 x에 할당되게 된다
let x = 2 * 2 + 1
alert (x) ; // 5 가 되는 이유 (=를 늦게 적용하기 때문에)

a = b = c = 2+2
와 같이 연결할 수 있다

@복합 할당 연산자
let n = 2;
n = n + 5;
n = n 2;
의 경우 += 와 = 를 통해 표현할 수 있다

let n = 2;
n += 5; (n = n + 5와 동일)
n = 2:(n = n2와 동일)
(/=, -= 도 만들 수 있다)

~복합 할당 연산자는 우선순위가 할당 연산자와 동일하여 다른 연산자가 실행된 이후에 복합 할당 연산자가 실행된다~

@증가(++) 감소(--) 연산자
let n = 2;
n++; // n = n+1 과 같은 식이다
n--; // n = n-1과 같은 식이다

증가 감소 연산자는 변수에만 사용할 수 있다
ex) 5++는 에러가 발생

증가 감소 연산자는 앞이나 뒤에 올 수 있는데
앞에올 경우 (n++) ~후위형~
뒤에올 경우 (++n) ~전위형~

~이건 질문해야할듯~

@비트 연산자

@쉼표 연산자
여러 표현식을 코드 한 줄에서 평가하게 해준다.
하지만 마지막 표현식의 평가 결과만 반환된다
또한 우선순위가 매우 낮아(할당 연산자 = 보다 낮아) 괄호가 중요하다

let a = (1+2, 3+4) ;
alert (a); // 는 마지막 평과 결과인 7

let a = 1+2, 3+4
alert (a) ;// a = 3, 7 까지 연산이 수행된 후 ,보다 = 가 먼저 실행되어 a = 3이 되고 7은 버려진다

@비교 연산자

a>b, a<b
a>=b , a<=b
a == b // = 의 경우 할당을 의미하고 동등하다는 ==를 사용
a!=b / a는 b와 같지 않다 를 의미한다

비교 연산자는 불린형 으로 값을 반환한다
alert (2>1) ; // true
alert (2++1) ;// false

이 불린 값을 다른 변수에 할당할 수 있다
let result = 5> 4;
alert (result) ; // true

~문자열 비교~
자바스크립트는 사전 순으로 문자를 배열한다.
뒤쪽의 문자열은 앞쪽의 문자열보다 크다고 판단한다

ex) alert (Z>A);// ture

두 문자열의 첫 글자를 비교합니다
첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자보다 크면(작으면) 결론을 내고 비교를 종료한다
두 문자열의 첫 글자가 같으면 두 번째 글자를 같은 방식으로 비교한다
비교가 끝날 때 까지 이 과정을 반복한다
비교가 종료되고 문자열의 길이도 같다면 동일하다고 결론낸다
두 문자열의 길이가 다르면 긴 문자열이 더 크다고 결론낸다

~다른 형 간의 비교~
자료형이 다르면 자바스크립트는 숫자형으로 변환한다

불린형 값은 true =1, false = o으로 변환된다

boolean 은 모든 문자를 true로 변환한다
== 는 숫자형이 아닌 값을 숫자형으로 변환한다

@일치 연산자
==는 0과 false 를 구분하지 못한다

alert (0 == false ) ; // true
alert (' ' == false) ; // true
==는 다른 형의 피연산자를 숫자형으로 바꿔 false 를 0으로 만든다

~일치 연산자 ===는 형을 변환하지 않고 값을 비교한다~
alert ( 0 === false ) ;// false

@null 과 undefined 비교
===(일치연산자)를 사용하여 null 과 undefined를 비교하면 두 자료형이 다르기 때문에 false를 반환합니다
==(동등연산자)를 사용해 비교하면 true를 반환한다

<> <= >= 등 비교연산자를 사용하면 null 과 undefined 는 숫자형으로 변환된다 ( null = 0, undefined = NaN)

alert ( null > 0 ) ; // false 1
alert ( null == 0 ) ; // false 2
alert ( null >= 0 ) ; // true 3
1 번과 3번은 null 값을 숫자형으로 변환시켜 0으로 만들어 비교한다
==(동등연산자)는 피연산자가 undefined 나 null일 경우 형 변환을 하지 않고 둘을 비교하는 경우에만 true, 그 이외에는 false 를 반환한다

undefined 는 다른값과 비교해서는 안된다
< 등 숫자형으로 변환되는 경우 undefined 는 NaN값이 되고 비교 연산자에서는 항상 false 가 된다
==( 동등연산자) 의 경우 null 과 undefined 를 비교할 때를 제외하고 항상 false 를 반환한

6. 논리 연산자

자바스크립트는 세 종류의 논리 연산자가 있다
|| (or)
&& ( and)
! ( not)

@ | | (OR)

OR 연산자는 피연산자가 불린형이 아니라면 불린형으로 변환한다.

~자바스크립트의 || 추가기능~
OR 연산자와 피연산자가 여러개인 경우

가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가한다
각 피 연산자를 불린형으로 변환하고 true 이면 연산을 멈추고 피연산자의 변환 전 원래 값을 반환한다
모든 피연산자가 false 로 평가되는 경우 마지막 피연산자를 반환한다

왼쪽부터 시작해 평가를 진행하고 truthy 를 만나면 나머지 값은 건드리지 않고 평가를 멈춘다
true || alert("not printed"); // true 에서 평가가 멈춰 alert 가 실행되지 않는다
false || alert("printed");// alert 가 동작한다

@ && ( AND)
두 피연산자가 모두 참일 때 true 를 반환한