javascript - 변수/상수/자료형/연산자

javascript

자바스크립트란?

콘텐츠를 바꾸고 움직이는 등 페이지를 동적으로 꾸며주는 역할을 하는 프로그래밍 언어로 웹의 동적 처리를 담당

객체(object) 기반의 스크립트 언어

객체 지향형 프로그래밍과 함수형 프로그래밍 모두 표현 가능

 

자바스크립트로 할 수 있는 일

웹 사이트를 동적으로 만들 수 있음

웹 브라우저에서 실행되는 프로그램을 만들 수 있음

ex)버스 노선이나 정류장 정보를 저장하는 기능, 지도에 표시하는 기능 등

 

자바스크립트 소스 작성하기

1. HTML문서 안에서 작성하기

<script> 태그를 만들어 명령어를 작성

<script> 태그는 HTML문서 어디든 사용 가능

<script> 태그는 하나의 HTML문서 안에 여러 개 작성 가능

<script> 태그가 삽입된 위치에서 소스가 실행됨

2. 외부 스크립트 문서를 만들어 HTML문서와 연결해서 사용

 

자바스크립트 소스 작성 시 규칙사항

1. 대소문자 구별

2. 띄어쓰기 불가능

3. 숫자로 시작할 수 없음

4. 여러 단어 연결 시 카멜 표기법 사용 또는 언더라인 표기법

5. 세미콜론으로 문장 구분 (붙이지 않아도 실행 가능하지만 다른 프로그램과의 통일을 위해 사용)

6. 주석 사용 (한줄 주석: // 주석문, 여러줄 주석: /* 주석문 */)

 

자바스크립트 입력 및 출력

console.log(내용)

결과를 브라우저 콘솔창에 출력

prompt(페이지 내용, 기본값)

사용자에게 어떤 값을 입력받을 때 사용

alert(페이지 내용)

웹 브라우저 화면에서 간단한 알림 내용을 표시하려고 할 때 사용

document.write(내용)

웹 브라우저에 내용을 출력하고자 할 때 사용

 

 

변수와 상수

값(value)을 저장(할당)하고 그 저장된 값을 참조하기 위해 사용

특정 이름에 특정 값을 담을 때 사용함

변수는 변하는 값, 상수는 고정 값을 나타냄

 

종류

var

변수의 중복 선언이 가능

최초의 변수에 할당된 데이터가 변결될 수도 있음

let

변수 중복선언이 불가능

최초의 변수에 할당된 데이터가 변경될 수도 있음

const

변수의 중복 선언이 불가능

재선언 불가능

 

 

자료형

자료형(데이터타입, 데이터형, 데이터유형)

·기본형

number(숫자)

따옴표 없이 표기한 숫자

string(문자)

작은 따옴표(') 또는 큰 따옴표(")로 묶어냄

Boolean(논리형)

참(true)이나 거짓(false) 두 가지 값만 가지고 있는 유형

undefined

자료형을 지정하지 않았을 때의 유형 (변수를 선언만 하고 값을 정의하지 않은 경우)

null

값이 유효하지 않을 때의 유형

·복합형

array(배열)

하나의 변수에 여러 값을 저장하는 유형

object(객체)

함수와 속성이 함께 포함된 유형

 

typeof 연산자 - 자료형 확인

자료형을 확인하는 명령

콘솔창에 입력하여 변수형 확인

 

문자형 - 정수, 실수

텍스트 형태의 값

작은 따옴표 또는 큰 따옴표로 감싸서 선언

문자가 길어질 경우 나눠서 작성 가능

문자의 연결을 위해 +사용

 

숫자형 - 정수, 실수

정수: 소수점이 없는 숫자

실수: 소수점이 있는 숫자

값을 계산식으로 표현할 수 있음

기본적인 사칙연산 가능

 

논리형

참, 거짓 두 가지 종류만 나타낼 수 있음

주로 논리값을 제어구문 if/else, while, do/while, for문에서 사용

숫자로 표현하기도 함 (true: 1 / false: 0)

 

undefined/null

둘 다 값이 없음을 표현함

null은 '아무것도 없음'을 값으로 표현

undefined는 '정의되지 않은 상태'를 뜻함

 

 

연산자

산술 연산자

+

기본형: A+B

설명: 더하기

-

기본형: A-B

설명: 빼기

*

기본형: A*B

설명: 곱하기

/

기본형: A/B

설명: 나누기

%
기본형: A%B

설명: 나머지

 

대입 연산자

=

기본형: A=B

설명: A=B

+=

기본형: A+=B

설명: A=A+B

-=

기본형: A-=B

설명: A=A-B

*=

기본형: A*=B

설명: A=A*B

/=

기본형: A/=B

설명: A = A/B

%=

기본형: A%=B

설명: A=A%B

 

증감 연산자

++

기본형: A++ 또는 ++A

--

기본형: A-- 또는 --A

* A++(A--)와 ++A(--A)의 차이

A++(A--)는 작업이 수행된 후에 값이 증가(감소) 하고, ++A(--A)는 값이 먼저 증가(감소)하고 작업이 수행됨

 

 

비교 연산자

A>B

설명: A가 B보다 큼

A<B

설명: A가 B보다 작음

A>=B

설명: A가 B보다 크거나 같음

A<=B

설명: A가 B보다 작거나 같음

A==B

설명: A와 B가 같음

(자료형 비교 안함)

A!=B

설명: A와 B가 다름

(자료형 비교 안함)

A===B

설명: A와 B가 같음

(자료형 포함하여 비교)

A!==B

설명: A와 B가 다름

(자료형 포함하여 비교)

 

논리 연산자

&&

설명: AND연산자

||

설명: OR연산자

!

설명: NOT연산자

(true는 false로, false는 true로 표시)

연산자 우선순위

(높음 -> 낮음)

단항 연산자 -> 산술 연산자 -> 비교 연산자 -> 논리 연산자 -> 대입 연산자

 

삼항 조건 연산자

조건식의 결과에 따라 실행 결과가 달라짐

연산을 위해 3개의 피연산자가 필요함

형식

조건식 ? 결과1 : 결과 2

: 조건식이 true면 결과1, false면 결과2