BOM이란??

BOM 구조

BOM(Browser Object Model)은 DOM(Document Object Model)과 다르게 웹 페이지의 정보를 객체로 주지 않고 브라우저 정보를 객체로 전달합니다.

브라우저 정보를 전달하기에 웹 페이지 정보 또한 가지고 있습니다.

BOM은 크게 Window, Location, Navigator, Screen, History 5가지가 존재합니다.

Window

모든 BOM 객체의 최상위 객체이자 전역 객체이다.

Window 객체의 프로퍼티나 메소드(함수)는 window를 생략하고 사용할 수 있다. (ex, alert("message"))

DOM의 객체도 Window 객체의 프로퍼티이다.

Location

Location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나 브라우저에 새 문서를 불러올 때 사용할 수 있다.

Location 객체의 프로퍼티와 메서드를 이용하면 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다.

Navigator

Navigator 객체는 브라우저 공급자 및 버전 정보를 포함한 브라우저의 다양한 정보를 저장하는 객체입니다.

Navigator를 사용하면 스크롤의 위치 등 브라우저의 정보를 조작할 수 있습니다.

Screen

Screen 객체는 사용자의 화면에 대한 다양한 정보를 저장하는 객체입니다.

History

History 객체는 브라우저의 이전 탐색 정보를 문서와 문서 상태 목록으로 저장하는 객체입니다.

참고 자료

https://itprogramming119.tistory.com/entry/Javascript-BOM%EC%9D%B4%EB%9E%80

 

[Javascript] BOM이란?

브라우저 객체 모델(BOM)이란? Javascript를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있습니다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM,

itprogramming119.tistory.com

https://velog.io/@artp/JS-BOM-Browser-Object-Model

 

[JS] BOM (Browser Object Model)

브라우저 객체 모델(Browser Object Model, BOM)은 자바스크립트가 웹 페이지가 아닌, 웹 브라우저 자체를 제어할 수 있도록 제공하는 객체 집합입니다.BOM은 HTML 문서(DOM)와는 달리, 브라우저 자체를 제

velog.io

https://velog.io/@imok-_/JavaScript-DOM-BOM-%EC%9D%B4%EB%9E%80

 

[JavaScript] DOM, BOM 이란?

[JavaScript] DOM, BOM, Window에 대한 이해

velog.io

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

'JavaScript' 카테고리의 다른 글

[JavaScript] DOM  (0) 2025.06.28
[JavaScript] 객체와 배열  (2) 2025.06.25
[JavaScript] 함수  (0) 2025.06.25
[JavaScript] 조건문, 반복문  (0) 2025.06.25
[JavaScript] 연산자  (0) 2025.06.25

DOM (Document Object Model) 이란??

DOM(Document Object Model)은 HTML 문서를 브라우저에서 JavaScript로 동적으로 접근하고 조작할 수 있도록 트리 구조로 표현한 객체이다.

DOM을 활용하면 HTML 요소를 선택하고, 내용을 변경하거나 이벤트를 처리할 수 있다.

DOM 트리 구조

DOM 트리 구조

  • DOM 트리는 HTML 문서를 기반으로 계층적으로 구성된다.
    • 문서 전체는 document 객체로 표현된다.
    • HTML 요소는 노드(Node)로 표현되며, 부모-자식 관계를 가진다.

DOM 함수

1. 요소 선택 함수

     - ID 검색

const element = document.getElementById('[Elemnet ID]');

요소들(Elements) 중 해당하는 ID를 가지고 있는 요소 객체를 가지고 온다.

     - Class 검색

const elements = document.getElementsByClassName('[Element Class Name]');

요소들(Elements) 중 해당하는 Class를 가지고 있는 요소 객체를 가지고 온다. (변수는 배열을 지칭하고 있다.)

     - Tag 검색

const elements = document.getElementsByTagName('[Tag Name]');

요소들(Elements) 중 해당하는 Tag를 가지고 있는 요소 객체를 가지고 온다.(변수는 배열을 지칭하고 있다.)

     - CSS 선택자 중 첫번째 요소만 검색

