본문 바로가기
JavaScript/Vanilla JS

Ch 3. 자바스크립트 기본 문법

baekeyoon 2025. 3. 14. 02:36

3.1 자바스크립트 작성 위치

HTML에서 자바스크립트를 작성할 수 있는 위치는 2가지이다. head 태그와 body 태그이다.

head 태그
title 태그 밑에 <script></script> 태그를 추가하고 script 태그 안에 작성
🔎 head 태그 안에 작성하면 브라우저가 body 태그의 HTML 코드를 실행하기 전에 자바스크립트 코드를 먼저 해석하게 된다.
🔎 head 태그 안에 구현된 자바스크립트 코드가 많다면 브라우저는 자바스크립트 코드를 모두 해석한 이후에 HTML코드를 실행하기 때문에 사용자에게 보이는 웹페이지는 그만큼 느려질 수 있다.
body 태그
body 태그 제일 하단의 <script></script> 태그 안에 작성
🔎 body 태그에 있는 HTML 코드가 모두 실행되어 사용자가 보고 있는 브라우저 화면에 나타난 후 자바스크립트 코드를 실행함으로써 사용자가 느끼는 페이지의 로딩 속도를 높인다.

➕ 이외에 별도로 자바스크립트 파일을 생성해서 사용할 수 있다.

 

스크립트 작성 위치별 실행 결과 예시

 

3.2 HTML 파일 실행

1) HTML 파일 직접 실행

HTML 파일이 위치한 폴더에서 해당 파일을 더블 클릭하면 브라우저에서 실행됨

 

2) Copy Path 이용

 

VS code에서 HTML 파일 선택 후 우클릭하면 나타나는 메뉴에서 Copy Path를 선택하면, 선택된 HTML 파일의 위치가 복사된다.

 

브라우저 URL에 복사된 HTML 파일의 위치를 붙여넣어 실행

 

 

 

 

 

 

3) Live Server 이용

 

VS code 하단에 [Go Live] 버튼 클릭

 

 

 

 

 

 

 

 

 

 

3.3 콘솔(Console)

크롬, 익스플로러 같은 브라우저는 디버깅 분석을 도와주는 개발자 도구를 제공한다. 콘솔을 개발자 도구에서 제공하는 기능 중 하나이다.

9라인에 wirte(오타)로 인한 오류 메시지가 콘솔 창에 출력된다.

 

3.4 주석 처리

코드에 대한 설명
프로그램 실행 막기

1) 일반주석 (//)

문장 한 줄 혹은 코드 블록(문장 여러 줄)에 대한 주석 처리에 모두 사용

📍단축키 : ctrl+/ (윈도우)      cmd+/ (맥)

 

2) 묶음주석 (/* */)

코드 블록(문장 여러 줄)과 함수에 대한 설명을 위해 주로 사용

📍단축키 : shift+alt+a (윈도우)      shift+option+a  (맥)

 

3.5 변수와 상수

데이터/오브젝트/함수 등을 사용하겠다고 선언하는 것이 변수 선언이다. 변수명이 값이 저장되어 있는 메모리 위치를 기억하고 참조 중인 상태가 되는 것이다.

- 변수: 데이터를 담는 그릇   ✏️ var, let

- 상수: 변화하지 않는 값을 가지고 있는 변수    ✏️ const

 

1) 변수 선언 형식

    var        x       =  "Hello World!";
선언자  변수명         할당된 값
변수명 설정 규칙
● 문자(특수문자 제외), 숫자, _(언더스코어), $(달러 기호)를 포함하여 만들 수 있다,
● 숫자로 시작할 수 없다.
● 자바스크립트 예약어는 사용 불가
● 대소문자를 구분

 

2) 네이밍 컨벤션(naming convention)

let userName = "";		// 카멜 표기법 (camelCase)
let user_name = "";		// 스네이크 표기법 (snake_case)
let UserName = "";		// 파스칼 표기법 (PascalCase)
let strUserName = "";		// 헝가리언 표기법 (Hungarian Notation) : 데이터 타입 + 파스칼 표기법

 

  • 카멜 표기법 (camelCase): 변수명이 두 단어 이상이면 두 번째 이후부터는 단어의 첫번째 문자를 대문자로, 나머지는 모두 소문자로 작성하며 모든 단어를 붙여서 사용
  • 스네이크 표기법 (snake_case): 변수명을 모두 소문자로 사용, 단어와 단어 사이에 _를 사용하여 연결
  • 파스칼 표기법 (PascalCase): 카멜 표기법과 유사, 첫 단어의 첫 문자도 대문자 사용
  • 헝가리언 표기법 (Hungarian Notation): 소문자 변수 타입+단어(첫 문자는 대문자) 사용. 첫 번째 단어는 반드시 데이터 타입에 해당하는 약어 사용하여 변수명을 보고 어떤 데이터 타입인지 유추 가능

