자바스크립트 구문

자바스크립트 구문

---

자바스크립트 변수

var a = 10;
let b = 10.5;
const c = "hello world";

모든 프로그래밍 언어에서 변수는 데이터 값을 저장하는데 사용됩니다.

자바스크립트에서 변수를 사용하기 위해서는 var, let, const 키워드를 사용합니다.

= 는 변수에 값을 할당하는데 사용됩니다.

 

var

함수 스코프를 가지며 변수가 선언된 함수 내에서만 유효합니다. 중복 선언이 가능합니다.

 

let 

블록 스코프를 가집니다. 변수가 선언된 블록 내에서만 유효합니다. 중복 선언이 불가능합니다.

 

const

let과 마찬가지로 블록 스코프를 가집니다. 같은 블록 내에서는 중복 선언이 불가능하며 한 번 초기화한 이후에는 값을 변경할 수 없습니다.

 

자바스크립트 주석

let x = 5;   // x는 5가 됩니다.
/*
    다중
    행
    주석처리
*/

자바스크립트는 다른 언어와 마찬가지로 주석처리할 때는 // 혹은 /* */를 사용해서 주석처리합니다.

 

자바스크립트 데이터 타입

let number = 10;         // 숫자
let string = "Hello";    // 문자열
let isTrue = true;       // 불리언
let array = [1, 2, 3];   // 배열
let object = { key: "value" }; // 객체

자바스크립트는 다양한 데이터 타입을 지원합니다. 그리고 다른 언어와 달리 사용자가 데이터 타입을 정하지 않아도 됩니다.

 

자바스크립트 연산자

let sum = 5 + 3;          // 산술 연산자
let isEqual = (5 == 5);   // 비교 연산자
let andCondition = (true && false); // 논리 연산자

자바스크립트에서는 산술, 비교, 논리 연산자를 사용할 수 있습니다.

 

자바스크립트 조건문

if (age >= 18) {
    console.log("성인입니다.");
} 
else if (age < 18){
    console.log("미성년자입니다.");
}
else {
    console.log("잘못된 값입니다.");
}

조건문을 사용하여 특정 조건에 따라 코드 블록을 실행할 수 있습니다.

 

자바스크립트 반복문

// for문
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while문
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

반복문을 사용하여 코드 블록을 여러 번 실행할 수 있습니다.

 

자바스크립트 함수

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

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

함수는 재사용 가능한 코드 블록을 정의할 때 사용합니다.

 

자바스크립트 객체

// 객체
let person = {
    name: "Alice",
    age: 30,
    greet: function() {
        return `Hello, my name is ${this.name}.`;
    }
};

console.log(person.greet()); // "Hello, my name is Alice."

// 배열
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[1]); // "Banana"

자바스크립트에서는 객체와 배열을 쉽게 다룰 수 있습니다.

객체는 키와 값의 쌍으로 이루어진 프로퍼티를 포함할 수 있으며, 이러한 프로퍼티는 다양한 데이터 타입(숫자, 문자열, 배열 등)을 가질 수 있습니다.

간단하게 객체는 파이썬의 딕셔너리랑 비슷하다고 보면 됩니다.

 

자바스크립트 배열

배열 생성

// 빈 배열 생성
let emptyArray = [];

// 배열 리터럴을 사용한 배열 생성
let fruits = ["Apple", "Banana", "Cherry"];

// Array 생성자를 사용한 배열 생성
let numbers = new Array(1, 2, 3, 4, 5);

 

배열의 요소 접근

let colors = ["Red", "Green", "Blue"];
console.log(colors[0]); // "Red"
console.log(colors[1]); // "Green"
console.log(colors[2]); // "Blue"

 

배열의 길이

let animals = ["Lion", "Tiger", "Bear"];
console.log(animals.length); // 3

 

배열 요소 추가 및 삭제

let fruits = ["Apple", "Banana"];

// 배열의 끝에 요소 추가
fruits.push("Cherry");

// 배열의 시작에 요소 추가
fruits.unshift("Mango");

// 배열의 끝에서 요소 제거
fruits.pop();

// 배열의 시작에서 요소 제거
fruits.shift();

 

배열의 특정 위치에 요소 추가 및 삭제

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

// 특정 위치에 요소 추가
numbers.splice(2, 0, 3); // 인덱스 2에 3을 추가

// 특정 위치의 요소 제거
numbers.splice(4, 1); // 인덱스 4의 요소를 제거

 

배열 탐색 및 반복

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

// forEach를 사용한 반복
numbers.forEach(function(number) {
    console.log(number);
});

// map을 사용한 변환
let doubled = numbers.map(function(number) {
    return number * 2;
});

// filter를 사용한 필터링
let evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

// find를 사용한 검색
let firstEven = numbers.find(function(number) {
    return number % 2 === 0;
});

 

배열 정렬 및 역순

let numbers = [5, 3, 8, 1];

// 배열 정렬 (기본적으로 문자열로 정렬됨)
numbers.sort();

// 배열 역순
numbers.reverse();

 

배열 복사

let original = [1, 2, 3];

// 얕은 복사 (같은 참조를 공유)
let shallowCopy = original.slice();

// 깊은 복사 (새로운 배열을 생성)
let deepCopy = [...original];

 

다차원 배열

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

console.log(matrix[0][1]); // 2

 

배열 메소드

 

• concat(): 두 배열을 합칩니다.
• join(): 배열의 모든 요소를 문자열로 결합합니다.
• slice(): 배열의 일부를 추출합니다.
• splice(): 배열의 요소를 추가하거나 제거합니다.
• sort(): 배열을 정렬합니다.
• reverse(): 배열의 순서를 반전시킵니다.

 

 

자바스크립트 이벤트 처리

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

 

 

출처

W3school

W3Schools.com