const element = document.querySelector('.myClass');

CSS선택자를 가지고 있는 요소들 중 첫번째 요소 객체를 가지고 온다.

     - CSS 선택자 모든 요소 검색

const elements = document.querySelectorAll('.myClass');

CSS 선택자를 가지고 있는 모든 요소 객체를 가지고 온다.

CSS로 요소를 들고 오는 것과 Tag, Class, Id로 들고 오는 것의 차이점??

  • getElemnet~ : HTMLCollection의 형태로 객체가 저장되어 온다.
  • querySelector~ : NodeList 형태로 객체가 저장되어 온다.

NodeList vs HTML Collecttion??

HTML CollectionLIVE DOM Collection 객체로 내부에 변화가 생기면 이를 즉시 반영한다.

이와 반대로 NodeListNON-LIVE Collection 객체로 내부의 변화를 즉시 반영하지 않는다.

여기서 내부의 변화를 즉시 반영한다는 말은 화면을 의미하는 것이 아니다.

화면은 NodeList나 HTML Collection 모두 즉시 반영시킨다.

그러나 현재 진행하고 있는 JS 코드에 들어있는 Dom 객체!!!! 이 객체가 즉시 반영이 되냐 안되냐의 차이이다.

그럼 반영되는 것이 무조건 더 좋은게 아닌가??

라고 생각할 수 있다. 그러나 그렇지 않다.

간단하게 지금 변화하고 있는 모든 변화요소를 다 객체가 반영한다면, 무한 루프를 도는 등 개발자가 예상하지 못한 에러가 나올 수 있다.

따라서 각 요소에 맞게 사용하면 된다.

2. 요소 변경

     - 텍스트 변경

const element = document.getElementById('myId');
element.textContent = "새로운 텍스트";

 

     - HTML 내용 변경

const element = document.getElementById('myId');
element.innerHTML = "<b>HTML로 변경</b>";

단, 위 함수는 잘 사용하지 않는다.

위 함수 대신, HTML의 태그들을 DOM객체 내부의 함수로 호출해서 변경하는 식으로 많이 사용한다.

      - 스타일 변경

const element = document.getElementById('myId');
element.style.color = "blue";

2. 이벤트 처리

      - 이벤트 리스너 추가

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
    alert("버튼이 클릭되었습니다!");
});

3. 새로운 요소 추가

const newElement = document.createElement('p');
newElement.textContent = "새로운 문단 추가";
document.body.appendChild(newElement);

이때, appendChild로 통해서 주입된 새로운 요소는 위 요소에 포함된 요소들 중 최 하단에 배치된다.

  • appendChild : 요소들 중 최 하단에 배치
  • insertBefore : 2번째 파라미터로 들어온 참조 인자보다 앞에 배치
  • prepend : 요소들 중 최 상단에 배치

4. 요소 삭제

const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child);

5. 요소 클래스 조작

const element = document.getElementById('myId');
element.classList.add('newClass');
element.classList.remove('oldClass');

참고 자료

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

 

문서 객체 모델 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 문서 객체 모델(영어: Document Object Model 도큐먼트 오브젝트 모델[*], DOM)은 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터

ko.wikipedia.org

https://sirius7.tistory.com/34

 

[Javascript] getElementsByClassName과 querySelectorAll의 차이 (HTMLCollection과 NodeList의 차이)

객체를 불러오기 위해 사용하는 getElementsByClassName과 querySelectorAll의 차이를 간단히 요약하면, 1. getElementsByClassName(그리고, getElementsByTagName)은 HTMLCollection을 반환하고, 2. querySelectorAll은 NodeList를 반

sirius7.tistory.com

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

'JavaScript' 카테고리의 다른 글

[JavaScript] BOM  (0) 2025.06.29
[JavaScript] 객체와 배열  (2) 2025.06.25
[JavaScript] 함수  (0) 2025.06.25
[JavaScript] 조건문, 반복문  (0) 2025.06.25
[JavaScript] 연산자  (0) 2025.06.25