🔎 ECMAScript에서 변수명과 함수명은 카멜 표기법, 클래스명과 생성자명에는 파스칼 표기법 권장

 

3) var 선언자, let 선언자

데이터 타입에 상관없이 변수를 저장할 때 var 선언자와 let 선언자를 사용한다.

 

var로 변수를 선언하면, 같은 자바스크립트 코드 안에서 동일한 변수명을 사용하는 것이 가능하다.

⚠️ 하지만 동일한 변수명으로 변수가 새로 선언되면, 기존 코드에서 동일한 이름으로 사용되던 변수에 할당된 값이 사라지므로, 해당 변수를 참조하고 있는 프로그램에서 예기치 못한 에러가 발생할 수 있다.

 

let으로 변수를 선언하면 동일한 변수명을 갖는 변수를 재선언해서 사용할 수 없다. var 선언자의 변수명이 동일함으로써 생기는 오류를 방지한다. let 사용을 권장

 

4) const 선언자 (상수)

const는 변화하지 않는 변수를 선언할 때 사용한다. 이렇게 const로 선언한 변수를 상수라고 한다. const 선언자를 사용할 경우 선언 시점에 값을 할당한 후 같은 변수명으로 재선언뿐만 아니라 이미 선언된 변수의 값도 변경할 수 없다. 

선언 시점에 할당한 값을 절대로 변경하지 않는 용도 !

 

3.6 데이터 타입

1) 기본 자료형

  • String (문자열)
  • Number (숫자)    🔎 integer, short, long, decimal 등의 숫자 타입에 대한 구분이 없다
  • Boolean (참/거짓)
  • Undefined : 데이터 타입이자 데이터 값. 변수 선언 시 값을 할당하지 않은 상태
  • Null : 데이터 타입이자 데이터 값. 
  • Symbol
let name1 = "John Doe";
let name2 = 'John Doe';

let x1 = 3.14;	// 숫자는 항상 64비트 부동소수점으로 저장된다.
let x2 = 3;

let car;	// 변수를 선언하고 데이터를 할당하지 않으면, 변수의 값은 undefined

let car = null;	// 메모리의 특정 위치에 대한 참조가 제거된다.
undefined 과 null 의 차이
- undefined는 값이 할당되지 않은 변수에 대해서 개발자가 아닌 브라우저 엔진이 자동으로 할당하고 리턴해주는 값
- null은 개발자가 명시해서 사용. 메모리를 효율적으로 관리하고 싶을 때 적절히 사용 (더 이상 참조가 필요 없는 변수에 대해서 null을 할당하여 메모리 확보)

 

2) 객체 (Objects)

  • Object는 키(key)-값(value) 쌍으로 데이터를 저장한다.
const person = {
	firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue"
};

// 데이터 변경
person["age"] = 51;	// 오브젝트명 + [ + "key" + ]
person.age = 51;	// 오브젝트명 + . + key

console.log(person["firstName"]);
console.log(person.firstName);

 

  • Array(배열)은 하나 이상의 다중 데이터를 저장할 수 있다. 여러 값을 하나의 단일 참조로 저장

🔎 배열에 저장된 데이터는 순서를 갖는다.

const cars = ["Saab", "Volvo", "BMW"];

console.log(cars[0]);	// Saab
console.log(cars[1]);	// Volvo

 

3) typeof

typeof 연산자를 이용하여 현재 변수의 데이터 타입을 알 수 있다.

console.log(typeof "John");	// String
console.log(typeof 3.14);	// number
console.log(typeof true);	// boolean
console.log(typeof {x:1,y:2})	// object
console.log(typeof [1,2,3]);	// object
console.log(typeof undefined);	// undefined
console.log(typeof null);	// object

⚠️ 배열도 자바스크립트에서는 Object이기 때문에 데이터 타입이 Array가 아닌 Object이다.

 

3.7 연산자

1) 할당 연산자

오른쪽 피연산자의 값을 왼쪽 피연산자에 할당하는 것

x = x**y;	// **는 지수를 뜻함 (x^y)
x **= y;	// 복합 할당 연산자로 표현

 

2) 비교 연산자

피연산자들을 비교하고 논리 값을 반환

동등(==), 부등(!=), 비교(>, >=, <, <=)

🔎 데이터 타입까지 비교하려면 일치(===)연산자, 불일치(!==)연산자 사용

