JavaScript의 구문과 코드 구조를 더 깊이 이해하세요.

모든 프로그래밍 언어가 작동하려면 특정 규칙을 준수해야 합니다. 프로그래밍 언어의 올바른 구조를 결정하는 규칙 집합을 문법이라고 합니다. 많은 프로그래밍 언어는 주로 구문 변형이 있는 유사한 개념으로 구성됩니다.

이 튜토리얼에서는 JavaScript 구문과 코드 구조의 많은 규칙과 규칙을 다룹니다. [관련 강좌 추천: JavaScript 영상 튜토리얼]

기능성과 가독성

JavaScript를 사용하기 시작할 때 기능성과 가독성은 구문에 주목해야 하는 두 가지 중요한 이유입니다.

JavaScript가 작동하려면 일부 구문 규칙이 필요합니다. 이를 따르지 않으면 콘솔에 오류가 발생하고 스크립트 실행이 중지됩니다.

"Hello, World!"의 문법 오류를 고려해보세요. 프로그램:

// Example of a broken JavaScript program
console.log("Hello, World!"

이 코드 예제에는 닫는 괄호가 없으며 예상되는 "Hello, World!"를 콘솔에 인쇄하는 대신 다음 오류가 발생합니다.

Uncaught SyntaxError: missing ) after argument list

누락된 ")"를 스크립트에 추가해야 합니다. 계속 달리세요. 이는 코드를 실행하려면 올바른 구문을 따라야 하기 때문에 JavaScript 구문 오류가 어떻게 스크립트를 손상시킬 수 있는지 보여주는 예입니다.

JavaScript 구문 및 형식 지정의 일부 측면은 다양한 사고 방식을 기반으로 합니다. 즉, 일부 스타일 규칙이나 선택 사항은 필수가 아니며 코드를 실행할 때 오류를 일으키지 않습니다. 그러나 프로젝트와 코드베이스 전반의 개발자가 이 스타일에 더 익숙해지면 따라야 할 공통 규칙이 많이 있습니다. 일반적인 규칙을 따르면 가독성이 향상됩니다.

다음 세 가지 변수 할당 예를 고려해보세요.

const greeting="Hello";         // no whitespace between variable & string
const greeting =       "Hello"; // excessive whitespace after assignment
const greeting = "Hello";       // single whitespace between variable & string

위의 세 가지 예는 출력에서 ​​정확히 동일하게 작동하지만 세 번째 옵션인 Greeting = "Hello"는 특히 대규모 프로그램의 맥락에서 코드를 작성하는 가장 일반적이고 읽기 쉬운 방법입니다.

코딩 프로젝트 전반에 걸쳐 일관된 스타일을 유지하는 것이 중요합니다. 조직마다 다른 지침이 있으므로 유연성도 필요합니다.

자바스크립트 코드의 구문과 구조에 익숙해질 수 있도록 아래에 몇 가지 코드 예제를 소개하고 궁금한 점이 있을 때는 이 글을 참고하세요.

공백

JavaScript의 공백은 공백, 탭 및 개행 문자로 구성됩니다(ENTER 키보드 누르기). 앞서 언급했듯이 JavaScript는 문자열 외부의 과도한 공백과 연산자와 기타 기호 사이의 공백을 무시합니다. 즉, 다음 세 가지 변수 할당 예는 정확히 동일한 계산 결과를 갖게 됩니다.

const userLocation      =    "New York City, "     +  "NY";
const userLocation="New York City, "+"NY";
const userLocation = "New York City, " + "NY";

userLocation은 스크립트에 어떤 스타일이 작성되었는지에 관계없이 "New York City, NY"를 나타내며 JavaScript에는 영향을 미치지 않습니다. 공백이 탭으로 쓰여졌는지 아니면 공백으로 쓰여졌는지에 관계없이.

가장 일반적인 공백 규칙을 따르는 좋은 경험 법칙은 수학과 언어 구문과 동일한 규칙을 따르는 것입니다.

이 스타일의 주목할만한 예외는 여러 변수를 할당하는 경우입니다. 다음 예에서 =의 위치를 ​​확인하세요.

const companyName         = "DigitalOcean";
const companyHeadquarters = "New York City";
const companyHandle       = "digitalocean";

모든 대입 연산자(=)는 한 줄에 있으며 변수 뒤에 공백이 있습니다. 이러한 유형의 조직 구조는 모든 코드베이스에서 사용되지는 않지만 가독성을 향상시키는 데 사용될 수 있습니다.

JavaScript는 추가 줄바꿈을 무시합니다. 일반적으로 주석 위와 코드 블록 뒤에 추가 줄 바꿈이 삽입됩니다.

괄호

if, switch, for와 같은 키워드의 경우 공백은 일반적으로 괄호 앞뒤에 추가됩니다. 아래의 비교 및 ​​루프 예제를 살펴보세요.

// An example of if statement syntax
if () { }
// Check math equation and print a string to the console
if (4 < 5) {
    console.log("4 is less than 5.");
    }
// An example of 
for loop syntaxfor () { }
// Iterate 10 times, printing out each iteration number to the console
for (let i = 0; i <= 10; i++) {
    console.log(i);
    }

if 문과 for 루프에는 괄호 양쪽에 공백이 있습니다(괄호 안에는 공백이 없습니다).

코드가 함수, 메서드 또는 클래스에 속하면 대괄호가 해당 이름에 닿습니다.

