[JS 문법 종합반] 1주차 : 자바스크립트 기본 문법

🚩 [학습 목표]

1. 자바스크립트의 역사와 특징에 대해 이해
2. 자바스크립트의 기본 문법인 변수, 상수, 데이터 타입, 연산자, 함수 등을 이해하고 적용
3. 변수 선언과 할당, 산술, 논리, 비교, 삼항 연산자 등 자바스크립트에서의 표현식을 작성할 수 있음.
4. 조건문과 반복문을 이해하고 적용
5. 배열과 객체의 기본 개념을 이해하고 활용

1. JS(자바스크립트) 언어의 특징 그리고 역사

출처 : https://www.iplocation.net/javascript

(1) JS의 역사

• 1995년 자바스크립트 탄생
  • 🌐 넷스케이프 커뮤니케이션(LiveScript → Javascript)
  • 🖥️ 브라우저 동작 스크립트 언어
• 1999년 자바스크립트 표준화(ECMA-262) 완료
• 2005년 AJAX 등장
  • 비동기 웹 애플리케이션 개발 가능
  • 폭발적인 UX 향상 🚀
• 2008년 V8 엔진 출시(google)
  • super fast(코드 실행 속도 상당부분 개선)
  • 🛠️ 컴파일러, 메모리관리 시스템 👍
• 2009년 Node.js 등장, 서버 개발 활성화
  • 서버개발의 지각변동 : PHP, Ruby, Python, Java → Javascript(Node.js)
  • 하나의 언어 → FrontEnd + BackEnd + DB(MongoDB) = FullStack
• 2015년 ECMAScript 6(ES6) 버전 출시 🚀
• 2016년 프론트엔드 프레임워크(React, Vue, Angular) 대중화, SPA 개발 활성화 🌟
• 현재 자바스크립트는 프론트엔드 및 백엔드 개발 분야에서 널리 사용되며, Node.js를 이용한 서버 개발도 활발하게 이루어지고 있음.

(2) JS 언어의 특징

• [1] 객체 지향 프로그래밍 지원 자바스크립트는 객체 지향 프로그래밍이 가능한 언어로서, 객체를 생성하고 관리하는 데에 강점이 있습니다. 이를 통해 복잡한 기능을 구현 ℹ️ **객체지향 vs 절차지향** 절차지향 프로그래밍은 **순서대로 실행되는 일련의 과정**을 단계적으로 기술하여 프로그램을 만드는 것이고, 객체지향 프로그래밍은 데이터와 함수를 **객체라는 그룹으로** 묶어서 처리하는 방법 🔢 🔜 예를 들어, **`절차지향 프로그래밍`**에서는 첫 번째 일을 처리한 다음에 두 번째 일을 처리하고, 그 다음에 세 번째 일을 처리하는 순서대로 프로그램을 만듬. 🧱 💼 반면 **`객체지향 프로그래밍에`**서는 데이터와 함수를 **객체라는 그룹**으로 묶어서 처리. 객체는 상태와 행동을 가지고 있으며, 상태는 객체의 속성(property)이라고도 함. ✓ **JS에서 객체를 만들 때는?** 자바스크립트에서 객체를 만들 때는 **중괄호({})**를 사용하여 객체를 만들고, 각 속성을 **쉼표(,)**로 구분하여 추가. 속성은 **이름과 값**을 가지며, 이름은 문자열로 작성, 값은 다양한 **데이터 타입**을 사용할 수 있음. 객체 내부의 함수를 **메소드(method)**라고 부르며, 속성의 값으로 함수를 추가할 수 있음. 객체를 만들어서 필요한 속성과 메소드를 추가하여 사용.
• [2] 동적 타이핑 자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때 타입을 지정하지 않음. 이것은 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미. 예를 들어, 아래와 같은 코드 선언과 할당이라는 단어에 주목 🥸

  let myVariable = "Hello, world!"; // 변수 선언 및 문자열 데이터 타입으로 할당
  console.log(typeof myVariable); // "string" 출력
  
  myVariable = 123; // 숫자 데이터 타입으로 할당
  console.log(typeof myVariable); // "number" 출력
  
  myVariable = true; // 불리언 데이터 타입으로 할당
  console.log(typeof myVariable); // "boolean" 출력

  ℹ️ **런타임(Runtime)?** **런타임 시점**이란, 프로그램이 실행되는 동안의 시점을 의미. 즉, 코드가 실행되는 동안에 발생하는 시점을 말함. 반대의 의미로는 컴파일 시점이 있음.
• [3] 함수형 프로그래밍 지원 자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원. 이를 통해 코드의 재사용성과 가독성을 높일 수 있음. ℹ️ **일급객체란?** 일급 객체(first-class object)란, **함수를 일반 값과 마찬가지로** 변수에 할당하거나, 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있는 객체를 의미 👉 **코드예시** ```jsx // 함수를 변수에 할당 const add = function(a, b) { return a + b; } // 함수를 인자로 받는 함수 function calculate(func, a, b) { return func(a, b); } // 함수를 반환하는 함수 function getAddFunction() { return add; } // 함수를 일급 객체로 다루어 코드의 재사용성을 높임 console.log(calculate(add, 2, 3)); // 5 console.log(getAddFunction()(2, 3)); // 5 ``` ℹ️ **고차함수란?** 고차 함수(higher-order function)란, 함수를 인자로 받거나, 함수를 반환하는 함수를 의미 ```jsx // 고차 함수 예시: 함수를 인자로 받는 함수 function operate(func, a, b) { return func(a, b); } function add(a, b) { return a + b; } function multiply(a, b) { return a * b; } console.log(operate(add, 2, 3)); // 5 console.log(operate(multiply, 2, 3)); // 6 ```
• [4] 비동기 처리 비동기 처리는 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식
  
• [5] 클라이언트 측 및 서버 측 모두에서 사용 가능 자바스크립트는 클라이언트 측에서만 사용되는 것이 아니라, Node.js를 이용하여 서버 측에서도 사용. 이를 통해 웹 개발 전반에 걸쳐 자바스크립트를 활용.