[자바스크립트] 정의 / 코드 작성 규칙 / 자료형 / 연산자

자바스크립트(JavaScript) - 2023.2.14 학습 내용

참고자료:

https://ko.javascript.info/

https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN

모던 JavaScript 튜토리얼

 

1. 정의

 

- HTML과 CSS와 함께 클라이언트 측 웹프로그래밍을 할 수 있도록 돕는 프로그래밍 언어

* HTML : 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어 | 어디가 문단이고, 헤딩인지, 표인지 등 정의
* CSS : HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어 | 배경색 추가, 글꼴 변경, 레이아웃 배치 등
* JavaScript :  동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있는 스크립팅 언어

- 웹페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어 

JavaScript에서는 애플리케이션 프로그래밍 인터페이스(API)가 특히 강력한 기능
API는 개발자가 직접 구현하기 어렵거나 불가능한 기능들을 미리 만들어서 제공하는 것으로 
브라우저 API와 서드파티 API로 구분됨
1) 브라우저 API : 웹브라우저에 내장됨 API로 DOM, Geolocation API, Canvas, WebGL API 등이 있음 
2) 서드파티 API : 브라우저에 탑재되지 않은 API로 Twitter API, Google 지도 API, OpenStreetMap API 등이 있음

- '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어 

- 원래는 브라우저에서만 쓸 목적으로 고안된 언어이지만 현재는 앱 개발, 블록체인, VR/AR 등 다양한 환경에서 쓰임

- C, C++, 자바와 같은 전통적인 언어에 비해 문법이 쉽고 브라우저에서 바로 실행할 수 있음

- 자바스크립트로 작성한 프로그램을 '스크립트(script)라 함

- 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불어올 때 스크립트가 자동으로 실행

- 브라우저뿐만 아니라 서버에서도 실행할 수 있으며,

- 자바스크립트 엔진(JavaScript engine)이라 불리는 특별한 프로그램이 들어있는 모든 디바이스에서도 동작 가능

  → 브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있음

  → 엔진의 종류는 다양한데, 엔진마다 특유의 코드네임이 있음

  → 코드네임은 개발 관련 글에서 종종 언급되므로 알아두면 좋음

  → (예) "X라는 기능은 V8에서만 지원합니다."라고 하면 Chrome과 Opera에서만 이 기능을 지원한다고 이해하면 됨

  → V8 - Chrome, Opera / SpiderMonkey - Firefox / ChakraCore - Microsoft Edge / SquirrelFish - Safari 등

  → 엔진 동작 과정

       엔진이 스크립트를 읽음(파싱)

      ▶ 읽어들인 스크립트를 기계어로 전환(컴파일)

      ▶ 기계어로 전환된 코드 실행. 기계어로 전환되어 실행 속도가 빠름

 

• 브라우저에서 할 수 있는 일

- 모던 자바스크립트는 '안전한' 프로그래밍 언어

- 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않음

   WHY? 애초에 이러한 접근이 필요치 않은 브라우저를 대상으로 만든 언어이기 때문

- 자바스크립트의 능력은 실행 환경에 상당한 영향을 받음

  → Node.js 환경에서는 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원

  → 브라우저 환경에선 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있음

 

       * 페이지에 새로운 HTML을 추가하거나 기존 HTML, 혹은 스타일 수정하기

       * 마우스 클릭이나 포인터의 움직임, 기보드 키 눌림 등과 같은 사용자 행동에 반응하기

       * 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기

       * 쿠키를 가져오거나 설정하기. 사용자에게 질문을 건네거나 메시지 보여주기

       * 클라이언트 측에 데이터 저장하기(로컬 스토리지)

 

• 브라우저에서 할 수 없는 일

- 브라우저는 보안을 위해 자바스크립트의 기능에 제약을 걸어두었음

