FRONT-END/JAVASCRIPT

JavaScript - 1

JINGMONG 2021. 12. 7. 01:25

1. javascript 특징

HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍언어

개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어

각 브라우저별 javascript 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리속도가 느린 인터프리터의 단점을 해결

명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀트 패러다임 언어

2. javascript 선언

HTML에서 javascript를 사용하려면 <script> 태그 사용

<script> 태그는 src와 type 속성을 사용하여 선언

src 속성은 외부 자바스크립트 파일을 HTML문서에 포함할 때 사용하며 생략할 수 있다.

type 속성은 미디어 타입을 지정할 때 사용 자바스크립트 코드는 'text/javascript'로 지정

<script> 태그는 HTML 파일 내부의 어느 곳에서나 선언 가능

<head> 안에 위치한 자바스크립트는 브라우저의 각종 입출력 발생 이전에 초기화되므로 브라우저가 먼저 점검함

<body> 안에 위치하면 브라우저가 HTML부터 해석하여 사용자가 빠르다고 느낄 수 있음

시계 구현

Date 내장 객체로 현재 시간을 출력

Data 객체의 toLocalTimeString() 함수를 호출하면 현재 시간을 return

setInterval() 함수를 이용하여 1초마다 현재 시간을 업데이트

3. 기본 문법

변수

타입을 명시하지 않고 var를 사용하여 선언

변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입 결정

변수 이름은 함수 이름과 혼동되지 않도록 유일한 이름을 사용

자바스크립트는 낙타 표기법 사용

변수 호이스팅

var 키워드를 사용한 변수는 중복해서 선언이 가능

호이스팅이란, var 선언문이나 function 선언문 등 모든 선언문이 해당 scope의 처음으로 옮겨진 것처럼 동작하는 특성, 즉 자바스크립트는 모든 선언문이 선언되기 이전에 참조가 가능

상수

변수의 값을 변경하면 안되는 상수와 일변 변수를 구분하고자 명명 규칙을 다르게 하여 사용

표기법 : 모든 문자를 대문자를 사용하고 단어 사이에는 _로 표기

let키워드와 const키워드

  • var : 변수, 전역 스코프, 재선언 가능
  • let : 변수, 해당 스코프, 재선언 불가
  • const : 변수, 해당 스코프, 재선언 불가

연산자

자바스크립트에서 기본적으로 제공하는 약속된 문자의 표현 식

산술연산자, 비교연산자, 논리연산자, 기타 연산자

  • ++
  • —
  •  
    • : 숫자로 값을 반환
  • ~
  • !
  • delete : 프로퍼티를 제거
  • typeof : 피연산자 타입을 리턴
  • void : undefined 값을 알려줌
    • , / , %
    • , -
    • : 값이 문자열이면 문자열을 서로 결합
  • <<
  •  
  •  
  • instanceof : 객체가 특정 객체의 타입인지를 확인
  • in : 프로퍼티가 존재하는지 확인
  • ==
  • !=
  • ===
  • !==
  • &
  • ^
  • |
  • &&
  • ||
  • ?: : 조건에 해당하는 구문을 수행
  • , : 첫번째 구문은 버리고 다음 구문 값을 반환

1. 객체

개요

객체는 이름과 값으로 구성된 프로퍼티의 집합

문자열, 숫자, 불리언, 널, 언디파인드를 제외한 모든 값은 객체

key 와 value로 구성된 프로퍼티들의 집합

자바스크립트의 함수는 일급객체이므로 값으로 사용할 수 있다.

자바스크립트 객체는 프로토타입이라는 특별한 프로퍼티를 포함

