[학습일지]JAVA교육일지 13일차

9장 자바스크립트 기초 문법

​

9.1) 변수와 상수

​

9.1.1 변수 : 변하는 수, 값이 변하는 데이터를 저장하고 관리하기 위한 공간

​

var num = 10 + 20 ;

키워드 식별자 연산자 표현식 세미콜론

• 키워드 (예약어) : 어떤 역할이나 기능이 정해진 특별한 단어

ex) 변수 생성 : var

• 식별자 (변수명) : 자바스크립트 내부에서 변수, 함수 등에 부여되는 이름, 키워드는 식별자로 사용x
• 연산자 : 연산 작업을 하는 데 사용하는 기호
• 표현식 : 평가(표현식을 실행해 하나의 값을 만드는 과정)되어 하나의 값을 반환하는 식 또는 코드
• 값 : 더이상 평가할 수 없는 데이터
• 세미콜론(;) : 하나의 문(문법)이 끝났음을 의미
• 선언 : 변수의 식별자를 지정하는 행위, 변수를 선언한다
• 할당 : 할당 연산자(=)로 우변에 있는 값을 변수 공간에 대입(저장)하는 것
• 초기화 : 선언과 할당을 한 번에 하는 것, 변수를 초기화한다

​

9.1.2 새로운 변수 선언 키워드 let : ES6에서 새로 추가됨

• 변수명 중복 불가능 : 변수명 중복 생성으로 값이 덮어씌워지는 것을 방지
• 호이스팅이 안됨

- 호이스팅 : var 키워드로 변수 선언 할당 시, 변수선언을 js스코프 맨 위로 올려 실행하는 것

• var 키워드와 스코프의 범위가 다름 : 실무에서는 되도록 let 키워드 권장

​

9.1.3 상수 : 변하지 않는 수

​

* const 키워드 : 재할당이 안되기 때문에 상수 변수를 선언할 때 사용

• let키워드틑 변수를 선언하고 다른 값으로 재할당 가능
• const키워드는 재할당이 안되서 선언 먼저, 후 할당 안됨

​

9.1.4 식별자 명명 규치

* 강제적 규칙

• 식별자에 키워드 사용 불가
• 식별자에 공백 포함 불가
• 식별자의 첫 글자는 영문 소문자, _ , $ 기호만 가능

​

* 관용적 규칙

• 식별자는 영문으로만 작성
• 식별자는 의미있는 단어로 작성

​

* 식별자 표기법

• 카멜 표기법 : 변수명과 함수명, 객체의 속성명 작성 시 사용, 첫 글자는 영문소문자, 2개 이상의 단어 조합이면 각 단어의 첫 글자는 대문자로 표기 (ex) firstName
• 언더스코어 표기법 : 상수명 작성 시 사용, 2개 이상의 단어 조합 시 각 단어를 _기호로 연결 (ex) first_name
• 파스칼 표기법 : 생성자 함수명 작성 시 사용, 각 단어의 첫 글자를 대문자로 작성 (ex) FirstName

​

​

9.2) 자료형

기본 자료형 : 문자, 숫자, 논리, undefined, null, Symbol

참조 자료형 : 객체

​

9.2.1 문자열

큰따옴표(" ")나 작은따옴표(' ')로 둘러싸인 값의 형태

큰따옴표(작은따옴표)로 시작했으면 반드시 큰따옴표(작은따옴표)로 끝나야함

​

* 문자열에 따옴표가 포함된 경우 : 문자열에 작은따옴표가 포함되어 있다면 큰따옴표로 감싸기, 반대도 ok

​

* 문자열 연결 연산자 (+) : '문자열' + "연결 연산자"

​

* 이스케이프 문자 : 역슬래시(\) 붙이기, 순수한 문자로 인식

• \' : 작은따옴표
• \" : 큰따옴표
• \n : 줄바꿈
• \t : 수평탭
• \\ : 역슬래시

​

