JavaScript 소개

자바스크립트는 이름과 달리 몇 가지 구문적 유사점이 있다는 점에서 자바와만 관련이 있습니다. 초기 개발 시 JavaScript의 구문은 Java 구문에서 영감을 얻었으며 1995년에 Netscape Navigator의 베타 버전으로 처음 출시되었을 때 'LiveScript'라고 불렀습니다. 이는 Netscape의 다른 명명된 제품과 일치하고 브라우저에서 '실시간'으로 실행된다는 사실입니다. 마이크로소프트는 곧바로 Internet Explorer 3.0을 통해 자체적인 자바스크립트 구현인 'JScript'를 출시했습니다.

Netscape는 기술 표준을 개발하고 게시하는 조직인 Ecma International에 이 초기 작업을 제출하여 다른 브라우저에서 이 스크립팅 언어를 이해하는 방법을 공식화하고 자세히 설명했습니다. 1997년 Ecma International은 ECMAScript라는 스크립팅 언어의 첫 번째 버전을 표준화한 ECMA-262를 출시했습니다. ECMAScript는 보다 구체적인 스크립트 언어를 만들 수 있도록 알려주는 표준입니다. 예를 들어 현재 사용되지 않는 JScript, Adobe의 액션스크립트, 자바스크립트 자체에 대한 Microsoft의 이후 작업이 있습니다.

이러한 차이는 JavaScript의 특정 측면과 기능을 설명할 때 중요합니다. 'ES5'는 2009년 ECMAScript 표준의 첫 번째 메이저 버전 '버전 관리' 버전으로, 몇 년에 걸쳐 조금 더 부분적으로 개발된 버전을 나타냅니다. 'ES6' (또는 'ES2015')는 2015년에 출시된 ECMAScript 여섯 번째 에디션에서 설정한 표준의 줄임말입니다. ES6 이후에는 ECMAScript 표준의 새 버전이 매년 출시되며, 각 버전의 변경사항 및 추가사항은 'ES2016' 또는 'ES2017'과 같이 연도별로 지칭합니다.

기본 규칙

컴파일된 언어와 달리 JavaScript는 사람이 작성할 수 있는 코드에서 브라우저가 이해할 수 있는 형식으로 변환되지 않습니다. 스크립트가 마크업, 이미지 및 스타일시트와 같은 애셋과 함께 브라우저에 전송되면 브라우저에서는 작성된 것과 동일한 방식으로 해석합니다. 즉, 왼쪽에서 오른쪽으로, 위에서 아래로 파싱되며 사람이 읽을 수 있는 유니코드 문자 시퀀스로 해석합니다.

자바스크립트 인터프리터는 스크립트를 수신하면 먼저 어휘 분석을 실행하여 스크립트를 구성하는 긴 문자열 문자열을 파싱하고 다음과 같은 개별 입력 요소로 변환합니다.

• 토큰
• 제어 문자 서식 지정
• 줄 마침
• 설명
• 공백 (거의 탭과 공백을 의미함)

스크립트에 명시적인 지침을 포함하지 않으면 새로고침하거나 현재 페이지에서 벗어난 후에도 스크립트의 결과가 유지되지 않습니다.

JavaScript 애플리케이션은 대략적으로 문과 표현식으로 구성됩니다.

진술

문은 작업을 나타내는 한 줄 이상의 코드로 구성된 명령 단위입니다. 예를 들어 다음 문을 사용하여 myVariable라는 변수에 값을 할당할 수 있습니다.

let myVariable = 4;

myVariable;
> 4

올바르게 해석되려면 문이 세미콜론으로 끝나야 합니다. 하지만 자바스크립트를 작성할 때 이러한 세미콜론이 항상 필요한 것은 아닙니다. 자동 세미콜론 삽입이라는 기능을 사용하면 세미콜론 누락으로 인해 오류가 발생할 경우 완전한 구문 뒤에 오는 줄바꿈을 세미콜론으로 처리할 수 있습니다.

ASI는 오류 수정 기능이며 JavaScript 자체의 허용적인 측면이 아닙니다. 이 오류 수정에 너무 의존하면 코드가 모호해져 코드가 손상될 수 있으므로 모든 문을 세미콜론으로 수동으로 종료해야 합니다.

블록 문

블록 문은 개수에 상관없이 중괄호 ({}) 안에 문과 선언을 그룹화합니다. 이를 통해 JavaScript에서 하나만 예상되는 위치에 문을 결합할 수 있습니다.

블록 문은 if와 같은 제어 흐름 문과 함께 표시되는 경우가 가장 많습니다.

if ( x === 2 ) {
  //some behavior;
}

표현

표현식은 값을 반환하는 코드 단위이므로 값이 예상되는 곳마다 사용할 수 있습니다. 2 + 2은 값이 4이 되는 표현식입니다.

2 + 2;
> 4

