FRONTEND/JAVASCRIPT

JavaScript 튜토리얼 - JavaScript Syntax

우진하다 2023. 7. 19. 16:36

JavaScript Syntax

JavaScript 문법은 JavaScript 프로그래밍 언어에서 사용되는 구문 규칙의 집합을 의미합니다. 
JavaScript는 웹 페이지 상에서 동적인 동작을 구현하기 위해 사용되는 스크립팅 언어로, 
문법을 사용하여 코드를 작성하고 실행합니다.

 

JavaScript Values

자바스크립트는 두 가지 유형의 값이 있습니다.
고정 값(Fixed values)과 변수 값(Variable Values).
고정 값은 리터럴(Literals)이라고도 하며 변수 값은 변수(Variables)라고도 불립니다.

 

JavaScript Literals

 리터럴은 고정된 값으로 사용되며, 코드에서 직접 값을 지정합니다. 예를 들어, 5는 숫자 리터럴이고, "Hello"는 문자열 리터럴입니다.
숫자는 소수점을 포함 또는 포함하지 않고 기록하며 문자열은 큰따옴표 또는 작은따옴표로 묶인 텍스트입니다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Strings & Numbers</h2>

<p>Strings can be written with double or single quotes.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
document.getElementById("demo1").innerHTML = 'John Doe';
document.getElementById("demo2").innerHTML = 10.05;
</script>

</body>
</html>

JavaScript Strings & Numbers

Strings can be written with double or single quotes.

 

JavaScript Variables

변수는 값을 저장하고 참조할 수 있는 이름이 있는 컨테이너입니다. 변수는 var, let, const 키워드를 사용하여 선언하며, 선언 후에는 값을 할당하여 사용할 수 있습니다. 변수는 프로그램 실행 중에 값이 변경될 수 있습니다. 예를 들어, var x = 10;에서 x는 변수이고, 10은 할당된 값입니다. 변수는 프로그램의 상태를 추적하고 동적인 작업을 수행하는 데 사용됩니다.

변수에 대해서는 추후 자세히 정리하겠지만 var, let -> 재할당 가능 / const -> 재할당 불가 등 차이로만 인지하고
자세한 내용은 뒤 변수파트에서 정리할 예정입니다.

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>

<p id="demo3"></p>
<p id="demo4"></p>


<script>
var x;
x = 6;
let y;
y = 10;

document.getElementById("demo3").innerHTML = x;
document.getElementById("demo4").innerHTML = y;
</script>

</body>
</html>

JavaScript Variables

In this example, x is defined as a variable. Then, x is assigned the value of 6:

 

JavaScript Operators

산술 연산자(Arithmetic Operators)
+ : 덧셈
- : 뺄셈
* : 곱셈
/ : 나눗셈
% : 나머지(Modulus)
++ : 증가 연산자
-- : 감소 연산자

할당 연산자(Assignment Operators)
= : 값을 할당
+= : 더한 후 할당
-= : 뺀 후 할당
*= : 곱한 후 할당
/= : 나눈 후 할당
%= : 나머지를 구한 후 할당

비교 연산자(Comparison Operators)
== : 동등 비교 (값만 비교)
=== : 일치 비교 (값과 타입까지 비교)
!= : 부등 비교 (값만 비교)
!== : 불일치 비교 (값과 타입까지 비교)
> : 크다
< : 작다
>= : 크거나 같다
<= : 작거나 같다

논리 연산자(Logical Operators):
&& : 논리 AND (모두 참일 때 참)
|| : 논리 OR (하나 이상이 참일 때 참)
! : 논리 NOT (참을 거짓으로, 거짓을 참으로 바꿈)

삼항 연산자(Ternary Operator)
condition ? value1 : value2 : 조건이 참이면 value1을 반환, 그렇지 않으면 value2를 반환
타입 연산자(Type Operators):

typeof : 피연산자의 타입을 문자열로 반환
instanceof : 객체가 특정 클래스의 인스턴스인지 확인

 

JavaScript Keywords

JavaScript에서는 특정 목적을 가진 예약어(Keywords)가 있습니다. 
이 예약어는 JavaScript 문법에서 특별한 역할을 수행하거나 특정한 의미를 가지며, 변수나 함수의 이름으로 사용할 수 없습니다. 
몇 가지 주요 JavaScript 예약어는 다음과 같습니다:

break: 반복문이나 switch 문에서 루프를 종료하거나 switch 문의 실행을 중단합니다.
case: switch 문에서 특정 값과 일치하는 경우 실행할 코드 블록을 정의합니다.
catch: try...catch 문에서 예외를 처리하는 코드 블록을 정의합니다.
class: 객체 지향 프로그래밍에서 클래스를 정의하는 키워드입니다.
const: 상수를 선언하고 값을 할당하는 키워드입니다. 한 번 할당된 값을 변경할 수 없습니다.
continue: 반복문에서 현재 루프를 종료하고 다음 루프를 실행합니다.
debugger: 디버깅 목적으로 디버깅 프로세스를 일시 중지시킵니다.
default: switch 문에서 일치하는 case 문이 없는 경우 실행할 기본 코드 블록을 정의합니다.
delete: 객체의 속성을 삭제하는 연산자입니다.
do: do...while 문에서 실행할 코드 블록을 정의하며, 조건을 평가하기 전에 최소한 한 번은 실행합니다.
else: if 문이나 if...else 문에서 조건이 거짓인 경우 실행할 코드 블록을 정의합니다.
export: 모듈에서 외부로 내보낼 요소를 정의하는 키워드입니다.
extends: 클래스에서 다른 클래스를 상속받을 때 사용하는 키워드입니다.
finally: try...catch 문에서 예외 발생 여부와 관계없이 항상 실행할 코드 블록을 정의합니다.
for: 반복문에서 초기화, 조건, 반복 식을 정의하여 반복적인 작업을 수행합니다.
function: 함수를 정의하는 키워드입니다.
if: 조건을 평가하고 해당하는 경우 코드 블록을 실행하는 키워드입니다.
import: 모듈에서 다른 모듈로 요소를 가져오는 키워드입니다.
in: 객체가 특정 속성을 가지고 있는지 확인하는 연산자입니다.
instanceof: 객체가 특정 클래스의 인스턴스인지 확인하는 연산자입니다.
new: 클래스의 인스턴스를 생성하는 연산자입니다.
return: 함수에서 값을 반환하거나 함수 실행을 종료하는 키워드입니다.
super: 부모 클래스의 메서드를 호출하는 키워드입니다.
switch: 다중 분기 조건문에서 다양한 경우에 대해 코드 블록을 실행하는 키워드입니다.
this: 현재 객체를 참조하는 키워드입니다.
throw: 예외를 발생시키는 키워드입니다.
try: 예외가 발생할 가능성이 있는 코드 블록을 정의하며, 예외 처리를 시도합니다.
typeof: 피연산자의 타입을 반환하는 연산자입니다.
var: 변수를 선언하는 키워드입니다. (ES5 이전 버전에서 사용되었으며, 현재는 let이나 const를 사용하는 것이 권장됩니다.)
void: 표현식의 값을 반환하지 않는 것을 나타내는 연산자입니다.
while: 조건을 평가하고 해당하는 동안 코드 블록을 반복 실행하는 키워드입니다.
with: 지정된 객체의 속성에 대한 접근을 단순화하는 키워드입니다. (ES5 이전 버전에서 사용되었으며, 현재는 사용이 금지되었습니다.)

 

JavaScript Identifiers / Names & JavaScript is Case Sensitive / JavaScript and Camel Case

JavaScript에서 식별자(Identifiers) 또는 이름(Names)은 변수, 함수, 클래스, 객체 속성 등과 같은 요소들에 할당되는 이름을 의미합니다. 식별자는 JavaScript 코드에서 사용되는 여러 요소들을 고유하게 식별하고 참조하는 데 사용됩니다.

JavaScript 식별자에는 다음과 같은 규칙이 있습니다:

식별자는 문자, 숫자, 밑줄(_), 달러 기호($)로 구성될 수 있습니다.
식별자는 문자로 시작해야 하며, 숫자로 시작할 수 없습니다.
대소문자를 구분합니다. 즉, myVariable과 myvariable은 서로 다른 식별자입니다.
예약어(Keywords)는 식별자로 사용할 수 없습니다.
공백이나 특수 문자(점, 쉼표, 등)는 식별자의 일부로 사용할 수 없습니다.
일반적으로 JavaScript에서 식별자는 카멜 케이스(Camel Case) 또는 스네이크 케이스(Snake Case)와 같은 명명 규칙을 따릅니다. 명명 규칙은 변수, 함수, 클래스 등의 식별자 이름을 가독성 있게 작성하는 데 도움을 줍니다.

카멜 케이스(Camel Case): 식별자의 각 단어를 대문자로 시작하고 그 외의 문자는 소문자로 작성합니다. 예를 들면 myVariable, calculateSum, getUserInfo와 같은 식별자가 있습니다.

스네이크 케이스(Snake Case): 식별자의 각 단어를 소문자로 작성하고 단어 사이를 밑줄(_)로 구분합니다. 예를 들면 my_variable, calculate_sum, get_user_info와 같은 식별자가 있습니다.

 

JavaScript Character Set


JavaScript는 유니코드(Unicode) 문자 집합을 사용합니다. 유니코드는 전 세계의 모든 문자를 포함하는 국제 표준 문자 인코딩 체계입니다. JavaScript에서는 이러한 유니코드 문자를 처리하고 표현하기 위해 다양한 문자열 연산과 관련된 기능을 제공합니다.

JavaScript에서는 다음과 같은 문자 집합을 지원합니다:

ASCII 문자: ASCII(미국 정보 교환 표준 부호)는 기본적인 라틴 문자와 일부 특수 문자를 포함한 7비트 문자 인코딩입니다. JavaScript는 ASCII 문자를 지원합니다.

유니코드 문자: 유니코드는 전 세계의 거의 모든 문자를 표현할 수 있는 표준 인코딩입니다. JavaScript는 UTF-16 인코딩을 사용하여 유니코드 문자를 처리합니다. UTF-16은 16비트로 문자를 표현하며, BMP(기본 다국어 평면) 내의 문자는 하나의 16비트 코드 유닛으로 표현됩니다. 그러나 SMP(보충 다국어 평면)과 같이 BMP 이외의 문자는 하나 이상의 16비트 코드 유닛으로 표현됩니다.

JavaScript에서 문자열은 유니코드 문자의 연속으로 표현됩니다. 따라서 JavaScript 코드에서는 다양한 언어의 문자, 이모지, 특수 기호 등을 문자열로 다룰 수 있습니다. 문자열 연산, 문자열 길이 계산, 문자열 검색 등의 작업에서 유니코드 문자를 사용할 수 있습니다.

JavaScript는 대부분의 모던 웹 브라우저와 호환되므로 다양한 문자 집합을 지원하고 표현할 수 있습니다.






출처 : https://www.w3schools.com/js/js_syntax.asp