- 이러한 제약은 악성 웹페이지가 개인정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위해 만들어짐

  → 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있음.

  → 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문

  → 모던 브라우저를 사용하면 파일을 다룰 순 있음. 하지만 접근은 제한됨

  → 사용자가 브라우저창에 파일을 드래그하거나 input태그를 통해 파일을 선택하는 등 특정 상황에서만 파일 접근 허용

  → 카메라나 마이크 같은 디바이스와 상호작용하려면 사용자의 명시적인 허가 필요

- 동일 출처 정책(Same Origin Policy)

  브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없음.

  그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용됨.

  하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르면 페이지에 접근할 수 없음 

  이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고,

  동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 함

- 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고 받을 수 있음

  하지만 타 사이트나 도메인에서 데이터를 받아오는 것은 불가능

  가능하게 하려면 원격 서버에서 명확히 승인을 해줘야 함(HTTP 헤더 등을 이용)

 

• 강점

- HTML/CSS와 완전히 통합할 수 있음

- 간단한 일은 간단하게 처리할 수 있게 해줌

- 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됨

 

위의 세가지를 모두 지원하는 브라우저 연관 기술은 자바스크립트 밖에 없음

이런 이유로 브라우저 인터페이스를 만들 때 자바스크립트가 가장 널리 사용되고 있음

이 외에 자바스크립트를 이용해 서버나 모바일 앱 등을 만드는 것도 가능

 

• 자바스크립트로 트랜스파일(transpile, 변환)할 수 있는 새로운 언어들

자바스크립트 이외의 언어로 작성한 코드를 '보이지 않는 곳에서' 자바스크립트로 자동 변환

 

- CoffeeScript

  자바스크립트를 위한 'syntatic sugar'

  짧은 문법을 도입하여 명료하고 이해하기 쉬운 코드를 작성할 수 있음

  Ruby 개발자들이 좋아함

 

- TypeScript

  개발을 단순화하고 복잡한 시스템을 지원하려는 목적으로 '자료형의 명시화(strict data typing)에 집중해 만든 언어

  Microsoft 개발

 

- Flow

  자료형을 강제하는데 TypeScript와는 다른 방식을 사용

  Facebook 개발

 

- Dart

  모바일앱과 같이 브라우저가 아닌 환경에서 동작하는 고유의 엔진을 가진 독자적 언어

  Google 개발

 

이외에도 다양한 언어가 있지만 개발 언어로 이러한 언어 중 하나를 택한다고 하더라도 자신이 무엇을 하고 있는지 이해하려면 결국엔 자바스크립트를 알아야 함

 

• 코드 에디터(code editor)

통합개발환경(IDE)과 경량 에디터로 나뉘는데, 둘 중 하나를 택해 작업

 

통합개발환경(Intergrated Development Enviroment, IDE)

- 강력한 에디터로 '프로젝트 전체'를 관장하는 다양한 기능을 제공

- IDE를 이용하면 수많은 파일로 구성된 프로젝트를 불러오고, 파일 간의 탐색 작업이 수월해짐

- 단순히 열려있는 파일뿐만 아니라 전체 프로젝트에 기반한 자동 완성 기능도 사용할 수 있음 

- git과 같은 버전 관리 시스템, 테스팅 환경 등 '프로젝트 수준'의 작업도 할 수 있음

- Visual Studio Code, WebStorm

 

경량 에디터(lightweight editor)

- IDE만큼 많은 기능을 제공하진 않지만, 속도가 빠르고 단순하다는 장점이 있음

- 파일을 열고 바로 수정하고자 할 때 주로 사용 (파일 하나만 수정할 때)

- 디렉터리 레벨 문법 분석기, 자동완성기능 등 다양한 플러그인을 지원

- Atom, Visual Studio Code, Sublime Text, Notepad++, Vim, Emacs 등

 

• 개발자 콘솔 

- 브라우저에는 '개발자 도구' 기능이 내장되어 있음. 이 도구를 활용하여 에러 확인 가능

- 대부분의 개발자는 Chrome이나 Firefox를 이용해 개발하는 것을 선호

- 두 브라우저가 제공하는 개발자 도구가 훌륭하기 때문

