정보실

웹학교

정보실

javascript JavaScript에서 구문 및 코드 구조 이해 - JavaScript guide

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 구문 및 코드 구조 이해 


소개 


음성 언어로 글쓰기를 배우기 전에 먼저 문법 규칙을 배워야 합니다. 다음은 영어에서 찾을 수 있는 몇 가지 규칙 예입니다.

  • 문장은 대문자로 시작합니다.
  • 문장은 마침표로 끝납니다.
  • 새로운 단락이 들여 쓰기 됩니다.
  • 음성 대화는 큰 따옴표 안에 있습니다.

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


이 자습서에서는 JavaScript 구문 및 코드 구조에 대한 많은 규칙과 코딩 규칙을 살펴 봅니다.


https://www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure-in-javascript 


기능과 가독성 


JavaScript로 작업을 시작할 때 구문에 중점을 두어야 하는 중요한 이유는 기능성과 가독성입니다.


JavaScript 기능에 필수적인 일부 구문 규칙이 있습니다. 이를 따르지 않으면 콘솔에 오류가 발생하고 스크립트 실행이 중단됩니다.


“Hello, World!”프로그램의 구문 오류를 고려하십시오.


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


이 코드 샘플에는 닫는 괄호가 없고 예상 된 "Hello, World!"를 콘솔에 인쇄하는 대신 다음 오류가 나타납니다.


Output
Uncaught SyntaxError: missing ) after argument list

스크립트가 계속 실행되기 전에 누락 된)을 추가해야 합니다. 코드를 실행하려면 올바른 구문을 따라야 하므로 JavaScript 구문에서 실수로 스크립트를 중단하는 방법을 보여주는 예입니다.


JavaScript 구문 및 형식의 일부 측면은 다른 사고 방식을 기반으로 합니다. 즉, 필수가 아니고 코드가 실행될 때 오류가 발생하지 않는 문체 규칙 또는 선택이 있습니다. 그러나 프로젝트와 코드베이스 사이의 개발자가 스타일에 더 익숙하기 때문에 따라야 할 일반적인 규칙이 많이 있습니다. 일반적인 규칙을 준수하면 가독성이 향상됩니다.


변수 할당의 다음 세 가지 예를 고려하십시오.


const greeting="Hello";         // 변수와 문자열 사이에 공백이 없습니다.
const greeting =       "Hello"; // 할당 후 과도한 공백
const greeting = "Hello";       // 변수와 문자열 사이의 단일 공백

위의 세 가지 예가 모두 출력에서 ​​정확히 동일하게 작동하지만 인사말의 세 번째 옵션 인 "Hello"는 가장 일반적으로 사용되며 코드를 작성하는 가장 읽기 쉬운 방법입니다 (특히 컨텍스트 내에서 코드를 고려할 때) 더 큰 프로그램의.


전체 코딩 프로젝트의 스타일을 일관되게 유지하는 것이 중요합니다. 한 조직에서 다른 조직으로 따라야 할 지침이 다르므로 유연해야 합니다.


JavaScript 코드의 구문과 구조를 익히고 의심스러운 경우 이 기사를 다시 참조 할 수 있도록 아래의 코드 예제를 살펴 보겠습니다.


공백 (Whitespace) 


JavaScript의 공백은 공백, 탭 및 줄 바꾸기로 구성됩니다 (키보드에서 Enter 키를 누름). 앞에서 설명한 것처럼 문자열 외부의 과도한 공백과 연산자와 다른 기호 사이의 공백은 JavaScript에서 무시됩니다. 이는 다음의 세 가지 변수 할당 예제는 계산 결과가 정확히 동일하다는 것을 의미합니다.


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

userLocation은 스크립트에 어떤 스타일이 작성 되든 상관없이 “뉴욕시”를 나타내거나 공백이 탭 또는 공백으로 작성되는지 여부에 따라 JavaScript와 차별화되지 않습니다.


가장 일반적인 공백 규칙을 따르는 데 유용한 규칙은 수학 및 언어 문법에서 사용하는 것과 동일한 규칙을 따르는 것입니다.


예를 들어 let x = 5 * y는 let x = 5*y보다 읽기 쉽습니다.


