JavaScript 주요 문법 정리

zzin·2025년 2월 23일
SKSKALASKALA1기frontend

SKALA

목록 보기
9/12

1. JavaScript 개요

  • JavaScript는 웹 브라우저와 서버에서 작동하는 프로그래밍 언어
  • 인터랙티브한 웹페이지 및 애플리케이션 개발에 사용
  • 표준화된 버전(ECMAScript, ES6)을 통해 기능이 추가됨

2. ES6 주요 기능

기능설명
let / const안전한 변수 선언 (var의 문제점 해결)
화살표 함수 (=>)간결한 함수 선언 방식
템플릿 리터럴백틱(`)을 사용하여 문자열 내 변수 포함
디스트럭처링(Destructuring)객체 및 배열에서 값을 추출
기본 매개변수함수에 기본값 할당 가능
Rest / Spread 연산자 (...)여러 개의 인자를 한 변수에 담거나, 배열/객체를 펼침
모듈 (import, export)코드 재사용성과 유지보수성 향상
Promise비동기 작업 처리
Map / Set고유한 값을 저장하는 자료구조
for...of반복 가능한 객체 순회

3. HTML과 JavaScript 연결

JavaScript 파일 포함 방식

HTML 문서 안에 직접 구현하는 경우엔 src 지정이 필요 없지만, 외부 스크립트를 참조하려면 src로 경로 집어넣어준다.

방식예제
외부 파일 참조<script src="파일경로.js" type="module"></script>
내부 스크립트 작성<script>document.write("<h1>자바스크립트 학습</h1>");</script>

JavaScript 위치에 따른 차이점

위치설명
<head>- 페이지가 로드될 때 즉시 실행되지만, 스크립트가 로드되는 동안 HTML 요소가 렌더링되지 않아 페이지 표시가 느려질 수 있음
- 주로 페이지 전체 영향 미치는 초기화 스크립트나 메타 태그 조작이 필요한 경우 사용
<body>- HTML 콘텐츠가 먼저 렌더링된 후 실행되어 사용자 경험을 향상
- UI렌더링 후에 스크립트 실행되어야 하는 일반적인 경우에 적합


4. 자바스크립트 빌트인 객체

객체설명예제
Date날짜 및 시간을 다룰 수 있는 객체let now = new Date(); console.log(now);
Math수학적 연산을 제공하는 객체console.log(Math.random());
RegExp정규 표현식을 다루는 객체let regex = /hello/i; console.log(regex.test("Hello"));
JSONJSON 데이터를 다루는 객체let obj = JSON.parse('{"name":"John"}'); console.log(obj.name);


5. 명시적 사용자 승인이 필요한 표준 웹 API

대표적인 웹 API 및 예제

API설명예제
Geolocation API사용자 위치 정보를 제공navigator.geolocation.getCurrentPosition(position => console.log(position.coords));
Notification API브라우저 알림을 표시Notification.requestPermission().then(permission => { if (permission === "granted") new Notification("알림 테스트!"); });
Camera API카메라 접근을 허용navigator.mediaDevices.getUserMedia({ video: true }).then(stream => console.log(stream));
Clipboard API클립보드에 텍스트 복사navigator.clipboard.writeText("Hello World").then(() => console.log("복사됨!"));

왜 명시적 사용자 승인이 필요할까?

  • 보안 및 프라이버시 보호를 위해 사용자의 명확한 동의가 필요함.
  • 악의적인 웹사이트가 사용자 정보를 무단으로 접근할 수 없도록 하기 위함.
  • 예를 들어, 위치 정보나 카메라 접근이 자동 허용되면 사용자 사생활 침해 가능성이 있음.
  • 따라서, 브라우저는 requestPermission() 또는 사용자 승인 요청 창을 제공하여 이를 제어함.


6. 변수 선언 및 데이터 타입

변수 선언 방식

키워드특징
const값 변경 불가, 상수 선언에 사용, 배열에서 요소 변경은 가능(배열을 아예 재할당 X)
let값 변경 가능, 재할당 가능
var함수 스코프, 중복 선언 가능 (사용 권장 X)

변수 형식 변환

  1. 문자열 → 숫자 변환
방법예제설명
Number() 함수let num = Number("123");일반적인 변환 방식
parseInt()let num = parseInt("123px");숫자가 아닌 문자는 무시됨
parseFloat()let num = parseFloat("3.14cm");소수점까지 변환 가능
단항 + 연산자let num = +"456";빠르고 간결한 방법
* 1 연산 사용let num = "789" * 1;자동 형변환 활용

⚠ 주의:

  • 문자열이 숫자가 아닌 경우 결과는 NaN (Not-a-Number)이 될 수 있음.
  • parseInt()와 parseFloat()은 숫자가 포함된 문자열을 변환하지만, 숫자와 문자가 섞여 있을 경우 일부만 변환됨.
  1. 숫자 → 문자열 변환
방법예제설명
String() 함수let str = String(123);가장 명확한 변환 방식
.toString() 메서드let str = (123).toString();숫자 객체에서 사용 가능
템플릿 문자열let str = `${123}`;변환과 함께 문자열 조합 가능
빈 문자열과 더하기let str = 123 + "";간단한 변환 방식

참고:

  • toString()은 null이나 undefined 값에서 오류가 발생할 수 있음.
  • 템플릿 문자열을 사용하면 변환과 문자열 조합을 동시에 처리할 수 있음.

데이터 타입

타입설명
booleantrue / false 값 저장
number정수와 실수 구분 없이 저장, 연산 결과 대입 가능
string작은따옴표('), 큰따옴표(") 또는 백틱(```)으로 감싸서 사용
object객체 타입, 중괄호 {}로 정의, key: value 형태
undefined선언되었지만 값이 할당되지 않은 상태
null의도적으로 "값 없음"을 표현


