JavaScript 함수 및 자료형, 연산자

[변수의 틀]

var num = 10 + 20;

var(키워드) 

num(식별자) 

=(연산자) 

10 + 20(표현식) 

;(세미콜론) 

 

식별자 명명 규칙

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

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

식별자 표기법

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

 

let 함수

1)  변수명 중복이 불가능합니다.

let num = 10 + 20;
let num = 50;

 

let 키워드는 변수명을 중복 선언하지 못하게 해서 다음과 같은 코드가 정상적으로 실행되지 않습니다.

이렇게 중복 선언을 불가능하게 함으로써 다른 사람이 선언한 변수명을 실수로 재선언하는 경우가 없어짐

{실행결과}

Uncaught SyntaxError: Identifier 'num' has already been declared

 

2)  호이스팅되지 않습니다.

호이스팅은 let과 같은 키워드로 변수를 선언하고 할당했을 때, 자바스크립트의 스코프 맨 위로 실행하는 것을 말합니다.

var num; // 선언이 최상위로 올라옴
console.log(num);
num = 10; // 할당은 원래 자리에 있음

 

다음과 같이 var 변수로 작성하게 되면 호이스팅이 일어나 값이 10으로 출력됩니다.

이때, let 키워드를 사용하여 변수를 선언하면 호이스팅이 일어나지 않아 다음과 같이 오류가 발생합니다.

console.log(num);
let num = 10;

{실행결과}
Uncaught ReferenceError: num is not defined

 

3) 스코프의 범위가 다릅니다.

전반적으로 var 키워드 보다는 let 키워드가 참조하는 스코프가 더 넓기 때문에 되도록이면 let 키워드를 사용하는 것을 권장합니다.

 

상수 or 상수 변수(const)

const vs let  : const 키워드는 let 키워드와 다르게 변수의 값 재할당이 되질 않습니다.

 

let 키워드

let num = 10;
num = 30;
console.log(num);

{결과}
30

 

const 키워드

const num = 10;
num = 30;
console.log(num);

{결과}
Uncaught TypeError: Assignment to constant variable

 

const 키워드는 재할당이 안 되기에, 선언을 먼저하고 값 할당을 나중에 하는 것도 안됩니다.

const num; // 선언을 먼저 하고
num = 10; // 할당을 나중에 해도 오류가 납니다.

---

자료형

기본 자료형 : 문자(String), 숫자(number), 논리(boolean), undefined, null, Symbol 자료형

참조 자료형 : 객체(object)

 

문자(string) : 큰따옴표("") 나 작은따옴표('')를 사용하며 반드시 시작과 끝에서 사용된 따옴표 종류가 일치해야 됨

이때, 문자열 연결 연산자(+)를 사용하면 문자열과 문자열을 서로 연결할 수 있습니다.

 

{이스케이프 문자} - 웹 브라우저가 사용자 의도와 다르게 문자열을 해석할 때 사용함

이스케이프 문자 사용 시	설명
\'	작은따옴표
\''	큰따옴표
\n	줄바꿈
\t	수평 탭
\\	역 슬래시

 

let string = "이스케이프 문자를 이용해서
줄 바꿈하고 싶어요";

다음과 같이 문자열을 줄 바꿈해서 출력할 때 위처럼 작성하면 오류가 발생합니다.

let string = "이스케이프 문자를 이용해서 \n줄 바꿈하고 싶어요";

이럴 때, 다음과 같이 이스케이프 문자 중 줄 바꿈을 의미하는 문자를 사용합니다.

 

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

1) enter를 눌렀을 때 줄 바꿈이 적용됩니다.

let string = `문자열은 큰따옴표(")나
작은따옴표(')로 감싸면 됩니다. `;
console.log(string);

 

2) $ {} 문법을 이용해 변수 또는 식을 넣을 수 있습니다.

let dan = 3;
let gugu = 8;
let string `${dan} 곱하기 ${gugu}은 ${dan * gugu} 입니다.`;
console.log(string);

 

자바스크립트는 정수와 실수를 구분하지 않고 전부 하나의 숫자 자료형(숫자형)으로 취급합니다.

예를 들어, 10이나 0.1이나 자바스크립트는 같은 숫자형입니다.

이때, 실수를 사용할 때는 실수를 부동 소수점 방식으로 표현하므로 실수 계산이 정확하지 않다는 것만 알아둡니다.

 

논리형은 참 또는 거짓에 해당하는 논리 값인 true, false를 의미합니다. 오직 2가지 값만 존재합니다.

undefined는 변수나 상수를 선언하고 값을 할당하지 않으면 나타나는 자료형입니다. (not 고의)

null은 변수나 상수를 선언하고 의도적으로 선언한 공간을 비워둘 때 할당하는 자료형입니다.

 

객체 자료형 - 배열, 객체 리터럴, 함수 

배열 : 복수의 데이터를 정의할 수 있는 자료형 / 이때, 배열로 정의한 데이터를 요소라고 합니다. 배열 요소에 접근하려면 인덱스를 사용합니다.

let studentScore = [80, 70, 60, 50]; // 배열의 요소는 4개
console.log(studentScore[1]); // 70 출력

배열은 모든 자료형을 저장할 수 있습니다.
let array = [ 'abc', 10, true, undefined, null, [ ], { } function(){} ];
또한, 아래와 같이 비어 있는 배열을 정의할 수 있습니다.
let array = [ ]; -> 빈배열

 

객체 리터럴 : 객체를 정의할 때 중괄호{}를 사용하며 중괄호 내부에는 키와 값의 한쌍으로 이루어진 속성이 들어갑니다.

{

  (키)key1:value1(값) <- 하나의 속성

  key2:value2

}

let studentScore = {
  koreanScore:80,
  englishScore:70,
  mathScore:90,
  scienceScore:60
};
console.log(studentScore.koreanScore); // 80
console.log(studentScore['englishScore']); // 70

객체 리터럴을 사용하게되면 배열과 같이 굳이 배열의 순서에 할당된 값의 의미를 알지 않고도 명확하게 구분하여 작성 가능합니다.

---

연산자

구분	연산자	예시	설명
이항 산술	+	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에 값을 할당하고 1증가
		++x(전치 연산)	x를 1증가하고 값을 할당
	--	x--(후치 연산)	x에 값을 할당하고 1감소
		--x(전치 연산)	x를 1감소하고 값을 할당
단항 부정	-	-x	x의 부호를 부정 (음수 -> 양수 / 양수 -> 음수)

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

비교 연산자	예시	설명
==	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 반환

논리 연산자	예시	설명
&&	x && y	둘다 참이어야 참 나머지는 거짓
||	x || y	둘 중 하나이상 참이면 참 나머지는 거짓
!	!x	x가 참이면 false, 거짓이면 true 반환

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

 

{형 변환}

암시적 형 변환

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

2개의 자료형이 서로 다르지만 자바스크립트가 알아서 형변환을 하는 것

 

명시적 형 변환

아래 예시처럼 String () 메서드를 사용하여 문자열을 숫자형으로 명시적 형 변환을 할 수 있음

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