// An example 
functionfunction functionName() {}
// Initialize a function to calculate the volume of a cube
function cube(number) {
    return Math.pow(number, 3);
}
// Invoke the function
cube(5);

위의 예에서 Cube()는 함수이고 Bracket() 쌍에는 인수 또는 매개변수가 포함됩니다. 이 경우 매개변수는 각각 숫자 또는 5입니다. 추가 공간이 있는 Cube()는 코드가 예상대로 실행된다는 점에서 유효하지만 거의 눈에 띄지 않습니다. 이를 함께 사용하면 함수 이름을 괄호 쌍 및 관련 전달된 매개 변수와 쉽게 연관시키는 데 도움이 됩니다.

세미콜론

JavaScript 프로그램은 문단이 일련의 문장으로 구성되는 것과 마찬가지로 명령문이라는 일련의 명령으로 구성됩니다. 문장은 마침표로 끝나는 반면, JavaScript 문은 일반적으로 세미콜론(;)으로 끝납니다.

// A single JavaScript statement
const now = new Date();

두 개 이상의 문이 인접해 있는 경우 세미콜론으로 구분해야 합니다.

// Get the current timestamp and print it to the console
const now = new Date(); console.log(now);

문이 줄 바꿈으로 구분된 경우 세미콜론은 선택 사항입니다.

// Two statements separated by newlines
const now = new Date()
console.log(now)

안전하고 일반적인 규칙은 줄 바꿈에 관계없이 세미콜론으로 문을 구분하는 것입니다. 일반적으로 오류 가능성을 줄이기 위해 이를 포함하는 것이 좋습니다.

// Two statements separated by newlines and semicolons
const now = new Date();
console.log(now);

for 루프의 초기화, 조건, 증가 또는 감소 사이에도 세미콜론이 필요합니다.

for (initialization; condition; increment) { 
   // run the loop
   }

分号不包括在任何类型的块语句之后，例如if、for、do、while、class、switch和function。这些块语句包含在大括号中。请注意下面的示例。

// Initialize a function to calculate the area of a square
function square(number) {
    return Math.pow(number, 2);
    }
    // Calculate the area of a number greater than 0
    if (number > 0) {
    square(number);
    }

注意，并非所有用大括号括起来的代码都以分号结尾。对象用大括号括起来，并以分号结尾。

// An example object
const objectName = {};
// Initialize triangle object
const triangle = {
    type: "right",
    angle: 90,
    sides: 3,};

在除了块语句之外的每个JavaScript语句之后包含分号是广为接受的做法，这些语句以大括号结尾。

缩进

从技术上讲，完整的JavaScript程序可以在一行中编写。 但是，这很快就会变得非常难以阅读和维护。 相反，我们使用换行符和缩进。

下面是一个条件if/else语句的例子，它要么写在一行上，要么用换行符和缩进。

// Conditional statement written on one line
if (x === 1) { /* execute code if true */ } else { /* execute code if false */ }
// Conditional statement with indentation
if (x === 1) {
    // execute code if true
    }else {
        // execute code if false
        }

请注意，块中包含的任何代码都是缩进的。缩进可以用两个空格、四个空格或按制表符来完成。选项卡或空间的使用取决于您的个人偏好（对于单独项目）或组织的指导方针（对于协作项目）。

像上面的例子一样，在第一行末尾包括左大括号是构造JavaScript块语句和对象的常规方法。您可能看到块语句编写的另一种方式是在它们自己的行上使用大括号。

// Conditional statement with braces on newlines
if (x === 1){
    // execute code if true
    }else{
    // execute code if false
    }

这种风格在JavaScript中不像在其他语言中那样常见，但并非闻所未闻。

任何嵌套的block语句都将进一步缩进。

// Initialize a functionfunction isEqualToOne(x) {
    // Check if x is equal to one
    if (x === 1) {        // on success, return true
        return true;
    } else {      return false;
    }
}

正确的代码缩进对于保持可读性和减少混乱是必不可少的。要记住这个规则的一个例外是，压缩的库将删除不必要的字符，因此呈现较小的文件大小以加快页面加载时间（如jquery.min.js和d3.min.js）。

身份标识

变量、函数或属性的名称在JavaScript中称为标识符。标识符由字母和数字组成，但不能包含$和u之外的任何符号，也不能以数字开头。

区分大小写

这些名称区分大小写。以下两个示例myvariable和myvariable将引用两个不同的变量。

var myVariable = 1;
var myvariable = 2;

javascript名称的惯例是用camelcase编写，这意味着第一个单词是小写的，但后面的每个单词都以大写字母开头。您还可以看到用大写字母书写的全局变量或常量，用下划线分隔。

const INSURANCE_RATE = 0.4;

这个规则的例外是类名，它通常是以大写字母（pascalcase）开头的每个单词编写的。

// Initialize a class
class ExampleClass {
    constructor() { }
}

为了确保代码可读，最好在程序文件中使用明显不同的标识符。

保留关键字

标识符也不能由任何保留关键字组成。关键字是JavaScript语言中具有内置功能的单词，如var、if、for和this。

例如，您不能将值赋给名为var的变量。

var var = "Some value";

由于JavaScript理解var为关键字，因此会导致语法错误：

SyntaxError: Unexpected token (1:4)

本文来自 js教程 栏目，欢迎学习！

위 내용은 JavaScript의 구문과 코드 구조를 더 깊이 이해하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!