FRONT-END

[JavaScript] JavaScript 기초 1 (개요, 변수, 자료형)

gudwns5533 2026. 6. 15. 22:52

JavaScript

자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 프로그래밍 언어로, HTML와 CSS로 만들어진 정적인 웹 페이지에 동적인 기능과 사용자와의 상호작용을 추가하는 역할을 한다. 버튼 클릭, 입력값 처리, 화면 내용 변경, 애니메이션 제어, 서버와의 데이터 통신 등 다양한 기능을 수행할 수 있으며, 오늘날에는 브라우저를 넘어 서버(Node.js), 모바일, 데스크톱, 애플리케이션까지 활용 범위가 확장된 핵심 웹 기술이다.

JaveScript의 실행

1. 브라우저가 페이지를 여는 순간

사용자가 URL을 입력하면 브라우저는 서버로부터 HTML 문서를 받아온다. 이때 브라우저는 HTML을 위에서 아래로 한 줄씩 읽기 시작한다. 👉 이 과정을 파싱이라고 한다.

2. HTML 파싱 중 JavaScript를 만나면?

  • HTML을 읽다가 <Script> 태그를 만나면 아래과 같이 진행한다.
  • HTML 파싱 일시중단
  • JavaScript 파일 다운로드
  • JavaScript 실행
  • 실행이 끝난 뒤 다시 HTML 파싱 재개
  • 👉 JavaScript는 HTML 파싱을 멈추게 한다는 것이 핵심

콘솔 출력

JavaScript에서는 Python의 print()처럼 console.log("내용")으로 내용을 출력할 수 있다.

console.log("안녕하세요. 자바스크립트입니다.")
console.log("현재 페이지가 정상적으로 로드되었습니다.")

외부 자바스크립트 가져오기

외부 css를 가져오는방법과 비슷하다. <head>나 <body>에 <script> 태그로 불러오면 된다. 

<script src="./js/script.js"> </script>

변수

변수
let, const, var

변수 선언
let age
let name

값 할당
age = 20
name = "김사과"

변수 선언과 할당
let age = 20
let name = "김사과"

변수 이름 작성 규칙
- 문자, 숫자, _, $ 사용 가능
- 숫자로 시작 불가
- 공백 사용 불가
- 예약어 사용 불가

var와 let/const의 차이
var와 let/const의 가장 큰 차이는 변수의 유효 범위(scope)와 예측 가능성에 있습니다. 
var는 함수 단위 스코프를 가지며 선언 전에 사용해도 동작하는 호이스팅 특성 때문에 의도치 않은 오류를 만들기 쉽고, 중복 선언도 허용됩니다. 
반면 let과 const는 블록 단위 스코프를 가져 {} 안에서만 유효하며 중복 선언이 불가능해 코드의 안정성이 높습니다. 
또한 const는 한 번 할당한 값을 변경할 수 없어 의도를 명확히 표현할 수 있어, 현대 자바스크립트에서는 var 대신 let과 const 사용이 권장됩니다.

자료형 - 원시 타입

원시 타입
원시 타입은 하나의 값만 저장하며, 값 자체가 변수에 직접 저장됩니다.

Number : 숫자형 데이터. 정수, 실수, 음수, 양수 모두 포함
    let age = 20
    let price = 3.14

String : 문자열 데이터. 큰따옴표(""), 작은따옴표(''), 백팃()``)
    let name = "김사과"
    let name = String("김사과")

Boolean : 참 (true) / 거짓 (false)
    let isLogin = true

undefined : 값이 할당되지 않은 상태, 변수를 선언했지만 값을 할당하지 않았을 때 자동으로 undefined
    let vaule

Null : 의도적으로 값이 없음을 표현
    let data = null

BigInt : 매우 큰 정수를 표현. 일반 number로 표현할 수 없는 큰 정수를 다룰 때 사용
    let bigNum = 118473875827289374592n
    Number.MAX_SAFE_INTEGER
