저번주 웹 개발 종합반을 완강하고 나서 새롭게 오늘부터 JavaScri텍스트pt 문법 을 배우게됐다.
아무래도 1주차는 기본적인 용어 정리와 어떻게 쓰이는지 전반적으로 쭉 훑어보는 느낌인거같다.
쭉 수업을 들어보니 음..학교에서 배운내용도있고 처음보는내용도있고.. 엄마 미안
TIL 을 써야한다고 하니 학창시절부터 무언가를 정리하는건 진짜 못했지만 다들 잘하는거같다 나처럼 어려워하시는분도 있겠죠? 열심히 해보겠습니다.

1.JS언어의 특징 그리고 역사

(1) JS의 역사

• 1995년 자바스크립트 탄생
  • 🌐 넷스케이프 커뮤니케이션(LiveScript → Javascript)
  • 🖥️ 브라우저 동작 스크립트 언어
• 1999년 자바스크립트 표준화(ECMA-262) 완료
• 2005년 AJAX 등장
  • 폭발적인 UX 향상 🚀
• 2008년 V8 엔진 출시(google)
  • 코드 실행 속도 상당부분 개선
  • 🛠️ 컴파일러, 메모리관리 시스템 👍
• 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를 이용한 서버 개발도 활발하게 이루어지고 있습니다.

(JAVA 와 Javascript 는 이름은 비슷하지만 전혀 다른 언어라는점..)

(2)언어의 특징

• 객체 지향 프로그래밍 지원
• 동적 타이핑
• 함수형 프로그래밍 지원
• 비동기처리 ( 이건 어려워서 추후에 다시한번 배운다고합니데이)
• 클라이언트 측 및 서버 측 모두에서 사용 OK

2.기본 문법

(1)변수와 상수

변수가 무엇이고, 왜 필요할까요?
쉽게 말하면 재사용을 쉽게하기위해서 변수 라는 메커니즘을 이용한다고 이해하면된다.
자세한건 나중에 알아보도록하자..기억해야할건 결국 변수는 사용했던 식을 쉽게 재사용하기위해서 사용한다고 생각하면된다.

변수의 5가지 주요 개념은
🙂변수 이름 : 저장된 값의 고유 이름

🙂변수 값 : 변수에 저장된 값

🙂변수 할당 : 변수에 값을 저장하는 행위

🙂변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

🙂변수 참조 : 변수에 할당된 값을 읽어오는것

이렇게 있다.

변수는 var, let, const 3가지 방법으로 선언가능.

기억해야할건 3가지 모두 변수를 선언하는 방법이지만 같은 이름으로 변수를 두번이상 선언 가능한것은 var 밖에 없다.

(2) 데이터 타입과 형 변환

진짜 많다 진짜 많네.. 세세하게 들어가서 하나하나 알기에는 상당한 반복학습이 필요할거 같다...

데이터 타입

7가지 배웠다! 이게 다일까?

1.숫자(Number)
2.문자열(String)
3.불리언(Boolean) => 참(true)과 거짓(false)
4.undefined =값이 할당되지 않은 변수
5.null =값이 할당 되지 않은 변수지만 undefined 다르게 의도적으로 값을 안줌
6.객체(Object) =객체는 속성과 메소드를 가지는 컨테이너 중괄호({})를 사용하여 객체를 생성
7.배열(Array) =데이터를 순서대로 저장하는 데이터 타입 대괄호([])를 사용하여 배열을 생성

형 변환

다양한 자료는 서로 형을 변환할수가 있다고 한다

🙂암시적 형 변환
자바스크립트에서 자동으로 수행되는 형 변환이라고 합니당..

문자열 반환
console.log(1 + "2"); // "12"
console.log("1" + true); // "1true"
문자열과 다른 자료형이 결합시 다른 자료형을 문자열로 자동 변환 후 연산 수행!

숫자 변환
console.log(1 - "2"); // -1
console.log("2" * "3"); // 6
연산자(+,-,/ 등등) 를 사용할때 문자를 숫자로 변환 빈 문자열("")이나 공백 문자열(" ") 은 0으로 변환 한다

불리언 변환
Boolean() 함수를 사용해 불리언 값으로 변환한다.
0, 빈 문자열(""), null, undefined, NaN은 fals 는 무조건 false로 변환.

🙂명시적 형 변환
개발자가 직접 자료형을 변환하는걸 말한다.
문자열 변환
String() 함수를 사용해서 다른 자료형을 문자열로 바꾼다.
숫자 변환
Number() 함수를 사용해 다른 자료형을 숫자형으로 바꾼다.

