프론트엔드 - JS 기본.

이상해씨·2022년 9월 1일

SSAFY 프론트엔드

웹 풀스택(JAVA)

목록 보기

37/54

✔ JavaScript

1. JavaScript 기본.

◾ JavaScript 개요.

JavaScript : 프로토타입 기반의 스크립트 프로그래밍 언어.
- 객체지향 개념 지원.
- 대부분의 JAvaScript Engine은 ECMAScript 표준 지원.(ES6)
  - 프로토타입 기반으로 클래스가 없었지만 Edition 6에서 Class 개념 지원.

◾ JavaScript 특징.

HTML, CSS와 웹을 구성하는 요소 중 하나. 웹 브라우저에서 동작하는 유일한 프로그래밍 언어.
컴파일 작업을 수행하지 않는 인터프리터 언어.
각 브라우저별 JavaScript 엔진(Chrome의 V8 엔징 등)은 인터프리터와 컴파일러의 장점을 결합하여 처리가 느린 인터프리터 단점 해결.
명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어.

◾ JavaScript 선언.

HTML에서 <script> 태그로 JavaScript 사용.
- src 속성 : 외부 JavaScript 파일 연결. (HTML에 포함할 떄는 생략 가능.)
- type 속성 : 'text/javascript'로 설정.(HTML5부터 생략 가능.)
- script 태그 당 외부 또는 내부 하나만 사용.
head, body 어느 곳에서나 <script> 선언 가능.
- body 끝에 사용하기를 권장.
- head 안에 위치할 경우 브라우저가 먼저 점검.
- body 안에 위치하면 브라우저가 HTML부터 해석하여 화면에 그리기 때문에 사용자가 빠르다고 느낄 수 있음.

웹 브라우저가 HTML 문서를 순차적으로 해석 -> script 위치에 따라 결과가 달라질 수 있음.

구구단 출력
- 변수는 var 사용 : 모든 타입 가능.
  - 이외에 let, const 등이 있음.

var dan = 7;
var result = 0;

console.log('** ' dan + '단 **');
// for문 이용하여 9번 반복.
for(var i = 1; i < 10; i++){
  	// 곱셈 연산 결과 저장.
  	result = dan * i;
  
  	// console.log(dan + " * " + i + " = " + result);
}

시계
- callback 함수 : 파라미터로 함수를 전달하는 함수
  - setInterval(func, time) : func을 time(ms)마다 반복.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>시계</title>
    <script type="text/javascript">
      window.onload = function () {
        setInterval(showTime, 1000);
      };

      function showTime() {
        var view = document.getElementById("view");
        var date = new Date();
        view.innerHTML = date.toLocaleTimeString();
      }
    </script>
  </head>
  <body>
    현재 시간 : <span id="view"></span>
  </body>
</html>

2. JavaScript 기본 문법.

◾ 변수.

타입을 명시하지 않고 var keyword 사용.
- 동적 타입(Dynamic/Weak Type) 언어
- 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입 결정.
변수 이름(형용사, 명사), 함수 이름(동사)로 혼동되지 않도록 사용.
EMAScript 표준에 따라 낙타 표기법(Camelcase) 사용.
- 키워드 공백 문자 포함, 숫자로 시작 X
- 특수 문자 : _, $ 허용

◾ 자료형.

자료형 : 원시 타입(Primitive type), 객체 타입(Object type)
- 원시 타입 : 숫자(number), 문자열형(string), boolean(true, false), undefined(변수가 초기화 되었지만 초기화 되지 않은 경우), null(object, 값이 존재하지 않는 경우.)
- 자동 형 변환(동적 타이핑) : 어떤 자료형이든 전달하고 값을 필요에 따라 변환 가능.
  - 느슨한 규칙이 편리할 때도 있지만 혼란을 야기함.
숫자 : 정수와 실수 구분 X
- 8 bytes의 실수 형태로 처리 : 정수만을 위한 데이터 타입 없음.
- 언더 플로우, 언더 플로우, 0으로 나누는 연산 예외 발생 X
  - Infinity : 무한대를 나타내는 상수. 어떤 수를 0으로 나누거나 Infinity를 연산한 결과.
  - NaN(Not a Number) : 계산식의 결과가 숫자가 아님을 나타내는 상수.
