[코딩 자율학습 HTML + CSS + 자바스크립트] 3. 자바스크립트로 웹 동작 구현하기- "9장 자바스크립트 기초 문법 살펴보기"

9.1 변수와 상수

1-1 변수

데이터를 저장할 수 있는 공간.

 -변수: 변할 수 있는 데이터를 저장하는 공간

 -상수 변수: 재할당 할 수 없는 데이터를 저장하는 공간

 

 -키워드(=예약어): 자바스크립트 프로그래밍   어떤 역할이나 기능이 정해진 특별한 단어.

 -식별자: 자바스크립트 내부에서 변수, 함수 등에 부여되는 이름을 의미. var, let, const 등의 키워드와 함께 사용하면 식별자라는 용어보다는 변수명이라고 함. 키워드는 식별자로 사용할 수 없음.

 -연산자: 이름 그대로 어떠한 연산 작업을 하는 데 사용하는 기호. 

 -표현식: 표현식을 실행해 하나의 값을 만드는 과정되어 하나의 값을 반환하는 식 또는 코드를 의미.

 -값: 더 이상 평가할 수 없는 데이터를 의미. 

 -세미콜론: 자바스크립트에서 하나의 문이 끝났음을 의미.

 -선언: 변수를 생성하고 값을 저장하는 문법에서 var, let, const 키워드를 사용해 변수의 식별자를 지정하는 행위.

 -할당: 할당 연산자인 = 기호로 우변에 있는 값을 변수 공간에 대입(저장)하는 것.

 -초기화: 변수는 초기에 값을 할당하지 않고 선언만 할 수 있음.

 

1-2 새로운 변수 선언 키워드 let

 ① 변수명 중복이 불가능(var 키워드로 선언한 변수명은 중복해서 생성할 수 있음)

 ② 호이스팅되지 않음

 ③ 스코프의 범위가 다름

 

1-3 상수

변수를 선언할 때 사용하는 키워드로 const도 있음.  내용은 let 키워드와 같음.

 ① 변수명 중복이 불가능(var 키워드로 선언한 변수명은 중복해서 생성할 수 있음)

 ② 호이스팅되지 않음

 ③ 스코프의 범위가 다름

 ④ 재할당이 안 된다는 점

 

1-4 식별자 명명규칙

◎ 강제적 식별자 명명 규칙

규칙	불가능 예
식별자에 키워드 사용 불가	var, let, const
식별자에 공백 포함 불가	my School, like food
식별자의 첫 글자는 영문 소문자, _(언더스코어), $ 기호만 사용	*name, #age, @email

 

◎ 관용적 식별자 명명 규칙

규칙	좋은 예	나쁜 예
식별자는 영문으로만 작성	name, age	이름, 나이
식별자는 의미 있는 단어로 작성	name, age(이름과 나이 저장 시)	a, b(이름과 나이 저장 시)

 

◎ 식별자 표기법

표기법	설명	예
카멜 표기법	변수명과 함수명 작성 시 사용	firstName, lastName
언더스코어 표기법	상수명 작성 시 사용	FIRST_NAME, last_name
파스칼 표기법	생성자 함수명 작성 시 사용	FirstName, LastName

 

-카멜 표기법

마치 낙타(camel)의 혹처럼 글자 높이가 내려갔다가 올라간다고 해서 이름 지어진 표기법. 첫 글자는 영문 소문자로 시작하고, 2개 이상의 단어가 조합되면 각 단어의 첫 글자는 대문자로 표기. 주로 변수명이나 함수명, 객체의 속성명을 지을 때 사용.

 

-언더스코어 표기법

언더스코어 표기법은 2개 이상의 단어가 조합될 때, 각 단어를 _ 기호로 연결해 표기하는 방법. 상수의 식별자를 지을 때 사용.

 

- 파스칼 표기법

파스칼 표기법은 각 단어의 첫 글자를 대문자로 작성하는 방법. 자바스크립트에서 생성자 함수명을 지을 때 사용.

 

