[JavaScript] 문법 기초 1

출처: Freepik_(작가/vectorjuice)

 

1. 기초 문법 part. 1

 (1) 세미콜론 ;

 JavaScript는 세미콜론을 문장의 끝에 넣지 않아도 에러가 발생하지 않는다.

다만 다른 언어에서는 에러를 띄우는 경우도 있고 붙이는 것이 보편적이고 암묵적인 규칙이다.

 

 (2) 변수와 상수

 1) let

 해당 키워드를 사용하고, 그 뒤에 사용할 변수 이름을 작성한다.

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

 

 2) const

 선언할 때 저장한 값을 바꿀 수 없다.(상수처럼 쓰이는 변수)

const name = "John";
console.log(name); //John이라 표시된다.

name = 'Bob' //TypeError: Assignment to constant cariable. 에러발생

 

변수 및 상수 명명 규칙

• 첫 글자는 영문자, $, _만 사용할 수 있다.
• 첫 글자 이외에는 영문자, $, _, 숫자만 사용할 수 있다.
• 영문자의 대, 소문자를 구분한다.
• JavaScript의 예약어는 사용할 수 없다. (예: const, let 등)
• 공백 문자를 포함할 수 없다.

 

2. 원시 데이터 타입

 Primitive Types(원시형, 원시 자료형)이란, 객체가 아니면서 메소드도 가지지 않는 어떠한 값(Data)을 의미한다.

 

 (1) Number

 정수 및 부동 소수점 숫자(Floating Point Number)를 나타낸다.

const number = 20;
console.log(typeof number); //Number 출력

 

 (2) BigInt

 숫자 데이터 타입으로 표현할 수 있는 범위를 넘어선(2^53-1 보다 크거나 -(2^53-1)보다 작은) 숫자를 표현할 때 사용되는 데이터 타입. 길이에 상관없이 정수를 나타낼 수 있으며, 정수 리터럴(Literal) 끝에 n을 붙여 표현할 수 있다.

const bigNumber = 123123123123123123123123n;
console.log(typeof bigNumber);

 

 (3) String

 문자열(string)은 따옴표로 감싼 문자 또는 문자열을 나타낸다.

• 작은따옴표 'string'
• 큰따옴표 "string"
• 백틱(backtick) `string`

 작은따옴표, 큰따옴표는 문자열만 감싸고 문자열 및 함수를 연결하려면 연결부위에 +를 붙여야된다.

백틱은 하나의 백틱 안에 텍스트를 모두 써넣고 함수 및 변수는 ${}기호 안에 작성할 수 있다.

const age = 20;
const name = 'John';
const message = 'My name is ' + name + ' and I\'m ' + age + ' years old.';
const messageBackTick = `My name is ${name} and I'm ${age} years old.`;

console.log(message);
console.log(messageBackTick);

//두 개 결과 값은 같음.

 

 (4) Boolean

 불린 데이터 타입은 true, false를 값으로 가지는 논리 타입.

const isTrue = false;
const result = 10 < 20;

console.log(typeof isTrue);
console.log(result);

 (5) null

 값이 없음(존재하지 않음)을 나타낸다.

 

 (6) undefined

 값이 아직 지정되지 않았음을 나타낸다.

 

 (7) Symbol

 객체의 고유한 식별자(Unique Identifier)를 만들기 위해 사용된다.

const id = Symbol();
console.log(typeof id);

 위 코드 예제와 같이 symbol()을 사용해 생성할 수 있으며, 다음과 같이 Symbol()에 인자로 이름을 지정할 수도 있다.

const id = Symbol('id');
console.log(id);

---

2. 기초 문법 part. 2

 (1) 조건문

 1) if

 if문은 가장 대표적인 조건문.

if 뒤에 오는 ( )괄호 안에 조건.

해당 조건이 참이라면 이어지는 { }블록 내부의 코드 실행.

const a = 10;
const b = 20;

if (a < b) {
	console.log('b가 더 크다.');
}

 

1-2) else

if 문의 조건이 거짓일 때의 동작을 지정한다.

const a = 20;
const b = 10;

if (a < b) {
	console.log('b가 더 크다.');
} else {
	console.log('a가 더 크다.'); //해당 코드 실행
}

 

1-3) else if

 if 문은 if 문 내에서 중복 사용할 수 있으나 그렇게 쓰면 어지러움.

const a = 10;
const b = 20;
const c = 20;

if (a > b) {
	console.log('a는 b보다 더 크다.');
} else if (b === c) {
	console.log('b는 c와 같다.');
} else {
	console.log('이건 언제 출력됨?');
}

 else if를 사용할 때는, if와 else는 한 번만 사용. 그 사이에 else if가 위치해야됨.

