웹 개발 기초 3 : JavaScript (1)

자바스크립트(JavaScript)는 웹 개발에서 매우 중요한 역할을 하는 프로그래밍 언어입니다. 이 포스트에서는 자바스크립트의 기본 개념과 문법을 다루어 초급자도 쉽게 이해할 수 있도록 하겠습니다.

자바스크립트의 기본 개념

1. 자바스크립트는 함수형 언어입니다:
   • 자바스크립트는 다른 언어와 달리 함수형 프로그래밍을 지원하며, 이를 통해 높은 수준의 추상화와 재사용성을 제공합니다.
2. 변수 선언: 자바스크립트에서는 const, let, var 키워드를 사용하여 변수를 선언합니다.
   • const: 상수를 선언하며, 초기화 즉시 값이 할당되어야 합니다. 이후 값 변경이 불가능합니다.

     const PI = 3.14;

   • let: 값을 변경할 수 있는 변수를 선언합니다. 초기화하지 않아도 되며, 블록 스코프를 가집니다.

     let count;
     count = 1;

   • var: 과거에 사용되던 변수 선언 방식으로, 변수 재선언이 가능하여 예기치 않은 오류를 발생시킬 수 있습니다. 사용을 지양합니다.

     var name = 'John';
     var name = 'Doe'; // 재선언 가능, 위험

3. 데이터 타입: 자바스크립트는 다양한 데이터 타입을 지원합니다.
   • 원시 자료형: 숫자(number), 문자열(string), 불리언(boolean), undefined, null 등이 있습니다.

     let num = 10; // number
     let str = "Hello"; // string
     let isTrue = true; // boolean
     let nothing = null; // null
     let notDefined; // undefined

   • 참조 자료형: 객체(object), 배열(array), 함수(function) 등이 있습니다.

     let arr = [1, 2, 3]; // array
     let obj = { name: 'Alice', age: 25 }; // object
     let func = function() { console.log("Hello!"); }; // function

4. 형변환:
   • 자바스크립트에서는 명시적, 암시적 형변환이 가능합니다.

     let num = 123;
     let str = String(num); // 명시적 형변환
     console.log(typeof str); // "string"

5. 배열:
   • 배열은 대괄호([])로 정의하며, 다양한 타입의 요소를 포함할 수 있습니다.

     let arr = [1, 'two', true];
     console.log(arr[0]); // 1
     console.log(arr.length); // 3

6. 객체:
   • 객체는 중괄호({})로 정의하며, 키-값 쌍의 모음입니다.

     let person = {
         name: 'John',
         age: 30
     };
     console.log(person.name); // John

7. 비교 연산자:
   • 자바스크립트에서는 ==와 ===의 차이가 중요합니다.

     console.log(1 == '1'); // true
     console.log(1 === '1'); // false

8. 반복문:
   • 자바스크립트에서는 for와 while을 사용하여 반복 작업을 수행합니다.

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

9. 함수:
   • 자바스크립트에서는 함수 선언과 익명 함수를 지원합니다.

     function greet(name) {
         console.log("Hello, " + name);
     }
     greet("John");
     
     let greet = function(name) {
         console.log("Hello, " + name);
     };
     greet("Jane");

10. DOM 조작:
    • 자바스크립트는 DOM(Document Object Model)을 통해 HTML 요소를 조작할 수 있습니다.

      document.querySelector('h1').innerHTML = "Welcome!";
      
      let el = document.createElement('p');
      el.textContent = "New Paragraph";
      document.body.appendChild(el);

11. 이벤트 리스너:
    • 자바스크립트는 HTML 요소에 이벤트 리스너를 추가하여 사용자의 상호작용을 처리할 수 있습니다.

      document.querySelector('button').addEventListener('click', function() {
          alert('Button clicked!');
      });