JavaScript

Wooney98·2022년 11월 15일

JavaScript

PlayData_BackEnd

목록 보기

9/33

JavaScript로 할 수 있는 일

웹 클라이언트 애플리케이션 개발
웹 서버 개발
- Node.js가 등장하면서 웹 서버 개발 가능
- 데이터 처리와 예외 처리 등이 복잡하지만, 빠르다는 장점
모바일 어플 개발
- 페이스북의 React Native
- Electron 모듈
DB 관리

식별자

생성자 함수의 이름은 항상 대문자로 시작
변수, 함수, 속성, 메소드의 이름은 항상 소문자로 시작
여러 단어로 된 식별자는 각 단어의 첫 글자를 대문자로 함

will out // willOut
will return // willReturn
i am a boy // iAmABoy

alert('Hello World') 			// 함수
Array.length 					// 속성
input 							// 변수 또는 상수
prompt('Message','Defstr') 		// 함수
Math.PI							// 속성
Math.abs(-273)					// 메소드

템플릿 문자열

함수

<!-- 익명함수 : 이름을 붙이지 않고 생성한 함수 -->
let 함수_이름 = function() {};

let 함수 = function(){
	console.log("함수의 첫 번째 줄");
    console.log("힘수의 두 번째 줄");
};
함수();
console.log(함수);

<!-- 선언적 함수 : 이름을 붙여 함수를 생성 -->
function 함수_이름(){ }

function 함수() {
	console.log("함수의 첫 번째 줄");
    console.log("함수의 두 번째 줄");
}
함수();
console.log(함수);
 
<!-- 화살표 함수 : `하나의 표현식을 리턴하는 함수`를 만들 때는 중괄호 생략 가능 -->
() => { }
let 함수 = () => {
	console.log("함수의 첫 번째 줄");
    console.log("함수의 두 번째 줄");
};
함수();
console.log(함수);

콜백함수

// 콜백 함수 - 자바스크립트에서 많이 사용된다.
function aaa(callback){
		console.log('aaa함수 호출');
		callback(600); 
	}
	
	function bbb(){
		//매개변수를 받지 않음, log부분에 arguments를 찍어보면 600이라는 값이 들어가 있다.
		//에러로 처리하지 않는다.
		//필요하면 사용하는 방식으로 작동되는 듯 하다.
		//매개변수를 넘겨야하는데 넘기지 않았다면 undefined만 뜨고 실행은 정상적으로 작동한다.
		console.log(arguments); //undefine
		console.log('bbb함수 실행');
	}
	
	aaa(bbb); //undefind
	
	//callback인자로 함수를 넘겨 바로 사용할 수 있게 한다.
	aaa(function(data){
		console.log('익명 함수 실행'+data);
	});
    //자바스크립트의 매개변수는 형식적인 것이고 무조건 갯수를 맞추거나 그러지 않아도사용에 무관하다.

JS의 화살표 함수

<script>
	//화살표 함수
	let aaa = () => { //function 키워드를 없애고 괄호 뒤에 =>를 입력하면 된다.
		console.log('aaa 함수 실행');
	}
	
	let bbb = (num) => { //매개변수가 1개밖에 없을 때는 괄호() 생략 가능하다.
		console.log('bbb 함수 실행 '+num);
	}
	
	// return이 한줄만 사용할 경우 중괄호와  return 생략 가능
	let ccc = num => "ccc 함수 실행"+num; //여기서 num은 매개변수이다.
	
	
	aaa();
	bbb(300);
	
	let resultStr = ccc(200);
	console.log(resultStr);
</script>

<button>btn1</button> | <button>btn2</button>
<script>
	var btns = document.querySelectorAll('button');
	console.dir(btns);
	
	// 매개변수가 1개일때 괄호 생략 가능
    // 화살표 함수는 일반 function과 this가 다르다.
    
	// source를 보고 싶으면 일반function을 사용.
	btns[0].onclick = function(){
		console.log(this) //이벤트 발생 source 자체가 this가 되어 출력됨
	}
	
	btns[1].onclick = () => {
		//함수 생성 시점의 window(문서)가 this가 된다.
		console.log(this) //window가 출력됨. 화살표 함수는 사용이 될 때 발생하는 시점의 객체가 window가 된다.
	}
</script>

JS의 클로저

어떤 함수가 자신의 내부가 아닌 외부에서 선언된 변수에 접근하는 것을 의미

//함수에서 return은 데이터를 반환하고 종료하는 역할을 한다.
	//return에 함수를 지정하여 원하는 함수를 실행하는 것도 가능하다.
	function aaa(){		
		return(function(){
			console.log('aaa의 내부 함수');
		});
	}
	
	//이렇게 return하는 함수에 매개변수를 넣는 것도 가능
	function bbb(){		
		return(function(num){
			console.log('bbb의 내부 함수 '+num);
		});
	}
	
	
	//함수에 매개변수와 return하는 곳에 매개변수 넣기도 가능
	function ccc(cNum){		
		return(function(num){
			console.log('ccc의 내부 함수 '+(cNum+num));
		});
	}
    
	//클로저
	function ddd(dNum){
		var data = "hello";
		return(function(num){
				console.log(data + ' ddd의 내부 함수 '+(dNum+num))
		});
	}
	
	//변수 선언하면서 함수를 할당할 때 들어가는 매개변수는 함수 선언부에 들어가는 매개변수
	//함수 타입 변수를 실행하면서 들어가는 매개변수는 return 선언부에 들어가는 매개변수이다.
	var fn = aaa();
	fn();
	var fn1 = bbb(); 
	fn1(100);
	var fn2 = ccc(100); //여기는 cNum에 들어가는 값
	fn2(30); //여기는 return function num에 들어가는 값
	var fn3 = ddd(120);
	fn3(50);

호이스팅

https://velog.io/@swson777/TIL-var-const-let-wifwxcyq

<script>
    // 끌어올림 문제 - 호이스팅
    var a =10;
    function aaa() {
				//var a; 
        console.log('aaa .... '+a);
        var a = 100;
    }

    aaa();
</script>

객체

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--  -->
<script>
var name1 = "김길동";
var name2 = "이길동";
var name3 = "박길동";
var name4 = "최길동";
var name5 = "강길동";

for(var i=1; i<=5; i++) {   
   //console.log(this['name' + i]);
   console.log(window['name' + i]);
}

var obj = {
   name : 'new Object',
   arr0 : ['오징어','꼴뚜기','대구','명태','거북이'],
   arr1 : ['오징어','꼴뚜기','대구','노가리','거북이'],
   arr2 : ['오징어','꼴뚜기','대구','상어','거북이'],
   200 : '이백',
   print : function() {
      console.log(`${this.name}의 200은 ${this[200]}`)
   }
}

obj.print();
obj['print']()

console.log(obj['200']);
console.log(obj['name']);

obj2 = {}; 

obj2[1] = 'aaa';
console.log(obj2[1])

for(var i=0; i<3; i++)
   console.log(obj['arr'+i][3]);
  //변수명이 arr+i인 값을 가져온다. 이렇게 문자열로 변수명을 지정할 수 있다.

</script>

</body>
</html>

첨언 : https://velog.io/@minidoo/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98Callback-Function

Wooney98

👨Education Computer Engineering 🎓Expected Graduation: February 2023 📞Contact info thstjddn77@gmail.com

JavaScript

PlayData_BackEnd

JavaScript로 할 수 있는 일

식별자

함수

콜백함수

JS의 화살표 함수

JS의 클로저

호이스팅

객체

[실습] JS 계산기 구현 ver.1

[실습] Box 움직이기

0개의 댓글