[JavaScript] 기본 문법 정리

jungmin Lee·2023년 6월 12일

자바스크립트 엔진이 코드를 어떻게 읽는지 알아보자!

JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다
JavaScript 엔진은 위에서부터 아래로 코드를 읽고, 해석하며, 평가하다가 문제가 있으면 에러를 발생시킨다. 문제가 있는 지점에서 코드 실행을 바로 중단하게 된다.
보통 외부 스크립트 파일로 연결해서 사용하며 </body> 태그 위에 삽입한다.

<script src = "외부 스크립트 파일 경로"></script>

자바스크립트소스를 작성할 때 규칙

코드를 가독성 있게 들여쓰기를 한다.

세미콜론으로 문장을 구분하며 공백을 넣어 읽기 쉽게 작성한다.

주석이 필요한 곳에 주석을 넣어 소스 코드를 설명한다.( //, /* */ )
불필요한 주석은 코드 중복이라고 할 수 있으므로 필요한 곳에만 작성하도록 한다.

식별자는 정해진 규칙을 지켜 작성하며 예약어는 식별자로 사용할 수 없다.

변수 이름은 영어 문자, 언더스코어(_), 숫자를 사용하며 첫 글자에는 숫자를 넣을 수 없다.

변수 이름은 의미있게 작성하여 가독성을 높인다.

변수의 선언과 할당

변수란 특정 데이터에 이름을 붙이는 것을 말하며 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것을 변수 선언을 한다고 말한다.
변수 선언 키워드에는 let과 const가 있으며 변수 선언 키워드로 let num 이라고 선언하면 컴퓨터는 값을 저장하기 위한 메모리 공간을 확보하고 그 공간의 이름을 num으로 기억한다. 그리고 할당연산자(=)를 사용하여 특정 메모리 공간에 값을 넣는 것을 값 할당이라고 한다.
아무것도 할당되지 않은 변수는 undefined가 자동으로 할당된다.
let키워드로 선언한 변수에 새로운 값을 할당할 수 있으며 재할당이라고 하며 const키워드로 선언한 변수에는 재할당이 금지된다.

let num = 7; // 변수 선언과 값 할당

타입이란?

Number 타입

숫자를 자바스크립트에서 표현하기 위한 데이터 타입으로 정수와 실수를 표현할 수 있다.
typeof연산자로 해당 값이 숫자 타입인지 확인할 수 있다
산술 연산자(arithmetic operator) - 수학 기호 (+, -, *, /, %)를 이용하여 간단한 사칙연산을 할 수 있습니다.

console.log(2 + 3); // 5 

console.log(3 * 4); // 12

console.log(8 % 3); // 2

Math 내장 객체

Math.floor(): 괄호 안의 숫자를 내림하여 반환

Math.ceil(): 괄호 안의 숫자를 올림하여 반환

Math.round(): 괄호 안의 숫자를 반올림하여 반환

Math.abs(): 괄호 안의 숫자의 절대값을 반환

Math.sqrt(): 괄호 안의 숫자의 루트값을 반환

Math.pow() : 괄호 안의 첫 번째 숫자를 밑, 두 번째 숫자를 지수인 숫자를 반환

++(피연산자를 1 증가), --(피연산자를 1 감소)
변수 뒤에 증가 연산자와 변수 앞에 증가 연산자는 차이점이 있다.

✨ a++, ++b의 차이점


let a = 2  // a는 2입니다

let c = a++ + 3 // c는 5, a는 3입니다

let b = 2 // b는 2입니다

let c = ++b +3 // c는 6, b는 3입니다

String 타입

인간의 언어, 자연어를 표현하기 위한 데이터 타입이다.
작은따옴표(''), 큰따옴표(""), 백틱(``)으로 묶어서 나타내며 숫자를 따옴표로 묶으면 문자로 인식한다. 한자, 이모지, 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있다. 백틱으로 만든 문자열은 줄바꿈도 가능하다.
✨ length 속성 - 문자열의 길이를 확인할 수 있다
✨ Index 인덱스 - 문자열의 각 문자는 순서를 가지고 있으며 각 문자가 몇 번째에 위치하는지 확인할 수 있으며 첫 번째 문자의 인덱스는 0부터 시작한다.

console.log('안녕하세요'.length) //5

let str = 'jungmin';
console.log(str[1]); // 'u'

문자열의 주요 메서드

toLowerCase() : 문자열을 소문자로 변경

toUpperCase() : 문자열을 대문자로 변경

concat() : 문자열 연결 연산자 + 처럼 문자열을 이어붙일 수 있음

slice() : 문자열의 일부를 자를 수 있음

indexOf() : 문자열 내에 특정 문자나 문자가 몇 번째 위치하는지 확인

✨ 만약 찾는 문자가 2개 이상일 경우, 가장 앞에 있는 문자의 인덱스를 조회하고 포함되어 있지 않으면 -1 을 반환한다

includes() : 문자열 내에 특정 문자나 문자가 포함되어 있는지 확인하며 true, false를 반환

'HELLO WORLD'.toLowerCase(); // 'hello world'

'hello world'.toUpperCase(); // 'HELLO WORLD'

'hello '.concat('world'); // 'hello world'

'hello world'.slice(0, 5); // 'hello'

'hello world'.slice(0, 3); // 'hel'

이스케이프 표현

\n : 줄바꿈, 개행

\t : 탭

\ : 역슬래쉬

\uXXXX : 유니코드 코드포인트

템플릿 리터럴(template literal)
백틱을 사용하는 방법으로 템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입한다.

let hour = '3';

let minute = '30';

let second = '33';

console.log(`${hour}시 ${minute}분 ${second}초 입니다.`);  // 3시 30분 33초 입니다.

Boolean 타입

사실 관계를 구분하기 위한 타입이며 true, false 값만 있는 유형이다
✨ 대표적인 falsy 값 - false, 0, -0, 0n, "", '', ``, nu11, undefined, NaN

비교연산자(comparison operator)
2개의 값을 비교해서 true, false를 반환하며 주로 어떠한 조건을 체크할 때 사용한다.

엄격한 동치 연산자 ( === , !== )
두 피연산자의 값과 타입이 같으면 true, 다르면 false 를 반환한다.

느슨한 동치 연산자 ( ==, != )
타입이 달라도 값이 같으면 true, 다르면 false를 반환하며 예외가 많아 사용을 권장하지 않는다.

대소 관계 비교 연산자 ( > , < , >= , <= )
두 피연산자의 값의 크기를 비교하며 수학에서의 부등호 기호의 사용법과 유사하다

12 === (10+2);  //true

12 === '12';  //false

12 !== (10+2);  // false

12 !== '12';  //true

100 > 200;  //false

200 <= 300;  // true

논리연산자(logical operator)
두 값 간의 논리 관계를 확인할 수 있으며 주로 어떠한 조건을 체크할 때 사용한다.

|| : 논리합(OR)
두 값 중 하나만 true 여도 true 로 판단하며, 두 값이 모두 false 면 false 로 판단한다.

&& : 논리곱(AND)
두 값이 모두 true 면 true 로 판단하며, 두 값 중 하나만 false 여도 false 로 판단한다.

! 논리 부정 연산자(!)
사실 관계를 반대로 표현한다.

true || false;  // true

false || false;  //false

true && true; // true

true && false;  //false

!true  // false

null, undefiend

null은 변수를 선언하고 빈 값을 할당한 상태로 타입은 object이다.
undefiend는 변수를 선언하고 값을 할당하지 않은 상태로 타입은 undefiend가 출력된다.
활성화된 아이템이 있는지 없는지 모르는 상태로 아무것도 할당되지 않은 변수는 undefiend가 자동으로 할당되며 초기화라는 자바스크립의 독특한 특징이다.

let animal  // undefiend 

활성화된 아이템이 있는지 없는지 모르는 상태

let animal = null  // null

활성화된 아이템이 없는 상태

typeof
데이터의 타입을 확인하고 싶을때 typeof 연산자를 사용한다.

typeof 123 // "number"

typeof "Hello" // "string"

typeof true // "boolean"

typeof { }  // "object"

typeof undefined // "undefined"

조건문

특정한 조건에 따라 코드가 실행되도록 하는 방법이며 if문과 if~else문이 있으며 스크립트 안에서 조건을 체크할 수 있다.

if 문
주어진 조건식의 true, false 여부에 따라 실행이 결정되며 단독으로 사용가능하다.
동치연산자( ===, !== ), 비교연산자( >, <, >=, <= ), 논리연산자( ||, && ), 부정연산자(!)를 사용하여 조건이 true인지, false인지 체크할 수 있다.

if (true) {
    console.log('Happy New Year');
}

// 조건이 true이므로 'Happy New Year'이 출력


let job = 'student'

if(job === 'student') {
          console.log('학생입니다.');
}  

// '학생입니다.'

if~else 문
조건이 true일 때, 그리고 false일 때 각각 다른 코드를 실행할 수 있으며 else문은 독립적으로 사용할 수 없고 if문 바로 뒤에 작성해야 한다. 조건을 추가하고 싶을 경우에는 else if문을 사용하며 else if문은 여러번 사용할 수 있다

let num = 2;

if(num % 2 === 0) {
    console.log('짝수입니다');
}else {
    console.log('홀수입니다');
}

//'짝수입니다'

삼항 조건 연산자
if문과 else문을 삼항 조건 연산자로 바꿔 쓸 수 있다.
조건식을 먼저 작성한 후 ?를 입력하고 ?뒤로 참/거짓일 때 실행할 코드를 각각 입력한다.
참/거짓일 때 실행할 코드는 :로 구분한다.

let num = 2;

num % 2 === 0 ? console.log('짝수입니다') : console.log('홀수입니다');

// '짝수입니다'

반복문

코드를 불필요하게 중복해서 작성하지 않아도 컴퓨터가 반복적으로 동작을 수행하도록 하는 방법으로 간결하게 코드를 작성할 수 있다.
// 반복문 제어: continue, break;
for 문 - for ( 초깃값; 조건식; 증가식) {
                           실행할 명령
              } 
초기값: 증감식 반복횟수를 카운트하는 역할을 하는 변수이다.
조건식: 코드블록 내부의 코드 실행 여부를 결정한다. true일 경우에는 코드를 실행하며, false일 경우 반복문이 종료된다.
증감식: 코드블록 내부의 코드를 실행한 후 초기값으로 선언된 변수를 증가 또는 감소시키기 위한 표현식이다.

let result = 0;

for(let i = 0; i <= 3; i++) {
      result = result + i
}

console.log(result); // 6

for문 내부에 num이라는 변수를 선언하고 0이라는 초기값을 할당한다.
변수 num이 3보다 작거나 같은지 확인하고 2의 결과가 true면, 코드블록 내부의 코드를 실행한다.
변수 num을 1증가 시키며 1부터 3까지 반복한다. 2의 결과가 false면, 반복문이 종료된다.

문자열을 순회하는 반복문
문자열의 마지막 문자의 인덱스는 문자열의 길이보다 1만큼 작다.
i <= str.length - 1 (또는 i < str.length)로 조건식을 작성한다.

let str = 'Happy day';

for(let i = 0; i < str.length ; i++) {
      console.log(str[i]);
}

반복문의 중첩
반복문 내부에 또 다른 반복문을 사용할 수 있으며 반복문은 두 개 이상 중첩 가능하다.

for(let i = 1; i <= 6; i++) {
 for(let j = 1; j <=6; j++){
    console.log(`첫번째 숫자는 ${i}, 두번째 숫자는 ${j}입니다.'); 
 } 
}

첫번째 숫자는 1, 두번째 숫자는 1입니다.
첫번째 숫자는 1, 두번째 숫자는 2입니다.
첫번째 숫자는 1, 두번째 숫자는 3입니다.
첫번째 숫자는 1, 두번째 숫자는 4입니다.
첫번째 숫자는 1, 두번째 숫자는 5입니다.
첫번째 숫자는 1, 두번째 숫자는 6입니다.
첫번째 숫자는 2, 두번째 숫자는 1입니다.
첫번째 숫자는 2, 두번째 숫자는 2입니다.
첫번째 숫자는 2, 두번째 숫자는 3입니다.
첫번째 숫자는 2, 두번째 숫자는 4입니다.
첫번째 숫자는 2, 두번째 숫자는 5입니다.
첫번째 숫자는 2, 두번째 숫자는 6입니다.
첫번째 숫자는 3, 두번째 숫자는 1입니다.
첫번째 숫자는 3, 두번째 숫자는 2입니다.
첫번째 숫자는 3, 두번째 숫자는 3입니다.
첫번째 숫자는 3, 두번째 숫자는 4입니다.
첫번째 숫자는 3, 두번째 숫자는 5입니다.
첫번째 숫자는 3, 두번째 숫자는 6입니다.
첫번째 숫자는 4, 두번째 숫자는 1입니다.
첫번째 숫자는 4, 두번째 숫자는 2입니다.
첫번째 숫자는 4, 두번째 숫자는 3입니다.
첫번째 숫자는 4, 두번째 숫자는 4입니다.
첫번째 숫자는 4, 두번째 숫자는 5입니다.
첫번째 숫자는 4, 두번째 숫자는 6입니다.

while 문

while문은 조건식만 입력한 후 조건식의 평가결과가 true인 경우 코드블록 내부의 코드를 반복하여 실행하며 조건이 false가 될때까지 {} 코드를 반복 실행한다. while문을 사용할 때는 반복문이 종료되는 조건식이 항상 참으로 평가되어 무한히 반복되는 현상인 무한루프를 주의해야 한다.

let num = 0;

while (num < 3) {

console.log(num); // 0 1 2

num++

}

do ... while 문

do…while문은 while 뒤에 오는 조건식이 true로 평가되는 동안 do 뒤에 오는 코드블록 내부의 코드를 반복하여 실행하며 do의 코드블록 내부의 코드가 최소 한 번은 실행된다.

do {
 console.log('실행')

//'코드블록 내부의 코드는 최소 한 번은 실행됩니다.'

} while (false)

=> for문과 while문의 용도는 명확하게 구분되지 않는다.

✨for문을 사용하는 경우
반복 횟수가 비교적 명확할 때
배열과 문자열 내부를 순회할 때
반복문의 중첩이 필요할 때

✨while문을 사용하는 경우
반복 횟수가 명확하지 않을 때

✨switch 문
정해진 범위안의 값에 대해 특정한 일을 해야 하는 경우에 사용

switch (day) {

 case 0:
   dayName = '월요일입니다';
   break;

case 1:
   dayName = '화요일입니다';
   break;

case 2:
   dayName = '수요일입니다';
   break;

case 3:
   dayName = '목요일입니다';
   break;

case 4:
   dayName = '금요일입니다';
   break;

case 5:
   dayName = '토요일입니다';
   break;

case 6:
   dayName = '일요일입니다';
   break;

default:
   console.log('해당하는 요일이 없음!');
}
 console.log(dayName);