[2주차 TIL] KnockOn Bootcamp Javascript Part 1

2025. 4. 12. 00:42

자바스크립트(Javascript)

자바스크립트는 웹 페이지를 동적으로 만들어주는 스크립팅 언어입니다. 웹 브라우저 내에서 다양한 기능을 실행할 수 있으며, 이벤트 처리, 데이터 저장, DOM 조작 등을 가능하게 해줍니다.

자바스크립트의 기본 문법

자바스크립트는 웹 페이지를 동적으로 만들기 위한 스크립팅 언어로, 주로 브라우저에서 실행됩니다.
HTML 문서에 <script> 태그를 사용해 삽입하거나, 별도의 .js 파일로 분리해 연결할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 기본 문법</title>
</head>
<body>
    <h1>자바스크립트 테스트</h1>
    <script>
        // 콘솔에 메시지 출력
        console.log("안녕, 자바스크립트!");

        // 경고창 표시
        alert("환영합니다!");
    </script>
</body>
</html>

주석: // (한 줄 주석) 또는 /* */ (여러 줄 주석) 사용.
세미콜론(;): 문장의 끝을 나타내며, 생략 가능하지만 명확성을 위해 사용하는 것이 좋습니다.
대소문자 구분: 자바스크립트는 대소문자를 구분합니다. 예: myVar와 myvar는 다른 변수입니다.

변수 선언과 데이터 타입

자바스크립트에서 변수는 let, const, var 키워드로 선언할 수 있습니다.
var는 ES6 이후 권장되지 않으며, let과 const를 주로 사용합니다.
변수 선언
- let: 재할당 가능한 변수.
- const: 재할당 불가능한 상수 (단, 객체/배열 내부 값은 변경 가능).

let name = "홍길동"; // 변수 선언 및 초기화
name = "김철수";     // 재할당 가능
console.log(name);   // "김철수"

const age = 25;      // 상수 선언
// age = 30;         // 오류: const는 재할당 불가
console.log(age);    // 25

자바스크립트는 동적 타입 언어로, 변수의 타입이 실행 중에 결정됩니다.
- 기본(원시) 타입
1. string: 문자열 (예: "안녕", '안녕')
2. number: 숫자 (예: 42, 3.14)
3. boolean: 참/거짓 (true, false)
4. undefined: 값이 정의되지 않음
5. null: 값이 없음
6. symbol: 고유한 값 (ES6 도입)
- 참조 타입
1. object: 객체, 배열, 함수 등

let str = "바나나";        // string
let num = 123;            // number
let bool = true;          // boolean
let undef;                // undefined
let nul = null;           // null
let sym = Symbol("id");   // symbol

console.log(typeof str);  // "string"
console.log(typeof num);  // "number"

함수 정의와 호출

함수는 특정 작업을 수행하는 코드 블록으로, function 키워드 또는 Arrow Function (화살표 함수, ES6 도입)으로 정의할 수 있습니다.

// 일반 함수 정의
function sayHello(name) {
    return "안녕, " + name + "!";
}
console.log(sayHello("홍길동")); // "안녕, 홍길동!"

// Arrow Function (화살표 함수)
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8

Arrow Function 특징
- function 키워드 대신 => 사용
- 한 줄일 경우 중괄호와 return 생략 가능
- this 바인딩이 다르게 동작 (렉시컬 this)

const multiply = (x, y) => {
    const result = x * y;
    return result;
};
console.log(multiply(4, 5)); // 20

객체와 배열의 사용 방법

자바스크립트에서 데이터를 구조화하기 위해 객체와 배열을 사용합니다.

객체 (Object)
- 객체는 키-값 쌍으로 데이터를 저장합니다.

// 객체 생성
const person = {
    name: "홍길동",
    age: 25,
    city: "서울",
    greet: function() {
        return `안녕, 나는 ${this.name}이야!`;
    }
};

// 객체 속성 접근
console.log(person.name);        // "홍길동"
console.log(person["age"]);      // 25
console.log(person.greet());     // "안녕, 나는 홍길동이야!"

// 속성 추가 및 수정
person.job = "개발자";
person.age = 26;
console.log(person); // {name: "홍길동", age: 26, city: "서울", greet: ƒ, job: "개발자"}

배열(Array)
- 배열은 순서가 있는 데이터 목록 입니다.

// 배열 생성
const fruits = ["사과", "바나나", "오렌지"];

// 배열 요소 접근
console.log(fruits[0]); // "사과"

// 배열 메소드 사용
fruits.push("포도");    // 배열 끝에 추가
console.log(fruits);    // ["사과", "바나나", "오렌지", "포도"]

fruits.pop();           // 배열 끝 요소 제거
console.log(fruits);    // ["사과", "바나나", "오렌지"]

// 배열 순회
fruits.forEach(fruit => console.log(fruit));
// 출력:
// 사과
// 바나나
// 오렌지

Spread 구문 (ES6)
- 배열이나 객체를 복사하거나 병합할 때 유용합니다.

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // 배열 복사 및 확장
console.log(arr2); // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // 객체 복사 및 확장
console.log(obj2); // { a: 1, b: 2, c: 3 }

Optional Chaining (ES2020)
- 객체 속성에 안전하게 접근할 때 유용합니다.

const user = { name: "홍길동", address: { city: "서울" } };
console.log(user.address?.city);    // "서울"
console.log(user.phone?.number);    // undefined (오류 없이 안전하게 접근)

자주 사용하는 내장 함수들

자바스크립트는 다양한 내장 함수와 메소드를 제공합니다.

문자열 관련

const str = "Hello, JavaScript!";

// 문자열 길이
console.log(str.length); // 17

// 문자열 자르기
console.log(str.slice(0, 5)); // "Hello"

// 대소문자 변환
console.log(str.toUpperCase()); // "HELLO, JAVASCRIPT!"
console.log(str.toLowerCase()); // "hello, javascript!"

숫자 관련

const num = 3.14159;

// 소수점 자르기
console.log(num.toFixed(2)); // "3.14"

// 랜덤 숫자 생성
console.log(Math.random()); // 0 이상 1 미만의 랜덤 숫자

// 절대값, 반올림
console.log(Math.abs(-5));  // 5
console.log(Math.round(3.6)); // 4

배열 관련

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

// 배열 필터링
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// 배열 매핑
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

타이머 함수

// 2초 후 실행
setTimeout(() => console.log("2초 경과!"), 2000);

// 1초마다 반복
let count = 0;
const interval = setInterval(() => {
    console.log(`카운트: ${++count}`);
    if (count === 5) clearInterval(interval); // 5번 후 중지
}, 1000);

저작자표시 비영리 변경금지

'ELITE HACKER Bootcamp 4th > 2주차' 카테고리의 다른 글

[2주차 TIL] KnockOn Bootcamp Javascript Part 2 (0)	2025.04.12
[2주차 TIL] KnockOn Bootcamp HTML (0)	2025.04.12

푸림의 개발 일지

[2주차 TIL] KnockOn Bootcamp Javascript Part 1

자바스크립트(Javascript)

'ELITE HACKER Bootcamp 4th > 2주차' 카테고리의 다른 글

+ Recent posts

티스토리툴바