10. 08. 06일차 TIL - JavaScript 역사, 특징, 기본문법

본격적으로 학습주간의 시작이다. 
오늘은 JavaScript의 역사와 특징, 기초 문법에 대해 학습하였다.

---

1. JavaScript 의 역사

•  자바스크립트는 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. JavaScript 언어의 특징

1)  객체 지향(Object) 프로그래밍

자바스크립트는 객체 지향 프로그래밍이 간으한 언어로서, 객체를 생성하고 관리하는 데에 강점이 있다.

→ 이를 통해 복잡한 기능을 구현할 수 있습니다.

2)  동적 타이핑

자바스크립트는 동적 타이핑을 지원하는 언어로서, 변수를 선언할 때, 타입을 지정하지 않는다.

이것은 Runtime 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다는 것을 의미한다.

* Runtime? 런타임이란, 프로그램이 실행되는 동안의 시점을 의미한다.

3)  함수형 프로그래밍

자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원한다.

이를 통해 코드의 재사용성과 가독성을 높일 수 있다는 장점이 있다.

4)  비동기 처리

비동기 처리란 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있또록 하는 방식이다.

(자세한 특징은 추후 수업에서 배울 수 있다고 한다.)

5)  클라이언트 측 및 서버 측 모두에서 사용 가능

자바스크립트는 클라이언트 측에서만 사용되는 언어가 아니라, Node.js를 이용하여 서버 측에서도 사용된다.

이를 통해 웹 개발 전반에 걸쳐 자바스크립트를 활용할 수 있다.

---

3. JavaScript 기본 문법

1)  변수와 상수

• 변수의 5가지 주요 개념
  • 이름 : 저장된 값의 고유 이름(name)
  • 값 : 변수의 저장된 값(value)
  • 할당 : 변수에 값을 저장하는 것
  • 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 것
  • 참조 : 변수에 할당된 값을 읽어서 가져오는 것

 

여기서 myVar 는 var로 선언한 함수이름이다.

"Hello World"는 변수에 저장하고자 하는 String 값이다.

(변수 선언) + (변수의 이름) = (저장하고자 하는 값) 을 합쳐 할당이라고 한다.

• 변수를 선언할 수 있는 3가지 방법
  • var
  • let
  • const

왜 선언하는 방법이 3가지나 있을까? 이유는 각각의 특징에서 알 수 있다.

- var는 같은 이름으로 다시 선언이 가능하지만, let과 const는 불가능하다.

- var와 let은 재할당이 가능하지만, const는 재할당이 불가능하다.

  → 절대 변하면 안되는 (고정하고 싶은) 중요한 변수는 const로 선언해야겠다.

2)  데이터 타입과 형 변환

- 데이터 타입은 아래와 같이 나뉜다.

• 숫자형 (Number)
• 문자형 (String)
• 논리형 (Bool)
• Undefined : 정의되지 않았음을 의미한다.
• Null : 갑싱 존재하지 않음을 의미한다. (명식적으로 나타내는 방법)

- 형 변환 : 형태를 바꾼다는 것을 의미한다.

             → 데이터 타입을 바꾼다.

• 명시적 형 변환 : 임의로(의도적으로) 형 변환하는 것
• 암시적 형 변환 : 자동으로 형 변환이 되는 것

★  형 변환에 관련해서는 js 파트에 자세히 기록해놔야겠다.

3)  연산자 (Operators)

• 산술연산자 (Arithmetic Operators) ＋  －  *  /  % 
• 할당연산자 (Accignment Operators) =  +=  -=  *=  /=  %=
• 비교연산자 (Comparison Operators)  ===  !==  <  >  <=  >=
• 논리연산자 (Logical Operators)  &&  ||  !
• 삼항연산자 (Ternary Operator)  ?:
• 타입연산자(Type Operators)  typeof

4)  함수 (Function)

• 함수 정희하기
  • 함수 선언문 (Function Declaration)
  • 함수 표현식 (Function Expression)

• 함수 호출하기
• 함수 매개변수와 반환값

함수선언문

함수표현식

 

함수 호출하기

• Scope (범위) : 전역변수 / 지역변수
• 화살표함수 ★ ★ ★ ★ ★

기본적인 화살표 함수의 표현방법이다.

한 줄로 표현가능할 때에는 중괄호를 생략할 수 있다.

또한 매개변수가 1개일 경우 매개변수의 괄호도 생략할 수 있다.

---

4. 조건문과 반복문

자바스크립트에서는 조건문을 사용하여 특정 조건을 만족하는 경우에만 코드를 실행시킬 수 있다.

이 부분은 ★ 매우 중요한 부분 ★ 이므로 js파트에 자세하게 정리하는 게 좋을 것 같다.

 

1) 조건문

• if문
  • if문
  • if - else문
  • if - else - if-else문
• switch문
• 삼항연산자
• 조건문의 중첩
• 조건부 실행
• 삼항연산자와 단축 평가
• falsy한 값과 truthy한 값

2) 반복문

• for문
  • 기본적인 for문
  • 배열과 함께 사용하는 for문
  • for ... in문
• while문
• do ... while문
• break문
• continue문

