2023.06.30 - [LG 헬로비전 DX DATA SCHOOL/Frontend] - JavaScript 기초
JavaScript 기초 1 참조
JavaScript 기초
2023/06/30 JavaScript : 웹 페이지(HTML)의 동적 처리를 향상하기 위한 목적으로 탄생함. 1987년 애플사의 HyperCard가 시초임. 자바와 자바스크립트는 사실 완전 다름. 특징 : 스크립트 언어로, HTML처럼 컴
dxdata.tistory.com
2023-07-03
Java Script
C, C++, Go는 Java, Js와는 다르게 운영체제와 직접 소통이 가능하다
// 출력하는 방법
- <body>에 출력 : document.write(덜 급한것), document.writeln(급한것)
- 대화상자에 출력 : alert - modal
- 콘솔에 출력(브라우저 내에서는 볼 수 없고, 브라우저의 검사창이나 IDE의 console에서 확인) : console.log
* 오버헤드 -> 본 프로세스를 하기 전 이동하는 것. -> 오버헤드가 많을 수록 안좋음
//데이터에 이름 붙이기
- global : 블럭 외부에서 선언되어 모든 곳에서 사용 가능한 것
- local : 블럭 내에서 만들어져 블럭 내부에서만 사용 가능한 것
- hoisting : 선언(만들기 전에 사용 가능) -> js 에서만 사용하는 것
var 이름 = 데이터 형태 / -> 지역 변수로 만들어지는데 함수 안에서 만든 것은 함수 외부에서 사용 가능, hoisting 가능
이름 = 데이터 -> global로 만들어지고 hoisting이 가능
let 이름 = 데이터 -> 지역변수로 만들어짐
const 이름 = 데이터 -> 변경이 불가능한 읽기 전용이 된다.
1. 제어문
=> js 코드는 왼쪽에서 오른쪽, 위에서 아래로 순차적으로 수행된다. 특정 블럭으로 분기하거나 반복하도록 해주는 명령어를 제어문이라고 한다.
- branch(분기) :
- 값에 의한 분기: switch(언어를 학습할 때 switch는 항상 확인)
- 조건(true ;or false)에 의한 분기 : if
- loop(반복) :
- 반복 : 반복 마다 기준점으로 돌아온다
- 순회 : 0개 이상의 데이터를 가진 collection을 순차적으로 접근(시작점으로 되돌아와 시작하지 않는다.)
- 기타 :
- 반복을 빠져나오는 것 - break
- 다음 반복으로 넘어가는 것 - continue
- 현재 모듈의 수행을 종료하고 호출한 곳으로 돌아가는 것 - return
2. if
=> 조건에 의한 분기
if(표현식){
표현식이 Truthy 인 경우 수행할 내용
}else if(표현식 1){
이전의 표현식이 Falsy 이고 표현식 1이 Truthy 인 경우 수행할 내용
}...
} else{
이전 모든 표현식이 Falsy 인 경우 수행할 내용
}
- Falsy : false, 0, null, undefined, ""(빈 문자열)
- if는 한번만 가능
- else if 는 0번 이상 무제한 사용 가능
- else 는 없거나 한번만 사용 가능
- 표현식은 변수, 연산식, 리턴 값에 따른 함수 호출이다.
3. switch
- 값에 의한 분기
- 값은 정수와 문자열이 가능
1) 기본형식
switch(정수 나 문자열 표현식){
case 값1 :
()안의 내용이 값1일 때 수행할 내용
case 값2 :
()안의 내용이 값2일 때 수행할 내용
.....
default:
일치하는 내용이 없을 때 수행할 내용
* javascript에서 switch는 fallthrough가 기본이어서 일치하는 값을 만나면 break를 만날때까지 계속 수행.
*정수 나 문자열 표현식에 true를 설정하게 되면 값의 자리에 조건을 설정해서 true인 경우 수행하도록 할 수 있음.
*case의 개수는 제한이 없음.
*default는 생략하거나 한번만 나와야 함.
*if 보다 switch가 동작속도가 빠르다.
-> if는 무조건 순차적이기 때문이다 / switch는 동시에 처리함.
리스트는 시작점 부터 목표지점 까지 순차적으로 이동하지만, array와 같은 switch는 해당 주소로 바로 이동할 수 있기 때문(주소와 상관없이 access 속도가 똑같다.)
- 최근의 언어들의 switch는 과거와는 다르게 break이 없어도 알아서 멈춘다. 반대로 fallthrough를 써줘야 계속 흐른다. -
4. if나 switch 사용할 때 주의할 점
=> 도달할 수 없는 코드를 작성하는 것
ex)
if(score >= 80){
....
}else if(score >= 90){
도달할 수 없는 코드
}
=> 모든 상황에 대한 처리를 해주는 것이 좋다
5. 반복문
- while
while(boolean 표현식){
표현식이 Falsy가 아니면 수행할 내용
}
=> 표현식을 확인하면서 { }의 내용을 반복한다.
- do ~ while
do{
표현식이 Falsy 가 아니면 수행할 내용
}while(boolean 표현식
=> while과 다르게, do while은 무조건 1번은 수행되어야 한다.
- for 반복문
=> while 과 유사한 용도로 사용할 수 있고 객체나 배열을 순회하는 용도로 사용 가능
for(처음 한 번만 수행되는 식; 판별을 위한 표현식; 두번째 반복부터 수행할 식){
표현식이 Falsy가 아닌 경우 수행할 내용
}
for에서 첫번째와 세번째 식의 자리에는 여러 개의 수행문을 작성할 수 있다. 이 경우에는 , 로 구분한다.
-> for 의 개수를 줄일 수 있음.
=> for in
for(임시변수 in 배열 이나 객체){
수행할 문장
}
배열에서는 인덱스가 순서대로 임시변수에 대입이 되고 객체의 경우는 속성이 임시 변수에 대입됩니다.
let ar = ["사이버 가수 윈터", "카리나", "프리스톤 테일"]
for(idx in ar){
console.log(idx); //0, 1, 2 가 출력됨 ->JS만 인덱스가 나옴.
console.log(ar[idx]); // 사이버 가수 윈터, 카리나, 프리스톤 테일
}
- 기타
=> 제어문 안에 제어문 사용하는 것이 가능
break => 반복문을 중단시킴
continue => 아래 문장을 수행하지 않고, 다음 반복으로 넘어감.
6. 함수(function)
1) 개요
-> 별도의 메모리를 할당받아서 수행되는 코드 블럭
-> 목적
- 모듈화 : 프로그램을 용도 별로 적절히 분할 -> 메모리를 효율적으로 이용하기 위해서 사용
이러한 형태에서 함수 단위로 stack을 쪼갤 수 있어 편리하다.
heap은 반영구적이고 이름 없이 저장이 가능하다
main은 영구적 -> 이름과 함께 저장
a = 10이라고 정의하면, 10이라는 값이 메모리에 공간을 차지하고, 그 값은 a 라는 이름으로 가리켜 지고 있다. 따라서 그 10의 값은 다른 변수에 지정이 불가한데 a = null을 해주면, 다른 변수에 지정이 가능하다.
함수가 정의되면 영구적으로 저장되기 때문에, 메모리를 차지하고 지워지지 않는다.
이름이 없으면 반영구적으로 들어가기 때문에 딱 한번 사용하며 지워진다.
-> 종류
- user define function : 사용자 정의 함수
- maker function : 언어나 프레임 워크에서 제공
- 3rd party function : 다른 개발자가 만들어서 제공
hanguel library cannot enroll in python library
=> 사용자 정의 함수 생성과 호출
//이전 방식
function 함수이름(매개변수 나열){
함수 내용 작성
return 데이터 // 상황에 따라 생략가능
}
//최근 권장 방식
let 이나 var 변수이름 = function(매개변수 나열){
함수 내용 작성
return 데이터
}
=> 함수 호출
함수 이름(매개변수 대입) = 함수 실행하는 것과 같음
document.write(내용) : 함수를 호출
document.write : 함수를 참조 - 함수의 내용이 있는 곳의 참조
매개변수(argument, parameter, 인자, 인수)
- 함수를 호출 할 때 넘겨주는 데이터
- 개수 제한은 없고 함수를 만들 때 이름만 기재하면 됩니다. 함수를 호출할 때 데이터를 대입을 해주어야 하는데 뒤에서부터 생략이 가능
- 함수 확인할 때 매개변수를 잘 확인해주어야 함
- JS, Python은 매개변수의 자료형을 기재하지 않기 때문에 이름을 잘 만들어 주어야 함.
위와 같이 예시 코드를 작성해 보았습니다.
저는 불친절 하므로 여러분이 직접 실행해보시길!
함수의 어떤 이름을 처음 봤다면, 반드시 document를 확인해아 함. -> 어떤 매개변수를 사용하고 활용하는지 확인해야함.
당장은 만드는 것은 어려울 수 있습니다만, 이미 만들어진 것을 불러와 사용할 줄만 알면 됩니다!!
return
- 함수가 작업을 수행하고 호출하는 곳으로 돌아가는 제어 명령어
- return 다음에 하나의 데이터를 가지고 돌아갈 수 있습니다.
- return 다음에 데이터를 기재해서 돌아가면 그 결과를 재활용할 수 있다.
파이썬에서 데이터 전처리 함수나 분석 함수는 특별한 경우가 아니면 데이터를 리턴합니다.
전처리 함수에서 데이터 원본에 작업을 수행하는 것은 굉장히 위험한 행동이다.
%절대로 해선 안될 행동
: 할당한 변수를 재할당 하는 행동
pandas 같은 경우는 return이 되는데, 수정당시에는 replace = true(원본을 직접 수정)인 경우 틀리면 새로 원본 데이터를 불러와야 한다.
그러므로, 데이터의 사본을 여러개 만들어서 수정의 실수를 만회할 수 있게 해야한다.
변수하나를 여러번 사용시 -> 결과의 수정을 원할 땐, 처음부터 다시 시작해야 한다.
그러므로 꼭 함수의 document를 확인해서 return 여부 등을 확인해야 한다. return을 하는 이유는 원본을 보호하기 위해서이다.
자바스크립트에서 함수는 일급 객체
- 함수도 하나의 자료형으로 간주됨(함수도 하나의 데이터)
- 함수의 내용을 변수에 대입하는 것이 가능하고 매개변수로 사용하는 것도 가능하고 리턴하는 것도 가능
- 함수의 내용을 변수에 대입하는 이유는 이벤트 처리나 다형성 구현을 위해서 -delegate
- 함수를 매개변수로 받는 이유는 함수에 따라 수행하는 일을 다르게 하기 위해서 -map reduce programming에서 사용(map, filter, reduce)
- 함수를 리턴하는 경우는 closure를 구현하기 위해서임
closure
- 함수 내부에서 함수를 리턴해서 함수 내부의 데이터를 외부에서 변경하는 것
closure라는 용어는 다른 언어에서는 다른 용어로 사용된다는 점.
거의 코딩에서 영웅 임 영웅!
arrow function
=> 함수를 이름없이 생성하는 것.
(매개변수 나열) => {
함수의 내용
}
- 함수를 미리 만들어 놓지 않고 필요할 때 만들어서 사용하는 개념.
- 이벤트 처리를 할 때 주로 이용.
이벤트(사용자나 시스템이 발생시키는 사건) 처리에 사용하는 함수는 이벤트가 발생하지 않으면 필요없는 함수이기 때문이다.
내장 함수(Maker Function)
- 프로그래밍 언어가 제공하는 함수
- javascript에서는 window 객체가 제공하는 함수가 내장 함수로 간주
객체가 소유한 함수는 메서드라고 하는데 메서드는 리시버와 함께 호출해야 하는데 window 객체의 메서드 만은 리시버를 생략하면 window 객체의 메서드가 호출됩니다.
리시버의 제한된 사용을 위해 메서드에 리시버를 정해줌.
- 종류
- alert(메세지) : 모달 대화상자로 메세지를 출력
- confrim(메세지) : 확인과 취소 버튼을 제공하고 확인을 누르면 true가 취소를 누르면 false가 리턴되는 함수
- encoding : 메모리에 저장되는 형태로 만드는 것.
- decoding : 사람이 알아볼 수 있도록 변환하는 것.
encoding 종류
- utf-8
- cp949(ms949) -> windows
- euc-kr -> web
- iso-latin1(8859-1) -> 서유럽 표준(한국어 사용이 안됨)
7. OOP(객체 지향 프로그래밍)
1) Object(객체)
- 프로그래밍에서 존재하는 모든 것은 객체
- 동일한 목적을 달성하기 위해 모인 속성(변수 나 상수)과 메서드(함수)의 집합
- Instance : 클래스를 기반으로 만들어진 객체
마치 아파트 인테리어 처럼 기본적인 구조가 같은 경우가 클래스
프레임 워크, 디벨로퍼 킷, 라이브러리, 패키지 -> 배포하는 단위
인스턴스와 스키마 구조
스키마를 만들지 않으면 관계형, 객체형을 이룰 수 없다.
NoSQL은 가능! -> 항목의 이름을 바꾸어도 가능하긴하다.
객체 지향의 3대 성질
- Encapsulation(캡슐화) : 클래스와 인스턴스를 만드는 것(불필요한 것을 사용하지 않도록 포장하여 가림 => 랩핑)
- Inheritance(상속) = 하위 객체가 상위 객체로 물려받는 것 - 재사용
- Polymorphism(다형성) : 동일한 메세지에 대해서 다르게 반응하는 성질. 사용 편의
ps. 매일 점심시간 마다 주변 식당의 가격에 매번 놀란다.. 요즘 커피도 이찬원짜리는 빽다방, 메가커피말곤 보기도 힘듭니다. 세상은 점점 차가워져만 가지만, 항상 꿈틀거려 오늘도 세상을 따뜻하게 바꿀 꿈을 꿉니다.
'LG 헬로비전 DX DATA SCHOOL > Web Programming' 카테고리의 다른 글
| React 애플리케이션 개발 (0) | 2023.07.31 |
|---|---|
| Django & React (0) | 2023.07.28 |
| JavaScript 기초 3 (0) | 2023.07.04 |
| JavaScript 기초 (0) | 2023.06.30 |
| LG DX DATA SCHOOL 1기 xhtml (0) | 2023.06.29 |