객체란?

객체는 여러 개의 관련된 데이터를 하나의 단위로 묶어 표현하는 자료형이다.

객체는 프로퍼티(속성)와 메서드(동작)를 가질 수 있다.

배열이란?

컴퓨터 과학에서 배열은 번호(인덱스)와 번호에 대응하는 데이터들로 이루어진 자료 구조를 나타낸다.

일반적으로 배열에는 같은 종류의 데이터들이 순차적으로 저장되어, 값의 번호가 곧 배열의 시작점으로부터 값이 저장되어 있는 상대적인 위치가 된다.


객체 선언

// 객체 리터럴로 객체 생성
let person = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

// 빈 객체 선언
let emptyObject = {};
let emptyObjects = new Object();

// 객체 프로퍼티 접근
console.log(person.name); // John
console.log(person.age);  // 30

// 객체 메서드 호출
person.greet(); // Hello, John

객체 선언

객체 프로퍼티 접근

let person = {
  name: "Alice",
  age: 25
};

// 점 표기법
console.log(person.name);  // Alice
console.log(person.age);   // 25

// 대괄호 표기법
console.log(person["name"]);  // Alice
console.log(person["age"]);   // 25

객체 프로퍼티 접근

객체 메서드 접근

let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet();  // Hello, Alice

객체 메서드 접근

배열 선언

// 배열 리터럴로 배열 생성
let numbers = [1, 2, 3, 4, 5];

// 빈 배열 선언
let emptyArray = [];
let emptyArrays = new Array();

// 배열에 접근
console.log(numbers[0]);  // 1
console.log(numbers[2]);  // 3

배열 선언

배열 메서드 접근

let numbers = [1, 2, 3, 4, 5];

// push: 배열의 끝에 요소 추가
numbers.push(6);
console.log(numbers);  // [1, 2, 3, 4, 5, 6]

// pop: 배열의 마지막 요소 제거
numbers.pop();
console.log(numbers);  // [1, 2, 3, 4, 5]

// shift: 배열의 첫 번째 요소 제거
numbers.shift();
console.log(numbers);  // [2, 3, 4, 5]

// unshift: 배열의 첫 번째 위치에 요소 추가
numbers.unshift(1);
console.log(numbers);  // [1, 2, 3, 4, 5]

// forEach: 배열의 각 요소에 대해 함수를 실행
numbers.forEach(function(number) {
  console.log(number);  // 1, 2, 3, 4, 5
});

배열 메서드 접근

배열 안에 객체 저장

let students = [
  { name: "John", age: 22 },
  { name: "Jane", age: 24 },
  { name: "Mike", age: 23 }
];

// 배열 안의 객체에 접근
console.log(students[0].name);  // John
console.log(students[1].age);   // 24

배열 안에 객체 저장

객체 안에 배열 저장

let person = {
  name: "John",
  hobbies: ["Reading", "Traveling", "Swimming"]
};

// 객체 안의 배열에 접근
console.log(person.hobbies[0]);  // Reading
console.log(person.hobbies[1]);  // Traveling

객체 안에 배열 저장

 

 

참고 자료

https://ko.wikipedia.org/wiki/%EB%B0%B0%EC%97%B4

 

배열 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 컴퓨터 과학에서 배열(영어: array, 配列·排列, 문화어: 배렬)은 번호(인덱스)와 번호에 대응하는 데이터들로 이루어진 자료 구조를 나타낸다. 일반적으로 배열

ko.wikipedia.org

https://likedev.tistory.com/entry/javascript-%EA%B0%9D%EC%B2%B4-%EC%83%9D%EC%84%B1-%EC%B6%94%EA%B0%80-%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0#google_vignette

 

javascript 객체 생성, 추가, 값 가져오기