- 개발자 도구 보는 법 : F12 (mac의 경우 cmd + opt + J)

 

 

 - 빨간색 글씨

   에러 메시지

 

 - 에러 메시지 우측 링크

    VM0000 → 에러가 발생한 파일

   숫자 → 에러가 발생한 줄

 

 - 커맨드 라인 (> 기호)

   자바스크립트 명령어(command)를 입력

   커맨드 라인에 명령어 입력 후 엔터 누르면 해당 명령어 실행
   명령어를 여러 줄에 걸쳐 작성하고 싶다면 shift + Enter

 

• 자주 발생하는 에러

Uncaught ReferenceError : _____ is not defined

(한국어 번역) 캡쳐되지 않은 참고오류 : _____가 <익명>:1:1에 정의되지 않았습니다

 

크롬에서 값이 정의되지 않은 변수를 사용하거나 현재 scope 밖에 있는 변수를 사용했을 때 발생

 

console 오타

 

Uncaught TypeError: _____ is not a function

(한국어 번역) 캡쳐되지 않은 타입에러 : _____는 <익명>:1:9에서 함수가 아닙니다

 

크롬에서 정의되지 않은 함수를 사용했을 때 발생 → 함수 오타 확인

함수를 찾을 수 없는 경우. 함수명이 태그 ID, name 등과 동일하거나 함수 내에 오류가 발생하는 코드가 있을 경우

 

. 뒷부분 log 오타

 

Uncaught SyntaxError: missing _ after argument list

(한국어 번역) 캡쳐되지 않은 구문오류 : 인수 목록 뒤에 _ 누락

 

함수 호출 방법에 오류가 있을 때 발생. 오타, 연산자 누락 또는 이스케이프되지 않은 문자열일 수 있음

괄호 확인

 

) 누락

 

알아두면 좋은 영어

( ) : parentheses
{} braces
[] brackets

 

Uncaught SyntaxError: Invalid or unexpected token

(한국어 번역) 캡쳐되지 않은 구문오류: 잘못된 토큰 또는 예기치 않은 토큰

 

에러가 발생한 라인에 오타가 없는지 확인. 혹은 쌍따옴표로 문자열 감싸주기, 콤마(,)위치, 소괄호, 중괄호 등 괄호 열림, 닫힘 잘못된 부분이 없는지 확인

 

 

