JavaScript 요약 강좌2

강좌2.

String 변수를 콘솔에서 사용하는 방법

 

• Template Literal 문법

let name = 'sungjun'
console.log('제 이름은 ${name} 입니다.' )

 

 

 

Array 의 형태 : Object

['하나','둘','셋']
[{'one':1},{'two':2}]
[[10,20],[100,200]]
[[[10,20],[30,40]],[[100,200],[300,400]]] // 3차원 배열 형태

 

• 다양한 메서드 ( 실습 필요 )

1) length

2) foreach

3) map

4) filter

5) push / pop ... 등등

 

 

 

Object ( 객체 )

key 와 value 형태를 지닙니다.

 

• 다양한 메소드

1) ObjectKeys

2) Object.values

3) Object.entries ... 등등

 

• Map,Set : object 

 

 

Function 

함수 A ( 피라미터 ) 의 형태로 선언하고, 함수 A ( 인자 ) 의 형태로 호출합니다.

 

 

 

호이스팅

console.log(add(10,20)) // 호이스팅 되서 출력됨
console.log(add2(10,20)) // 호이스팅이 안되서 에러 발생함


function add (x,y){
	return x+y;
}

let add2 = function(x,y){
	return x+y;
}

 

 

콜백 함수

: 함수를 인자로 받아서, 내부에서 실행을 시켜주는 함수입니다.

즉, 나중에 불러주는 함수입니다.

function add(x,y){
	return x+y;
}

function mul(x,y){
	return x*y;
}

function cal(a,b){
	return a(10,10) + b(10,10); // a라는 함수는 선언된적 없음
}

cal(mul,mul); // cal 이 호출되면서 a라는 함수에 각 함수들이 할당됨

 

 

화살표 함수

함수의 네이밍이 없고, 인자와 함수 본문만 보여진다.

• 형태 :

(a,b) => {
	let z = 10
    let res = z + a + b
    return res
 };

 

 

만약, 화살표 함수를 콜백함수로 사용한다면?

1. 네이밍을 안해도됨
2. 다른 곳에서 사용할 수 없음
3. 콜백 지옥에 빠질 수 있음

function cal(a,b){
	return a(10,10) + b(10,10);
}

cal((a,b) => a+b, (a+b) => a*b);
// cal 이 호출됨과 동시에 화살표 함수로 함수가 선언되어 실행됨

 

 

동기와 비동기

• js는 일을 처리할 수 있는 스레드가 1개 싱글 쓰레드라고 합니다.
• 모든 일을 여러명이 처리할 수 없다면 항상 기다려야하는 문제가 발생하고, 무한대기에 빠질 수 있습니다.

* 동기와 비동기를 이해하려면 자바시크립트 실행 동작원리를 이해해야함 ( 숙제 )

 

 

 

DOM

• 메소드

1. getElementById() : 해당하는 Id 를 가진 요소에 접근하기
2. querySelector() : css 선택자로 단일 요소에 접근하기
3. document.createElement (target) : 타겟 요소를 생성합니다.
4. element.appendChild ( target ) : 타겟 요소를 요소의 자식으로 위치합니다.
5. ... 등등