[JS] 자바스크립트 JavaScript

자바스크립트 Java Script

객체 기반의 스크립트 언어로, HTML으로는 웹의 내용을 작성하고,CSS으로는 웹 디자인을 하고, Java Script로는 웹의 동작(사용자 입력처리, 웹 어플리케이션 작성 등 웹페이지의 동적 변화)을 구현하는 인터프리터 언어다.

 

 

Java 와 Java Script

자바와 자바스크립트는 오버로딩과 오버라이딩처럼 이름이 비슷하지만 전혀 관계가 없다.

	Java	Java Script
언어	컴파일 언어	인터프리터 언어
타입 검사	타임 검사 엄격	타입을 명시하지 않음
기반	클래스 기반의 객체 지향 언어	프로토 타입 기반의 객체 지향 언어

 

 

태그 <script></script>

style 태크 (CSS) 처럼 태그 안에 바로 작성할 수도 있고, 외부 js 파일을 불러올 수도 있다.

HEAD 태그 안에 존재해야하는 style 태그와 달리 어디든 들어갈 수 있으며, 별도의 설정이 없으면 해당 위치에서 js로딩이 이뤄지기 때문에, 위치에 따라 기능 작동 여부가 달라진다. 

외부 js를 사용할 때는 상단 선언하는 경우가 많으므로 defer 등의 설정을 사용한다.

외부 Js 사용 시 : <script src="경로" (설정/생략가능)></script>

 

 

식별자 규칙

• 첫번째 문자 : 알파벳, 언더바(_), $문자만 사용가능
• 두번째 이상 문자 : 알파벳, 언더바(_), $, 숫자(0~9) 사용가능
• 대소문자 구별(data, Data)
• 키워드 사용불가

 

데이터타입(typeof())

원시타입

number	숫자 타입
Infinity	무한
NaN	Not a Number
string	문자열 타입
undefined	타입이 없음
null	null
symbol	심볼값

 

객체타입

object

객체 타입

 

 

변수선언

자료형을 앞에 붙여 선언하는 java와 달리 java script는 변수명 앞에 var let const를 붙여 선언한다.

var	함수의 영역만 영역으로 판단 함수 레벨 스코프 : 변수가 만들어진 함수 영역 전체에서 유효 블록 레벨 스코프 : 변수가 만들어진 {}영역에서만 유효
let	모든 영역을 영역으로 판단
const	final과 동일하며 값 변경 불가

 

 

연산자

최우선 연산자	()
산술연산자	+ - * / %
단항연산자	++ --
대입연산자	=
비교연산자(관계)	> >= < <=
	== !=	값만 비교
	=== !==	값과 타입 모두 비교
논리연산자	|| && ! !!
삼항연산자	조건식? 참:거짓
typeof 연산자	typeof 값	값의 타입을 문자열로 반환
지수연산자	**	2**2===4 (true 반환)
비트연산자	& << >>	비트의 논리 합을 하는 연산자, 비트 이동하는 연산
Null 병합 연산자	??	앞에 오는 값이 null 또는 undefined이면 뒤에 오는 값을, 아니면 null 또는 undefined를 반환

*Java Script에서는 변수의 값이 truthy 또는 falsy로 평가될 수 있는 특성이 있다.

 

> 부정형 연산 (! !!)

! :  입력값을  boolean으로 변환하는데, true이면 false로 , false이면 true로 값을 반대로 반환한다.

!! : boolean타입으로 명시적으로 형 변환한다.

//true인 경우
!!true
!false
!![{}
!![]
!null
!!'mini'

//false인 경우
!true
!!false
!{}
![]
!!null
!'mini'

> Null 병합 연산

null ?? true // true
null ?? null // null
null ?? [] // []
null ?? NaN // NaN
undefined ?? false // false
undefined ?? 'mini' // mini
undefined ?? {} // {}
undefined ?? NaN // NaN

 

> 옵셔널 체이닝

객체의 속성이 없는 경우, typeError가 발생하지 않고 undefined가 반환된다.

const obj = {
 a: 'it is a'
}
obj.a.length //7
obj.b.length //typeError : Can not read properties of undefined {readin 'b'}
obj.a?.length // undefined

 

 

 

truthy falsy

java script에서는 변수의 값에 따라 truthy 또는 falsy로 평가될 수 있는 특성이 있다.

특정 조건에 따라 true 또는 false로 간주된다는 의미다.

truthy인 경우	falsy인 경우
true	false
" " (공백)	0 (숫자)
"false" (문자열 false)	"" (빈문자열)
[] (빈 배열)	null
{} (빈 객체)	undefined
falsy가 아닌 모든 값	NaN

 

 

 

 

[참고 출처] :https://im-designloper.tistory.com/86