JavaScript 에러 TOP 10 (출처 : https://blog.meeta.io/10) → 아직 내가 이해할 수 X. 필요시 참고

1. Uncaught TypeError: Cannot read property 

    크롬에서 정의되지 않은 객체의 property를 읽어내거나 method를 호출했을 때

2. TypeError: 'undefined' is not an object (evaluating

    1번과 같은 에러이지만 safari에서는 위와 같이 띄움

3. TypeError: null is not an object (evaluating 

    safari에서 null의 property를 읽어내거나 method를 호출했을 때 발생

4. (unknown): Script error 

    자바스크립트의 uncaught error가 cross-origin policy를 어기며 다른 도메인에서부터 넘어오는 경우 발생

5. TypeError: Object doesn't support property

     IE에서 정의되지 않은 method를 호출했을 때 발생

6. Uncaught TypeError : ____ is not a function

     크롬에서 정의되지 않은 함수를 사용했을 때 발생

7. Uncaught RangeError: Maximum call stack size exceeded

    종료되지 않는 재귀함수를 호출했을 때 혹은 함수에 범위 이상의 값이 입력 되었을 때 발생

8. Uncaught TypeError: Cannot read property length of undefined

    정의되지 않은 변수의 length property에 접근하는 경우 발생

9. Uncaught TypeError: Cannot set property ____ of undefined

    값이 정의되지 않은 변수를 사용하고자 할 때 항상 'undefined'라는 메시지를 받고,

    undefined 변수의 어떤 property도 값을 읽거나 쓸 수 없음

10. Uncaught ReferenceError: ___ is not defined

    값이 정의되지 않은 변수를 사용하거나 현재 scope 밖에 있는 변수를 사용했을 때 발생

 

2. 코드 작성 규칙

 

• ; (세미콜론)

마침표의 역할로 어디까지가 하나의 명령인지 구분하기 위해 사용

하나의 명령이 끝날 때 붙이기 

 

자바스크립트는 줄바꿈이 있으면 이를 '암시적' 세미콜론으로 해석

이러한 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 하는데 항상 작동하는 것은 아님

따라서 ; 를 안붙여도 에러가 나진 않지만, 에러가 나는 경우도 있음

 

; 미작성으로 인한 오류 발생 예

 

[] 앞에는 세미콜론이 있다고 가정하지 않음. 따라서 오류 발생

 

; 잘 작성했을 때

; 미작성으로 인한 오류 발생 예

 

※ 세미콜론은 생략할 수 있으나 사용하는 것이 더 안전함

 

• 주석(comment)

한 줄 짜리 주석 : // 

여러 줄 주석 /* */

 

단축키 : 블록 지정 후 Ctrl + /

 

컴퓨터는 코드로 인식하지 못함

→ 어떠한 의도로 코드가 작성 되었는지 설명할 때, 구현한 코드가 어떤 동작을 하는지 기록할 때 등

    코드에 대해 설명할 때 사용 (협업, 수정시 유용함)

→ 쓰이지 않는 코드들도 주석으로 처리하기도 함

 

한 줄 주석 사용 예

 

여러 줄 주석 사용 예

 

• 들여쓰기

안해도 되지만 에러가 나는 경우가 있고, 보기에 좋음

 

3. 자료형

값(value) : 프로그램이 조작할 수 있는 데이터

자료형(data type) : 값의 종류 (ex. 문자열, 숫자, 불값)

 

• 숫자(Number)

정수(Integer) : 0보다 작은 음의 정수, 0, 0보다 큰 음의 정수

소수(floating point) : 소수점을 갖는 형태

기본적으로 사칙연산이 가능 

 

↓ 특수 숫자 값(special numeric value)

NaN : not a number 이지만 숫자형으로 분류

           계산 중에 에러가 발생했다는 것을 나타내주는 값으로 부정확하거나 정의되지 않은 수학 연산을 사용하면 발생

Infinity : 무한을 나타내는 숫자형

 

 

 

parseInt : 문자열을 정수형으로 변환
parseFloat : 문자열을 소수형으로 변환
Number : 문자열을 숫자형으로 변환
단, Number에 '3월', '1일'과 같은 문자열이 들어갈 경우에는 NaN으로 출력되나,
parseInt를 사용할 경우 3,1 과 같이 숫자로 출력됨

 

• 문자열(String)

시작과 끝이 작음따옴표(' ')로 감싸져 있는 데이터

큰따옴표(" "), 백틱(` `) 도 사용할 수 있음

 

양 끝의 따옴표 종류를 맞춰서 사용해야 함 (' " 사용시 에러 발생)

백틱은 줄바꿈을 할 수 있음. 그 외 줄바꿈 하고 싶을 때 \n 사용

백틱으로 변수나 표현식을 감싼 후 ${...}안에 넣어주면, 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있음

 

템플릿 문자열 (templete strings)
``(백틱) 안에 ${변수}와 ${함수}를 넣어 쉽게 문자열을 작성할 수 있음

 

템플릿 문자열 사용 예

 

큰따옴표나 작음따옴표는 중간에 표현식을 넣을 수 없음

'' 안에 ' 넣고 싶을 때 \ 사용하거나 바깥에 "" 사용

+ 기호 통해 문자열 연결이 가능함

 

문자열 작성 예

 

• 불린(Boolean)

true 참

false 거짓

 

• undefined

값이 할당되지 않은 상태

반환할 결과값이 없을 때 나옴

 

• null

의도적으로 빈 값을 넣을 때 사용

'존재하지 않는(nothing)' 값, '비어 있는(empty)' 값, '알 수 없는(unknown)' 값을 나타낼 때 사용

 

null 버그

null의 자료형은 null 

유명한 버그

 

4. 연산자

 

용어정리

피연산자(operand) : 연산자가 연산을 수행하는 대상으로 인수(argument)라고 부르기도 함

단항(unary) : 피연산자를 하나만 받는 연산자

이항(binary) : 두 개의 피 연산자를 받는 연산자

 

• 더하기 [ + ]

두 수를 합치거나, 또는 두 문자열을 하나로 붙일 때 사용

문자형 + 숫자 일 경우 : 숫자가 문자열로 바뀜 (형변환 type casting)

'문자열' + 0 > '문자열0'

+ 사용 예

 

반면, 문자열 앞에 + 연산자를 붙이면 숫자형으로 변환

+문자열 사용 예

 

• 빼기 [ - ] / 곱하기 [ * ] / 나누기 [ / ]

 

연산자 사용 예

 

컴퓨터는 특이하게 부동소수점 계산은 어려워함

WHY? 이진수로 변환하여 계산하는데 소수점은 이진수 변환이 어려움

따라서 소수점 계산할 때에는 10을 곱한 후 10으로 나누어서 계산

 

소수점 계산 예

 

- , *, / 는 숫자가 아닌 것들이 숫자로 바뀜

'문자열' - 0 > NaN (숫자형)

Number('문자열') - 0 이 적용되었다고 볼 수 있음

NaN은 어떤 값과 연산해도 NaN값이 나옴

 

 

• 나머지 [ % ]

 

• 거듭제곱 [ ** ]

 

• 할당 [ = ]

값을 어떤 변수에 할당

 

복합 할당 연산자 (compound assignment operators) : +=,   -=,   *=,   /=,   %=
증가(increment), 감소(decrement) 연산자 : 변수의 값을 1씩 증가시키거나 감소시킬때 x++, x--

 

• 동등 [ == ]  일치 [ === ]

두 값이 서로 같은지 테스트하여 true/false 결과를 반환

 

== 값만 비교 (형변환이 일어남)

=== 값, 자료형까지 비교

 

• 부정 [ ! ] / 다름 [ !==]

 

연산자 우선순위

그룹화 (  )
    ↓
* 혹은 / 
    ↓
+ 혹은  -

이외에 더 많지만 외울 필요는 없음

 

NaN == NaN; NaN >= Nan; NaN <= NaN;

< false

 

NaN != Nan;

< true

 

true > false;

< true

왜? true는 1, false는 0

 

'b' > 'a';

< true

 

'ad' > 'ab';

< true

 

'3' < 5;  '3'이 숫자로 변환

< true

 

'abc' < 5; 'abc'는 숫자형 NaN으로 변환. NaN값과의 비교는 false

false

 

==과&nbsp; ===의 차이

!= 과 !==의 차이

charCodeAt 사용 예

문자의 번호 알아볼 때 사용 ; .charCodeAt()

 

• typeof

인수의 자료형을 반환

 

string 사용 예

 

typeof 연산자는 일반적으로 사칙연산보다 우선순위가 높음

따라서 ()를 통해 연산을 먼저 수행 후 typeof를 실행하면 원하는 결과를 얻을 수 있음

 

• 논리 연산자

&& : and

|| : or

! : 반대로 전환

!! : 반대 2번, Boolean으로 형변환

 

false, ''(빈문자열), 0, NaN, null, undefined은 불값으로 형 변환했을 때 false → 외우기★

위의 값들을 'falsy값'이라고 부르기도 함

 

!, !! 사용 예

 

연산자 우선순위

우선순위	연산자 유형	기호
21	그룹	( )
...
17	논리 NOT	!
17	typeof	typeof
16	거듭제곱	**
15	곱셈	*
15	나눗셈	/
15	나머지	%
14	덧셈	+
14	뺄셈	-
...
12	미만	<
12	이하	<=
12	초과	>
12	이상	>=
11	동등	==
11	부등	!=
11	일치	===
11	불일치	!==
...
6	논리 AND	&&
5	논리 OR	||
...
3	할당	=