'이건 언제 출력됨?' 이건 b가 a보다 크지만 c와 같지 않을 때 출력.

 아래는 if와 else 만으로 작성한 코드.( 작동은 똑같이 되나 시인성이 떨어짐)

const a = 10;
const b = 20;
const c = 20;

if (a > b) {
  console.log("a가 b보다 더 크다.");
} else {
  if (b === c) {
    console.log("b랑 c가 같다.");
  } else {
    console.log("여기는 언제 출력됨?");
  }
}

 

2) switch

동일한 조건 값에 따라 다른 명령을 실행할 수 있게끔 분기한다.

- 무언가 하나의 값을 기준으로 여러 가지 경우를 나눌 때 사용.

 

switch (값) {
	case 경우1: //경우1일 때 실행
	 break;
	case 경우2: //경우2일 때 실행
	 break;
	default; //어떤 case와도 맞지 않을 때 실행
}

const day = '월요일';

switch (day) {
	case '월요일':
	  console.log('한 주의 시작입니다.');
	  break;
	case '금요일':
	  console.log('불금입니다.');
	  break;
	default:
	  console.log('평범한 날입니다.);
}

 조건에 따라 분기한다는 점에서는 if 문과 동일하지만, if 문과 달리 모든 조건을 확인하지 않고, 맞는 구문을 만나면 break를 통해 즉시 루프를 벗어난다.

 조건이 일치하는 케이스를 확인 -> 이후 만나는 break까지의 명령만 실행 후 조건문을 빠져나옴.

 

 

(2) 반복문

 반복문(Iteration Statements)이란 반복적으로 수행해야 하는 동작을 처리하기 위해 사용되는 제어문을 의미한다.

 

 1) for

 for 뒤에 오는 ( ) 괄호 안에 시작 값, 조건식, 증감 값을 작성하고, 조건이 참인 동안 시작 값부터 증가 또는 감소하며 반복한다.

for (초기값; 조건; 증감) {
	//반복할 코드
}

• 초기값 : 반복을 시작할 때 변수 설정  ( let i = o)
• 조건 : 반복을 계속할 조건 ( i < 5 )
• 증감 : 매 반복마다 변수 변화 ( i++ )

초기값은 반복문에 진입할 때 최초로 한 번만 실행된다.

조건식은 코드를 반복할 때마다 확인, 값이 거짓이라면 반복문을 빠져나온다.

증감값은 매 회 반복을 마친 뒤 실행된다.

초기값 > 조건 체크 > 코드 실행 > 증감

 

초기 값 생략

let i = 0;

for (; i < 5; i++) {
	console.log(i);
}

 시작할 때 따로 값을 설정하는 것이 아닌 경우 위와 같이 초기값 생략 가능.

 

증감 값 생략

let i = 0;

for (; i < 5;) {
	console.log(i++);
}

 증감 값 역시 별도로 지정할 필요가 없는 경우, 생략 가능.

 

break

for (let i = 0; i < 10; i++) {
	if (i === 5) {
	  break;
	}
	console.log(i); //0, 1, 2, 3, 4 출력 후 종료
}

 사용자가 원하는 지점에서 반복문을 빠져나올 수 있음.(위의 경우 i 값이 5일 경우 출력되지 않고 반목문 종료)

 

coutinue

for (let i = 1; i <= 5; i++) {
	if (i === 3) {
	  continue;
	}

	console.log(i); //1, 2, 4, 5 출력
}

 전체 반복문을 종료하는 것이 아닌, 현재 반복을 종료하고 다음 반복으로 넘긴다.(위 코드에선 3만 출력하지 않고 반복지속)

 

 2) for of

반복 가능한 객체 (배열, 문자열 등)에 사용할 수 있는 반복문으로 중진 객체를 차례대로 순회한다.

const arr = [1, 2, 3, 4, 5];

for (const i of arr) {
	console.log(i);
}

 for 문과 비슷하게 생겼지만 ( ) 괄호 안에 시작 값, 조건식, 증감 값을 작성하는 것이 아님.

사용할 변수명, of 그리고 반복이 가능한 객체를 순서대로 작성.

 

 3) while

let i = 0;

while (i < 10) {
	console.log(i); // 0~9 출력
	i++;
}

 ( )괄호 안의 조건이 만족할 동안 내부 코드를 반복한다.

 

 4) do while

let i = 0;

do {
console.log(i);
i++;
} while (i < 10);

 while문과 비슷하지만, 조건을 반복문의 끝에 작성.

조건의 참 또는 거짓 여부와 상관없이 최소한 한 번은 실행된다는 특징이 있다.

0이 출력되고 > i 값이 1증가. 이후 조건 비교 후 참인 경우 반복.