7. 비교 연산자

연산자설명예제
==느슨한 비교, 값만 비교5 == '5' → true
===엄격한 비교, 값과 타입 비교5 === '5' → false
!=느슨한 비교, 값이 다르면 true5 != '5' → false
!==엄격한 비교, 값 또는 타입이 다르면 true5 !== '5' → true


8. 조건문과 반복문

조건문

let age = 18;
if (age < 13) {
    console.log("어린이");
} else if (age < 20) {
    console.log("청소년");
} else {
    console.log("성인");
}
  // switch 문 : 하나의 표현식을 평가하고, 그 값에 따라 여러 경우(case) 중 하나를 실행
  // default 역할 : 주어진 값이 어떤 case와도 일치하지 않을 때 실행되는 기본 동작을 정의하는 블록으로 선택 사항이며 생략 가능하다.
let day = "Monday";
switch (day) {
    case "Monday":
        console.log("월요일");
        break;
    case "Tuesday":
        console.log("화요일");
        break;
    default:
        console.log("기타");
}

반복문

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) continue;
    console.log(i);
}
let count = 0;
while (count < 3) {
    console.log(count);
    count++;
}
let num = 0;
do {
    console.log(num);
    num++;
} while (num < 3);


9. 배열과 배열 주요 함수

자바스크립트의 배열은 동적 배열로 생성 후에도 배열 크기 조절 가능

const arr = [1, 2, 3]; // 배열 리터럴
const arr2 = new Array(3); // 길이가 3인 빈 배열
const arr3 = Array.of(1, 2, 3); // 전달된 인자를 배열로 생성
const arr4 = Array.from("hello"); // 유사 배열 객체를 배열로 변환
const arr5 = [...arr] // 스프레드 문법 활용 : 반복 가능한 객체를 배열로 변환

배열 주요 함수

함수설명
push()배열 끝에 요소 추가
pop()마지막 요소 제거
shift()첫 번째 요소 제거
unshift()배열 앞에 요소 추가
concat()두 배열을 합쳐 새 배열 반환
slice()배열의 일부를 추출 (원본 변경 X)
splice()요소 제거 및 추가
map()모든 요소에 대해 콜백 함수 실행 후 새 배열 반환
filter()조건을 만족하는 요소만 새 배열로 반환
reduce()배열을 하나의 값으로 축소
find()조건을 만족하는 첫 번째 요소 반환
findIndex()조건을 만족하는 첫 번째 요소의 인덱스 반환


10. 함수 선언

함수 선언 가능한 여러가지 방법들

// #1
function greet(name) {
   return "Hello, " + name + "!";
}
// #2                 
const greet = function(name) {
   return "Hello, " + name + "!";
}
// #3              
const greet = (name) => {
   return "Hello, " + name + "!";
}
// #4  
function greet(...names) {
 let sum = ""
 for (let name of names) {
 	sum += name
 }
 return sum
}
console.log(greet("옥자", "철수", "지혜")); // "옥자철수지혜" 출력
console.log(greet("배","고","파","요")); // "배고파요" 출력