이 스타일에서 주목할만한 예외는 여러 변수를 할당하는 동안입니다. 다음 예제에서 =의 위치에 유의하십시오.


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

모든 할당 연산자 (=)는 변수 다음에 공백이 표시됩니다. 이 유형의 조직 구조는 모든 코드베이스에서 사용되는 것은 아니지만 가독성을 향상 시키는 데 사용할 수 있습니다.


초과 줄 바꿈은 JavaScript에서도 무시됩니다. 일반적으로 주석 위에 그리고 코드 블록 뒤에 추가 줄 바꿈이 삽입됩니다.


괄호 (Parentheses) 


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 syntax
for () { }

// 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 function
function 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()는 함수이며 괄호() 쌍에는 매개 변수 또는 인수가 포함됩니다. 이 경우 매개 변수는 각각 숫자 또는 5입니다. 추가 공간이 있는 cube()는 코드가 예상대로 실행된다는 점에서 유효하지만 거의 보이지 않습니다. 그것들을 함께 유지하면 함수 이름을 괄호 쌍과 관련된 전달 된 인수에 쉽게 연결할 수 있습니다.


세미콜론 (Semicolons) 


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 문 뒤에 세미콜론을 포함 시키는 것이 널리 허용됩니다.


들여 쓰기 (Indentation) 


완전한 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에서는 흔하지 않지만 들어 본 적이 없습니다.


중첩 된 블록 명령문은 추가로 들여 쓰기 됩니다.


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

가독성을 유지하고 혼동을 줄이려면 코드를 올바르게 들여 쓰기해야 합니다. 이 규칙을 염두에 두어야 할 한 가지 예외는 압축 라이브러리에서 불필요한 문자가 제거되므로 파일 크기를 더 작게 렌더링 하여 페이지 로드 시간을 단축 할 수 있습니다 (jquery.min.jsd3.min.js와 동일).


식별자 (Identifiers) 


변수, 함수 또는 속성의 이름은 JavaScript에서 식별자라고 합니다. 식별자는 문자와 숫자로 구성되지만 $와 _ 이외의 기호는 포함 할 수 없으며 숫자로 시작할 수 없습니다.


대소 문자 구분 (Case Sensitive) 


이 이름은 대소 문자를 구분합니다. 다음의 두 가지 예인 myVariable 및 myvariable은 두 개의 고유 변수를 나타냅니다.


var myVariable = 1;
var myvariable = 2;

JavaScript 이름의 규칙은 이름이 camelCase로 작성된다는 것입니다. 첫 번째 단어는 소문자이지만 모든 다음 단어는 대문자로 시작합니다. 밑줄로 구분하여 모든 대문자로 작성된 전역 변수 또는 상수를 볼 수도 있습니다.


const INSURANCE_RATE = 0.4;

이 규칙의 예외는 클래스 이름이며, 종종 대문자로 시작하는 모든 단어 (PascalCase)로 작성됩니다.


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

코드를 읽을 수 있게 하려면 프로그램 파일 전체에서 명확하게 다른 식별자를 사용하는 것이 가장 좋습니다.


예약 키워드 (Reserved Keywords) 


식별자는 예약 키워드로 구성되어서는 안됩니다. 키워드는 var, if, for 및 this와 같은 기본 제공 기능이 있는 JavaScript 언어의 단어입니다.


예를 들어 var라는 변수에 값을 할당 할 수 없습니다.


var var = "Some value";

JavaScript는 var를 키워드로 이해하므로 구문 오류가 발생합니다.


Output
SyntaxError: Unexpected token (1:4)

자세한 내용은 이 예약 된 키워드 목록 (MDN)을 참조하십시오.


결론 


이 기사는 JavaScript의 기본 구문과 코드 구조에 대한 개요를 제공했습니다. 구문은 프로그램을 올바르게 실행하고 코드에서 본인과 공동 작업자 모두를 위해 가독성과 유지 관리 성을 위해 중요합니다.


이 기사에서는 JavaScript 구문과 스타일에 대한 많은 공통된 규칙을 검토했지만 하루가 끝날 때 가장 중요하게 기억해야 할 것은 팀 또는 조직과 유연하고 일관성을 유지하는 것입니다.




페이지 정보

조회 146회 ]  작성일19-10-27 10:55

웹학교