---

9.2  자료형

자바스크립트에서 사용할 수 있는 데이터의 종류를 의미. 자료형은 기본 자료형과 참조 자료형으로 구분.

구분	자료형	설명
기본자료형	문자열	큰따옴표나 작은따옴표로 둘러싸인 값
	숫자형	정수, 실수 포함한 모든 숫자
	논리형	논리 값(true, flase)
	undefined	변수에 아무런 값도 할당되지 않는 상태를 나타내는 값
	null	변수를 의도적으로 비워 두기 위해 사용하는 값
참조 자료형	객체	배열, 함수, 객체 리터럴 등으로 파생되는 상위 자료형

 

2-1 문자열

문자열은 "Hello, Javascript"나 'Hello, Javascript'처럼 큰따옴표("")나 작은따옴표('')로 둘러싸인 값.

- 문자열에 따옴표가 포함된 경우: 작성하려는 문자열에 포함되지 않은 따옴표로 문자열을 감싸서 정의. 문자에 작은따옴표가 포함되어 있다면 큰따옴표로 감싸고, 큰따옴표가 포함되어 있다면 작은따옴표.

let string1 = '문자열은 큰따옴표(")로 감싸면 됩니다.';
let string2 = "문자열은 작은따옴표(')로 감싸면 됩니다.";

-문자열 연결 연산자: 문자열을 덧셈 기호로 연산하면 서로 연결되는 특징

-이스케이프 문자: 웹 브라우저가 사용자 의도와 다르게 문자열을 해석할 때 사용. 자바스크립트에서는 역슬래시(\)를 붙여 이스케이프 문자로 사용.

이스케이프 문자 사용 시	설명
\'	작은따옴표(single quotes)
\"	큰따옴표(double quotes)
\n	줄 바꿈(new line)
\t	수평 탭(horizontal tab)
\\	역슬래시(backslash)

 

