⏰ 2024.11.13 (D+25)
1. Javascript(JS) 정의란?
📌 정의 ]
- 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어
- 자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부른다.
- 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행
- 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행 가능
➕ Javascript의 장점
- HTML/CSS와 완전히 통합 가능
- 간단한 일은 간단하게 처리 가능
- 모든 주요 브라우저에서 지원하고, 기본 언어로 사용
2. Javascript 변수 선언
📌 중요 ]
- 자스(ES5스펙)에서는 대소문자를 구분
- 하나의 명령행이 끝나면 ;로 명령의 끝을 표현
- 자스에서는 모든 데이타가 객체
- 자스에서는 변수에 넣은 값에 따라 그 변수의 자료형이 결정
- 변수 선언 : var라는 키워드 사용
- 자바스크립트의 자료형은 Primative 타입(기본 자료형)과 Object(객체) 그리고 Function
- Primative 타입은 string, number (en-US), bigint (en-US), boolean, undefined, symbol 등
📢 변수 선언방법
var 변수명;
📢 변수 선언 예시 📖
var num; //undefined는 하나의 자료형이자 값이다(변수 선언후 초기화 전) //변수의 값이 정의가 안됬다라는 의미 console.log('num의 값:%s,num의 타입:%s',num,typeof num); num =100; console.log('num의 값:%s,num의 타입:%s',num,typeof num); num =3.14; console.log('num의 값:%s,num의 타입:%s',num,typeof num); num =new Number(1000); console.log('num의 값:%s,num의 타입:%s',num,typeof num); num =true; console.log('num의 값:%s,num의 타입:%s',num,typeof num); num ='자바스크립트'; console.log('num의 값:%s,num의 타입:%s',num,typeof num); num = new String('자바스크립트'); console.log('num의 값:%s,num의 타입:%s',num,typeof num); var nullvar = null; //null은 하나의 값으로 참조하는 객체가 없다라는 의미 //자료형으로는 object 타입에 해당.
2. Class Less 객체 리터럴
📌 중요 ]
- var obj = {};//new Object()와 같다 {}는 객체를 표현하는 객체 리터럴
- 리터럴 : 자바스크립트에서 값을 표현하는 방식중 하나
- 즉 리터럴은 값 그 자체를 표현
예시 📖]
var num = 100;//100은 숫자 리터럴
var str = '안녕'; ''혹은 ""은 문자열값을 표현하는 리터럴.'안녕'는 문자열 리터럴
var b = true; true는 불리언 리터럴
var obj ={} {}중괄호가 객체를 표현하는 리터럴 {}는 객체 리터럴
3. 리터럴 타입 및 데이터의 자료형
📢 실수 & 정수의 리터럴 타입 ]
- 실수나 정수 리터럴(예 : 100, 3.14 등) : number타입
- new Number() : object타입
- true,false : boolean타입
- new Boolean() : object타입
- 문자열 리터럴('HELLO' 혹은 "안녕") : string 타입
- new String() : object타입
⭐자바스크립트의 데이터의 자료형
Primative 타입(string,boolean,number,symbol 등)
object타입
function타입
- 단, 생성자 함수를 이용한 객체 생성은 무조건 object 타입이다
- 변수 선언후 객체를 할당하지 않은 경우 : undefined 타입
- {}(객체 리터럴) : object 타입. new Object()의 JSON 표기법
- var f= function(){}(함수 리터럴). new Function()의 JSON 표기법
- f는 function타입
4. 상수와 리터럴의 차이
💡 상수와 리터럴의 차이점 ]
- 상수는 값이 변하지 않는 변수
- 리터럴은 변수에 넣는 변하지 않는 데이터를 의미 즉 데이타 자체
- const NUM = 100;
- 여기서 NUM는 상수이고, 100은 숫자 리터럴이다.
- 코드 상에서 데이터를 표현하는 방식을 리터럴이라 한다
📢 var를 붙인 경우와 붙이지 않은 경우의 차이점
https://www.w3schools.com/js/js_hoisting.asp
추가 : var를 붙인 경우와 붙이지 않은 경우의 차이점
var를 붙이면 호이스팅이 일어난다
(호이스팅 : 변수의 스코프안에서 최상단으로 변수 선언코드가 올라간다⬆️)var를 붙인 경우와 붙이지 않은 경우의 차이점 예시 📖 ]
- console.log(nonHoistVar);//Uncaught ReferenceError: nonHoistVar is not defined
- nonHoistVar = '호이스팅 되지 않는다';
- console.log(nonHoistVar);//정상적으로 출력
5. JavaScript 기본 데이터 타입
⭐ JavaScript 기본 데이터 타입
1. String (문자열)
- 문자열로도 알려진 일련의 텍스트
- 문자열임을 나타내기 위해 인용부호와 함께 사용let myVariable = 'Bob';2. Number (숫자)
- 숫자 데이터 타입은 인용부호 없이 숫자 값을 표시let myVariable = 10;3. Boolean (불리언)
참/거짓 값을 나타내며, true와 false라는 특별한 키워드를 사용
인용부호는 필요 ❌let myVariable = true;4. Array (배열)
여러 값을 하나의 단일 참조에 저장할 수 있는 데이터 구조
배열의 각 요소는 다음과 같이 참조 가능let myVariable = [1, 'Bob', 'Steve', 10]; 예를 들어, myVariable[0], myVariable[1] 등으로 각 요소에 접근 가능5. Object (객체)
기본적으로 모든 것을 포함하는 데이터 타입
JavaScript에서 모든 것은 객체로 간주되며 변수에 저장 가능let myVariable = document.querySelector('h1');
6. JavaScript 기본 연산자 정리
⭐ JavaScript 기본 연산자 정리
1. 더하기 (+)
두 수를 더하거나, 두 문자열을 하나로 연결합니다.6 + 9; // 숫자 더하기 "Hello " + "world!"; // 문자열 연결2. 빼기 (-), 곱하기 (*), 나누기 (/)
각각 빼기, 곱하기, 나누기 연산을 수행합니다. JavaScript에서 곱하기는 *를 사용합니다.9 - 3; // 빼기 8 * 2; // 곱하기 9 / 3; // 나누기3. 할당 (=)
값을 변수에 할당할 때 사용합니다.let myVariable = 'Bob';4. 동등 (===)
두 값이 서로 같은지 테스트하며, 결과로 true 또는 false를 반환합니다.let myVariable = 3; myVariable === 4; // false 반환5. 부정 (!), 다름 (!==)
! 연산자는 논리적으로 반대 값을 반환합니다 (true는 false로, false는 true로).
!== 연산자는 두 값이 같지 않은지 테스트let myVariable = 3; !(myVariable === 3); // false 반환, myVariable은 3과 같기 때문 myVariable !== 3; // false 반환, myVariable이 3이므로
7. JavaScript 연산자 종류 및 우선순위
1] 산술 연산자 +,-,*,/,%
⭐ 우선순위 : *, /, % > +, -
console.log("[산술 연산자]"); console.log('3 % 5 * 2 + 10 / 5는 %d',3 % 5 * 2 + 10 / 5);2] 비교 연산자 : >, >=, <, <=, ==, !=, ===, !==
⭐ 우선순위가 모두 동일
- 조건식에서 0이나 null이나 false면 false(0)으로 처리
- 그 이외 모든값은 true(1)로 판단
- 기타 산술식등에서 true는 1,false는 0으로 변환되어 실행
console.log("[비교 연산자]"); //자스에서는 문자열 대소 비교가 가능하다 console.log("가나다" >= '가나다');//자바 X,자스 O(내부적으로 한자씩 코드값으로 비교) console.log(3 > 9 == 0); //※ ==(loose equality) 와 ===(strict equality) //==는 타입이 다르더라도 내부적으로 강제 형변환해서 비교 //===는 강제 형변환 과정 없이 정확히 값하고 타입이 일치할때만 true(주소비교) //비교를 위해 항상 '===' 연산자를 사용 할 것을 권장. console.log(0 == '0');//값만 비교. 문자열 '0'이 자동으로 0으로 변환됨 console.log(0 === '0');//값 과 타입 비교.문자열 '0'이 자동으로 0으로 변환 안됨 console.log(false == '0');//값으로 비교.true console.log(false === '0');//값 및 타입비교:false var num1 = new Number('HELLO'); console.log('num1의 값:%s,num1의 타입:%s',num1,typeof num1); console.log(isNaN(num1)); num1 = new Number(1004);//object타입 num2 = 1004;//number타입 console.log(num1 == num2);//true console.log(num1 === num2);//false var arr1 = ['가길동',20];//new Array('가길동',20);와 같다 var arr2 = ['가길동',20]; console.log('arr1의 값:%s,arr1의 타입:%s',arr1,typeof arr1); console.log('arr2 값:%s,arr2 타입:%s',arr2,typeof arr2); console.log(arr1 == arr2);//false console.log(arr1 === arr2);//false arr2 = arr1; console.log(arr1 == arr2);//true console.log(arr1 === arr2);//true var obj1 = {username:'ict', password:'ict1234'} var obj2 = {username:'ict', password:'ict1234'} console.log(obj1 == obj2);//false console.log(obj1 === obj2);//false obj2 = obj1; console.log(obj1 == obj2);//true console.log(obj1 === obj2);//true3] 논리연산자 : &&, ||, !
⭐ 우선순위 ! > && > ||
console.log("[논리 연산자]"); console.log( 3 > 2 || 5 < -10 && !(3-4));4] 증감 연산자 : ++, --
console.log("[증감 연산자]"); var num =10; num++;//num=num+1; console.log('num:%s',num++);//11 console.log('num:%s',num);//125] 단축 표현식: +=, -=, *=, /=, %=
console.log("[단푹 연산자]"); console.log(num %=5);//num= num % 5;
📌 연산자의 우선순위
우선순위가 같을때는 왼쪽에서 오른쪽으로 계산
⭐ 산술연산자 > 비교연산자 > 논리연산자