let x = 3;	// 숫자형
let y = "3";	// 문자형
x == y;		// 서로 데이터 타입이 달라 문자 3을 숫자로 변환하여 비교하기 때문에 true 반환
x === y;	// 데이터 타입까지 비교하기 때문에 false 반환

 

3) 산술 연산자

표준 산술 연산자(+,-,*,/), 나머지 연산자(%), 증가 연산자(++), 감소 연산자(--), 단항 부정 연산자(-), 숫자화 연산자(+)

+"3" 은 3을 반환
+true 는 1을 반환

 

4) 논리 연산자

Boolean 값에 대한 논리 비교(AND/OR)를 통해 Boolean 을 반환

AND 비교는 &&를, OR 비교는 ||를 사용

논리 NOT 연산자를 이용하여 true는 false로, false는 true로 변경 가능

 

5) 문자열 연산자

문자열 값을 연결 연산자(+)를 이용해 두 문자열을 합친 새로운 문자열 반환

 

6) 조건(삼항) 연산자

조건  ?   값1  :  값2;
조건1  ?   값1  :  조건2  ?  값2  :  값3;
let point = 92;
let grade = (point >= 90) ? "A" : (point >= 80) ? "B" : "C";

 

3.8 조건문

1) if-else

if (조건식) {
   // 조건식이 만족하면 실행할 코드 블록
} else if (조건식) {
   // 조건식이 만족하면 실행할 코드 블록
} else {
   // 앞서 작성된 모든 조건식을 만족하지 않는 경우 무조건 실행되는 코드 블록
}

 

⚠️ 조건식을 거짓으로 취급하는 값 : false, undefined, null, 0, NaN, 비어있는 문자열("")

 

2) switch

switch (상수 값) {
    case 상수 값1 :
      // 실행할 코드
      break;
    case 상수 값2 :
      // 실행할 코드
      break;
    case 상수 값3 :
      // 실행할 코드
      break;
    default :
      // 실행할 코드
      break;
}

 

3.9 반복문

1) for-loop

for ( statement1 ; statement2 ; statement3 ) {
    // 코드 블록
}
- statement1 : 코드 블록이 실행되기 전에 한 번 실행됨
- statement2 : 코드 블록을 실행시킬 조건 정의
- statement3 : 코드 블록을 실행한 후 실행됨

 

2) for-in  ★

배열뿐만 아니라 Object에도 사용할 수 있는 반복문

for (const key in object) {

}

 

3) for-of (향상된 for문)

Array, Map, String 등 iterable(반복 가능한) 객체에서 사용 가능한 반복문

for (const element of iterable) {
    // 코드 블록
}

 

4) while

조건식이 true인 동안 코드 블록 실행

while (condition) {
     // 코드 블록
}

do {
     // 코드 블록을 한 번 실행한 후 조건식 확인
} while (condition)

 

3.10 함수 (Function)

특정 기능을 수행하는 일련의 코드 블록을 하나의 실행 단위로 만든 것

1) 함수 정의 및 사용

● 함수 선언식

함수 키워드    함수명    파라미터 (입력값)
       function     sum      (p1, p2) {
            let sum = p1 + p2;
            return sum;      // 반환값
       }

🔎 함수가 정의되었다고 자동으로 실행되는 것이 아니라 함수명을 사용하여 호출했을 때 실행된다.

// 함수 호출
let sum1 = sum(12,34);

 

➕ 함수에 대한 주석 처리

작성된 함수 바로 윗줄에서 /** 라고 입력하면 /** */ 코드 가이드가 나오며, 엔터 키를 입력하면 함수의 파라미터 개수와 return 포함 여부에 따라 자동 완성 된다.

 

● 함수 표현식

       변수        함수 할당
let   sum   =   function (p1,p2) {
     return p1 + p2;
}

이렇게 함수를 선언하면 함수를 호출할 때 변수명을 사용한다.

// 함수 호출
let sum2 = sum(3,14);

 

⚠️ 일반적인 함수 선언 방식의 경우 함수 호출 코드가 먼저 나오고 함수 선언이 나중에 되더라도 함수가 정상적으로 실행된다. 하지만, 변수에 함수를 할당하는 방식은 작성된 코드 순서대로 실행된다. 함수 호출 코드가 더 위에 있을 경우 에러가 발생한다.

 

● Function 생성자 함수

let sumFunc = new Function("p1","p2","return p1+p2");
let sum2 = sumFunc(1,3); // 함수 호출

 

 

참고문헌 : 고승원(2021), 바닐라 자바스크립트, 비제이퍼블릭

'JavaScript > Vanilla JS' 카테고리의 다른 글

Ch 1. 자바스크립트, Ch 2. 개발 환경 구성  (1) 2025.03.11

'JavaScript/Vanilla JS' Related Articles

티스토리툴바