-템플릿 문자열: 백틱(`)으로 문자열을 정의. 기존 문자열 정의 방식처럼 큰따옴표나 작은따옴표로 문자열을 정의하지 않기 때문에 문자열에 큰따옴표나 작은따옴표가 있어도 영향을 받지 않음.

      >특징: ① Enter를 눌렀을 때 줄 바꿈이 적용. 

                 ② ${} 문법을 이용해 문자열에 변수 또는 식을 넣을 수 있음.

 

2-2 숫자형

정수와 실수를 구분하지 않고 전부 하나의 숫자 자료형(숫자형)으로 취급.

2.3 논리형

참 또는 거짓에 해당하는 논리 값인 true, false를 의미.

2.4 undefined

변수나 상수를 컴퓨터 메모리 공간에 선언하면 반드시 생성한 공간에 저장할 데이터를 할당해야 함. 할당하지 않을 경우 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이때 할당되는 값이 undefined. 

2.5 null

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

2.6 객체

자바스크립트의 핵심적인 자료형.  객체 자료형에서 파생되는 자료형으로 배열, 객체 리터럴, 함수가 있음.

  -배열: 복수의 데이터를 정의할 수 있는 자료형. 배열 요소에 접근하려면 인덱스를 이용

  -객체 리터럴: 객체를 정의하는 가장 간단한 방법. 객체를 정의할 때 중괄호({})를 사용하며, 중괄호 안에는 키(key)와 값(value)의 한쌍으로 이루어진 속성(property).

 

 

---

9.3  연산자

연산자는 어떠한 연산을 수행하기 위해 미리 정해져 있는 기호

 

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의 부호를 부정합니다(음수 → 양수, 양수 → 음수)

 

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를 대입합니다.

 

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를 반환합니다.

 

3.4 논리 연산자

피연산자를 논리적으로 평가한 뒤, 조건에 맞는 피연산자를 반환하는 연산을 수행.

연산자	예	설명
&&	x && y	x가 참이면 y를 반환하고, 거짓이면 x를 반환합니다.
||	x || y	x가 참이면 x를 반환하고, 거짓이면 y를 반환합니다.
!	!x	x가 참이면 false를 반환하고, 거짓이면 true를 반환합니다.

 

3.5 삼항 연산자

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

연산자	예	설명
?:	x ? y : z	x가 참이면 y를 반환하고, x가 거짓이면 z를 반환합니다.

 

3.6 연산자 우선순위

연산자 우선순위와 결합 순서

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

3.7 형 변환

◎암시적 형 변환

사용자가 형 변환을 의도하지 않았지만, 자바스크립트에서 자체적으로 형 변환하는 것을 말함.

const result = 10 + "10";
console.log(result); // 1010


let num = 10;
let strNum = "10";
if(num == strNum){ // 문자열을 숫자형으로 형 변환
  console.log(`equals`);
}

◎명시적 형 변환

이름 그대로 드러나게 형 변환을 처리

let num = 10;
let strNum = "10";
if(String(num) == strNum){
  console.log(`equals`);
}

 

---

9.4  조건문

 

4-1 if문

if 뒤에 오는 소괄호(()) 안의 조건식이 참으로 평가되면 중괄호 안의 코드를 실행하는 조건문. 조건식은 숫자를 써도, 문자열을 써도, undefined를 써도, null을 써도 무조건 참/거짓으로 평가. 그리고 평가된 참/거짓에 따라 중괄호({}) 안의 코드를 실행하거나 실행하지 않음.

if(조건식1){
  // 조건식1이 참이면 블록문 실행
}else if(조건식2) {
  // 조건식2가 참이면 블록문 실행
} else {
  // 조건식이 모두 거짓이면 블록문 실행
}

- 블록문: 한 개 이상의 자바스크립트 코드를 중괄호로 묶은 것

 

4-2 switch문

witch 뒤에 오는 소괄호 안의 값과 일치하는 case 문이 있을 때 해당 코드를 실행하는 조건문. 일치 여부 확인은 일치 연산자(===)를 사용한 비교 연산처럼 값과 자료형을 함께 비교. switch 문에는 하나 이상의 case 문과 default 문, break 문을 사용.

switch(key){
  case value1:
    // key가 value1일 때 실행할 블록문
    break;
  case value2:
    // key가 value2일 때 실행할 블록문
    break;
  default:
    // 아무것도 일치하지 않을 때 실행할 블록문
    break;
}

 

※ if 문 vs switch 문

두 조건문의 결정적 차이는 조건의 형태. if 문은 조건에 식(statement)을 사용하고, switch 문은 조건에 값(value)을 사용.

 

 

---

9.5  반복문

반복문은 지정한 조건이 참(true)으로 평가되는 동안 지정한 블록문을 반복해서 실행하는 문법

 

5-1 while문

특정 조건을 만족하는 동안 블록문을 실행.

while(조건식){
  // 조건식이 참이면 실행
}

5-2 do..while문

특정 조건이 참으로 평가되는 동안 do 다음에 오는 블록문을 반복 실행

do{
  // 블록문
}while(조건식);

5-3 for문

횟수를 지정해 지정한 횟수가 끝날 때까지 블록문을 반복 실행하는 반복문. 조건식과 증감식이라는 독특한 실행 구조로 되어 있음.

초깃값 → 조건식 → 블록문(조건식이 참일 경우) → 증감식 → 조건식 순서로 실행

for(초깃값; 조건식; 증감식){
  // 블록문
}

5-4 for..in문

for(가변수 in 배열/객체 리터럴){
  // 블록문
}

9.6  break, continue 문

 

 -break: 반복문 종료

-continue: 반복문 건너뛸 때

 

 

 

---

 

출처

https://www.gilbut.co.kr/book/view?bookcode=BN003377

코딩 자율학습 HTML + CSS + 자바스크립트