비구조화 할당

: 객체 또는 배열을 매겨변수로 받아서 그 값을 개별 변수로 비구조화 할당하면 간결한 코드를 작성할 수 있다.

// [ 객체 비구조화 예제 ]
function introduce({ firstName, lastName, age }) {
    console.log(`My name is ${firstName} ${lastName} and I am ${age} years old.`);
}

const user = { firstName: "John", lastName: "Doe", age: 30 };
introduce(user); // "My name is John Doe and I am 30 years old." 출력

// [ 배열 비구조화 예제 ]
function multiply([x, y, z]) {
    return x * y * z;
}

console.log(multiply([2, 3, 4])); // 24 출력


11. JavaScript의 호이스팅 (Hoisting)

  • Hoisting의 일반적인 의미는 "끌어올리기" 또는 "올리기"를 뜻함.
  • JavaScript에서 호이스팅은 코드가 실행되기 전에 변수 선언과 함수 선언이 해당 범위의 최상단으로 이동되는 과정.
  • 즉, 자바스크립트가 코드를 해석하고 실행하기 전에 변수와 함수 선언을 미리 처리함.
console.log(myVar); // undefined
var myVar = 10;
console.log(myVar); // 10


12. 객체

1. 객체 생성

Object()를 이용한 객체 생성

const car = new Object();
car.brand = "Tesla";
car.model = "Model Y";
console.log(car); // { brand: 'Tesla', model: 'Model Y' }

클래스를 통한 객체 생성 (ES6+)

class Vehicle {
  constructor(type, wheels) {
    this.type = type;
    this.wheels = wheels;
  }
  describe() {
    console.log(`This vehicle is a ${this.type} with ${this.wheels} wheels.`);
  }
}

const bike = new Vehicle("Bike", 2);
bike.describe(); // "This vehicle is a Bike with 2 wheels."

JSON 데이터로 객체 생성

const jsonString = '{"username": "JohnDoe", "score": 42}';
const player = JSON.parse(jsonString);
console.log(player.username); // "JohnDoe"

2. 객체 속성 접근 및 순회

속성 접근 방법

접근 방식문법예제
점 표기법object.propertyconsole.log(player.username);
대괄호 표기법object["property"]console.log(player["score"]);

객체 속성 반복문 순회

for (let property in player) {
  console.log(`${property}: ${player[property]}`);
}

3. 주요 내장 객체

1. Date 객체

함수설명예제
new Date()현재 날짜 및 시간 생성const today = new Date()
getFullYear()현재 연도 반환console.log(today.getFullYear())

2. Math 객체

함수설명예제
Math.E자연로그의 밑 값console.log(Math.E)
Math.random()0~1 사이 난수 생성console.log(Math.random() * 10)
Math.ceil(x)올림 값 반환console.log(Math.ceil(4.2))

3. RegExp (정규 표현식)

const pattern = /code/i;
console.log(pattern.test("Learn to Code")); // true

4. 객체 유용 메소드

메소드설명예제
Object.keys(obj)객체의 키 배열 반환console.log(Object.keys(userInfo))
Object.values(obj)객체의 값 배열 반환console.log(Object.values(userInfo))
Object.entries(obj)객체의 키-값 배열 반환
Object.assign(target, source)객체 병합 (얕은 복사)Object.assign(userInfo, newObj)
// assign 활용 예시
const userInfo = { name: "Alice", age: 30 };
const newObj = { country: "USA" };
Object.assign(userInfo, newObj);
console.log(userInfo); // { name: "Alice", age: 30, country: "USA" }

5. 객체 복사

복사 유형방법예제
얕은 복사스프레드 연산자 (...)const shallowCopy = { ...userInfo }
깊은 복사JSON 변환const deepCopyObj = JSON.parse(JSON.stringify(userInfo))
깊은 복사(Lodash) _.cloneDeep()_.cloneDeep(userInfo)


13. 문서 객체 모델 (DOM)

1. 요소 선택