'그룹화 연산자'는 일치하는 괄호 쌍인 '그룹화 연산자'는 표현식의 일부를 그룹화하여 표현식의 일부가 단일 단위로 평가되도록 하는 데 사용됩니다. 예를 들어 그룹화 연산자를 사용하여 override the mathematical order of operations하거나 코드의 가독성을 개선할 수 있습니다.

2 + 2 * 4;
> 10

( 2 + 2 ) * 4;
> 16

let myVariable = ( 2 + 2 );

myVariable;
> 4

취약한 입력

JavaScript는 약한 유형의 언어입니다. 즉, 데이터 값을 특정 데이터 유형으로 명시적으로 표시할 필요가 없습니다. 강한 유형이 지정된 언어와 달리 JavaScript는 값의 컨텍스트에서 의도한 유형을 추론하고 값을 해당 유형으로 변환할 수 있습니다. 이 프로세스를 유형 강제라고 합니다.

예를 들어 Python과 같이 강타입(strongly typed) 언어로 문자열 값에 숫자를 추가하면 다음과 같이 오류가 발생합니다.

>>> "1" + 1
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: cannot concatenate 'str' and 'int' objects

오류를 반환하는 대신 JavaScript는 숫자 값을 문자열로 강제 변환하고 두 값을 연결합니다. 이 동작은 문자열에 값을 추가할 때 가장 의도된 동작입니다.

"1" + 1;
> "11"

데이터 유형을 명시적으로 강제 변환할 수도 있습니다. 다음 예에서는 JavaScript의 기본 제공 toString 메서드를 사용하여 숫자 값 100를 "100"의 문자열 값으로 강제 변환합니다.

let myVariable = 100;

typeof myVariable;
> "number"

myVariable = myVariable.toString();
> "100"

typeof myVariable;
> "string"

대소문자 구분

HTML 및 대부분의 CSS와 달리 JavaScript 자체는 완전히 대소문자를 구분합니다. 즉, 언어에 빌드된 속성과 메서드부터 직접 정의한 식별자에 이르기까지 모든 것을 항상 일관되게 대문자로 표기해야 합니다.

console.log( "Log this." );
> Log this.

console.Log( "Log this too." );
> Uncaught TypeError: console.Log is not a function

const myVariable = 2;

myvariable;
> Uncaught ReferenceError: variablename is not defined

myVariable;
> 2

공백

JavaScript는 공백을 민감하지 않습니다. 즉, 인터프리터는 사용된 공백의 양과 유형 (탭 또는 공백)을 무시합니다.

                     console.log(       "Log this"  );console.log("Log this too");
> "Log this."
> "Log this too."

하지만 공백의 존재는 어휘 토큰 사이의 구분선으로 중요할 수 있습니다.

let x;

[tokens: [let] [x] ]

letx;
> Uncaught ReferenceError: letx is not defined

[tokens: [letx] ]

의미 있는 어휘 토큰을 구분하는 데 공백이 사용되는 경우 파서는 공백의 양과 유형을 무시합니다.

let           x                             =                           2;

[토큰: [let] [x] [=] [2] ]

줄바꿈도 마찬가지입니다. 단, 줄바꿈으로 인해 문을 너무 일찍 종료하여 문제가 발생하는 경우도 있습니다.

let x
=
2;

[토큰: [let] [x] [=] [2] ]

일부 문장 유형은 문체적으로 한 줄로 표시되는 경우가 많습니다.

let x = 1;
let y = 2;

일부 구문은 일반적으로 여러 줄을 사용합니다.

if ( x == 2 ) {
  //some behavior;
}

그러나 이러한 규칙은 가독성을 위해 엄격하게 적용됩니다. JavaScript는 앞의 예를 다음과 같은 방식으로 해석합니다.

let x=1;let y=2;

if(x==2){}

따라서 전송 크기를 줄이기 위해 스크립트 파일에서 불필요한 공백을 제거하는 자동화된 프로세스가 다른 여러 최적화와 함께 프로덕션 환경에 맞게 자바스크립트를 준비하는 일반적인 단계입니다.

JavaScript에서 공백 문자를 사용하는 방법은 주로 작성자와 유지관리자의 환경설정에 따라 달라집니다. 여러 개발자가 코드에 참여하는 자바스크립트 프로젝트는 일관된 코드 형식을 보장하기 위해 특정 공백 규칙을 제안하거나 적용하는 경우가 많습니다(예: 중첩된 문을 들여쓰기하기 위해 탭이나 공백을 사용).

let myVariable = 10;

if ( typeof myVariable === "number" ) {
    console.log( "This variable is a number." );
    if( myVariable > 5 ) {
     console.log( "This variable is greater than five." );
    }
}

> "This variable is a number."
> "This variable is greater than five."

이해도 테스트

표현식이란 무엇인가요?

값이 생성되는 코드 단위입니다.

코드가 하는 작업을 설명하는 주석.

문과 선언의 그룹.

JavaScript는 대소문자를 구분합니다.

참

거짓