[목차]
01. 자바스크립트
자바스크립트란
💡➡️ html 문서에서 동작을 담당한다.➡️ script 태그 내부에 작성한다.
➡️ 외부 파일을 읽어 들여 실행도 가능하다.
➡️ html은 뼈대, css는 살을 이야기한다면, javascript는 행동(동작)을 이야기한다.
➡️ javascript는 script 태그를 열어 영역을 선언한다.
💡➡️ 웹 페이지에서 동작을 담당하고 있는 객체지향 스크립트 언어이다.➡️ 자바스크립트는 script의 태그를 열어 태그내부에 코드를 작성한다.
➡️ 자바스크립트는 외부 파일을 로드 할 수 있다.
➡️ 자바스크립트 코드는 주로 하단에 배치를 한다. (body 태그 닫는 부분 위에)
특징
💡자바스크립트는 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어입니다.➡️ 컴파일러 언어
- 컴파일 타임에 소스코드 전체 한번에 머신 코드로 변환한 후 실행
- 실행 파일을 생성
- 컴파일 단계, 실행단계 분리
- 실행에 앞서 컴파일은 단 한번 수행
- 실행 속도가 빠름
➡️ 인터프리터 언어
- 코드가 실행되는 단계인 런타임에 문 단위로 한줄씩 바이트코드로 변환한 후 실행
- 실행파일을 생성하지 않음
- 인터프리터 단계와 실행단계 분리X 한줄씩 변환하고 즉시 실행
- 코드가 실행될 때마다 인터프리터 과정 반복 수행
- 코드 실행 속도가 비교적 느림
[코드예제] 기본구조
➡️ 렌더링 : HTML, CSS, 자바스크립트로 작성된 문서를 해석해서 브라우저에서 시각적으로 출력하는 것.
02. 변수
💡
➡️ 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙인 이름입니다.
➡️ 프로그램 언어에서 값을 저장하고 참조(값의 위치)하는 상징적인 이름입니다.
네이밍 규칙
➡️ 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
➡️ 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 한다.
➡️ 숫자로 시작하는 것은 허용하지 않는다.
➡️ 예약어는 식별자로 사용할 수 없다.
선언
👉🏻var, let, const 키워드를 사용합니다.➡️ 선언단계
- 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림
➡️ 초기화단계
👉🏻var course; ➡️ var = undefined- 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화
➡️ GC(garbage collector)
- 애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더이상 사용되지 않은 메모리를 해제하는 기능
[코드예제] var, let, const
<script type="text/javascript"> /** * 변수 선언 시 키워드 : var, let, const * 변수 재할당 가능 : var, let * 변수 재선언 가능 : var * 변수 재할당 재선언 불가 : const */ var name = '홍길동'; let nameMember = '홍길동'; const memberName = '홍길동'; var name = '김철수'; // var 재선언 가능 name = '김미영'; // var 재할당 가능 // let nameMember // let 재선언 불가능 nameMember = '김철수'; // let 재할당 가능 // memberName = '김철수' //const(상수)로 선언되었기 때문에 console.log(name, nameMember, memberName); </script>
호이스팅
👉🏻변수 선언(선언단계와 초기화단계)이 소스코드가 순차적으로 실행되는 런타임 이전단계에서 먼저 실행되어 참조에러가 발생해야 하지만 undefined로 출력되는 자바스크립트 고유의 특징입니다.➡️ 의미 : 끌어 올리다.
➡️ 적용 대상 : var, function (const는 무조건 초기값 넣어줘야 함)
[코드예제] 호이스팅
<script type="text/javascript"> // 함수 : function 키워드 시작하는 함수 선언문 fn(); console.log(memberId, 'memberId'); // 변수 : var 키워드로 시작하는 변수 선언 var memberId; memberId = 'id001'; console.log(memberId, 'memberId'); function fn() { console.log('함수 실행'); } // console.log(memberLevel, '<- memberLevel'); let memberLevel; console.log(memberLevel, '<- memberLevel'); memberLevel = '관리자'; console.log(memberLevel, '<- memberLevel'); // const memberIdNum; 상수는 선언과 초기값이 필수 const memberIdNum = '040101-3456789'; </script>
값과 리터럴
➡️ 값 : 표현식이 평가되어 생성한 결과
➡️ 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(값, 표현식)
표현식과 문
➡️ 표현식 : 값으로 평가될 수 있는 문
➡️ 문 : 프로그램을 구성하는 기본 단위이자 최소 실행 단위
➡️ 토큰 : 키워드, 식별자, 연산자, 리터럴, 세미콜론, 마침표 등 문법적 의미를 가지는 코드의 기본요소
표기법
➡️ 카멜 표기법 : memberId, 주로 변수, 메서드에서 사용
➡️ 파스칼 표기법 : MemberId, 주로 클래스, 생성자에서 사용
➡️ 스네이크 표기법 : member_id, 주로 db컬럼명
➡️ 헝가리안 표기법 : strMemberId
03. 데이터 타입
💡
자바스크립트의 모든 값은 데이터 타입을 갖습니다.
원시타입
➡️ 숫자타입
👉🏻모든 수를 실수로 처리특별한 값 : Infinity, -Infinity, NaN
➡️ 문자열 타입
👉🏻UTF-16 문자 표현작은 따옴표, 큰 따옴표, 백틱(``)으로 감싸서 표현
위의 표현으로 안된 문자열은 키워드나 식별자로 인식
👉🏻문자열 타입은 + 연산자를 활용하여 연결할 수 있다.백틱(``)으로 감싸서 표현식 삽입이 가능하다. ex) ${ }
문자열이 아니더라도 강제적으로 문자열 타입으로 변환된다.
➡️ 불리언 타입
👉🏻주로 조건문에 활용
➡️ undefined 타입
👉🏻var 키워드로 선언된 변수에 암묵적으로 할당되는 값
➡️ null 타입
- 심 타입 ( ES6에서 새롭게 추가 )
➡️ 객체타입
👉🏻
객체, 함수, 배열 등 원시타입 제외 모든 타입
➡️ 테이터타입 확인
👉🏻
typeof : 데이터타입 확인 연산자
- 피연산자의 평가 전 자료형을 나타내는 문자열을 반환
➡️ 데이터타입 변환
[코드예제] 자료형
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자료형</title> <link rel="icon" href="data:,"> </head> <body> <h1>자료형</h1> - 값에 의하여 자료형이 결정된다. <h2>typeof 자료형 확인</h2> - typeof 키워드로 자료형을 확인 할 수 있다. - parser 함수로 자료형을 변환 할 수 있다. <h2>문자형</h2> <script type="text/javascript"> let student = '박소희'; let numToString = String(100); // 명시적 형변환 console.log(typeof student, 'student변수 자료형'); console.log(typeof numToString, 'numToString변수 자료형'); </script> <h2>숫자형</h2> <script type="text/javascript"> let num1 = 100; let num2 = Number('200'); // 명시적 형변환 let num3 = +'300'; // 묵시적 형변환 console.log(typeof num1, typeof num2, typeof num3); let num4 = Number('가'); console.log(num4, '숫자로 형변환 불가 NaN'); console.log(typeof num4, 'NaN의 타입?'); let num5 = 10.34; console.log(parseInt(num5), '소숫점 자리 절삭'); let num6 = -10.34; console.log(parseInt(num6), '소숫점 자리 절삭'); // parseInt() vs Math.floor()-내림 console.log(parseInt(num5), parseInt(num6), '<--parseInt()'); console.log(Math.floor(num5), Math.floor(num6), '<--Math.floor()'); </script> <h2>논리형</h2> - 논리형은 true 혹은 false 값이 담긴다. <script type="text/javascript"> let isBoolean1 = true; let isBoolean2 = false; let isBoolean3 = Boolean(0); let isBoolean4 = Boolean(1); let isBoolean5 = Boolean('가'); let isBoolean6 = Boolean(''); let isBoolean7 = Boolean(NaN); let isBoolean8 = Boolean(null); let isBoolean9 = Boolean(undefined); if (isBoolean5) { console.log(isBoolean5); } else { console.log(isBoolean5); } </script> <h2>null</h2> - 변수는 존재하나, null로 할당된 상태 <br> - null : '메모리에 할당된 공간을 더이상 참조하지 않겠다' 라는 의미 <script type="text/javascript"> let exNull = null; console.log(typeof exNull, 'null의 데이터 타입?'); console.log(typeof exNull == 'null', 'null 비교???'); console.log(exNull == null, 'null 비교???'); </script> <h2>undefined</h2> - 변수는 존재하나(메모리에 할당된 공간), 초기값이 자바스크립트 엔진에 의해 undefined 값을 할당한 상태 <script type="text/javascript"> let exNudefined = undefined; console.log(typeof exNudefined, 'undefined의 데이터 타입'); console.log(typeof exNudefined == 'undefined', 'undefined의 데이터 타입'); </script> </body> </html>
04. 연산자
💡
하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리 연산 등을 수행해 하나의 값을 만듦.
피연산자 ➡️ 연산의 대상 (값)
산술 연산자
➡️ 단항 산술 연산자
👉🏻1개의 피연산자를 산술 연산하여 숫자 값을 만듦부수효과 : 연산 후 피연산자의 값을 변경하는 효과 (증/감 연산자)
➡️ 이항 산술 연산자
👉🏻2개의 피연산자를 산술 연산하여 숫자 값을 만듦
➡️ 문자열 연결 연산자
👉🏻+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자
➡️ 할당 연산자
👉🏻
우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당.
➡️ 비교 연산자
👉🏻
좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환
👉🏻
피연산자의 크기를 비교한 다음 그 결과를 불리언 값으로 반환
➡️ 삼항 조건 연산자
👉🏻
조건식 ? value(참) : value(거짓)
➡️ 논리 연산자
👉🏻
우항과 좌항의 피연산자를 논리 연산
➡️ 쉼표 연산자, 그룹 연산자
👉🏻
쉼표 연산자
왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
👉🏻
그룹 연산자
소괄호로 피연산자를 감싸 괄호로 묶여진 표현식을 가장 먼저 평가하는데 사용
➡️ 그 외 연산자
[코드예제] 연산자
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>연산자</title> <link rel="icon" href="data:,"> </head> <body> <h1>연산자</h1> <h2>산술연산자</h2> - +, -, *, /, % <br> <script type="text/javascript"> let num1 = 5; let num2 = 2; let result1 = 5 + 2; let result2 = 5 - 2; let result3 = 5 * 2; let result4 = 5 / 2; let result5 = 5 % 2; console.log(`result1의 결과값 : ${result1}`); console.log(`result2의 결과값 : ${result2}`); console.log(`result3의 결과값 : ${result3}`); console.log(`result4의 결과값 : ${result4}`); console.log(`result5의 결과값 : ${result5}`); </script> <h2>문자결합연산자</h2> - '문자' + 1 , 1 + '문자' => 문자열 연결 <br> <script type="text/javascript"> let exString = '1'; let num3 = 3; let result6 = exString + num3; let result7 = num3 + exString; console.log(result6); console.log(result7); console.log(`0${+'0'}`); </script> <h2>대입 연산자 및 복합 대입 연산자</h2> - 일반적인 산술연산자를 간소화시켜 쓰는 방식 <br> - =, +=, -=, *=, /=, %=<br> <script type="text/javascript"> let digit = 5; digit += 5; // 10, digit = digit + 5; // console.log(`digit = digit + 5의 결과값 : ${digit += 5}`); // ${digit += 5} 는 자바스크립트 영역이므로 연산된 결과를 문자열로 반환 console.log(`digit = digit + 5의 결과값 : ${digit}`); digit -= 5; // 5, digit = digit - 5; console.log(`digit = digit + 5의 결과값 : ${digit}`); digit *= 5; // 25, digit = digit * 5; console.log(`digit = digit + 5의 결과값 : ${digit}`); digit /= 5; // 5, digit = digit / 5; console.log(`digit = digit + 5의 결과값 : ${digit}`); digit %= 5; // 0, digit = digit % 5; console.log(`digit = digit + 5의 결과값 : ${digit}`); </script> <h2>증감연산자</h2> - ++, -- <br> <script type="text/javascript"> </script> <h2>비교연산자</h2> - 두개의 데이터를 비교하여 결괏값을 논리형으로 받는다. - ==(값만 비교), ===(값과 타입모두 비교), !=, !== <br> <!-- >= , <=, >, < --> <script type="text/javascript"> </script> <h2>논리연산자</h2> - 2개 이상의 결괏값 혹은 비교연산자를 동시에 비교 <br> - and -> 2개 이상의 비교값이 모두 참일 경우 참 <br> - or -> 2개 이상 중 하나라도 참이면 참 <br> - not -> 결괏값의 반대 <script type="text/javascript"> </script> <h2>삼항조건연산자</h2> - 조건식을 비교하여 참일 경우와 거짓일 경우 판별하여 각각의 값을 반환 <script type="text/javascript"> </script> </body> </html>
05. 기타(키보드, 자동완성 세팅 VSCode)
키보드 세팅
💡Keyboard shortcuts ➡️ 키보드 설정
자동완성 세팅
💡User Snippets ➡️ javascript.json 파일 (예시 있음)
tag : #Javascript #기초 #변수 #데이터타입 #연산자
Uploaded by N2T