* 템플릿 문자열 : 백틱( ` )으로 문자열 정의하는 방법

• 큰따옴표와 작은따옴표로 정의하지 않아서 문자열에 따옴표 있어도 괜찮음
• 엔터를 하면 줄바꿈이 적용됨(이스케이프 문자 사용x)
• ${ } 문법을 이용해 문자열에 변수 또는 식을 넣을 수 있음

​

9.2.2 숫자형 : 정수와 실수 구분x, 실수 사용 시 주의 필요

​

9.2.3 논리형

: 참 또는 거짓에 해당하는 논리 값 true , false (두 값만 있음), 논리적인 연산으로 구할 수 있음

​

9.2.4 undefined

: 변수나 상수를 선언하고 생성한 공간에 저장할 데이터를 할당하지 않았을때 임시 할당되는 데이터 값, 사용자가 임의로 정의하고 할당하는 자료형이 아님

​

9.2.5 null

: null 값 하나만 있음, 변수나 상수를 선언하고 의도적으로 선언한 공간을 비워 둘 때 할당

​

9.2.6 객체 : 기본 자료형을 제외한 거의 모든 데이터와 자료구조는 객체 (배열, 객체 리터럴, 함수)

​

* 배열

• 복수의 테이터를 정의할 수 있는 자료형, 모든 자료형을 저장할 수 있음
• ex) let studentScore = [80, 70, 90 ,60] ;
• 요소 : 배열로 정의한 데이터, 배열 요소에 접근하려면 인덱스 이용
• 인덱스 : 각 데이터가 있는 위치를 가리키는 숫자, 0부터 시작
• 배열이 할당된 변수명에 대괄호[]를 이용해 인덱스 숫자를 넣으면 원하는 위치의 데이터에 접근
• 빈배열 : 비어있는 배열 정의 가능, 나중에 동적으로 데이터 추가하려고 할당함

​

* 객체 리터럴

• 객체를 정의하는 가장 간단한 방법
• 정의할 때 중괄호{} 사용, { }안에 키와 값이 한쌍인 속성이 들어감
• { 키1 : 값1 , 키2 : 값2 }
• 배열처럼 여러 값을 하나로 묶을 수 있음
• 키로 값을 구분하기 때문에 각 값의 의미를 바로 파악할 수 있음
• 각 값에 접근 방법 : 대괄호[] 사용, 추가로 마침표(.) 사용 가능
• 자세한 내용은 11장에서

​

*함수 : 10장에서 자세히 다룸

​

​

9.3) 연산자

어떤 연산을 처리하는 데 사용하도록 미리 정의된 기호

​

9.3.1 산술 연산자 : 덧셈, 뺄셈, 곱셈, 나눗셈같은 수학 연산을 수행하는 연산자

구분	연산자	예	설명
이항 산술	+	x + y	x에 y를 더함
	-	x - y	x에서 y를 뺌
	*	x * y	x에 y를 곱함
	/	x / y	x를 y로 나눔
	%	x % y	x를 y로 나누어 나머지를 구함
	**	x ** y	x의 y거듭제곱
단항 산술	++	x++ (후치 연산) ++x (전치 연산)	x를 1 증가시킴
	--	x-- (후치 연산) --x (전치 연산)	x를 1 감소시킴
단항 부정	-	-x	x의 부호를 부정(음수→양수, 양수→음수)

​

* 이항 산술 연산자 : 연산을 수행하는데 피연산자가 2개 필요한 연산자

​

* 단항 산술 연산자 :연산을 수행하는데 피연산자가 1개만 필요한 연산자, 증감연산자(++, --)

• 변수나 상수에 할당된 데이터로만 연산 가능, 숫자에 바로 사용은 안됨
• 전치연산 : '~하기 전'에 증감
• 후치연산 : '~한 후'에 증감

​

* 단항 부정 연산자 : 항상 피연산자 앞에 위치, 피연산자의 부호를 부정하는 연산

• 음수→양수, 양수→음수
• 숫자형 데이터가 할당된 변수에만 사용가능

​

​

9.3.2 대입 연산자와 복합 대입 연산자

​

* 대입 연산자 : 데이터를 대입(할당)하는 연산을 수행

* 복합 대입 연산자 : 산술 연산자와 대입 연산자를 함께 사용해 산술과 할당을 한 번에 수행

구분	연산자	예	설명
대입 연산자	=	x = y	x에 y를 대입
복합 대입 연산자	+=	x += y	x에 x + y를 대입
	-=	x -= y	x에 x - y 를 대입
	*=	x *= y	x에 x * y 를 대입
	/=	x /= y	x에 x / y 를 대입
	%=	x %= y	x에 x % y 를 대입
	**=	x **= y	x에 x ** y를 대입

​

9.3.3 비교 연산자 : 피연산자를 비교한 뒤, 논리현 값이 참(true), 거짓(false)를 반환하는 연산 수행

연산자	예	설명
==	x == y	x와 y값이 같으면 true
===	x === y	x와 y값과 자료형이 같으면 true
!=	x != y	x와 y의 값이 다르면 true
!==	x !== y	x와 y의 값과 자료형이 다르면 true
<	x < y	x가 y보다 작으면 true
<=	x <= y	x가 y보다 작거나 같으면 true
>	x > y	x가 y보다 크면 true
>=	x >= y	x가 y보다 크거나 같으면 true

​

9.3.4 논리 연산자 : 피연산자를 논리적으로 평가한 뒤, 조건에 맞는 피연산자를 반환

연산자	예	설명
&& (AND연산자)	x && y	x가 참이면 y 반환, 거짓이면 x 반환
|| (OR연산자)	x || y	x가 참이면 x 반환, 거짓이면 y 반환
! (NOT연산자)	!x	x가 참이면 false 반환, 거짓이면 true 반환

* && (AND연산자)

• 왼쪽부터 평가해 평가 결과가 거짓이면 거짓이 나온 피연산자 즉시 반환, 거짓이 아니면 마지막에 평가되는 피연산자 반환
• 연산 결과가 거짓으로 평가되면 그 피연산자를 반환
• 어떤 피연산자든 모두 논리형으로 평가
• " "(빈문자열), undefined, 0, null 만 거짓 / 나머지는 참으로 평가

​

* || (OR연산자)

• 왼쪽부터 평가해 참으로 평가된 피연산자를 즉시 반환
• 모든 피연산자가 참으로 평가되지 않으면 마지막에 평가된 피연산자 반환

​

* ! (NOT연산자)

• 피연산자나 식을 평가한 논리 값의 반대값(true→false, false→true)을 반환
• 괄호로 식을 어떻게 묶는지에 따라 결과가 다를 수 있음, 괄호 위치에 따라 연산 순서가 바뀌기 때문
• ! true && false 와 ! (true && false) 는 결과가 다름

​

9.3.5 삼항 연산자 : 세 항 중 가장 왼쪽에 있는 피연산자의 참, 거짓에 따라 나머지 두 항에 있는 피연산자를 선택적으로 반환

연산자	예	설명
?:	x ? y : z	x가 참이면 y 반환, x가 거짓이면 z 반환

​

9.3.6 연산자 우선순위 : 여러개의 연산자를 사용했을 때 어던 연산자를 먼저 연산할지 결정하는 기준

우선순위	연산자 종류	기호	결합순서	우선순위	연산자 종류	기호	결합순서
1	그룹	( )	좌→우	4	덧셈	+	좌→우
	대괄호	[ ]	좌→우		뺄셈	-	좌→우
	마침표	.	좌→우	5	비교	<=,<,>,>=	좌→우
2	증가	++	우→좌	6	동등,일치, 부등, 불일치	==, ===, !=, !==	좌→우
	감소	--	우→좌	7	AND	&&	좌→우
	단항 부정	-	우→좌	8	OR	||	좌→우
	NOT	!	우→좌	9	삼항	?:	좌→우
	delete	delete	우→좌	​ 10	대입(할당)	=	우→좌
	new	new	우→좌		복합 대입	+=, -=, *=, /=, %=, **=	우→좌
	typeof	typeof	우→좌	11	멀티	,	좌→우
3	나눗셈	/	좌→우	​
	곱셉	*	좌→우	​
	나머지	%	좌→우	​

• 우선순위가 같은 연산자만 사용하면 결합순서에 의해 결정
• 가능한 우선순위가 가장 높은 그룹 연산자를 사용해 식의 우선순위를 단순하게 정리하는 것이 좋음

​

9.3.7 형 변환 : 데이터의 자료형이 다른 자료형으로 바뀌는 것

​

* 암시적 형변환 : 사용자가 형 변환을 의도하지 않았지만 js 자체적으로 형 변환하는 것

* 명시적 형변환 : 드러나게 형 변환 처리를 하는 것

ex) string( ) 메서드를 사용하면 문자열을 숫자형으로 변환할 수 있음

​

암시적 형 변환은 놓친 부분이 있다는 의미이므로 발생하지 않도록 형 변환을 명확하게 표시하는 것이 좋음