객체란 데이터와 함수의 집합입니다. 예제를 통해 javascript 객체의 기본 형태와 빈 객체를 생성하고 값을 추가하고 조회하는 방법에 대해 알아보겠습니다. 기본 객체 생성 객체를 생성하고 속성

likedev.tistory.com

https://tesseractjh.tistory.com/103

 

[JS] 자바스크립트의 배열 생성 방법

자바스크립트에서 배열은 배열 리터럴, Array 생성자 함수, Array.of 메서드, Array.from 메서드를 통해 생성할 수 있다. 배열을 생성하는 방법이 4가지나 있기 때문에 각각의 생성 방식과 특징을 제대

tesseractjh.tistory.com

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

'JavaScript' 카테고리의 다른 글

[JavaScript] BOM  (0) 2025.06.29
[JavaScript] DOM  (0) 2025.06.28
[JavaScript] 함수  (0) 2025.06.25
[JavaScript] 조건문, 반복문  (0) 2025.06.25
[JavaScript] 연산자  (0) 2025.06.25

함수

자바스크립트에서 함수(function)는 특정 작업을 수행하는 코드 블록이다.

함수는 재사용 가능한 코드를 작성할 수 있게 해준다.

함수는 입력값을 받아 처리하고 결과를 반환한다.


1. 함수 선언

  • 함수는 function 키워드로 선언합니다.
function add(x, y) {
    return x + y;
}
console.log(add(5, 10)); // 15

 

함수 정의 후 실행


2. 함수 표현식

  • 함수 표현식은 함수를 변수에 할당하는 방식
const add = function(x, y) {
    return x + y;
}
console.log(add(5, 10)); // 15

함수 표현식으로 정의 후 실행


3. 화살표 함수

  • ES6에서 도입된 간결한 함수 표현.
function add(a, b) {
	return a + b;
}
console.log(add(10, 20));


const add2 = function (a, b) {
	return a + b;
}
console.log(add2(10, 20));


const add3 = (a, b) => {
	return a + b;
}
console.log(add3(10, 20));


const add4 = (a, b) => a + b;
console.log(add4(10, 20));

화살표 함수로 정의 후 실행


4. 기본 매개변수 값

function greet(name = "Guest") {
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet()); // "Hello, Guest!"

기본 매개변수가 존재하는 함수 정의 후 실행


5. 가변 인자 함수

function sum(...numbers) {
  let total = 0;
  for(let i of numbers) {
    total = total + i;
  }
  return total;
}

console.log(sum(1, 2, 3, 4)); // 10

가변인자가 존재하는 함수 선언 후 실행


6. 스코프(Scope)

  • 함수 스코프 : var로 선언한 변수는 함수 내에서만 유효합니다.
function functionScopeExample() {
  if (true) {
    var x = 10;  // 'var'는 함수 스코프
  }
  console.log(x);  // 10: x는 functionScopeExample 함수 내에서 유효하므로 출력됨
}

functionScopeExample();

함수 스코프 존재하는 함수 선언 후 실행

  • 블록 스코프 : let, const로 선언한 변수는 블록 내에서만 유효합니다.
function blockScopeExample() {
  if (true) {
    let y = 20;  // 'let'은 블록 스코프
    const z = 30;  // 'const'는 블록 스코프
  }
  console.log(y);  // ReferenceError: y is not defined
  console.log(z);  // ReferenceError: z is not defined
}

blockScopeExample();

블록 외부에서 스코프에 접근했기에 에러가 나옴

  • 글로벌 스코프 : 함수 외부에서 선언된 변수는 어디에서나 접근 가능합니다.
let globalVar = 'global';
function testScope() {
    let localVar = 'local';
    console.log(globalVar); // global
    console.log(localVar); // local
}
testScope();
// console.log(localVar); // 오류 발생

글로벌 스코프는 블록 내부에서도 접근이 가능


혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

'JavaScript' 카테고리의 다른 글

