JavaScript 기본(변수)

2023-03-16

 

자바스크립트란(특징)

(웹 페이지에서 동작을 담당하고 있는 객체지향 스크립트 언어)

• html 문서에서 동작을 담당한다.
• script 태그 내부에 작성한다.
• 외부 파일을 읽어 들여 실행도 가능하다.
• html은 뼈대, css는 살을 이야기한다면, javascript는 행동(동작)을 이야기 한다.
• javascript는 script 태그를 열어 영역을 선언한다.
• 별도의 컴파일작업을 수행하지 않는 인터프리터 언어이다.

.write <--(.)주소이동

(); <--호출, 괄호안은 인수

HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에서 시각적으로 출력하는것 (렌더링)

 

자바스크립트 특징

컴파일 = 사람이 이해하는 언어를 컴퓨터가 이해하는 언어로 바꿔주는

인터프리터(interpreter)= 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램을 말한다.

인터프리터 언어는 소스코드를 한번에 기계어로 변환하는 컴파일러와 달리, 컴파일 하지않고 소스코드를 한 줄씩 읽어들여 실행한다. 컴파일 하는 과정이 없기 떄문에 컴파일 하는 시간은 소요되지 않으나, 인터프리터 언어는 실행파일을 별도로 생성하지 않기 때문에 실행시마다 인터프리트 과정이 반복 수행되어 실행속도가 느리다는 단점이 있다.

(하지만 컴퓨터 사양의 발전으로 크게 체감하기 힘들다)

---

자주사용하는 태그 단축키 지정

 

설정 > 사용자 코드 조각

검색 > javascript.json

Print to console을 사용하고 싶은 단축키로 바꾸려면 복사 > 원하는 단축키로 바꿈

---

 

변수

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙인 이름
• 프로그램 언어에서 값을 저장하고 참조(값의 위치)하는 상징적인 이름

 

 

 

자바스크립트 변수 선언

-변수 선언시 var, let, const(변하지 않는 값) 키워드를 사용한다.

-선언단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림

-초기화단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적, undefined를 할당해 초기화

-GC(garbage collector) : 애플리케이션이 할당한 메모리공간을 주기적으로 검사하여 더 이상 사용되지 않은 메모리를 해제하는 기능

 

변수 호이스팅

-자바스크립트 고유의 특징으로 변수 선언(선언단계, 초기화단계)이 소스코드가 순차적으로 실행되는 런타임 이전단계에서 먼저 실행되어 참조에러가 발생해야하지만 undefined로 출력된다

 

값과 리터럴

• 값 : 표현식이 평가되어 생성한 결과
• 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(값, 표현식)

 

변수 재선언 재할당

 

var, function 호이스팅

 

변수 표기법

-변수명(식별자)는 의미있는 단어로 할 것

-표기법을 지켜서 변수명을(식별자) 작성할 것

 

-카멜 표기법: 소문자로 시작하며 2번째 단어부터는 첫글자가 대문자로 시작하는 것

예시 : var memberId;(주로 변수, 함수)

 

-파스칼 표기법: 대문자로 시작하며 2번째 단어부터는 첫글자가 대문자로 시작하는 것

예시 : var MemberID;(주로 클래스, 생성자 함수)

 

-스네이크 표기법: 모두 소문자로 표기, 단어와 단어사이에 언더바를 붙여 표기

예시 : var member_id;(주로 db컬럼명)

 

-헝가리안 표기법: 변수명의 앞에 자료형을 붙이는 것

(유지 보수 시 자료형이 변경되면 일일히 찾아서 자료형을 수정해야한다)

예시 : strMemberId;(자주사용하지않음)

 

-상수명 표기법 : 모든단어 대문자, 단어구분은 언더바(_)로 한다

예시 : member name -> MEMBER_NAME

 

메서드 단어의 사전적인 의미

- get -> return -> 값을 가지고 온다.