생성

  • 객체 리터럴{}를 사용하여 객체를 생성, {}내에 1개 이상의 프로퍼티를 추가하여 객체를 생성
  • 가장 일반적인 방법
  • object 생성자 함수빈 객체 생성 후 프로퍼티 또는 메소드를 추가하여 객체를 완성
  • new 연산자와 함께 Object생성자 함수를 호출하여 빈 객체를 생성
  • 생성자 함수생성자 함수를 이용하면 템플릿처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간단히 생성 가능
  • 동일한 프로퍼티를 갖는 객체 생성 시 위 두 방법은 동일한 코드를 반복적으로 작성

속성 값 조회

객체는 .을 사용하거나 대괄호를 사용해서 속성 값에 접근, 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다.

객체에 없는 속성에 접근하면 undifined를 반환

속성명에 연산자가 포함된 경우 [] 표기법만 접근 가능

속성 값 변경, 추가, 제거

속성 값을 변경할 때는 .이나 대괄호 사용

객체에 값을 할당하는 속성이 없는 경우, 그 속성은 추가됨

delete 연산자를 이용하여 속성 제거

참조

객체는 복사되지 않고 참조된다.

자바스크립트에서 원시 데이터 타입이 아닌 모든 값은 참조타입이다.

참조 타입은 Object, Array, Date, Error를 포함

타입 확인 방법으로는 typeof 연산자가 있다.

분류

2. 함수

선언, 호출

자바스크립트에서 함수는 일급 객체이다

함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전달하는 전달 인자 또는 리턴 값으로 사용가능

함수 정의 방법은 함수 선언문, 함수 표현식, Function 생성자 함수 세가지 방식 제공

// 함수 선언문
function 함수이름(매개변수1, 매개변수2, 매개변수3) {
	// 함수 내용
}

// 함수 표현식
var 함수이름 = function(매개변수1, 매개변수2, 매개변수3) {
	// 함수 내용
}

// Function 생성자 함수
var 함수이름 = new Function("매개변수1","매개변수2", ... ,"매개변수n" , "함수내용");

// 함수 호출
함수이름(매개변수1, 매개변수2, ... , 매개변수n);

함수 호이스팅

함수 선언문의 경우 함수 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능

자바스크립트는 모든 선언을 호이스팅함.

함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 이를 변수객체에 저장한다. 함수 선언, 초기화 할당이 한번에 이루어진다.

함수 표현식의 경우 함수호이스팅이 아니라 변수 호이스팅 발생

매개변수

함수의 정의 부분에 외부로부터 전달받은 변수를 매개변수라 함

함수를 호출할 때 전달하는 값을 전달인자라고 함

자바스크립트에서 함수 정의 시 매개변수에 대한 타입은 명시하지 않는다

함수를 호출 할 때 정의된 매개변수와 전달인자의 개수가 일치하지 않더라도 호출 가능

활용

1부터 매개변수 num까지의 합을 구하는 예제

방식은 달라도 함수 호출 방식은 같다.

// 함수 선언문
function sum1(num) {
		var sum = 0;
		for (var i = 1 ; i<=num ; i++) {
			sum += i;
		}
		console.log(sum);
}
sum1(10);

// 함수 표현식
var sum2 = function(num) {
		var sum = 0;
		for (var i = 1 ; i<=num ; i++){
			sum += i;
		}
		console.log(sum);
}
sum2(10);

// Function 생성자 함수
var sum3 = new Function("num" ,
		"var sum = 0;" +
		"for(var i=1;i<=num;i++) {" +
		"    sum += i;" +
		"}  " +
		"console.log(sum);" );
sum3(10);

콜백 함수

콜백 함수는 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수

일반적으로 콜백 함수는 매개변수를 통해 전달되고 전달 받은 함수의 내부에서 어느 특정시점에 실행

콜백함수는 주로 비동기식 처리 모델에서 사용

<button id="btn">click!!</button>
<script type = "text/javascript">
		var btn = document.getElementById('btn');
		btn.addEventListener('click', function() {
			console.log('Hello SSAFY');
	});
</script>

setTimeout(function () {
		console.log('3초후 실행됩니다.');
}, 3000);