Javascript

※이 포스팅은 sopt 26기 server part seminar 자료 바탕으로 작성되었으며, 복습용입니다.

1-1. Javascript란?

Javascript는 객체 기반 스크립트 언어 (=인터프리터 언어) 다.

javascript

여기서 스크립트 언어는

-코드를 한 줄씩 번역하고 실행한다.

-실행 속도가 컴파일 언어에 비해 느리다.

-타입을 명시하지 않는다.

-*프로토타입 기반의 객체지향 언어다.

*프로토타입 기반 프로그래밍은 객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다.

---

그럼 스크립트 언어에 반대되는 개념은 컴파일 언어라고 할 수 있다.

컴파일 언어의 대표적인 예로는 JAVA가 있다.

(여기서 자바와 자바스크립트는 아무 관련 없다. 이름은 비슷해도 다르다.)

컴파일 언어는

-작성한 언어를 기계 언어로 번역한다.

-기계어로 변경해두기 때문에 실행 속도가 빠르다.

-타입 검사를 엄격하게 한다.

-클래스 기반의 객체지향 언어다.

---

1-2. Javascript의 간단한 문법 (7가지)

첫 번째 문법 이야기 -> Javascript에서 변수를 선언할 때 대표적인 3가지가 사용된다.

var, let, const를 사용한다.

그럼 이 세 가지의 차이점은 무엇일까?

먼저 표로 확인해 볼 것이다.

	var	let	const
범위	*Function scope	*Block scope	Block scope
변수 재선언	O	X	X
변수 값 재할당	O	O	X
초기화 값 필요	X	X	O (초기화값 넣지 않으면 오류)

*Function scope : function 블록만 범위로 인정한다. 전역 함수 외부에서 생성한 변수는 모두 전역 변수가 된다.

*Block scope : 블록 범위는 if, while, for, function 등의 중괄호 코드 블록 내부에서만 유효하다. 코드 블록 외부에서는 참조 불가능하다.  

파트장님이 깔끔하게 정리해주신 덕분에 이해하기 쉬웠다.

이론을 배운 후 확인해보기 위해 직접 실습을 해보았다.

변수 재선언

변수 재선언이 불가능할 때 Identifier 'll' has already been declared.라고 SyntaxError가 출력된다. 

변수 재할당

변수 재할당이 불가능할 때 Assignment to constant variable.라고 TypeError가 출력된다.

변수 초기화

const 초기화를 하지 않을 때 Missing initializer in const declaration.라고 SyntaxError가 출력된다.

---

두 번째 문법 이야기 -> Hoisting에 대해 알아볼 것이다.

Hoisting에서 hoist는 '들어 올리다. 끌어올리다.'라는 뜻을 가지고 있다.

그럼 여기서 끌어올려지는 것은 무엇일까? "변수"다.

즉, 호이스팅은 변수의 정의가 그 범위에 따라 선언과 할당으로 분리된다.

변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로 올라간다.

변수가 함수 외에서 정의되었을 경우, 전역 컨텍스트의 최상위로 올라간다.

함수 선언식으로 정의되어있다면 호이스팅이 발생한다.

이 부분은 솝트 세미나와 부스트코스 웹프로그래밍 강의 들으면서 비슷한 시기에 들었던 내용인데 이해할 때 헷갈리는 부분이었다ㅠ

---

세 번째 문법 이야기 -> 기본 자료형에 관한 이야기다.

기본 자료형 중 원시자료형과 객체 자료형이 있다.

원시자료형에는 Boolean, Number, String, Symbol, Null, Undefined가 있다.

객체 자료형에는 Object가 있다.

JS에서는 undefined 타입을 제외한 모든 것이 객체다.

Boolean, Number, String과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 된다.

Boolean	Number	String	Symbol	Null	Undefined	Object
True/False	숫자 자료형, 64bit 실수형  (  ≒JAVA double)	문자열 자료형, " 와 ' 는 동일 취급, `백틱`을 사용하여 변수 사용 가능	유일하고 변경할 수 없는 타입 (잘 안쓰인다고 들음)	Object 타입, '값'이 정해지지 않는 것을 의미 (0도 아니고 타입이 정해지지 않은것도 아님)	'타입'이 정해지지 않은 것을 의미, 초기화되지 않은 변수나 존재하지 않는 값을 의미	JS의 기본타입, *프로퍼티의 정렬되지 않은 집합 -array -function

*프로퍼티 : property는 어떤 값을 나타낸다. 그런데 이 값이 다른 값과 연관을 가지고 있을 때 property라 한다. 또한 속성 이란 뜻으로, JS에서는 객체 내부의 속성을 뜻한다.

아마도 다른 언어를 사용해 본 사람들이라면 Boolean, Number, String, Null은 많이 봤을 것이다. Undefined는 개인적으로 오류 뜰 때 많이 봤었다,,,,,, 수없이,,,,,,,, 

---

네 번째 문법 이야기 -> Array(제 기준 지금부터 쵸큼 헷갈리는 부분(여러 개의 for문 사용법) 시작합니다요,,)

