자바스크립트는 자바스크립트 엔진이 있는 모든 곳에서 동작한다. 자바스크립트 엔진은, 쉽게 말해 자바스크립트 코드를 실행하는 프로그램으로, 우리가 일반적으로 사용하는 웹 브라우저인 사파리, 파이어폭스, 크롬, 엣지, 오페라 등에 포함되어 있다. 이러한 자바스크립트 엔진은 웹 브라우저에 포함되어 있으며, 이런 웹 브라우저를 자바스크립트의 실행 환경 혹은 런타임이라고 부른다.
index.html 파일은 브라우저가 웹이나 애플리케이션을 로드할 때 가장 먼저 찾는 파일이기 때문에, src 폴더보다는 보통 프로젝트의 루트 디렉터리(최상위 폴더)에 생성한다.
다음과 같이 폴더 구조를 만든다.
<!DOCTYPE html>
<html>
<head>
<title>VSCODE TEST</title>
<meta charset="UTF-8" />
</head>
<body>
<div>hello world!</div>
<script src="./src/index.js"></script>
</body>
</html>→ index.html
console.log("start VSCode");
let name = "혜원";
console.log(name);→ index.js
위와 같이 작성한 후에 index.html을 열어 페이지를 확인한다. 그리고 창에서 F12를 눌러 개발자 모드를 키면 콘솔 창에 밑의 사진과 같이 뜨는 것을 알 수 있다.
1. 변수와 상수
변수는 프로그램이 실행되는 도중에 변경되는 값을 저장하기 위한 ‘이름을 가진 저장소’이다. 다음은 변수를 저장할 때의 규칙이다.
- 변수명에는 $ 기호와 _기호를 제외한 다른 기호는 사용할 수 없다.
- 변수명의 맨 앞에는 숫자를 사용할 수 없다.
- 변수명에는 예약어를 사용할 수 없다.
위 코드에서 미리 봤듯이 변수에 이름을 지정할 때는 let이라는 키워드를 사용한다. 추가적으로 console.log()는 괄호 안에 작성된 값을 출력하는 코드이다.
상수는 변하지 않는 값을 저장하는 저장소이다. 변수는 값을 변경할 수 있지만 상수는 그렇지 않다. 상수를 선언할 때에는 let이 아닌 const 키워드를 사용한다.
2. 자료형과 형 변환
자료형이란 변수에 할당되는 데이터의 종류를 말한다. 또한 자료형은 크게 원시 타입과 비원시 타입으로 나눠진다. 쉽게 설명하자면 원시 타입은 프로그램이 실행되는 도중에 하나의 값만을 가지는 타입이고 비원시 타입은 한번에 여러개의 값을 갖는 타입을 말한다.
자바스크립트의 여러 가지 원시 타입 자료형에 대해 자세하게 살펴보기 전에, typeof 연산자에 대해 먼저 알아보겠다. typeof 연산자는 자바스크립트에서 기본으로 제공하는 연산자로, 특정 변수의 자료형을 결괏값으로 반환하는 연산자이다.
let num = 10;
console.log(typeof num);
다음과 같이 코드를 입력하면
2.1 숫자형
위에서 본 number는 기본적인 정수와 소수뿐만 아니라 Infinity와 NaN과 같은 특수한 값도 포함되어 있다.
let num = 10 / 0;
console.log(num); // Infinity 출력
let number = "자바스크립트" / 10;
console.log(number); // NAN 출력
이렇게 자바스크립트는 다른 언어와 다르게 부정확한 연산을 하거나, 0으로 나누는 연산을 하더라도 에러가 발생하지 않고 Infinity와 NaN이라는 값을 변환하기 때문에 자바스크립트의 숫자 연산은 안전하다고 표현한다.
2.2 BigInt
숫자형으로는 표현하지 못하는 범위인 2^53-1 보다 크거나, –(2^53-1)보다 작은 정수를 나타내야 할 때 사용하는 자료형이다.
숫자 끝에 n을 붙이거나 자바스크립트가 제공하는 BigInt()라는 함수를 사용해 나타낼 수 있다.
let bigNum1 = 9007199254740991n;
let bigNum2 = BigInt("9007199254740991");
console.log(typeof bigNum1); // bigint
console.log(typeof bigNum2); // bigint
2.3 문자형
let name = "hyobin";
console.log(typeof name);
자바 스크립트는 이렇게 문자를 작성할때 따옴표로 문자를 감싸 사용한다. 작은 따옴표와 큰 따옴표는 별 구별 없이 사용해도 된다. 하지만 백틱(`)을 사용하는 경우는 조금 다르다.
let name = "hyobin";
let intro = `제 이름은 ${name}입니다.`;
console.log(intro); // 제 이름은 hyobin 입니다.다음과 같이 $표시와 함께 문장에 변수를 넣고 싶을 때는 백틱을 사용한다. 이러한 방식을 탬플릿 리터럴이라고 부른다.
2.4 Boolean 형
참이나 거짓을 표현하기 위한 자료형이다.
let isClicked = false;
2.5 Null과 Undefined
null을 하나의 값으로만 활용하는 다른 언어와는 달리, 자바스크립트에서 null은 오직 null 값만 포함하는 자료형으로 사용된다. null 값은 존재하지 않거나 알 수 없는 값을 나타낼 때 사용된다.
typeof 연산자를 사용해 자료형을 출력하면 Null이라는 값이 출력돼야 하지만, 출력 결과를 보면 object라는 값이 출력된다. 이는 자바스크립트의 오래된 오류로, 변수가 null 형임을 확인하기 위해서는 typeof 연산자를 사용하는 대신, 다음과 같이 작성해야 한다.
let name = null;
console.log(name === null); // true→ === 연산자는 연산자를 기준으로 왼쪽에 작성한 값과 오른쪽에 작성한 값이 동일한지를 비교하는 연산자로 후에 자세하게 다룰 예정이다.
Undefined는 변수에 값이 할당되지 않은 상태일때 자동으로 할당된다.
2.7 형 변환
자바스크립트에 대해 여기까지 살펴보면서 기존에 다른 프로그래밍 언어를 학습했던 분들은 의문이 들 수 있다. C 언어 혹은 Java에서는 변수를 선언할 때 변수 앞에 변수의 자료형을 미리 작성해야 하지만, 자바스크립트는 다른 언어와 달리, 변수 선언 시 변수의 자료형을 작성하지 않기 때문이다. 그 이유는 자바스크립트는 프로그램 실행 중에 자료형이 변환되는 언어이기 때문이다.
하나의 변수에 다른 타입의 값을 저장해도 아무런 에러 없이 유연하게 값과 함께 타입이 변경되는 언어를 동적 타입 언어라고하는데 자바스크립트가 바로 동적 타입 언어이다. 형 변환에는 묵시적 형 변환과 명시적 형 변환이 있습니다.
2.7.1 묵시적 형 변환
let num1 = "15";
let num2 = 5;
console.log(num1 / num2); // 3
num1 변수에는 숫자 15가 아닌 문자열 15가 할당되었지만, num1 변수를 num2 변수로 나눈 결과, 숫자 15 나누기 5의 결과인 3이 출력되었다. 출력 값이 3이 나온 이유는 자바스크립트 엔진이 나누기 연산을 실행하기 위해 문자열 15를 숫자 15로 적절하게 자동 변환해 주었기 때문이다. 자바스크립트에서는 이렇게 문자열을 더하기를 제외한 사칙연산에 사용할 때 문자열이 자동으로 숫자형으로 변환되는데, 이를 묵시적 형 변환이라고 부른다.
2.7.2 명시적 형 변환
let num1 = "15";
let num2 = 5;
console.log(num1 + num2); //155
위 코드를 실행해 보면 이번에는 숫자 15에 5를 더한 20이 아닌 155라는 값이 출력되는 것을 볼 수 있다. 자바스크립트는 사칙연산 중 곱하기와 나누기, 빼기 연산을 수행할 때는 문자형을 숫자형으로 변환하지만, 더하기 연산을 할 경우에는 숫자를 문자열로 변환한다.
출력이 20으로 나오게 하고 싶을 경우에는 parseInt라는 함수를 사용하면 된다. parseInt는 괄호 안에 있는 문자열을 숫자로 변환해주는 역할을 하는 함수로, 위의 코드에서는 문자열 15가 저장되어 있는 num1 변수의 값을 숫자형 15로 변환한다.
let num1 = "15";
let num2 = 5;
console.log(parseInt(num1) + num2); //20
이렇게 parseInt와 같이 기본적으로 자바스크립트가 가지고 있는 내장 함수를 사용해서 자료형을 의도적으로 변환시키는 것을 명시적 형 변환이라고 부른다.
3. 연산자
3.1 산술 연산자
산술 연산자는 우리가 기본적으로 알고 있는 수학적인 계산을 하는 연산자이다. 다른 프로그래밍 언어를 공부해본 사람이라면 이 파트는 쉽게 느껴질 것이다.
let num1 = 10;
let num2 = 5;
console.log(num1 + num2); // 15
console.log(num1 - num2); // 5
console.log(num1 * num2); // 50
console.log(num1 / num2); // 2
console.log(num1 % 2); // 0
console.log(num2 % 2); // 1이렇게 더하기 빼기 곱하기 나누기를 하는 것이 산술 연산이다.
나머지 연산자은 나머지 연산을 수행하는 연산자의 기호는 %이며, 나머지 연산은 기호를 기준으로 왼쪽 값을 오른쪽 값으로 나눈 나머지를 반환하는 연산이다.
이제 후위 연산과 전위 연산에 대해 살펴보겠다.
let num = 10;
console.log(num++); // 10
console.log(num); // 11
console.log(++num); // 12
어떠한 변수 뒤에 연산자가 붙는 것(num++)이 후위 연산이고 그 반대(++num)이 전위 연산이다. 후위 연산은 특정 변수의 값에 1을 더하거나 빼기 바로 직전의 값을 출력하고, 전위 연산은 특정 변수의 값에 1을 더하거나 뺀 결괏값을 출력하는 연산이다. 이 둘을 우리는 증감 연산자라고 한다.
3.2 대입 연산자
대입 연산자는 말 그대로 변수에 특정 값을 대입하는 역할을 하는 연산자이다.
let num = 10;
num = num + 5;하지만 "num = num + 5;"는 복합 대입 연산자를 통해 더욱 간단하게 나타낼 수 있다.
|
연산자
|
기능
|
사용 방법
|
|
+=
|
num = num + 5
|
num += 5
|
|
-=
|
num = num - 5
|
num -= 5
|
|
*=
|
num = num * 5
|
num *= 5
|
|
/=
|
num = num / 5
|
num /= 5
|
|
%=
|
num = num % 5
|
num %= 5
|
3.3 비교 연산자
let num1 = 10;
let num2 = "10";
console.log(num1 !== num2);
console.log(num1 != num2);
마지막으로 살펴볼 비교 연산자는 대소 비교 연산자이다. 대소 비교 연산자는 두 개의 값 중에서 어떤 값이 더 크고 작은지를 비교하는 연산자로, 다음과 같은 연산자가 있다.
|
연산자
|
기능
|
사용 방법
|
|
<
|
왼쪽 값이 오른쪽 값보다 작다
|
a < b
|
|
>
|
왼쪽 값이 오른쪽 값보다 크다
|
a > b
|
|
<=
|
왼쪽 값이 오른쪽 값보다 작거나 같다
|
a <= b
|
|
>=
|
왼쪽 값이 오른쪽 값보다 크거나 작다
|
a >= b
|
3.4 연결 연산자
문자열과 문자열 혹은 다른 자료형을 합쳐서 하나의 문자열로 만드는 연산자이다. 연결 연산자는 산술 연산자 중 하나인 + 기호를 사용한다. + 기호 옆에 문자열이 하나라도 존재하면 연결 연산자로 작동한다.
let price = 10000;
console.log("가격 : " + price + "원"); // 가격 : 10000원
3.5 논리 연산자
true와 false 값으로 이루어진 Boolean 타입을 위한 연산자이다. 논리 연산자에는 NOT, OR, AND 연산자가 있다. NOT 연산자는 ! 기호를 사용하는 연산자로, false의 값을 true로 true의 값은 false로 변경해 주는 연산자이다.
let isClicked = true;
let isOpened = false;
console.log(!isClicked); // false
console.log(!isOpened); // true
OR 연산자는 || 기호를 사용하고 || 기호의 양 옆에 있는 값이 하나라도 true라면 true 값을 반환하는 연산자이다.
AND 연산자는 OR 연산자와 반대의 연산자로, && 기호를 사용한다. AND 연산자는 && 기호의 양 옆에 있는 두 개의 값이 모두 true라면 true를 반환하고, 그렇지 않고 값이 하나라도 false라면 false를 반환하는 연산자이다.
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
3.6 null 병합 연산자
ull 병합 연산자는 ?? 기호를 사용하며, 기호를 기준으로 왼쪽 값이 null이거나 undefined일 경우 기호의 오른쪽에 있는 값을 반환하고, 왼쪽의 값이 null이나 undefined이 아니라면 왼쪽의 값을 반환하는 연산자이다. 바로 코드를 보겠다.
let num1;
let num2 = 10;
console.log(num1 ?? 20); // 20
console.log(num2 ?? 20); // 10
코드를 살펴보면, num1 변수는 undefined의 값을 갖고, num2 변수는 숫자 10의 값을 갖는 것을 볼 수 있다. 그렇기 때문에 num1 ?? 20 연산은 num1이 undefined이므로 20이 반환되고, num2 ?? 20 연산은 num2의 값이 null이나 undefined가 아니기 때문에 num2 변수의 값인 10이 반환되어 각각 20과 10이 출력된다.
null 병합 연산자는 주로 변수에 기본값을 할당하고 싶을 때 사용되는 연산자이다.
3.7 삼항 연산자
삼항 연산자는 A ? B : C 형태의 연산자로, A라는 조건이 true라면 B를, false라면 C를 반환하는 연산자이다. 조건문은 후에 자세히 다루겠다.
let num = 100;
let result = num % 2 === 0 ? "짝수" : "홀수";
console.log(result); // 짝수
4. 조건문
건문은 특정 조건에 따라 코드를 실행하거나 실행하지 않을 때 사용하는 구문이다. 우선, 조건문의 기본인 if문에 대해 알아보겠다.
다른 프로그래밍 언어와 똑같기 때문에 자세한 설명은 하지 않고 코드 예시로 보여주겠다.
let num = 50;
if (num < 10) {
console.log('num은 10보다 작습니다.');
} else if (num > 10) {
console.log('num은 10보다 큽니다.');
} else {
console.log('num은 10입니다.');
}
다음은 switch/case 문에 대해 알아보겠다. 이 또한 코드로 대체하겠다.
let fruit = 'pineapple';
switch (fruit) {
case 'banana':
console.log('바나나');
break;
case 'orange':
console.log('오렌지');
break;
case 'apple':
console.log('사과');
break;
case 'grape':
console.log('포도');
break;
default:
console.log('다른 과일');
}→ 스위치 문은 "break;"에 유의해야한다.
5. 함수
함수는 function이라는 키워드를 통해 선언할 수 있고, function 키워드 옆에는 함수의 이름을 작성한다. 그리고 함수 선언문의 중괄호({}) 내부에는 해당 함수를 사용할 때 실행돼야 하는 코드를 작성해 준다.
function add(num1, num2){ // num1과 num2는 매개 변수
console.log(num1+num2);
}
add(10,15);→ 함수 선언은 "add(10,15);"와 같이 해준다.
함수 내부에 작성된 코드는 함수 호출 시 바로 실행되기도 하지만, 함수 내부에서 return 문을 사용해 결괏값을 반환하기도 한다.
function add(num1, num2) {
return num1 + num2;
}
let result = add(10, 15);
console.log(`두 숫자를 더한 결과는 ${result} 입니다.`);
자바스크립트에서 함수는 이러한 return 문의 성질을 이용해 얼리 리턴 패턴(Early return pattern)으로 자주 사용된다.
function compare(num) {
if (num === 0) {
console.log("num의 값이 0입니다.");
} else if (num < 0) {
console.log("num의 값이 0보다 작습니다");
} else {
if (num >= 10) {
console.log("num의 값이 10보다 크거나 같습니다.");
} else {
console.log("num의 값이 0보다 크고 10보다 작습니다.");
}
}
}
compare(15);→ 이와 같은 코드보단 아래와 같은 코드가 더 이해하기 쉽다.
function compare(num) {
if (num === 0) return "num의 값이 0입니다.";
if (num < 0) return "num의 값이 0보다 작습니다.";
if (num >= 10) return "num의 값이 10보다 크거나 같습니다.";
return "num의 값이 0보다 크고 10보다 작습니다";
}
console.log(compare(15));→ 이러한 형식이 얼리 리턴 패턴이다.
6. 스코프
자바스크립트에서 생성된 변수 또는 함수는 모두 유효 범위를 갖는다. 유효 범위란 변수와 함수가 영향을 미치는 범위로, 영어로는 스코프(scope)라고도 부릅니다. 스코프는 자바스크립트뿐만 아니라 모든 프로그래밍 언어에서 중요한 개념이다. 스코프는 크게 다음과 같이 세가지로 분류된다.
- 전역 스코프: 프로그램 전체에서 접근 가능한 변수의 범위.
- 지역 스코프: 특정 함수나 블록 내부에서만 유효한 변수의 범위.
전역 스코프와 지역 스코프의 예시 코드를 보겠다.
let global = '나는 전역 변수입니다';
function outerFunction() {
let outer = '나는 외부 함수의 변수입니다';
function innerFunction() {
let inner = '나는 내부 함수의 변수입니다';
console.log(global);
console.log(outer);
console.log(inner);
}
innerFunction();
console.log(global);
console.log(outer);
console.log(inner); // 오류
}
outerFunction();
다음과 같이 출력된다.
지역 스코프는 함수 스코프와 블록 스코프 이렇게 또 다른 종류의 스코프로 나눌 수 있다. 함수 스코프를 갖 let을 사용한 코드의 예씨는 다음과 같다.
function print() {
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i);
}
print();코드를 실행하면, 0부터 9까지의 값이 순서대로 출력되지만, 마지막에 오류가 발생한다.
여기서 let을 var로 바꿔보면,
function print() {
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i);
}
print();var 라는 키워드는 let과 const 처럼, 어떠한 식별자를 선언할 때 사용하는 키워드로, let과는 다르게 함수 스코프를 갖는다. 따라서 print 함수의 내부에 선언된 변수 i는 블록 단위가 아니라 print 함수 내부에서 접근 가능한 함수 스코프를 갖기 때문에 5번째 줄의 console.log(i)를 실행 하더라도 이 변수 i의 값이 알맞게 출력된다.
결과적으로 0부터 10까지의 숫자가 출력된다.
var 키워드는 자바스크립트 초기 버전에서 도입된 변수 선언 방식으로, 오래된 변수 선언 키워드라고 불리며, 잘 사용하지 않는 키워드이다. 또한 함수 스코프를 갖기 때문에 함수 내 어디에서든 접근 가능하고, 함수의 외부에서는 접근할 수 없다.
var num = 10;
var num = 100;
console.log(num);var은 다음과 같이 중복 선언 역시 가능하다. 다음과 같은 코드에서는 100이 출력된다.
var 키워드가 let 키워드와는 다르게 변수를 중복 선언할 수 있는 이유에는, 해당 키워드가 ‘함수 스코프’를 가지며 ‘호이스팅’이라는 특성을 갖기 때문이다. 호이스팅에 대해서는 다음 글에서 설명하겠다.
'프론트' 카테고리의 다른 글
| [JS] DOM과 DOM API (0) | 2025.07.01 |
|---|---|
| [JS] 비동기와 API (2) | 2025.06.25 |
| [JS] 자바스크립트 기초(2) (1) | 2025.05.25 |
| CSS 기초 (1) | 2025.04.29 |
| HTML 기초 (1) | 2025.04.04 |