개인공부용 학습 정리
🚀JavaScript
JavaScript 1에서는 기본적인 문법과 함수 관련...
JavaScript 2에서는 객체에 대해서 작성할 예정...
1. 웹과 JavaScript
사용자와 동적으로 상호작용하는 WEB을 만들기 위해 JavaScript 등장
1) JS 특징
- 스크립트 언어 : 웹 브라우저가 한 줄씩 읽어서 해석
- 서버가 아닌 클라이언트(웹 브라우저)에서 번역한 후 실행
- 동적 바인딩 : 실행할 때 메모리의 크기가 결정됨
- 객체 기반 언어 : 클래스 없이 객체 생성해서 사용 가능
- 플랫폼에 독립적 : 실행파일 만들지 않고 VM 이용
- 많은 라이브러리가 존재
2) JavaScript 작성
- 대소문자를 구분
- 자바스크립트는 줄 단위로 번역해서 실행
- 주석 :
//한줄주석과/*범위주석*/
3) 적용 방법
- Inline : HTML 태그 안에 포함해서 실행
- Internal : HTML 파일 내부에서 <script>태그 안에 작성
- External : 외부에 JavaScript 파일(.js) 만들어서 사용
4) 출력
- body 태그 안에 메시지 출력
- document.write("메시지" 또는 상수 또는 연산식)
- document.writeln("메시지" 또는 상수 또는 연산식)
- writeln은 줄바꿈, 호출할 때마다 바로바로 출력
- 대화상자에 메시지 출력
- alert("메시지" 또는 상수 또는 연산식)
- 콘솔에 출력
- console.log("메시지" 또는 상수 또는 연산식)
2. JavaScript 문법
1) 데이터 타입
- Number : 숫자
- String : 문자열
- boolean : true or false
- undefined : 데이터가 존재하지 않는 이름
- null : 가리키는 데이터가 없는 경우
2) 선언
- 전역데이터 (global)
- 만들면 아무곳에서나 사용할 수 있는 데이터
- 변수명 = 값
- hoisting 이 가능
- 지역데이터 (local)
- 만들면 자신의 영역(블럭내부)에서만 사용 가능
- var 변수명 = 값
- hoisting이 가능하고 값 변경할 수 있는 형태
- 함수 안에서 만든 것은 함수 외부에서 사용 가능 (global 역할)
- let 변수명 = 값
- hoisting이 불가능하고 값 변경할 수 있는 형태
- const 변수명 = 값
- 값을 변경할 수 없음, 읽기전용
호이스팅(hoisting)이란?
선언(대입연산자가 들어가는 이름을 만들기) 전에 사용이 가능하도록 유효범위의 최상단으로 올려주는 것. javascript에서만 가능
3) 배열
- 동일한 형태를 갖는 데이터들의 모임
- 선언방법
let 이름 = [ 값1, 값2, 값3, ... ]
let 이름 = new Array(값1, 값2, 값3, ...)
let 이름 = new Array(개수) //저장할 공간만 확보 4) 연산자
- 할당 연산자 : = 오른쪽 데이터를 왼쪽 이름이 가리킬 수 있게 하는 연산자
- 산술 연산자 : +, -, *, /, %
- 증감 연산자 : ++, -- 정수변수에서만 사용 가능
- 비교 연산자 : >, >=, <, <=, ==, != 논리연산자(bool로 return)
- 산술 비트 연산자 : 2진수로 변경 후 비트 단위 연산
- ~, ^, &, | : 1의 보수, XOR, AND, OR
- <<, >> : 왼쪽으로 밀어주고 0으로 채움 오른쪽으로 밀어주고 최상위비트로 채움
- 비트 논리 연산자 : !, &&, ||
- 복합 할당 연산자 : 변수명 연산자=데이터 ex) a += 1
- 삼항 연산자 : bool return 되는 조건식 ? 값1 : 값2
- 조건식이 true이면 값1, false이면 값2
- JavaScript에만 존재하는 연산자
- == : 데이터 종류 상관 없이 값만 비교 ex) 12=="12" true
- === : 데이터 종류도 함께 비교 ex) 12==="12" false
- ??(Nullish Operator)
- 왼쪽 데이터가 null 또는 undefined면 오른쪽 데이터를 대입
- ex) let r = 데이터1 ?? 데이터2
- Falsy : false로 간주하는 것
- 0, null, undefined, ""(빈 문자열)
3. JavaScript 제어문
1) branch(분기)
- IF (조건에 의한 분기)
if (조건식1) {
조건식1이 true 인 경우 수행할 내용
}
else if (조건식2) {
조건식1이 false 이고 조건식2가 true인 경우 수행할 내용
} ...
else {
모든 조건식이 false 인 경우 수행할 내용
}- Switch (값에 의한 분기)
- JavaScript 에서 switch는 fallthrough 가 기본
- 일치하는 값 만나도 break 만날 때까지 계속 수행
- 표현식에
true를 쓰면 값 자리에 조건을 설정해 true일 때 수행하도록 가능 - case 개수는 제한이 없고 default는 생략하거나 1번만 가능
switch (정수나 문자열 표현식) {
case 값1 :
표현식이 값1일 때 수행할 내용
case 값2 :
표현식이 값2일 때 수행할 내용
...
default :
일치하는 값 없을 때 수행할 내용
}2) loop(반복)
- While
while (boolean 표현식) {
표현식이 falsy가 아니면 수행할 내용
}- do~while
- do~while은 반드시 1번은 수행
do {
표현식이 falsy가 아니면 수행할 내용
}
while (boolean 표현식);
- For
- while과 유사한 용도로 사용
- 객체나 배열을 순회하는 용도로 사용 가능
for (초기문; 조건문; 증감문){
조건문이 falsy가 아닐 경우 수행할 내용
}
for (임시변수 in 배열이나 객체) {
순회하며 수행할 내용
}
for (임시변수 of 반복가능한 객체) {
순회하며 수행할 내용
}
3) 기타
- 제어문 안에 제어문 사용하는 것 가능
- break : 반복문을 종료
- continue : 다음 반복문을 수행
4. JavaScript 함수
1) 사용자 정의 함수
- 사용자 정의 함수 선언 (생성)
function 함수이름 (매개변수 나열) {
함수 내용 작성
return 데이터
}
let/var 변수이름 = function(매개변수 나열) {
함수 내용 작성
return 데이터
}- 함수 호출 (실행)
함수이름(매개변수 대입)- 함수 이름만 기재하는 것은 함수를 참조하는 것
- 매개변수 자료형 기재하지 않으므로 잘 확인하고 매개변수 이름도 잘 만들어야함
- JavaScript에서 함수는 일급객체
- 함수도 하나의 자료형으로 간주됨
- 함수의 내용을 변수에 대입하는 것이 가능
- 이벤트 처리나 다형성(polymorphism) 구현을 위해 (delegate)
- 매개변수로 사용하는 것도 가능
- 함수에 따라 수행하는 일 다르게 하기 위해
- map reduce programming 에서 사용 (map, filter, reduce)
- 리턴하는 것도 가능
- 함수를 리턴하는 경우 대부분은 closure 구현을 위해
- closure : 함수 안에서 함수 리턴해서 함수 내부 데이터를 외부에서 변경하는 것
일급객체(First-class Object)란?
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
함수에 인자로 넘기기, 수정하기, 변수에 대입하기 같은 연산 지원할 때 일급객체 라고함
- 화살표 함수(Arrow Function)
- 함수를 이름 없이 생성하는 것 (lambda처럼)
- 함수를 미리 만들어두지 않고 필요할 때 만들어서 사용하는 개념
- 이벤트 처리를 할 때 주로 이용
- 이벤트가 발생하지 않으면 필요없는 함수이기 때문에
//매개변수 한개인 경우 소괄호 생략 가능
(매개변수 나열) => {
함수 내용 작성
}2) 내장함수 (Maker Function)
- 프로그래밍 언어가 제공하는 함수
- JavaScript에서는 window 객체가 제공하는 함수를 내장함수로 간주
- 객체가 소유한 함수는 Method. Method는 Receiver와 함께 호출해야함
- window객체의 Method만은 리시버 생략이 가능함
- 관련 함수
- alert(메시지) : Modal 대화상자로 메시지를 출력
- confirm(메시지) : 확인, 취소 버튼을 제공하고 확인은 true, 취소는 false가 리턴
- encodeURI(), decodeURI() : encoding, decoding 등..
3) 3rd party function
- 다른 개발자가 만들어서 제공해주는 함수
잘 봤습니다. 좋은 글 감사합니다.