메소드설명예제
getElementById("id")ID로 요소 선택document.getElementById("title")
getElementsByClassName("class")클래스명으로 요소 선택document.getElementsByClassName("content")
getElementsByTagName("tag")태그명으로 요소 선택document.getElementsByTagName("section")
querySelector("selector")첫 번째 일치하는 요소 선택document.querySelector(".box")
querySelectorAll("selector")모든 일치하는 요소 선택document.querySelectorAll(".list-item")

2. 요소 추가 및 삭제

const newDiv = document.createElement("div")
newDiv.textContent = "Newly created div!"
document.body.appendChild(newDiv) // 추가

document.body.removeChild(newDiv) // 삭제

3. 속성 조작

// [ html ]
<button id="myButton" type="button">Click Me</button>

// [ javascript ]
// 1. 속성 읽기
let submitButton = document.getElementById("submitButton");
console.log(submitButton.getAttribute("type")); // 출력: "submit"

// 2. 속성 설정
submitButton.setAttribute("disabled", "true"); // 버튼을 비활성화
console.log(submitButton.getAttribute("disabled")); // 출력: "true"

// 3. 속성 제거
submitButton.removeAttribute("disabled"); // 버튼 다시 활성화
console.log(submitButton.hasAttribute("disabled")); // 출력: false

4. 내용 변경

• innerHTML: 요소의 HTML 콘텐츠를 설정하거나 반환.
• textContent: 요소의 텍스트 콘텐츠를 설정하거나 반환.

5. DOM vs VDOM

구분DOM (Document Object Model)
개념웹 페이지의 요소를 트리 구조로 표현하는 실제 문서 객체 모델
변경 방식변경이 발생하면 전체 DOM이 다시 렌더링됨
성능변경 시 전체 DOM 업데이트로 속도가 느릴 수 있음
사용 예시document.getElementById(), innerHTML 등으로 조작
장점브라우저에서 기본적으로 제공
단점업데이트 시 비용이 많이 들 수 있음


14. 모듈 (ES6+)

1. 모듈 내보내기 (Export)

// utilities.js
export function multiply(x, y) {
  return x * y

export function divide(x, y) {
  return x / y
}
export const gravity = 9.81

2. 모듈 가져오기 (Import)

// main.js
import { multiply, divide, gravity } from "./utilities.js"
console.log(multiply(4, 5)) // 20
console.log(gravity) // 9.81

3. 기본 내보내기 (Default Export)

// message.js
export default function greet(name) {
  return `Hello, ${name}!`
}

// app.js
import greet from "./message.js"
console.log(greet("Alice")) // "Hello, Alice!"


15. 비동기 처리 (Promise, async/await)

비동기 방식 -> 파일을 읽거나 대량의 데이터를 서버에서 다운로드 받는 등, 시간이 오래 걸릴 수 잇는 작업은 비동기 방식으로 처리한다.

Promise : 비동기 작업이 성공하거나 실패할 때 해당 결과를 알려준다 "약속"하는 객체

Promise의 3가지 상태

상태설명
대기 (Pending)작업이 아직 완료되지 않은 상태
이행 (Fulfilled)작업이 성공적으로 완료된 상태
거부 (Rejected)작업이 실패한 상태

Promise 예제

const loadData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data loaded"), 1500);
});

loadData.then((result) => console.log(result)); // "Data loaded"

async와 await

  • async와 await는 Promise를 더 쉽게 다루기 위한 키워드로, 비동기 코드를 동기 코드처럼 작성할 수 있게 해준다.
  • async: 함수 앞에 붙이면 자동으로 Promise를 반환하는 비동기 함수가 된다.
  • await: async 함수 내부에서만 사용 가능하며, Promise가 처리될 때까지 코드 실행을 잠시 멈춘다.
    => 즉, async/await를 사용하면 비동기 작업을 마치 동기 코드처럼 쉽게 다룰 수 있다!
async function fetchMessage() {
  return "Async function executed!";
}

async function runAsync() {
  const message = await fetchMessage();
  console.log(message); // "Async function executed!"
}

runAsync();

추가 정리

  • localStorage는 사용자가 지우지 않는 한 데이터 유지
  • sessionStorage는 브라우저가 닫히면 데이터 삭제
  • 모듈을 사용할 땐 type="module"을 지정해야 함
  • fetch(), Promise, async/await을 사용해 비동기 처리 가능
profile
zzin
이전 포스트

LLM 이해 및 활용

다음 포스트

ConvNet shape 계산

0개의 댓글