[JS] 자바스크립트란

 

 

자바스크립트의 오해: 자바스크립트 = 자바?

자바스크립트(JavaScript)란 웹 브라우저에서 사용하는 프로그래밍 언어입니다. 참고로 이름과 달리 자바스크립트는 자바라는 프로그래밍 언어와는 거의 관련이 없습니다. 이름이 비슷한 것은 마케팅과 연관이 있기 때문이며 엄밀한 다른 언어입니다.

 

자바스크립트의 정의

고급 레벨의 객체 지향 다중 패러다임 프로그래밍 언어

 

무슨 의미인가?

프로그래밍 언어는 기본적으로 우리가 코드를 작성하도록 도와주는 언어입니다. 컴퓨터가 무엇을 하도록 지시하는 언어라고 생각하면 됩니다. 그게 자바스크립트 사용의 주요 목표입니다. 그리고 자바 스크립트는 고급 언어입니다. 복잡한 것을 생각할 필요가 없습니다. 여기서 복잡한 것들은, 컴퓨터 메모리나 프로그램을 실행하는 동안 관리하는 것들을 말합니다. 이런 모든 작은 디테일들에 대한 소위 ‘추상화’라는 개념이 많습니다. 덕분에 언어를 간편하게 쓰고 배우기가 훨씬 쉬워졌습니다. 그리고 자바스크립트는 개체 지향입니다. 그 말은 언어의 대부분이 데이터를 저장하기 위한 개체 개념에 기초한다는 것입니다. 마지막으로 자바스크립트는 다중 패러다임 언어로, 아주 유연하고 기능이 많습니다. 모든 종류의 프로그래밍 스타일을 사용할 수 있습니다. 명령어, 선언어 등 같은 스타일을 말합니다. 이런 스타일들은 기본적으로 코드를 구성하는 다양한 방법입니다. 

 

자바스크립트를 왜 쓰는가?

HTML, CSS, JS를 이용해 상호작용적이며 동적인 웹을 만들 수 있습니다. HTML은 모든 콘텐츠를 책임집니다. CSS는 스타일링과 레이아웃에 이용됩니다. JS는 인터넷 프로그래밍 언어로 동적 상호 작용 효과를 추가할 수 있습니다. 콘텐츠나 CSS 조작에도 이용됩니다. 전체 응용프로그램을 구축하는 데에도 필요합니다. 라이브러리와 프레임워크(리액트, 앵귤러, 뷰 등)는 현대적으로 발전한 도구인데, 이들은 여전히 100% 자바스크립트에 기반을 두고 있기 때문에 다루기 전에 자바스크립트를 능숙하게 아는 편이 좋습니다. 

 

---

 

간단한 자바스크립트 언어를 구현해보겠습니다.

 

let js = '프로그래밍 언어';

if(js === '프로그래밍 언어') alert('Hello World!');

 

js라는 변수를 지정하고 값을 '프로그래밍 언어'를 할당했습니다.

그리고 만약 js가 '프로그래밍 언어'와 동일하다면, Hello World!라는 문자열을 보여주는 경고창을 띄우라고 명령했습니다.

실행하면 다음과 같은 alert 창이 뜹니다.

 

그리고 계산도 가능합니다.

console.log(40+8+23-10);

 

40+8+23-10을 콘솔 창에 띄워주라고 명령했습니다. 크롬 개발자도구로 콘솔 창을 열어보면

 

이렇게 값이 나옵니다. 코드의 어디 부분에서 나왔는지도 보여주고 있습니다.

 

---

 

자바스크립트를 배우기 전 알아야 할 용어

 

표현식과 문장

자바스크립트에서 값을 만들어내는 간단한 코드를 '표현식'이라고 부릅니다.

273
10 + 20 + 30 * 2
'javascript'

 

하나 이상의 표현식이 모이면 문장이 됩니다. 문장 끝에는 마침표를 찍듯 세미콜론(;) 또는 줄바꿈을 넣어 문장의 종결을 알려줍니다.

10 + 20 + 30 + 40 * 2;
let fullName = 'Baek' + 'Seung' + 'Hyun';
alert('Hello World!');

 

이러한 문장들이 모여서 프로그램을 이룹니다.

 

 

식별자

식별자는 프로그래밍 언어에서 이름을 붙일 때 사용하는 단어입니다. 주로 변수명이나 함수명 등으로 사용됩니다. 자바스크립트 식별자를 만들 때에는 규칙이 있습니다.

 

• 키워드(자바스크립트에서 처음 만들어질 때 정해놓은 특별한 의미가 있는 단어)를 사용하면 안 됩니다.
• 숫자로 시작하면 안 됩니다.
• 특수문자는 _와 $만 허용합니다.
• 공백문자를 포함할 수 없습니다.

식별자를 만들 때에는 의미 있는 단어를 사용하는 게 좋습니다. 또한 식별자 작명 관례가 있습니다.

 

- 낙타 표기법: 낙타 등처럼 중간 중간 대문자가 튀어나와 보이는 표기법

• 클래스 명은 항상 대문자로 시작 (예: MyRoom)
• 변수, 인스턴스, 함수, 메소드 명은 항상 소문자로 시작 (예: count, getKey)
• 여러 단어로 이루어진 식별자는 각 단어의 첫 글자가 대문자 (예: willReturn, getName)

 

- 스네이크 표기법

• 변수명, 함수명 등을 소문자로 하고, 단어 사이를 밑줄로 구분 (예: snake_case)

 

 

주석

주석은 프로그램 코드를 설명할 때 사용하며 프로그램 진행에 영향을 주지 않습니다. 자바스크립트 주석의 형태는 다음과 같습니다.

 

1. // 주석 내용

한 줄 주석을 표현하는 방법으로 // 뒤의 문장은 실행되지 않습니다.

 

2. /* 주석 내용 */

여러 줄 주석을 표현하는 방법으로 /*와 */ 사이의 모든 문장은 실행되지 않습니다.

 

 

출력

처음 자바스크립트를 공부할 때 코드가 제대로 만들었는지 확인하기 위한 기본적인 방법은 출력입니다.

 

- 크롬 개발자 도구

구글 크롬 주소창에 about:blank를 입력하여 크롬이 기본적으로 제공하는 빈 페이지로 들어가 개발자 환경을 띄우고 콘솔 탭에서 코드를 입력하면 그 결과를 바로 출력합니다.

 

- alert()

파일을 만들었을 때 가장 기본적인 출력 방법은 alert() 함수를 이용하는 것입니다. 이를 이용하면 웹 브라우저에 경고창을 띄울 수 있습니다. 이때 함수의 괄호 안에 들어가는 것은 매개변수라고 부릅니다. 괄호 안에 메세지를 입력하면 매개변수가 경고창으로 나옵니다.

 

- console.log()

파일을 실행하여 곧바로 결과를 보는 것이 alert이었다면, 어느 정도 화면에 출력되는 양이 많아졌을 때 console.log() 메소드를 이용하면 편합니다. console.log() 메소드도 alert() 함수처럼 괄호 내부에 입력한 값을 출력합니다.