Array는 객체 타입이다.

배열 요소의 타입이 고정되어 있지 않다. (ex. var server1 = ["김", "손", 43, null, true];) (파이썬과 비슷한 것 같다.)

즉, 같은 배열에 잇는 배열 요소끼리의 타입이 서로 다를 수 도 있다.

또한, 배열요소의 인덱스가 연속적이지 않아도 된다.

따라서 특정 배열 요소가 비어있을 수 도 있다.

기본 형태는 arr_name = [배열 요소 1, 배열 요소 2, 배열 요소 3]이다.

<배열 추가>
arr.push(배열 요소);
arr [Index]=배열 요소;

<배열 참조>
for_of : 엘리먼트를 하나씩 가져옴
for_in : 인덱스를 하나씩 가져옴
forEach : 엘리먼트를 하나씩 가져옴. callback 함수를 등록할 수 있음.

이론상으로는 헷갈렸지만 직접 실습해보면 쉽게 이해할 수 있다.

배열 선언

배열 선언 출력

 

배열 추가

배열 추가 출력

배열 순회

배열 순회 출력

---

다섯 번째 문법 이야기 -> Function (array에서 for문이 쪼꼼 헷갈렸다면 여긴 함수 표현식이 쪼꼼 헷갈리는 부분,,,,,)

Function은 객체 타입이다. 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록이다.

함수는 컴퓨터 분야를 공부한 사람들이라면 대부분 알 것이다.

그렇지만 조금은 다른 JS Function에 대해 알아볼 것이다.

여기서 JS Function은 "일급 객체"라고 한다.

그렇다면 일급 객체가 되기 위한 조건에는 무엇이 있을까?

일급객체 조건

1. 변수 또는 데이터 구조에 담을 수 있다.
2. 다른 함수의 파라미터로 전달할 수 있다.
3. 반환 값으로 사용할 수 있다.
4. 런타임 시 생성될 수 있다.

컴퓨터 분야를 공부하면서 느낀 점인데 이론만 읽으면 이해하는 데 어려운 부분이 자주 있는 것 같다.

예시를 보거나 직접 실습을 해봐야 이해하는 부분이 꽤 있다.

왜 꼭 실습을 해보라는지 알겠다,,,,,,

함수를 생성하고 실행을 해야 하는데 이때 두 가지 방법이 있다.

첫 번째는 함수 선언식, 두 번째는 함수 표현식이다.

함수 선언식	함수 표현식
호이스팅에 영향 받음	호이스팅에 영향 받지 않음, 함수를 변수에 할당(일급객체 조건 1번), 화살표 함수: 간결한 표현식, 매개변수가 하나면 소괄호 생략가능, 상황에 따라 return문 생략가능

이론을 봤으니 실습을 "꼭" 해야 한다..!

함수 선언식과 함수 표현식

함수 파일 출력

함수 선언식은 대부분의 사람들이 경험해봤을 것이다.

나에게는 생소했던 화살표 함수,,,,

---

여섯 번째 문법 이야기 -> JSON (클라이언트랑 연결할 때 정말 많이 쓰인다..!)

JSON은 JS Object Notation으로 자바스크립트 객체 표현식이다.

이름과 값으로 구성된 프로퍼티의 정렬되지 않은 집합이다. (즉, key와 value로 구성)

프로퍼티의 값으로 함수가 올 수 도 있는데, 이러한 프로퍼티를 메서드라고 한다. (많이 들어본 그 메소드 맞아요..!)

클라이언트와 통신 시 주로 사용한다. (application/json)

JSON 객체로 나타낼 수 도 있고, 배열로 나타낼 수 도 있다.

이때, 객체 접근은 객체이름.key 나 객체이름.['key']로 접근한다.

배열 접근은 key가 들어있는 idx도 같이 찾아주면 된다.

json 객체

json 객체 출력

json 배열

json 배열 출력

JSON은 정말 많이 사용되니 꼭 이해해야 한다!!

---

일곱 번째 문법 이야기 -> 연산자

연산자는 대부분 사칙연산, 증감 연산자, 나머지, 논리 연산, 비교 연산자 등을 자주 쓸 것이다.

여기서 언급할 연산자는 바로 비교 연산자와 typeof()이다.

비교 연산자로 대부분 == 나 != 를 생각할 것이다. 

여기서 추가할 부분이 있다면 === 나 !== 도 사용된다!

== / !=	=== / !==
값 비교 후 Bool 반환	값과 타입 비교 후 Bool 반환

따라서 두 비교 연산자의 실행 결과가 다를 수 있다.

typeof()는 타입을 반환해준다.

ex) typeof(A)라면 A의 타입을 반환해준다.

---

여기까지 1주 차 세미나 복습을 마무리짓고, Javascript 포스팅도 마무리 지을 것이다!!

복습하면서 개인적인 생각도 넣었는데 혹시나 고쳐야 할 개념이 있다면 언제든지 말씀해주세요..!

아직 잘 모르는 부분이 많아요,,,,,,,,