JS 강좌 정리
2024-12-18
1.JS(JavaScript)개요
-java 언어와 무관.
-서버에 저장하지만 웹브라우저에서 실행됨.
웹브라우저에는 2가지 엔진
a.html 랜더링하는 엔진
b.JS 실행하는 엔진(크롬: v8)
구글에서 V8엔진을 가진 서버를 만듬: node.js
클라이언트(웹브라우저) 서버(node.js)
v8 v8
현재는 웹브라우저 및 서버(node.js)에서도 JS를 실행시킬 수 있다.
-표준화된 JS(2015년)
=⇒ ECMAScript6
=⇒ 표준화 안된 JS는 ECMAScript5 이다.
2.JS 특징
-인터프리터 언어(컴파일 없이 한 줄 씩 실행)
-변수선언시 데이터 타입 지정 안함.
-대소문자 구별함.
-웹 브라우저 및 서버(node.js)에서 실행
-html에 포함되어 JS가 실행됨.(
-java 언어 처럼 일반적인 프로그램언어가 가진 특징을 모두 갖음
(데이터 종류, 변수, 연산자, 제어문(조건문, 반복문), 클래스, 함수(메서드역할), …)
-JS 주석문은 자바와 동일
//한줄 주석문
/*
멀티 주석문
*/
-웹브라우저의 console 값 출력 방법
console.log(값, 값2, …);
3.html에 JS 설정하는 방법
-
1) 내에
예>
2) 내에
예>
//html 태그
…
..
3)외부파일로 설정 + 내에
test.js
예>
4.식별자(identifier)
-개념: JS 코드내의 단어 의미.
-대소문자 구별함.
-첫글자는 반드시 영문자 또는 _ 또는 $ 만 지정 가능. 이후에는 숫자지정 가능.
-자바처럼 시스템 정의 식별자(예약어, 키워드)도 있고
사용자 정의 식별자(변수명, 상수명, 함수명, 클래스명)도 가능하다.
변수명: 모두 소문자 권장
상수명: 모두 대문자 권장
함수명: 모두 소문자 권장
클래스: 첫글자 대문자
4.데이터 종류(외우기)
1)기본 데이터형
-수치 데이터: 정수와 실수 포함.(Number 객체가 관리)
리터럴 표현: 10, 3.14
-문자 데이터: 문자와 문자열 포함.(String 객체가 관리)
리터럴 표현: ‘홍길동’ 및 “홍길동” 모두 가능한 표현법이다.
-논리 데이터: 참/거짓 (Boolean 객체가 관리)
리터럴 표현: true, false
단, JS는 true/false 및 다른 값도 논리값으로 사용이 가능하다.☆
결국 true/false 및 다른값도 조건문 및 논리연산자(&&, ||, !) 사용이 가능하다.
예> if 문 밎 100 && 200
*false 로 처리되는 값
-0
-””
-null
-undefined
-NaN
위 5가지 이외의 값은 true로 처리될 수 있다.
예> 10, “홍길동”
-undefined: 변수가 선언 후 초기화 안된 상태.(Object 객체가 관리)
-null: 변수가 선언 후 초기화 된 상태인데 값 없음을 의미.(Object 객체가 관리)
-NaN: Not a Number (Number 객체가 관리)
일반적으로 문자열형태의 숫자를 진짜 숫자로 변경할 때 발생될 수 있음.
자바: Integer.parseInt(”10”); ⇒ 10
JS: Number.parseInt(”10”) ⇒ 10
Number.parseInt(”홍길동”) ⇒ NaN
2)참조 데이터형
-배열(객체): [값, 값2, ..]
-JSON(객체): JSON(JavaScript Object Notation)
{key:value, key:value, …}
-함수(function)(객체): 자바의 메서드 기능.(람다 표현식
예> Function f = (n)⇒ n+20;
Predicate p = 람다표현식;
list.stream().filter(p)
데이터타입 변수명 = 람다;
function 함수명(변수, …){
문장
return 값;
}
함수명(값, ..)
=⇒ JS의 함수는 데이터로 처리된다.
따라서 변수에 저장하거나 리턴값으로 사용하거나 함수호출시 인자값(arguments)으로 사용이 가능하다.☆
위 3가지 특징을 갖는 함수(객체)를 일급객체(first-class)라고 부른다.
일급객체 프로그램언어: JS, python, 자바(람다표현식)
-클래스(class): 자바의 접근지정자는 지원안됨.
문법: class 클래스명{
//생성자
//메서드
}
new 클래스명();
5.typeof 연산자
- 용도: 데이터 타입을 알수 있음.
- 문법:
typeof 값 <== 문자열로 데이터타입을 반환.
6.변수 ( variable )
- 변수 용도
- 데이터 저장
- JS 변수 특징
- 데이터형(타입)을 지정하지 않음.
결국 임의의 변수에 저장하는 데이터타입을 제한할 수 없다.
즉 하나의 변수에 모든 데이터를 저장할 수 있음.
( 개발자 입장에서 매우 안좋다. 해결: TypeScript 등장 )
- 문법 2가지
가. var 키워드 이용
-
OLD 버전
-
문법:
var 변수명; // 변수 선언, undefined 저장됨
변수명=값; // 변수 초기화``` var 변수명=값; // 변수 선언 및 초기화 ``` -
특징: 중복가능.
함수 스코프를 따른다.( 함수에서 사용하는 {} 안에서 선언하면 밖에서는 사용 불가.
다른 문법(if,for)에서 사용하는 {} 안에서 선언하면 밖에서도 사용 가능 )
나. let 키워드 이용 ( 권장 )
-
ES6
-
문법:
let 변수명; // 변수 선언, undefined 저장됨
변수명=값; // 변수 초기화``` let 변수명=값; // 변수 선언 및 초기화 ``` - 특징: 중복 불가 블럭 스코프를 따른다. ( 자바와 동일하게 함수 및 다른 문법(if,for)에서 사용하는 {} 안에서 선언하면 밖에서는 사용 불가.)
7.기본형 변수 vs 참조형 변수
- 기본형 변수
- 기본형 데이터를 저장하는 변수 예>
let n = 10; let n2= n; n2= 20; n2를 변경하면 원래값 n 은 영향이 없다.
- 참조형 변수
-
참조형 데이터를 저장하는 변수
예>
let n2 = [10,20,30];
let n3 = n2;
n3[0]=100;
n2와 n3은 같은 주소값을 갖는다.
따라서 n3 값을 변경하면 원래값 n2도 영향을 받는다.
8.상수
- ES6
- 문법: const 상수명 = 값;
- 특징:
값 변경이 불가
상수명 중복 불가
블럭스코프
Front-end 프레임워크( React.js(facebook), Vue.js(개발자), Angular(google) )에서 매우 많이 사용됨.// 상수 주의할 점 const m =[10,20,30]; m[0]=100; // 배열의 요소값 변경은 가능. m에 저장된 주소값이 변경되는 것이 아니기 때문이다. // 따라서 JS는 m 변수가 변경되었다고 생각하지 않는다. console.log(m) // m =[1,2,3]; //Assignment to constant variable, m에 저장된 주소값이 변경되기 때문이다. // 따라서 JS는 m 변수가 변경되었다고 생각하기 때문에 에러가 발생된다.
9.연산자
가. 산술연산자
+
-
*
/ : 소수점까지 출력
% : 나머지
문자열로 된 숫자와의 연산이 가능하다.
즉 + 제외한 나머지 연산자는 자동으로 형변환 되어 연산이 된다.
예> "10" + 3 <== 문자열로 연결
"10" - 3 <== 연산됨
"10" * 3 <== 연산됨
"10" / 3 <== 연산됨
"10" % 3 <== 연산됨
나. 대입 연산자
a=b;
a += b;
a -= b;
a *= b;
a /= b;
a %= b;
다.비교연산자
-실행결과는 논리값(true/false)
a == b; // 값만 비교, equal 연산자
a != b;
a > b;
a >= b;
a < b;
a <= b;
a === b; // 값과 데이터타입 모두 비교, identical 연산자, 권장
a !== b;
undefined 비교할 때는 반드시 === (identical)를 사용해야 된다. 이유는 실제값이 null 일지라도 undefined와 == 비교하면 true값이 반환되기 때문이다.
라.논리 연산자
&& (and)
|| (or)
! (not)
JS에서는 true/false가 아닌 임의의 값도 논리값으로 사용될 수 있다.
-false로 사용되는 5가지 값 (이외의 값은 모두 true로 사용됨)
0, “”, null, undefined, NaN
-논리 연산자 사용시 true/false 가 아닌 임의의 값도 사용이 가능하다.
값1 && 값2 : 중요 (react.js에서 매우 많이 사용됨)
값1 이 참이면 값2가 반환되고
값1 이 거짓이면 값1이 반환된다.
예>
console.log(10 && "홍길동"); // 홍길동
console.log(NaN && "홍길동"); // NaN
값1 || 값2 :
값1이 참이면 값1가 반환되고
값1이 거짓이면 값2가 반환된다.
예>
console.log(10 || "홍길동"); // 10
console.log(NaN || "홍길동"); // 홍길동
마. 증감 연산자(증가 연산자, 감소 연산자)
-증가 연산자
++n; //전치
n++// 후치
-감소 연산자
- -n; // 전치
n- -; // 후치
-주의할 점
다른 연산자와 같이 사용할 때는 전치/ 후치에 따라서 결과값이 달라질 수 있다.
예>
int n= 10;
int result = ++n; // result값이 11, 먼저 n 값이 증가되고 나중에 result에 할당.
int result = n++; // 먼저 result에 할당되고 나중에 n 값이 증가
바.3항 연산자
문법: (조건식)?참:거짓;
중첩가능
10.문장
-문장 종류
실행문: 순차문
제어문 - 조건문(단일 if 문, if~else문, 다중 if문, switch문 및 break)
반복문(for문, while문, do~while문, foreach 문)
-break
-continue
비실행문: 주석문
//
/ ~ /
11.객체 종류 (**)
- 데이터 관련 객체
- 문자열 객체 ( String ): String객체생성방법, 메서드 종류
- 수치 객체 ( Number ) : Number객체생성방법, 메서드 종류
- 날짜 객체 ( Date ) : Date객체생성방법, 메서드 종류
- 불린 객체 ( Boolean ): Boolean객체생성방법, 메서드 종류
==> 값이 없거나 0, -0, null, false, NaN, undefined, 빈 문자열 ("")이라면 객체의 초기값은 false가 됩니다.
이외의 값은 true로 된다.
- 배열 객체 ( Array ) : Array객체생성방법, 메서드 종류
==> 자바의 ArrayList 유사하다.
JS는 크기변경이 가능.
JS는 저장 데이터 종류에 무관.
==> spread 연산자 (***********************)
문법: let x = [...배열];
- JSON 객체
==> 문법: { key:value, name:value }
==> 특징:
value 값이 JS의 모든 데이터 가능하다. ( 기본형 및 참조형(배열,JSON,함수,클래스))
value값 접근은 .(dot) 또는 연관배열 사용 가능. ( 연관배열의 특징은 변수로 사용 가능 )
value값 지정시 변수 사용이 가능. ( 만약에 key값과 value 값이 동일하면 key만 지정한다.)
예> let name="홍길동";
{name:name } ==> { name }
key값도 변수 사용이 가능. [변수] 문법.
예> let xxx = "age";
let yyy = "address";
let person={
[xxx]:20,
// address1:"서울",
// address2:"부산",
[yyy+"1"]:"서울",
[yyy+"2"]:"부산",
..
}
JSON--> 문자열
JSON.stringify(json);
문자열--> JSON
JSON.parse(str);
spread 연산자 (***********************)
문법: let x = {...json};
//1. JSON 복사
let x = {name:"홍길동",age:20};
let copy_x = {...x};
console.log(x, copy_x);
//2. 기존 JSON에 값 추가 (병합)
let x2 = {name:"홍길동",age:20};
let add_json = {address:"부산"};
let new_json = {...x2, ...add_json}
console.log(x2, add_json, new_json);
//3. 수정
let x3 = {name:"홍길동",age:20, address:"부산"};
let update_json = {name:"이순신",age:40};
let new_json2 = {...x3, ...update_json}
console.log(x3, update_json, new_json2);
- Object 객체
Object.keys(json) <=== JSON의 key값을 배열로 반환.
Object.values(json) <=== JSON의 value값을 배열로 반환.
Object.entries(json) <==== [key, value]쌍으로 반환
- 웹브라우저 관련 객체 ( Browser Object Model: BOM )
- Window 객체 : 웹 브라우저의 창(윈도우)을 관리하는 객체. ( 전역객체 )
https://developer.mozilla.org/ko/docs/Web/API/Window - Screen 객체 : 웹 브라우저의 화면(너비,높이)을 관리하는 객체.
https://developer.mozilla.org/en-US/docs/Web/API/Screen - Navigator 객체: 웹 브라우저을 관리하는 객체.
https://developer.mozilla.org/ko/docs/Web/API/Navigator - History 객체 : 웹 브라우저의 뒤로/앞으로 관리하는 객체.
https://developer.mozilla.org/ko/docs/Web/API/History - Location 객체: 웹 브라우저의 URL 항목을 관리하는 객체.
https://developer.mozilla.org/ko/docs/Web/API/Location
==> 특징: 웹 브라우저를 open하면 5개의 BOM 객체가 자동으로 생성이 된다.
예> let window = new Window();
let screen = new Screen();
let navigator = new Navigator();
let history = new History();
let location = new Location();
screen, navigator, history, location 는 Window 객체의 속성으로 되어 있음.
따라서 원래는 window.screen, window.navigator, window.histroy, window.location 써야 되는데
Window객체는 전역객체이기 때문에 window 속성을 생략할 수 있다.
- html문서 관련 객체 ( Document Object Model: DOM )
- Document 객체 ( html 문서를 관리하는 객체 )
특징: 웹 브라우저에서 html문서를 랜더링하면 자동으로 Document 객체가 자동 생성된다.
예> var document = new Document();
document 는 Window 객체의 속성으로 되어 있음.
따라서 원래는 window.document 써야 되는데
Window객체는 전역객체이기 때문에 window 속성을 생략할 수 있다.
- 함수 ( function )
1)역할
- 기능 처리 ( 자바의 메서드 역할 담당 )
- JSON객체 또는 클래스안에서 함수가 정의되면 메서드(method)라고 부른다.
2)함수 작성 방법 2가지
가. 함수 선언식 ( 이름있는 함수)
문법:
함수명();
function 함수명([변수,...]){
문장;
[return 값;]
}
함수명();
특징: JS 실행전에 생성된다.
따라서 함수정의전에 호출이 가능하다.
나. 함수 표현식 ( 이름없는 함수 )
문법:
변수명(); // 불가
변수명 = function([변수,...] ){
문장;
[return 값;]
};
변수명();
변수명이 함수명 대신 사용된다.
특징: JS 실행할때 생성된다.
따라서 반드시 함수 정의 후에 호출이 가능하다.3)함수 특징
-반드시 호출해야 된다.(예> 함수명())
함수가 수행 후에는 반드시 호출한 곳으로 돌아온다.
-호출할 때 인자값(여러개 가능)을 설정할 수 있고
돌아올 때는 리턴값(하나만 가능)이 존재할 수 있다.
-호출할 때 인자값의 갯수와 파라미터 갯수가 달라도 가능하다.☆
예> function fun(n,n2,n3){}
fun();
fun(10);
fun(10, 20);
-인자값이 더 적은 경우에는 함수의 파라미터(변수)에는 undefined가 저장된다.
이때 파라미터에 초기값을 설정할 수 있다.(default 파라미터(초기화 파라미터)라고 부른다.)
예> function fun(n=초기값,n2=초기값,n3=초기값){}
fun();
fun(10,20,30);
fun(10)
-인자값이 더 많은 경우에는 전달되는 인자값이 소실된다. 소실되는 인자값을 배열로 전달 받을 수 있다.(rest 파라미터(rest 연산자 이용), 가장 마지막 파라미터에서 사용됨)
예> function fun(n, …n2){}
fun(10);
fun(10,20);
fun(10,20,30);
-인자값으로 배열의 요소를 전달할 때 spread 연산자 사용 가능.
예> function fun(n, n2){}
let arr=[10,20];
//fun(arr[0], arr[1]);
fun(…arr);
4)함수 기능에 따른 4가지 형태
가.파라미터 없고 리턴값 없는 형태
나.파라미터 있고 리턴값 없는 형태
다.파라미터 없고 리턴값 있는 형태
라.파라미터 있고 리턴값 있는형태
5)JS의 함수는 일급객체(first-class)이다.
일급객체의 핵심개념은 JS의 함수를 데이터로 처리한다는 것이다.☆
따라서 다음과 같은 특징을 갖는다.(일급객체 특징)
가. 함수를 변수에 저장할 수 있다.
나. 함수를 함수 호출시 인자값으로 사용할 수 있다.(예> 콜백함수)
다. 함수를 함수의 리턴값으로 사용할 수 있다.(예> 중첩함수)
13.arrow 함수☆(자바의 lambda 와 비슷, → (thin arrow))
-⇒(fat arrow)
-함수선언식 및 함수 표현식 모두 arrow로 표현이 가능함.
-default 파라미터 및 rest 파라미터 사용가능
-다음과 같은 4가지 형태의 arrow 함수가 제공된다.
가.파라미터 없고 리턴값 없는 형태
나.파라미터 있고 리턴값 없는 형태
다.파라미터 없고 리턴값 있는 형태
라.파라미터 있고 리턴값 있는형태
14.generator 함수
1)문법
function* 함수명(){
문장1;
yield [값]
문장2;
문장3;
}
2)특징
-함수를 호출하면 함수가 실행되지 않고 Generator 객체를 반환한다.
-함수를 실행하려면 next() 메서드를 호출해야 된다.
-함수 블럭내의 실행문을 분할해서 실행할 수 있다.☆
분할 방법은 yield 키워드를 사용한다.
-yield 사용시 값을 지정할 수 있따.
next() 호출시 yield에서 설정한 값을 얻을 수 있다.
Json 표현식을 반환함. {value:값, done:true|false}
예> yield 값
-generator 중단하기
=⇒ return() 메서드 사용
3)활용
-대용량 데이터 처리시 한번에 처리하는 것이 아니고 단계적으로 처리할 때 주로 사용됨.(머신러닝, 딥러닝)
입력 ——→ AI(머신러닝, 딥러닝) ——→ 출력