[JavaScript] DOM  (0) 2025.06.28
[JavaScript] 객체와 배열  (2) 2025.06.25
[JavaScript] 조건문, 반복문  (0) 2025.06.25
[JavaScript] 연산자  (0) 2025.06.25
[JavaScript] 변수 선언  (1) 2025.06.25

조건문

어떤 조건이 주어졌을 때, 어떤 동작이 수행하는 문법을 조건문이라고 지칭한다.

let age = 20;
if (age >= 18) {
    console.log('성인입니다.');
} else {
    console.log('미성년자입니다.');
}

조건문 실행

반복문

같은 동작을 여러번 반복시키는 문법을 반복문이라고 지칭한다.

let i;

for (i = 0; i < 5; i=i+1) { // for(반복 카운트 변수 정의; 반복 조건 정의(True일 때 작동); 1회 반복 후 증감 정의)
    console.log(i); // 0, 1, 2, 3, 4
}

for (let n of [1,2,3,4,5]) { // for(배열 크기만큼 반복)
    console.log(n);
}

let count = 0;
while (count < 3) { // while(조건이 True일 때 반복)
    console.log(count); // 0, 1, 2
    count++;
}

반복문 실행

참고 자료

https://ko.wikipedia.org/wiki/%EC%A1%B0%EA%B1%B4%EB%AC%B8

 

조건문 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. If 플로 다이어그램. If-then-else 플로차트. 컴퓨터 과학에서 조건문(條件文, conditional)이란 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 주어진 조건

ko.wikipedia.org

https://ko.wikipedia.org/wiki/%EB%B0%98%EB%B3%B5%EB%AC%B8

 

반복문 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 컴퓨터 프로그래밍에서 반복문(영어: iteration)은 제어문중 하나로, 프로그램 소스 코드내에서 특정한 부분의 코드가 반복적으로 수행될 수 있도록 하는 구문이

ko.wikipedia.org

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

'JavaScript' 카테고리의 다른 글

[JavaScript] 객체와 배열  (2) 2025.06.25
[JavaScript] 함수  (0) 2025.06.25
[JavaScript] 연산자  (0) 2025.06.25
[JavaScript] 변수 선언  (1) 2025.06.25
[JavaScript] JavaScript란?  (1) 2025.06.25

연산자란?

연산자는 프로그램이 다양한 연산을 진행하기 위해 제공하는 기호 혹은 키워드를 의미합니다.

JavaScript에서는 연산자는 크게 산술연산자, 비교 연산자, 논리 연산자, 할당 연산자 4개가 존재한다.


산술 연산자

산술 연산자는 간단한 4칙연산을 제공하는 기호 혹은 키워드를 의미한다.

let a = 10;
let b = 5;

console.log(a + b); // 15 (더하기)
console.log(a - b); // 5 (빼기)
console.log(a * b); // 50 (곱하기)
console.log(a / b); // 2 (나누기)
console.log(a % b); // 0 (나머지)

산술 연산자


비교 연산자

비교 연산자는 값을 비교한 후, 참 거짓을 제공하는 기호 혹은 키워드를 의미한다.

let x = 10;
let y = 20;

console.log(x == y);  // false (같은지 비교)
console.log(x === y); // false (값과 타입이 같은지 비교)
console.log(x != y);  // true (같지 않은지 비교)
console.log(x !== y); // true (값과 타입이 다르면 true)
console.log(x < y);   // true (x가 y보다 작은지)
console.log(x > y);   // false (x가 y보다 큰지)
console.log(x <= y);  // true (x가 y보다 작거나 같은지)
console.log(x >= y);  // false (x가 y보다 크거나 같은지)

비교 연산자


논리 연산자

논리 연산을 제공하는 기호 혹은 키워드를 의미한다.

let p = true;
let q = false;

console.log(p && q); // false (AND: 둘 다 true여야 true)
console.log(p || q); // true (OR: 하나라도 true면 true)
console.log(!p);     // false (NOT: true는 false로, false는 true로)

논리 연산자


할당 연산자

값을 변수에 저장하는 기능을 제공하는 기호 혹은 키워드를 의미한다.

