KOSTA DAY30
JavaScript
JavaScript
- 브라우저 환경에서 사용하기 위해 나온 언어
- Java와 문맥이 비슷한 프로그래밍 언어
- 그러나 엄연히 다른 언어이다.
- 서버의 영역까지 확대되었다.
- 비동기식 구현
동기식 : 요청과 결과가 동시에 일어남
비동기식 : 요청과 결과가 동시에 일어나지 않음
장점
- 플랫폼에 독립적임
- 완벽하게는 아니지만 객체지향적임
- 컴파일 언어가 아닌 인터프리터 언어로 컴파일과정이 없어 신속한 개발이가능
현재는 JIT컴파일 방식을 도입하였다. (컴파일 방식이 인터프리터 방식보다 빠르다.)
컴파일 언어
전체를 기계언어로 변환 후 진행
소스코드 → 목적코드(기계언어로 번역) → 목적프로그램(바이너리파일) → 실행
즉, 번역과 실행이 따로 이루어짐
인터프리터(해석기) 언어
소스코드를 바로 실행
소스코드를 한줄 한줄 읽어들이면서 실행하는 프로그램
HTML문서 내에서 JS의 위치
- 어느부분에 삽입해도 가능함
- <head>, <body>에 주로 위치
script
HTML내부 스트립트
외부 스크립트 불러오기
특징
자바스크립트는 변수에 함수를 넣을수 있다. (그 변수는 함수가 됨)
형변환 함수 eval, parseInt
(eval, parseInt : 문자열 → 정수형)
eval : 자동 형변환 x
parseInt : 자동형변환(가능한부분처리)
기본문법
- 기본적인 문법은 Java 와 크게 다르지 않다.
- 데이터 타입을 미리 지정하지 않고 사용한다. (자동으로 데이터타입 지정됨)
- null과 undifiend는 다르다.
null : 초기화는 했지만 데이터 없음
undifiend : 초기화되지 않음 - 내장함수
- 연산자
- 증감연산자
- 지역변수/전역변수
변수
- 지역변수
- function 기능함수 외부에서 선언된 변수
- 문서의 전 영역에서 변수에 접근 및 수정이 가능하다.
- 전역변수
- function 기능함수 내에서 선언된 변수
- 선언된 함수 내에서만 변수의 접근 및 수정이 가능하다.
함수
내장함수
선언적함수 / 익명함수
선언적 함수는 메모리에 먼저 올린다.
때문에 인터프리터 형식인 자바스크립트에서도 함수가 나중에 선언되어있어도 사용이 가능하다.익명함수는 인터프리터 형식인 자바스크립트의 특징이 적용되어, 순차적으로 메모리에 올라간다.
때문에 호출문이 익명함수 선언 보다 먼저 나오면 호출되어질 수 없다.
- 익명함수 사용 시 , ()의 유무에 주의하여야 한다.
()가 없을 시, 주소값 입력
()있을 시, 함수 호출 - 함수의 매개변수로 함수가 가능하다.
클로저
- 함수를 호출할 경우, 생성되는 실행 컨텍스트 영역
- 예시2의 경우 printValue를 이미 실행한 값을 콘솔에 출력하는 것이기 때문에 printFunc의 지역변수는 해당되지 않는다.
- 이부분을 이해하고 넘어가야 클로저를 이해할수있다.
클로저
내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다.
예시
- 상기 예시와 같이 outerFunc의 함수실행이 끝나며, x변수의 값은 사라져야 하지만 return값을 내부함수 innerFunc로 줌으로써 innerFunc(outerFunc의 함수 실행값)를 통해 x변수에 접근할수 있도록 하였다.
- 상기 예시2의 exam은 함수 inner(outer(16,14)의값)가 된다.
즉, ‘function inner(innerArg){
console.log((16+14)/(innerArg + 8)} 이된다.
따라서 exam(2)는 3이라는 결과가 호출된다.
여기서 local값인 8은 outer함수의 실행이 끝나면 소멸되야 하지만 inner함수의 인자로 사용되어 inner함수를 통해 접근이 가능하다.
객체
- 자바스크립트 내에 수많은 객체가 이미 정의되있다.
- 브라우저 객체 : window, document, location등 (DOM객체)
- 자바스크립트 내장 객체 : Date, Math, Array 등
- 사용자 정의 객체가 있다.
- 자바스크립트에서는 클래스라는 개념이 없다.
- 함수자체가 객체이기도 하다.
DOM
- html문서 생성 시, 자동으로 DOM 트리구조로 생성됨
속성
객체 생성방법
- 자바스크립트는 여러가지 객체 생성방법을 제공한다.
new Object() 사용
- 필요에 의해 속성 추가가 가능하다.
- 객체를 하나 생성할 경우 사용하기 좋다.
Litral Notation(문자형표기)
- {} : 객체 / [] : 배열
- 객체를 소량 (1~2개) 생성하기 좋음
생성자 함수에 의한 객체생성
- new 연산자 사용하여 객체생성
- 객체를 대량 생성해야 할 경우 사용하기 좋음
프로토타입
- 다같이 함께 사용할 수 있는 공통의 메모리 공간을 가지고 있는 개념
- 객체지향 언어인 자바스크립트는 객체지향언어의 중요한 요소인 클래스가 없다. (ECMA6에 클래스문법이 추가됨) 대신에 프로토타입(prototype)이란것이 존재한다.
- 클래스가 없는 자바스크립트는 new 연산자와 함수를 통해 클래스 역할을 대체한다.
- 클래스가 없기 때문에 상속기능도 없다. 때문에 프로토 타입으로 상속을 흉내내도록 구현해서 사용하기도 한다.
- 객체 생성시 생성자와 프로토타입 링크가 함께 생성된다.
- 공통된 내용을 프로토타입에 저장하여 공유한다.
참조 블로그 : [Javascript] 프로토타입 이해하기 by 오승환
- 만약 상기 예시에서 프로토 타입을 사용하지 않았다면,
모든 student객체에 getSum, getAverage, toString 을 가져야 한다.
(너무 많은 메모리 중복된 내용이 담김) - 프로토타입을 사용 시, 중복된 내용을 프로토 타입에 담는다.
그리고 각각의 객체들은 프로토타입을 참조한다.
캡슐화
- 캡슐화란, 객체의 필드, 메소드를 하나로 묶고 실제 구현내용을 감추는것을 말한다. (보안상의 이유로 사용된다.)
- 자바에서는 접근지정자/클래스와 get,set메소드를 통해 사용하였으나, 클래스가 없는 자바스크립트에서는 함수내에 지역변수를 사용하고 get, set 함수를 내부함수로 선언하여 캡슐화를 할 수 있다.