728x90
수업내용 정리 (VSCode - JS)
1. 산술/할당 연산자
<script>
// 산술 연산자
console.log(1+2);
console.log(parseInt(10/3));
console.log(10%3);
let a;
a+=1;
console.log(a); //NaN: 숫자가 아님
a=2;
a+=1;
console.log(a);
// 비교연산자
const b=1; // final int b=1;
const c=3; // final int c=3;
console.log(b<c);
function isEqual(x,y){
return x==y;
}
console.log(isEqual(1,1));
console.log(isEqual(1,2));
console.log(isEqual(1,'1'));
// 삼항연산자
const d=10, e=20, f=30;
</script>
2. 삼항 연산자
<script>
const a= 1<2
if(a){
console.log('참')
}else{
console.log('거짓')
}
console.log(a?'참':'거짓')
</script>
3. 조건문
<script>
function random() {
return Math.floor(Math.random() * 10)
}
const a = random()
if (a === 0) {
console.log('a is 0')
}else if(a===2){
console.log('a is 2')
}else{
console.log('rest...')
}
</script> <script>
function random() {
return Math.floor(Math.random() * 10)
}
const a = random()
switch(a){
case 0:
console.log('a is 0')
break;
case 2:
console.log('a is 2')
break;
default:
console.log('rest...')
}
</script>
4. 반복문
<script>
const ulEl=document.querySelector('ul')
for(let i=0; i<10; i++){
const li=document.createElement('li')
li.textContent=`list-${i+1}`
if((i+1)%2===0){ //짝수번째 클릭시
li.addEventListener('click',function(){
console.log(li.textContent)
})
}
ulEl.appendChild(li)
}
// 나중에 추가적으로 배울 것
</script>
5. 변수 유효범위
<script>
//var: 함수레벨 scope, 의도하지 않는 범위에서 사용될수 있다.메모리누수
//let, const: 블록레벨 scope
function scope(){
//console.log(a) // let,const: not defined에러, var: undefined출력
if(true){
//console.log(a) // let,const: not defined에러, var: undefined출력
var a =123
//console.log(a) //모두 정상
}
console.log(a) //let,const: not defined에러, var: 123
}
scope()
</script>
6. 형변환
<script>
//형변환
const a=1
const b='1'
console.log(a===b) //일치 연산자
console.log(a==b) //동등 연산자시 형변환 일어남(비권장)
//참 값
//true, {}, [], 1,2,'false',-12, '3.14'.....
//거짓 값(암기)
//false, '', null, undefined, 0,-0, NaN(Not a Number)
if('false'){ //false
console.log(123)
}
console.log('NaN: ', 1+undefined) //NaN: 숫자에 더할수 없는 값
</script>
7. 함수
<script>
// 컴파일 언어(java, c, c++...) <---> 인터프리터 언어(js, 파이썬)
// 기명 함수
function sum(x,y){
return x+y;
}
let a=sum(1,3);
const b=sum(1.3, 2.3);
console.log(a, b);
console.log(a+b);
console.log(sum(10,20)+sum(2.3,4.4));
// 익명함수 (함수를 sum2 변수에 저장)
// 함수도 객체
const sum2 = function(x,y){
if(x<2){
return;
}
return x+y;
};
console.log(sum2);
console.log(sum2(1,3)); // undefined 값이 없을때
console.log(sum2(4,3));
// let ulEl=document.getElementById('ul'); // 이것도 객체임
function sum3(){
console.log(arguments); //내장된 매개변수
return arguments[0]+arguments[1]+arguments[2]
}
console.log(sum3(3,7,3));
// 함수 오버로딩없음
function sum4(x,y,z){
console.log(x,y,z);
}
sum4(); //undefined undefined undefined
sum4(10); //undefined undefined
sum4(10,20); //undefined
sum4(10,20,30); //10 20 30
sum4(10,20,30,40); //10 20 30
</script>
8. 화살표 함수
<script>
// const double=function(x){return x*2}
// console.log('double: ',double(7));
// const dbArrow=(x)=>{return x*2}
// const dbArrow= x=> {return x*2}
// const dbArrow= x=> {x*2}
// const dbArrow= x=> x*2
// const dbArrow= x=>{console.log(x); return x*2}
// console.log('dbArrow: ',dbArrow(8));
// const dbArrow= ()=> [1,2,3]
// console.log('arr: ', dbArrow(), dbArrow().length);
//const dbArrow= (x)=> {name: 'cha', age: x} // 함수의 중괄호인지 객체의 중괄호인지 구분을 못함
//console.log('obj: ', dbArrow());
let person={name:'kim', age:20} // 객체
console.log(person.name, person.age);
</script>
9. 즉시 실행함수
<script>
const a = 7; // 전역변수
function double(){
console.log(a*2);
}
double(); // 밑에 즉시실행함수가 있으면 꼭 세미콜론(;)을 붙여줘야한다.
// 즉시실행함수
// IIFE, Immediately-Invoked Function Expression
(function(){
console.log(a*3);
})(); // 두 덩어리
(function(){
console.log(a*4);
}()); // 한 덩어리 (권장)
</script>
10. 함수 호이스팅
<script>
// 호이스팅(Hoisting): 위로 끌어올리다.
// 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상
// function double(){}
const a=7;
function double(){
console.log(a*2);
}
const square=function(){
console.log(a*2);
}
const square2= ()=> console.log(a*a);
// 익명함수는 호이스팅 불가
double()
square()
square2()
</script>
11. 변수 호이스팅
<script>
//호이스팅(hoisting)이란
//자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
//자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
//함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
//유효 범위: if,for단위 블록{}내에 변수를 선언해도 유효범위는 function단위 블록 {}이다.,
//호이스팅의 대상
//var 변수 선언과 함수선언문에서만 호이스팅이 일어난다. 함수 표현식은 호이스팅 안됨.
//var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
//let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
//java처럼 if, for단위 블록{}내에 변수를 선언하면 해당{}이 유효범위다.
//지역변수>전역변수
const pi = 3.14; //전역 상수변수(global v)
fct1();
fct2(3,5);
function fct1() {
//var a,b; 함수의 상단에 호이스팅
//console.log('a: ',a) //var:undefined, let,const:error
//console.log('b: ',b) //var:undefined
let a = 100,b = 200; //지역변수(local variable)
if (1) {
let a = 30,b = 40; //java error, 위의 const와 let을 var로 변경해 보자.
console.log("1=" + a);
console.log("1=" + b);
}
console.log(a); //var는 마지막에 선언된 변수가 위의 변수를 덮어버린다.
console.log(b); //let,const는 100, 200
console.log('전역변수:' + pi)
}
function fct2(a, b) { //함수정의부
console.log('fct2 call:', a, b)
console.log('gv:' + pi);
}
//메소드 오버로딩은 없지만 유연하다.
fct2()
fct2(10)
fct2(10,20,30)
//함수선언부는 호이스팅 되지 않음
// const fct=function(){ //익명 함수
// console.log("함수 출력");
// };
// fct();
// console.log(typeof fct);
function test(show) {
show();
}
//ES6 화살표함수=> , 자바 람다(lambda) ->
test(() => {
console.log('function call');
console.log('second line');
});
// test(function() {
// console.log('function call');
// console.log('second line');
// });
</script>
12. 타이머 함수
<script>
//타이머 함수: JS 전역함수(어디서든 호출가능한 함수)
//setTimeout(함수, 시간): 일정 시간 후 함수실행
//setInterval(함수, 시간): 시간 간격바다 함수 실행
//clearTimeout(): 설정된 Timeout 함수를 종료
//clearInterval(): 설정된 Interval 함수를 종료
// setTimeout(function(){
// console.log('hello!')
// }, 3000)
// const timer=setTimeout(()=>{
// console.log('hello!')
// }, 3000)
console.log('비동기 처리')
const timer = setInterval(() => {
console.log('hello!')
}, 3000)
//h1태그를 클릭하면
const h1El = document.querySelector('h1')
h1El.addEventListener('click', () => {
//clearTimeout(timer) //setTimeout함수가 작동하지 않음
clearInterval(timer) //setInterval함수가 작동하지 않음
})
</script>
13. 콜백
<script>
//콜백(Callback)
//함수의 인수로 사용되는 함수
//setTimeout(함수, 시간)
// function timeout(){
// setTimeout(()=>{
// console.log('hello!')
// },3000)
// }
// timeout()
// console.log('Done!') //Done먼저 출력후 3초뒤 hello출력
function timeout(cb){
//아래 익명함수는 setTimeout의 콜백함수임
setTimeout(()=>{
console.log('hello!')
cb()
},3000)
}
//콜백 함수 사용 목적
//1.익명함수가 timeout의 인자로 사용됨
//2.timeout실행시 특정 위치 실행 보장하기 위해
timeout(()=>{
console.log('Done!')
})
</script>
14. 생성자 함수
<script>
//리터럴({},[],"") 방식의 객체 생성
// const kim={
// //필드
// //property
// firstName: 'kim',
// lastName: 'dong',
// //method
// getFullName: function(){ //=>함수 금지(this가 상위객체를 의미함)
// //this: 현재 소속된 객체데이터를 의미
// return `${this.firstName} ${this.lastName}`
// //return `${kim.firstName} ${kim.lastName}`
// }
// }
// console.log(kim.getFullName())
// const lee={
// firstName: 'lee',
// lastName: 'na',
// getFullName: function(){
// return `${this.firstName} ${this.lastName}`
// }
// }
// console.log(lee.getFullName())
//생성자 함수를 이용한 객체 생성
//java의 클래스와 유사(?)
//new와 사용하는 생성자함수는 대문자로 지정
function User(first, last) {
this.firstName = first //this생략 안됨
this.lastName = last
//메모리 비효율적(객체마다 함수객체를 생성함)
// this.getFullName=function(){
// return `${this.firstName} ${this.lastName}`
// }
}
//메모리 효율적
//함수객체를 user함수의 prototype에 1번만 생성한다.
User.prototype.getFullName = function () {
return `${this.firstName} ${this.lastName}`
}
//생성자 함수를 통한 kim인스턴스 생성
const kim = new User('kim', 'dong')
const lee = new User('lee', 'na')
console.log(kim)
console.log(lee)
console.log(kim.getFullName())
console.log(lee.getFullName());
//javaScript는 prototype(원형)기반 언어임
const arr = [1, 2, 3];
console.log(arr)
//배열객체의 prototype의 includes메소드 확인
console.log(arr.includes(4)) //false
console.log(arr.includes(2)) //true
</script>
15. this
<script>
//this
//일반 함수는 (호출 위치!)에서 따라 this정의!
//화살표 함수는 자신이 (선언된 함수 범위!)에서 this정의!
const kim={
name: 'kim',
normal: function(){
console.log(this.name)
console.log(this) //kim객체
},
arrow:()=>{ //특정 함수범위에 선언되고 있지 않음
console.log(this.name)
console.log(this) //window객체
}
}
kim.normal() //kim
kim.arrow() //'' or undefined
const lee={
name: 'lee',
normal:kim.normal,
arrow: kim.arrow
}
//호출위치가 여기! 그래서 this는 lee객체 참조함
lee.normal();
//선언된 위치(범위)는 그대로임! this는 window객체 참조함
lee.arrow();
// 생성자 함수에서 getFullName을 화살표함수로
// 만들어서 this값을 확인해보자
const timer={
name: 'kim',
timeout: function(){
//setTimeout의 내부에서 콜백을 호출중이라서 name출력안됨
//setTimeout(function(){
// console.log('t:', this.name) //window 객체
//}, 2000)
//timer객체의 timeout메소드에 선언되었으므로 name출력됨
//setTimeout함수에서는 화살표함수를 쓰는것이 좋다.
setTimeout(()=>{
console.log('t:', this.name) //timer객체
}, 2000)
}
}
timer.timeout()
</script>
16. ES6 Classes
<script>
const hong = {
name: 'hong',
//normal: function(){
// console.log(this.name)
// },
//위 메소드의 간소화 표현
normal() {
console.log(this.name)
},
//화살표함수 간소화 안됨
arrow: () => {
console.log(this.name)
}
}
hong.normal()
hong.arrow()
////ES6 Classes
//생성자 함수활용을 class로 간소화 할 수 있음
//class는 react에서 많이 활용함
class User {
constructor(first, last) {
this.firstName = first //this생략 안됨
this.lastName = last
}
//prototype에 1번만 생성한다.
getFullName() {
return `${this.firstName} ${this.lastName}`
}
} //end class
//생성자 함수를 통한 kim인스턴스 생성
const kim = new User('kim', 'dong')
const lee = new User('lee', 'na')
console.log(kim)
console.log(lee)
console.log(kim.getFullName())
console.log(lee.getFullName());
</script>
17. 상속(확장)
<script>
//java class와 아주 유사함
//생성자 및 메소드객체가 prototype에 1번 생성됨
class Car{
constructor(gasoline){
//super()에러
this.gasoline=gasoline
}
showGuageInfo(){
console.log('gas: ', this.gasoline)
}
}
class HybridCar extends Car{
constructor(gasoline, electric){
super(gasoline)
this.electric=electric
}
showGuageInfo(){
super.showGuageInfo()
//console.log('gas: ', this.gasoline) //가능
console.log('elec: ', this.electric)
}
}
class HybridWaterCar extends HybridCar{
constructor(gasoline, electric, water){
super(gasoline,electric)
this.water=water
}
showGuageInfo(){
super.showGuageInfo()
//console.log('gas: ', this.gasoline) //가능
//console.log('elec: ', this.electric) //가능
console.log('water: ', this.water)
}
}
const car1=new HybridWaterCar(50,1000,30)
const car2=new HybridCar(40,500)
console.log(car1)
car1.showGuageInfo()
console.log(car2)
car2.showGuageInfo()
</script>
18. 문자
<script>
//JS 데이터
//String: "", '', ``
//Number:
//Boolena: true, false
//underfinde:
//null:
//Array: []
//Object: {}
//String.prototype.indexOf() 메소드는 String객체 모두 사용할 수 있다.
let result='Hello world!'.indexOf('world')
console.log(result) //첫글자index는 0부터
result='Hello world!'.indexOf('kim')
console.log(result) //검색실패 -1
const str='대한민국 최고' //문자열 리터럴 객체
//const str=new String('대한민국') //문자열 정식 객체
console.log(str.length) //7
console.log(str.indexOf('만세') != -1) //false
console.log(str.slice(0,3)) //대한민(idx:0~2)
console.log(str.slice(5,7)) //최고(idx:5~6)
console.log(str.slice(2, -1)) //민국 최(idx:2~뒤쪽 1문자미만)
console.log(str.replace('대한민국','한국' )) //한국 최고
console.log(str.replace(' 최고','' )) //삭제효과, 대한민국
const email='surecha@nuri.com'
console.log(email.match(/.+(?=@)/)) //정규표현식:@앞쪽 문자열 찾아줘
console.log(email.match(/.+(?=@)/)[0])
const str2=' Hello world '
console.log(str2.trim()) //문자열 앞뒤 공백제거
</script>
19. 숫자와 수학
<script>
const pi=3.141592
console.log(pi)
const str=pi.toFixed(2) //'3.14'문자열 반환
console.log(str)
console.log(typeof str);
//window객체 전역함수 parseInt, parseFloat(권장)
const integer = parseInt(str)
const float = parseFloat(str)
//number객체 static 함수: parseInt, parseFloat(비권장)
//const integer=Number.parseInt(str)
//const float= Number.parseFloat(str)
console.log(integer) //3
console.log(float) //3.14
console.log(typeof integer, typeof float) //number number
//Math: 수학관련 객체
console.log('abs: ', Math.abs(-12)) //12
console.log('min: ', Math.min(2,8,5,6)) //2
console.log('max: ', Math.max(2,8,5,6)) //8
console.log('ceil: ', Math.ceil(3.14)) //4, 올림함수
console.log('floor: ', Math.floor(3.14)) //3, 절삭함수
console.log('round: ', Math.round(3.14)) //3, 반올림함수
console.log('random: ', Math.random()) //0.0~1.0미만 랜덤함수
const rand=Math.floor(Math.random() * 10)
console.log(rand) //0~9사이 난수 발생
</script>
728x90
'프로그래밍 > 수업일지' 카테고리의 다른 글
| 수업일지 42일차 (23/11/17) (0) | 2023.11.17 |
|---|---|
| 수업일지 38일차 (23/11/13) (1) | 2023.11.13 |
| 수업일지 35일차 (23/11/8) - VSCode (CSS) (0) | 2023.11.08 |
| 수업일지 34일차 (23/11/7) (0) | 2023.11.07 |
| 수업일지 33일차 (23/11/6) (0) | 2023.11.06 |