(3) 연산자

자바스크립트에서 다양한 연산자를 제공하여 변수나 상수를 다양한 방법으로 조작할 수 있습니다.
라고는 하는데 기본적으로 다아는것들 더하기

🙂산술 연산자

(+) 빼기(-) 나누기(/) 곱하기(* )
나 아무리 바보여도 이건알아..
중요한건 나누기 연산자에서 (%)를 사용하면 나머지를 반환한다.

🙂할당 연산자

등호 연산자(=)
변수에 값을 할당

더하기 등호 연산자(+=)
변수에 값을 더할 수 있습니다

빼기 등호 연산자(-=)
변수에서 값을 뺄 수 있습니다.

곱하기 등호 연산자(* =)
변수에 값을 곱할 수 있습니다.

나누기 등호 연산자(/=)
변수에서 값을 나눌 수 있습니다.

🙂비교 연산자

일치 연산자(===)
두 값이 같은지 비교할 수 있습니다. 이때, 일치 연산자는 자료형까지 비교합니다.
불일치 연산자(!==)
두 값이 다른지 비교할 수 있습니다. 이때, 불일치 연산자는 자료형까지 비교합니다.
작다(<) 연산자
크다(>) 연산자
작거나 같다(<=) 연산자
크거나 같다(>=) 연산자
산자를 사용하여 두 값을 비교할 수 있습니다.문자열과 함께 사용시 자동으로 숫자 변환.

🙂논리 연산자
논리곱(&&) 연산자
논리곱 연산자를 사용하여 두 값을 비교할 수 있습니다 두 값이 모두 true일 경우에만 true를 반환합니다.
논리합(||) 연산자
논리곱 연산자를 사용하여 두 값을 비교할 수 있습니다 두 값중 하나라도 true 이면true 를 반환합니다.
논리부정(!) 연산자
논리부정 연산자를 사용하여 값을 반대로 바꿀 수 있습니다
true를 false로, false를 true로 바꿉니다
🙂삼항 연산자
삼항 연산자(?:)
삼항 연산자는 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용합니다.

🙂타입 연산자(type operators)
typeof 연산자
연산자를 사용하여 값의 자료형 확인가능!
해당 자료형의 이름을, 객체나 함수의 경우, "object" 또는 "function"을 반환합니다. typeof null의 경우 "object"를 반환하는 버그가 있습니다

(4)함수

자바스크립트에서는 함수를 정의하여 코드의 재사용성을 높일 수 있다!

함수 정의하기

🙂함수 선언문
function 키워드를 사용하여 함수를 선언할수있다.

함수 스코프

🙂전역 스코프
전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있다.

🙂지역스코프
지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조할 수 있다.

화살표 함수

=> 인 화살표 함수를 통해 조금더 간결하게 함수 선언을 할수있다.

(5) 문

조건문 (if, else if, else, switch)

🙂if문
if문은 조건이 참인 경우에만 코드를 실행한다!
🙂if-else문
if-else문은 조건이 참인 경우와 거짓인 경우 각각 다른 코드를 실행한다!
🙂if-else if-else문
if-else if-else문은 여러 개의 조건을 순서대로 비교하여, 해당하는 조건에 맞는 코드 를 실행한다!
🙂switch문
switch문은 변수의 값에 따라 여러 개의 경우(case) 중 하나를 선택하여 해당하는 코드를 실행한다.

for 문

🙂기본적인 for문
for문은 초기값, 조건식, 증감식을 사용하여 반복 횟수를 제어한다.
🙂배열과 함께 사용하는 for문
배열의 요소 개수만큼 반복하여 실행한다.
🙂for...in문
for...in문은 객체의 프로퍼티를 순서대로 접근할 수 있다.
🙂while문
while문은 조건식이 참인 경우에만 코드를 반복해서 실행한다.
🙂 do...while문
do...while문은 일단 한 번은 코드를 실행하고, 그 후에 조건식을 체크하여 반복 여부를 결정한다.

break문과 continue문

🙂break문
break문은 반복문을 종료한다.
🙂continue문
지정한 숫자를 제외한 후 나머지 값을 출력한다.

하.. 이거만 머리속에 잘 넣어놔도 걱정없겠네요..
아직 머리속에서 정리가 잘안돼서 어렵긴하지만 그래도 열심히 해보자 화이팅..!!