문자열 : 16 bits의 Unicode 문자 사용.
- 문자 하나를 위한 char X
- 작은 따옴표, 큰 따옴표 모두 사용 가능 => 혼합 불가.
- 백틱(`)을 이용한 문자열 표현 가능 => ES6
boolean, null, undefined
- boolean : 비교 연산의 결과가 true 또는 false
  - 비어있는 문자열, null, undefined, 숫자 0은 false로 간주.
- null : 값이 없거나 비어있음을 의미. (프로그램 레벨에서 사용.)
- undefined : 값이 초기화 되지 않았음(정의되지 않음)을 의미. (시스템 레벨에서 사용.)

◾ 변수 호이스팅(Variable Hoisting).

var 키워드 변수는 중복 선언 가능.
호이스팅 : var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특성.
- JavaScripts는 모든 선언문이 선언되기 이전에 참조 가능.
변수의 생성
- 선언 + 초기화 : 두 단계는 한번에 이루어짐.(변수를 등록하고 undefined로 초기화.)
- 할당 : 실제 값 하당.
ES6에서 const, let 등장.

◾ let, const 키워드.

상수 : const
- ECMAScript6 이전까지 상수 지원 X
- ECMAScript6 const 키워드로 상수 지원.
- 선언 위치 : 해당 스코프.
- 재선언 : 불가능.
지역 식별자 : let
- var과 동일하지만 선언 위치가 해당 스코프로 한정.
- 재선언 불가능.

◾ 연산자.

산순, 비교, 논리, 기타 연산자 등 제공
- 기본적으로 Java와 동일한 연산.
- delete : 프로퍼티 제거.
- typeof : 피연산자 타입 리턴.
- void : undefined 값 알려줌.
- in : 프로퍼티가 존재하는지 확인.
- ==(값만 비교), ===(값과 타입 비교)
- !=(값만 비교, !==(값과 타입 비교)

◾ 조건문, 반복문.

조건문 : if, switch
반복문 : while, for

◾ 객체(Object).

이름 : 값으로 구성된 프로퍼티 집합.
- 문자열, 숫자, boolean, null, undefined를 제외한 모든 값.
- 전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가, 삭제 가능.
- 함수는 일급 객체이므로 프로퍼티 값으로 사용 가능.
- 프로토타입(prototype)이라는 프로퍼티 포함.
생성
- 객체 리터럴 : { }를 사용하는 가장 일반적인 방법. 1개 이상의 프로퍼티 추가하여 생성.
- Object 생성자 함수 : new 연산자와 Object 생성자 함수를 호출하여 빈 객체 생성. 빈 객체 생성 후 프로퍼티 또는 메소드 추가하여 객체 완성.
- 생성자 함수 : 동일한 프로퍼티를 갖는 객체 생성 시 템플릿처럼 미리 함수를 만들어 생성.
속성 값 조회
- dot(.) 또는 대괄호([ ])을 사용해 속성값에 접근.
  - 하이픈이 있는 경우 대괄호 사용
  - 대괄호 내에 들어가는 프로퍼티의 이름은 반드시 문자열이여야 함.
  - 객체에 없는 속성에 접근하면 undefined 반환
속성 값 변경, 추가, 제거
- 조회하여 값 동작.
  - 속성이 있는 경우 변경.
  - 속성이 없는 경우 추가.
  - delete를 사용하여 속성 제거.
참조 : 객체는 복사되지 않고 참조
- 원시 타입이 아닌 모든 데이터 타입은 참조 타입
- Object, Array, Date, Error 포함.

◾ 함수.

JavaScript 함수 : 일급(1st class) 객체
- 함수를 변수, 객체, 배열 등에 저장할 수 있다.
- 전달 인자(콜백 함수), 리턴값으로 사용 가능.
프로그램 실행 중 동적 생성 가능.
함수 정의 방법 : 함수 선언문, 함수 표현식, Function 생성자
- 선언문 : function 함수이름(매개변수){}
- 표현식 : var 함수이름 = function(매개변수){}
- 생성자 : var 함수이름 = new Function(매개변수1, 매개변수2, 매개변수n, 함수내용)
함수 호이스팅
- 함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느 곳에서 호출 가능.
- JavaScript 엔진이 스크립트가 로딩되는 시점에 이를 변수 객체에 저장
  - 함수 선언, 초기화, 할당이 한번에 진행.
  - 함수 표현식의 경우 함수 호이스팅이 아닌 변수 호이스팅 발생.
매개변수 : 외부로부터 전달받을 변수.
- 전달하는 값 : 전달 인자(argument)
- 매개변수에 타입 명시 X
- 매개변수와 전달인자의 개수가 일치하지 않더라도 호출 가능.
콜백 함수 : 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수.
- 매개 변수를 통해 전달.
- 전달받은 함수의 내부에서 어느 특정 시점에서 실행.
- 비동기식 처리 모델에서 주로 사용.
- 콜백 함수를 쓸 때는 호출을 하면 안된다!