- set -> 해당 객체의 필드에 값을 삽입한다.

- to -> 메서드 뒤에 오는명에 맞는 형으로 변환하여 반환

- is -> boolean 형태의 값을 반환(T/F)

- add -> 데이터 누적

---

자바스크립트의 데이터 타입

-자바스크립트의 모든 값은 데이터 타입을 갖는다

-7개의 데이터 타입은 원시타입, 객체타입으로 분류

 

데이터 타입

 

데이터타입 (숫자 타입)

-자바스크립트의 숫자타입은 모든 수를 실수로 처리

-2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기에 모두 10진수로 해석

-숫자 타입의 세가지 특별한 값 : Infinity(양의 무한대), -Infinity(음의 무한대), NaN(산술연산불가)

 

데이터타입 (문자열 타입-1)

-자바스크립트의 문자열타입은 16비트의 유니코드(UTF-16) 문자로 전세계 대부분의 문자 표현이 가능

-문자열은 작은 따옴표, 큰 따옴표, 백틱(``)으로 감싸서 표현하나, 일반적으로 작은 따옴표를 사용한다

-작은 따옴표, 큰 따옴표, 백틱으로 감싸서 표현이 안된 문자열은 키워드나 식별자로 인식한다

 

데이터타입 (문자열 타입-2)

-자바스크립트의 문자열타입은  + 연산자를 활용하여 문자열을 연결할 수 있다
-백틱(``)으로 감싸서 표현식 삽입이 가능하다 (ex: ${ } ) 
-삽입된 표현식의 타입이 문자열이 아니더라도 강제적으로 문자열 타입으로 변환된다.

 

데이터타입 (불리언 타입)

-boolean 타입의 값은 논리적 참, 거짓을 나타내는 true, false 두개 뿐이다
-주로 프로그램을 제어하는 조건문에 활용된다

 

데이터타입 (undeifined타입, null타입)

-var 키워드로 선언한 변수는 암묵적으로 undefined로 초기화 된다(자바스크립트 엔진에 의해)

변수는 존재하나(메모리에 할당된 공간), 초기값이 자바스크립트 엔진에 의해 undefined 값을 할당한 상태

 

-null 타입의 값은 null이 유일하다

'메모리에 할당된 공간을 더이상 참조하지 않겠다' 라는 의미

 

데이터타입 변환

명시적 타입 변환(타입 캐스팅) : 값의 타입을 개발자 의도에 따라 다른 타입으로 변환
암묵적 타입 변환(타입 강제 변환) : 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환

 

명시적 타입변환 예

 

암묵적 타입변환 예시

---

연산자

 

산술 연산자

-단항 산술 연산자 : 1개의 피연산자를 산술 연산하여 숫자 값을 만듦
-부수효과 : 연산 후 피연산자의 값을 변경하는 효과 (증/감 연산자)

-이항 산술 연산자 : 2개의 피연산자를 산술 연산하여 숫자 값을 만든다

-문자열 연결 연산자 : + 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자

 

단항 산술 연산자 및 부수효과

 

이항산술연산자

 

이항산술연산자

 

할당연산자

(우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당)

 

비교연산자

(좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환)

 

대소 관계 비교연산자

(피연산자의 크기를 비교한 다음 그 결과를 불리언 값으로 반환)

삼항 조건 연산

(조건식의 평가 결과에 따라 반환할 값을 결정한다)
(형식 :  조건식 ? value (참일경우 반환값) : value (거짓일 경우 반환 값))

논리 연산자

(우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리 연산)

 

쉼표, 그룹 연산자

(쉼표연산자: 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.)
(그룹연산자: 소괄호로 피연산자를 감싸 괄호로 묶여진 표현식을 가장 먼저 평가하는데 사용한다)

 

typeof 연산자

(데이터타입확인 연산자, 피연산자의 평가 전 자료형을 나타내는 문자열을 반환)

 

그 외 연산자

 

연산자 우선순위