[JS]JavaScript란?

JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원한다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼 많은 비 브라우저 환경에서도 사용하고 있다. JavaScript는 프로토타입 기반, 다중 패러다임, 단일 스레드, 동적 언어로, 객체지향형, 명령형, 선언형(함수형 프로그래밍 등) 스타일을 지원한다.

 

JS를 구동하는 기능은 브라우저에 내장되어 있다. 

 

JS는 Client-Side Script Language이다. 대표적으로 HTML, CSS3, JS, jQuery등이 있는데 이런  Client-Side Script Language언어들은 웹 브라우저에 의해 순차적으로 해석되는 즉 Interpreter방식의 언어이다.

 

Interpreter방식 혹은 Just-in-time 컴파일은 코드를 위에서부터 아래로 순차적으로 읽어오면서 한줄씩 읽어서 브라우저가 읽을 수 있는 기계어로 바꾸는 방식이다. 이런 Interpreter방식에서 코드의 위치는 중요하다.

아래의 예제를 보자

 

▲위 코드에서 head태그안에서 script태그를 넣었다. 그리고 body태그 안에서 위와 같은 텍스트들을 입력했다.

 

위 코드를 실행하면 아래와 같은 결과가 나온다.

 

▲ 우선 우리가 script태그안에 넣었던 alert창이 먼저 뜬다. 여기서 주목할 것은 뒤에 브라우저 창으로 body안에 넣었던 텍스트들은 출력이 안된 것을 볼 수 있다.

 

▲ 확인 버튼을 눌렀을 때 비로소 body태그안에 텍스트들이 출력된다. JS의 alert()는 모달함수이기 때문이다. 즉, alert()라는 함수가 실행되면 확인버튼을 누르기 전까지 아래쪽 코드들은 실행이 안되는(blocking상태가 되는) 함수이기 때문이다. 다른말로 표현하자면 fetch 즉, 코드 한줄을 읽어오고 execute 즉, 실행이 끝날 때까지 parsing(코드실행)이 중지된다는 것이다. 

 

 

▲ 만약 위 코드처럼 script태그를 body태그의 텍스트 아래에 배치한다면 결과는 아래와 같이나온다.

 

▲ 분명 alert()함수가 실행되었음에도 화면 뒤로 텍스트가 출력된 것을 볼 수 있다. 이유는 텍스트코드 아래에 script태그를 넣고 실행시켰기 때문이다. Interpreter의 특징이 위에서 아래로 순차적으로 실행되기 때문에 일어나는 차이인 것이다.

 

 

 

▲ 마지막 케이스로 위처럼 코드를 작성하면 어떻게 될까? 아래처럼 출력될 것이다.

 

 

▲가장 위쪽에 있는 script태그의 alert()함수가 가장 먼저 실행되고 여기서 확인을 누르면 그 다음 코드인 script태그가 실행된다.

 

▲ 또 위 alert창의 확인을 누르면 또 그 다음 코드 즉, body에서 텍스트코드가 실행이 된다.

 

▲ body의 텍스트코드가 실행된 뒤에 script태그가 실행되므로 alert창 뒤로 텍스트가 출력된 것을 볼 수 있다.