let z = 10;

// 단순 할당
z = 15;
console.log(z); // 15

// 복합 할당
z += 5;  // z = z + 5
console.log(z); // 20

z -= 3;  // z = z - 3
console.log(z); // 17

z *= 2;  // z = z * 2
console.log(z); // 34

z /= 2;  // z = z / 2
console.log(z); // 17

z %= 5;  // z = z % 5
console.log(z); // 2

할당 연산자


참고 자료

https://www.elancer.co.kr/blog/detail/277

 

C++ 연산자 가이드북 (비트 연산자부터 논리, 비교까지 총집합) I 이랜서 블로그

연산자의 종류가 워낙 다양한 c++ 연산자, 빠르고 정확한 개발을 도와드리기 위해 c++ 연산자에 대해 정리해서 알려드립니다. I c 언어 연산자, c# 연산자, c 언어 비트 연산자, c 언어 논리 연산자, c

www.elancer.co.kr

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

'JavaScript' 카테고리의 다른 글

[JavaScript] 객체와 배열  (2) 2025.06.25
[JavaScript] 함수  (0) 2025.06.25
[JavaScript] 조건문, 반복문  (0) 2025.06.25
[JavaScript] 변수 선언  (1) 2025.06.25
[JavaScript] JavaScript란?  (1) 2025.06.25

JavaScript 변수 선언

JavaScript는 동적 변수 언어이므로, 변수를 선언할 때 타입을 지정하지 않습니다.

즉, 변수에 저장되는 값이 숫자이든, 문자든, 문자열이든 따로 지정하지 않습니다.

변수 명명은 다음과 같은 코딩 컨벤션을 가지고 있습니다.

  • 숫자로 시작 x
  • 특수문자는 _만 가능
  • 소문자로 시작
  • 예약어 사용금지(let, const)

변수 선언은 크게 var, let, const 3가지로 구분됩니다.


1. var 사용

var x = 10;
var x = 20;
x = 30;
console.log(x);
  • 함수 스코프(Function Scope)를 가집니다.
  • 중복 선언이 가능하여 의도하지 않은 오류를 유발할 수 있음.

 

따라서 요즘엔 권장하지도 않고, 사용하지도 않는다.

2. let 사용

let y;
y = 10;
y = 20;
console.log(y);
  • 블록 스코프(Block Scpe)를 가지는 변수 선언 키워드.
  • 중복 선언이 불가능하며, 재할당 가능.

3. const 사용

const z = 30;
// z = 40; // 오류 발생
console.log(z); // 30
  • 블록 스코프를 가지며, 상수(Constant) 선언 시 사용.
  • 선언 후 값을 변경할 수 없음.

데이터 타입 확인

JavaScript 언어가 변수 선언할 때 타입을 선언하지 않는다고 해서 언어의 타입이 존재하지 않는것은 아니다.

JavaScript 언어는 크게 기본타입, 참조 타입이 존재한다.

기본 타입(Primitive Types)

// 숫자 (Number)
let num = 42;
console.log(typeof num); // "number"

// 문자열 (String)
let str = "Hello, World!";
console.log(typeof str); // "string"

// 불리언 (Boolean)
let isTrue = true;
console.log(typeof isTrue); // "boolean"

// null
let nullValue = null;
console.log(typeof nullValue); // "object"

// undefined
let undef;
console.log(typeof undef); // "undefined" => 아예 값을 저장 안함.

// Symbol
let sym = Symbol('description');
console.log(typeof sym); // "symbol"

위 코드 실행시 콘솔에 나오는 화면

참조 타입(Reference Types)

// 객체 (Object)
let person = {
    name: "John",
    age: 30
};
console.log(typeof person); // "object"

// 배열 (Array)
let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true (배열 확인)

// 함수 (Function)
function greet() {
    console.log("Hello!");
}
console.log(typeof greet); // "function"

위 코드 실행시 나오는 화면

이처럼 실제로는 Type을 가지고 있으며, 명시하지 않을 뿐이다.


혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

'JavaScript' 카테고리의 다른 글

[JavaScript] 객체와 배열  (2) 2025.06.25
[JavaScript] 함수  (0) 2025.06.25
[JavaScript] 조건문, 반복문  (0) 2025.06.25
[JavaScript] 연산자  (0) 2025.06.25
[JavaScript] JavaScript란?  (1) 2025.06.25

JavaScript란?

JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어입니다.

HTML과 CSS와 함께 웹 개발의 3대 핵심 기술 중 하나로, 주로 웹 페이지를 동적으로 만들거나 상호작용을 추가하는 데 사용한다.

초기에는 브라우저 내에서만 실행되었지만, 현재는 Node.js와 같은 런타임 환경을 통해 서버 측 개발에서도 사용 가능하다.

JS는 JSEngine이라는 프로그램 위에서 동작하는데, 이 JSEngine은 브라우저에 기본으로 설치되어 있다.

WebPage 형태

JavaScript 특징

  • 경량 언어: 간결하고 빠르게 작성 가능하다.
  • 다중 패러다임: 객체지향, 함수형, 이벤트 기반 프로그래밍을 지원한다.
  • 크로스 플랫폼: 다양한 운영 체제와 기기에서 실행 가능하다.

JavaScript 장점

  • 동적 타이핑(Dynamic Typing): 변수의 타입을 명시하지 않아도 사용 가능
  • 인터프리터 언어: 코드를 즉시 실행
  • 이벤트 기반 프로그래밍: 사용자의 상호작용을 기반으로 동작
  • 플랫폼 독립성: 브라우저만 있으면 실행 가능
  • 확장성: 다양한 라이브러리와 프레임워크와 함께 사용 가능 (React, Vue, Angular 등)

JavaScript 단점

  • 콜백 지옥 : 비동기 시스템을 제작할 때, CallBack이라는 함수를 이용하게 됩니다. 이때, 코드가 매우 읽기 어려워지는 단점이 존재합니다.
  • 타입 예측이 어려움 : JavaScript는 동적 타입 언어이기에, 타입이 변경된다고 해서 에러로 알려주지 않습니다. 따라서 개발자 입장에서 변수의 타입을 예측하기 어렵습니다.
  • 자바 스크립트의 피로 : JavaScript 언어 및 JavaScript 언어의 프레임 워크는 빠른 시간 내에 업데이트가 진행됩니다. 그렇기에 JavaScript를 이용해서 개발한다면 끊임없이 나오는 새로운 버젼의 JavaScript 및 프레임 워크를 공부해야 합니다.

참고 자료

https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Scripting/What_is_JavaScript

 

JavaScript가 뭔가요? - Web 개발 학습하기 | MDN

MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 이 글에서는 "JavaScript는 무엇인가요?", "JavaScript로 무엇을 할 수 있나요?"와 같은 질문에 답하며 JavaScript의 용도에 익숙해지도록 높은 수준에서 J

developer.mozilla.org

https://www.elancer.co.kr/blog/detail/173

 

자바스크립트(JavaScript), 특징부터 단점, 활용법까지 모두 알려드립니다! I 이랜서 블로그

개발자가 가장 많이 사용하는 프로그래밍 언어 자바 스크립트(Java Script)의 특징과 이점에 대해 대한민국 최초, 최대 IT 프리랜서 매칭 플랫폼 이랜서에서 알려드립니다. I 자바 스크립트 문자열

www.elancer.co.kr

혹시라도 틀린 내용이 있다면 댓글로 알려주시면 감사하겠습니다!!

 

 

'JavaScript' 카테고리의 다른 글

[JavaScript] 객체와 배열  (2) 2025.06.25
[JavaScript] 함수  (0) 2025.06.25
[JavaScript] 조건문, 반복문  (0) 2025.06.25
[JavaScript] 연산자  (0) 2025.06.25
[JavaScript] 변수 선언  (1) 2025.06.25

+ Recent posts