---

5. 객체(Object) 의 기초

자바스크립트에서는 객체(Object)를 사용하여 여러 개의 값을 하나의 변수에 담고 관리할 수 있다.

이 부분 또한 ★ 매우 중요한 부분 ★ 이므로 js파트에 자세하게 정리하는 게 좋을 것 같다.

1) 객체 생성

• 기본적인 객체 생성 방법
• 생성자 함수를 사용한 객체 생성 법

2) 객체 속성 접근

3) 객체 메서드

* 메서드(Method)란? 

   객체 지향 프로그래밍에서 객체와 관련된 서브 루틴(또는 함수)이자 class가 갖고 있는 기능.

• Objcet.keys() 메서드
• Object.values() 메서드
• Object.entries() 메서드
• Object.assign() 메서드
• 객체 비교
• 객체 병합

---

6. 배열(Array) 의 기초

자바스크립트에서는 배열(Array)를 사용하여 여러 개의 값을 저장하고 관리할 수 있다.

1) 배열 생성

• 기본적인 배열 생성 ( eq num → 0, 1, 2, ... )

기본적인 배열의 생성 예시

• 배열의 크기 지정

다음과 같이 배열의 크기를 지정할 수 있다.

2) 배열 요소 접근 ( Index번호 )

각 item의 index 번호를 입력하여 접근할 수 있다.

3) 배열 메서드

• push : 배열 마지막 자리에 item을 추가하는 메서드

psuh method 예시

• pop : 배열의 마지막 item을 제거하는 메서드

pop method 예시

• shift : 배열의 첫번째 item을 제거하는 메서드

shift method 예시

• unshift : 배열 첫번째 자리에 item을 추가하는 메서드

unshift method 예시

• splice : 원하는 자리에 item을 추가하는 메서드1

splice method 예시

• slice : 원하는 자리에 item을 추가하는 메서드2

slice method 예시

 

* 콜백 함수란(CallBack_function)란? 

   매개변수 자리에 함수를 넣는 것.

• forEach

예시를 위한 배열생성

forEach method 예시

 

• map : map method는 항상 원본 배열의 길이 만큼 return된다.

map method 예시

• filter : 조건에 맞는 item을 모두 배열로 반환한다.

filter method 예시

• find : 조건에 맞는 것 중 첫 item만 반환한다.

find method 예시

---

7. 과제 (Homework)

1) 예문_01 문자열 연습하기

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True 값을 return하고 다르면 False를 return하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다.

단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.

단, 문자열 s의 길이는 50 이하의 자연수이고, 알파벳으로만 이루어져 있습니다.

먼저, 문제를 풀기 전, 단계(logic)을 나눠서 생각해보자.

- 문자열의 대소문자는 구별하지 않으므로 모두 대문자 또는 소문자로 바꿔주자.

- 문자열의 자리를 하나씩 모두 확인하려면 반복문을 사용해야 할 것 같다.

예문_01 풀이과정

이후 console.log를 활용하여 터미널로 잘 구현되는지 확인하였다.

예문_01 확인

원하는 결과값에 맞게 잘 나오는 것 같다 😄

 

2) 예문_02 반복문, 조건문 연습하기

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

단, absolutes의 길이는 1이상 1,000이하입니다. → absolutes의 모든 수는 각각 1이상 1,000이하입니다.

단, signs의 길이는 absolutes의 길이와 같습니다. → signs[i]가 참이면 absolutes[i]의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다.

이번에도, 문제를 풀기 전, 단계(logic)을 나눠서 생각해보자.

- 매개변수가 absolutes와 signs인 함수를 정의한다.

- 불리언 값에 따라 변환된 absolutes[i]의 값을 담을 변수(공간)이 필요할 것 같다.

- absolutes에 담긴 item의 개수 만큼 함수가 반복되어야 할 것이다.

예문_02 풀이과정

이 또한 잘 풀었는지 확인해보자.

예문_02 확인

다행히 원하는 결과값에 맞게 잘 나오는 것 같다 😄

---

★ 06일차 소감

하루 안에 js의 역사부터 시작하여 특징, 기본문법, 조건문, 반복문, 객체, 배열에 대한 개념을 배웠고 예문까지 풀어보았다. 문법이 너무너무 중요해 보인다. 하지만 무턱대고 외우기 보단 어떠한 그림(구조)에 하나씩 채운다라고 생각하거나, 배열에 item이 들어있는 것을 상자에 들어있는 것처럼 주변에서 자주 볼 수 있는 모습의 이미지를 연상하였더니 이해하기 좋았다. 제대로 이해했는지를 확인하기 위해 과제로 제시된 예문 두 문제를 풀어보았고 logic을 짜는 능력을 향상시킬 수 있었던 것 같다. 문제를 풀고 console.log에 찍어 정답이 나온다는 것을 확인했을 때는 너무 뿌듯하고 기분이좋았다. javasript.. 재미따!! 😄열심히 그리고 꼼꼼히 배워서 react를 배울 때에도 문제없이 스펀지처럼 잘 흡수할 수 있도록 기초를 잘 다져놓아야겠다.