[JavaScript] 자바스크립트 기본 문법

프론트/JavaScript

[JavaScript] 자바스크립트 기본 문법

Joo.v7 2025. 10. 25. 15:29

0. 개요

입사 후 프론트 역량이 필요하다는 것을 깨달았고, 이를 보완하기 위해 직접 자바스크립트를 공부하며 정리한 내용이다.

이 글은 이미 한 가지 이상의 프로그래밍 언어를 경험해본 사람에게 도움이 될 것 같다.

1. 기본 문법

자바스크립트는 <script> 태그 안에 작성한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
</html>

<script>
  alert('Hello World!');
</script>

1) 변수

자바스크립트에서 변수를 선언하는 키워드는 3가지가 있다.

var: 사용 지양 (Fucntion-level Scope 문제: 함수의 실행블록( '{ }' ) 안에서 선언된 변수만 지역변수가 되고, 그 이외의 부분에서 선언될 경우 전역변수가 된다.)
let: 재할당 가능
const: 재할당 불가 / 할당한 객체의 내부 값은 변경 가능

// var
var x = 10;
x = 20; // 재할당 가능
console.log(x); // 20

// let
let count = 1;
count = 2; // 재할당 가능
console.log(count); // 2

// const
const a = 10;
a = 20; // error: Assignment to constant variable.

// const - 객체 내부/배열 내부는 변경 가능
const user = { name: "Joo" };
user.name = "Kim"; // 내부 값 변경 가능
console.log(user); // { name: "Kim" }

const numbers = [1, 2, 3];
numbers.push(4); // 배열 변경 가능
console.log(numbers); // [1, 2, 3, 4]

// var의 함수 단위 스코프
if (true) {
  var x = 10; // 블록 안에서 선언
}
console.log(x); // 10  (블록 밖에서도 접근됨)

// let과 const는 블록 단위 스코프
if (true) {
  let y = 20; // 블록 안에서 선언
  const c = 10; // 블록 안에서 선언
}
console.log(y); // ReferenceError: y is not defined
console.log(c); // ReferenceError: y is not defined

2) 입력

자바스크립트에서 문자열과 boolean을 입력받는 방법이 있으며, 숫자는 문자열 -> 숫자로 변환하는 방법을 사용한다.

또한 HTML과 document.querySelector()/querySelectorAll() 를 사용하는 방법이 있다.

(1) prompt()

문자열 입력받는 함수

<script>
  var input = prompt('Message', 'DefStr');
  alert(input);
</script>

(2) confirm()

boolean을 입력받는 함수

<script>
  var input = confirm('수락하시겠습니까?');
  alert(input);
</script>

(3) HTML과 document.querySelector()/querySelectorAll()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <input id="inputName" type="text">
  <button onclick="showName()">확인</button>
</body>
</html>

<script>
  function showName() {
    const name = document.querySelector("#inputName").value;
    alert(name);
  }
</script>

3) 자료형 변환

(1) Number()

다른 자료형 → 숫자

<script>
  var input = prompt('숫자를 입력하세요', '숫자');
  var number = Number(input);
  alert(typeof(number));
</script>

(2) String()

다른 자료형 -> String

<script>
  const num = 123;
  const str = String(num);
  alert(typeof(str));
</script>

(3) Boolean()

다른 자료형 -> Boolean

아래 5가지를 제외한 모든 경우에 true로 변환된다.

<script>
  alert(Boolean(0));
  alert(Boolean(NaN));
  alert(Boolean(''));
  alert(Boolean(null));
  alert(Boolean(undefined));
</script>

4) 일치 연산자

===, !==

양 변의 자료형과 값이 일치하는지 비교한다.

<script>
  alert('' === false); // false (자료형이 다르기 때문)
  alert('' !== false); // true
</script>

2. 조건문과 반복문

자바스크립트의 조건문과 반복문은 C, Java 등 다른 언어들과 같아서 정리는 생략했다.

lightningtech 님의 블로그