<script>
    let age = 20;
    let name = "김사과"
    let isStudent = true
    let result
    let data = null
    let age2 = age

    //typeof
    console.log("age:", age, typeof age) // 20 number
    console.log("age2:", age2, typeof age2) // 20 number
    console.log("name:", name, typeof name) // 김사과 string
    console.log("isStudent:", isStudent, typeof isStudent) // true boolean
    console.log("result:", result, typeof result) // undefined undefined
    console.log("data:", data, typeof data) // null object
</script>

원시 타입의 저장 방식

  • 값 그 자체가 변수에 직접 저장
  • 숫자나 문자열을 변수에 넣으면, 그 변수 안에 실제 값이 들어감
  • 다른 변수에 복사하면 완전히 새로운 값이 복사되며, 한쪽을 변경해도 다른 쪽에는 영향을 주지 않음.

자료형 - 참조 타입

참조 타입
값의 주소(참조)를 저장하며, 여러 값을 묶어 관리할 수 있음

Object: 키와 값이 쌍으로 이루어진 객체
    let user = { name: "김사과", age: 20 }

Array: 여러 값을 순서대로 저장
    let scores = [90, 80, 70]

Function: 실행 가능한 코드 블록
    function hello() { console.log("안녕하세요") }
    let hello = function() { console.log("안녕하세요") }
<script>
    // 객체
    const user = { name: "김사과", age: 20 }
    console.log("user 객체:", user) // Object
    console.log("user 객체 타입:", typeof user) // object

    // 배열
    const scores = [90, 80, 100, 60]
    console.log("scores 배열:", scores) // Array
    console.log("scores 배열 타입:", typeof scores) // object

    // 함수
    function greet() {
        console.log("안녕하세요")
    }
    console.log("greet 함수:", greet) // function greet(){console.log("안녕하세요")}
    console.log("greet 함수 타입:", typeof greet) // function

    // 참조 타입의 특징 (같은 주소를 가리키기 때문에 복사본을 바꾸면 원본도 바뀐다.)
    const copyUser = user
    copyUser.age = 25
    console.log("원본 user:", user) // Object
    console.log("복사본 copyUser:", copyUser) // object
</script>

참조 타입의 저장 방식

  • 값이 저장된 위치(주소)를 변수에 저장
  • 객체나 배열을 변수에 담으면, 변수에는 실제 데이터가 아니라 데이터가 있는 곳의 주소가 들어감
  • 다른 변수에 할당하면 같은 데이터를 가리키게 되고, 한쪽에서 값을 수정하면 다른 쪽에서도 변경된 결과가 보임

스택 vs 힙

스택 (Stack)

프로그램 실행 중 함수 호출과 지역 변수, 매개변수 같은 임시 데이터가 저장되는 메모리 공간

코드가 실행되는 순서대로 쌓였다가 함수가 종료되면 자동으로 제거되는 후입선출 구조를 가지며, 관리가 단순하고 접근 속도가 빠르다는 장점이 있음.

힙 (Heap)

객체, 배열처럼 크기가 유동적이거나 오래 유지되어야 하는 데이터가 저장되는 메모리 공간

프로그램 실행 중 필요할 때 할당되고, 더 이상 사용되지 않으면 가비지 컬렉터에 의해 정리되며, 스택보다 관리가 복잡하지만 큰 데이터와 공유 데이터를 다루기에 적합.

'FRONT-END' 카테고리의 다른 글

[JavaScript] JaveScript 기초 3 (함수, 스코프, 배열)  (0) 2026.06.16
[JavaScript] JavaScript 기초 2 (연산자, 제어문)  (0) 2026.06.16
[HTML, CSS] HTML 과 CSS 기초 3  (1) 2026.06.15
[HTML, CSS] HTML 과 CSS 기초 2  (0) 2026.06.12
[HTML, CSS] HTML 과 CSS 기초 1  (1) 2026.06.11

'FRONT-END'의 다른글

  • 현재글[JavaScript] JavaScript 기초 1 (개요, 변수, 자료형)

관련글

티스토리툴바