Javascript 기본 [1]

WonCheol Park·2021년 1월 31일

JavaScript

Javascript 기본

목록 보기

2/7

Javascript 기본 정리

해당 파트에서는 실행 환경과 독립적인 core Javascript 즉 기본 문법을 정리한다.

2.1 Hello, world!

<script> 태그를 이용해 HTML 문서 내부에 삽입 가능하다.

ex)

<!DOCTYPE HTML>
<html>

<body>

  <p>스크립트 전</p>

  <script>
    alert( 'Hello, world!' );
  </script>

  <p>스크립트 후</p>

</body>

</html>

src 속성을 사용해 여러 파일로 분해하여 HTML에 삽입이 가능하다.

<script src="/path/to/script.js"></script>

src 속성을 가지면 <script> 태그 내부의 코드는 실행되지 않는다.

2.2 코드 구조

문(statement)

문: 어떤 작업을 수행하는 문법 구조와 명령어를 의미

ex)
alert('Hello, world!')

세미콜론

Javascript에서는 세미콜론을 꼭 붙이지 않아도 일반적인 상황에서는 정상적으로 동작한다. 그러나 예외적인 상황이 존재하므로, 세미콜론은 항상 붙이는게 암묵적인 룰이다.

alert("에러가 발생합니다.")
[1, 2].forEach(alert)

대괄호는 앞에 세미콜론이 있다고 가정하지 않아 에러가 발생한다.

주석

한 줄 주석: //로 시작
여러 줄 주석: /*로 시작해 */로 끝남

2.3 엄격 모드

엄격 모드란 ES5에서 추가된 기능으로 기존에 느슨한 Javascript의 문법 체크보다 더 세밀한 룰을 적용해 검사하는 모드이다.
스크립트 최상단에 "use strict"를 선언하면 엄격 모드가 활성화된다. 그러나 나는 이러한 문구를 사용해 본 적이 없는데도 엄격 모드가 적용된 환경에서 개발을 해왔다.
이유는 코드를 클래스와 모듈을 사용해 구성한다면 use strict가 자동으로 적용되어 따로 선언할 필요가 없기 때문이였다.

ex)
test = 4;와 같이 선언 없이 변수를 사용하면 원래는 전역 변수로 자동으로 선언이 되지만, 엄격 모드에서는 에러를 출력한다.

2.4 변수와 상수

변수 선언은 let을 사용하고, 상수 선언은 const를 사용한다. var 변수도 있지만 이는 오래된 버전으로 가능하면 let을 사용하도록 한다.

let hello = 'Hello world!';
const hi = 'hi world!';

변수 명명 규칙

변수명은 오직 문자, 숫자, 기호는 $와 _만 가능
첫 글자는 숫자가 될 수 없음
대소문자는 구별됨
예약어는 사용할 수 없음(ex. let, class, return, function, ...)

기본적인 변수 명명 규칙은 이러하나 추가적인 함수명, 변수명을 잘 쓰는 법을 공부하는게 중요한 것 같다. 코드 리뷰 과정에서 네이밍에 대한 피드백도 많이 있었고, 가동성 및 코드를 이해하는데 네이밍이 꽤 큰 부분을 차지한다고 생각한다.

2.5 자료형

기본 자료형 8가지

Number
BigInt
String
Boolean
Null
Undefined
Object
Symbol

Javascript의 변수는 타입은 있지만 특정 자료형으로 선언되는게 아니라 언제든지 바뀔 수 있다. 이를 동적 타입 언어라고 부른다.

Number(숫자형)

일반적인 숫자 값, Infinity, -Infinity, NaN의 값을 가질 수 있다.
Infinity, -Infinity는 0으로 나누는 경우 얻을 수 있고, NaN은 계산 도중 에러가 발생했을 시 반환된다.

alert( 1 / 0 ); // 무한대
alert( "숫자가 아님" / 2 ); // NaN

Javascript에서 수학 연산은 말이 안되는 연산들도 에러로 죽거나 하지 않고 NaN을 반환하며 연산이 종료될 뿐이다.

BigInt

(2^53-1)보다 큰 정수 혹은, -(2^53-1)보다 작은 정수를 표현할 때 사용한다.
아주 큰 단위의 숫자를 사용하는 경우 해당 자료형을 사용한다. 잘 사용하지 않아 별도 챕터에서 다룬다.

String(문자열)

따옴표로 묶으면 문자열 형식이 되는데 3종류 따옴표를 사용 가능하다.
1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 백틱: `Hello`
큰따옴표, 작은따옴표는 동일하게 사용되나 백틱은 안에 ${...}형태로 변수나 표현식을 stirng내부에 편리하게 삽입할 수 있다. (template string이라고 불리는 문법)

Boolean(불린형)

true, false 두 값으로 이루어진 자료형으로 긍정, 부정의 의미를 나타내는 자료형이다.

null

null은 오로지 null값을 위한 자료형으로, 존재하지 않는 객체를 뜻하는 자료형이다.
존재하지 않는 값, 비어있는 값, 알 수 없는 값을 나타내는데 사용한다.

undefined

undefined는 값이 할당되지 않은 상태를 나타낼 때 사용한다.
변수를 선언했을 때 값을 할당하지 않으면 자동으로 undefined가 할당된다.
개발자가 직접 undefined를 할당할 수도 있지만 이러한 의도는 null을 사용하도록 추천한다.

객체와 심볼

객체 이외의 자료형은 한 가지 데이터만 표현할 수 있어 원시(primitive) 자료형이라 부르나, 객체는 여러 데이터 컬렉션을 표현할 수 있다.
이후 객체 타입은 따로 다루기로 한다.

typeof 연산자

해당하는 인수의 자료형을 반환해주는 연산자다. 두 가지 형태로 사용 가능한데
1. 연산자: type of x
2. 함수: typeof(x)
형태로 사용이 가능하다.
예외사항이 있는데, null object를 typeof연산하면 object가 나오지만 이는 언어상 오류라고 한다. null은 객체가 아니다.

2.6 alert, prompt, confirm을 이용한 상호작용

alert

alert는 사용자가 확인(ok)를 누를 때까지 메시지를 보여주는 모달창을 띄워준다.

alert("Hello");

모달(modal)은 페이지 나머지 부분과는 상호 작용이 불가능하다는 것을 의미한다. 그러므로 사용자는 확인을 누르기 전까지는 모달 창 밖의 버튼을 누르거나 하는 행동을 할 수 없다.

prompt

prompt는 텍스트 메시지와 입력 필드, 확인, 취소 버튼이 있는 모달 창을 띄워준다.

result = prompt(title, [default]);

title: 사용자에게 보여줄 문자열
default: 입력 필드의 초기값(인수를 대괄호로 감싸는 것은 해당 매개변수가 필수가 아닌 선택이라는 의미)
사용자가 입력을 취소한 경우에는 null이 반환된다.

confirm

confirm은 매개변수로 받은 질문과 확인 및 취소 버튼이 있는 모달 창을 띄워준다.

result = confirm(question);

사용자가 확인을 누르면 true, 그 외는 false를 반환한다.

WonCheol Park

신입 개발자입니다~

이전 포스트

Javascript 소개

다음 포스트

Javascript 기본 [1]