[TIL] 2020.06.17 TIL-200617

To-Do

• 자바스크립트 복습
• 디자인패턴 발표 준비
• 자바스크립트 과제

TIL

• 자바스크립트 수업
• 자바스크립트 진도 복습(Function 중심으로)
• 자바스크립트 과제

수업 종료후 남아서 자바스크립트 수업 복습 진행. 그중에서 프로토타입의 경우 다시 복습 필요할 것 같다. 디자인패턴 스터디에서 진행한 내용과 교수님 수업 내용을 보충해서 이번주 내에 정리하기.
집에 도착하자 마자 잠들어서 과제 제대로 마무리하지 못했음. 내일 쉬는 시간에 틈틈히 보충하자.

keyword

• closure : 함수가 종료되더라도 그 함수의 변수값을 유지시키는 것
• 내장함수 : Timer
• 프로토타입
• 전개 연산자
• Object
• 자바스크립트 Arrow Function

JavaScript

1. function

// 함수 선언, 호출
function testFunction() {
		alert('call..function');
	}
// 파라미터 1개인 함수
function testFunction2(data) {
  var data = 'hahaha'
  alert('data : ' + data);
}
// 파라미터 2개 이상인 함수
function testFunction3(data1, data2) {
  var data1 = 'Hello!';
  var data2 = 'World!';
  alert('data1 : ' + data1 + 'data2 : ' + data2);
}
// 파라미터로 함수를 인자로 받을 수 있음
function testFunction4(data) {
  alert(testFunction());
}

// 함수 호출
  testFunction();
  testFunction2();
  testFunction3();
  testFunction4();

2. Hoisting

정의

• 호이스트(Hoist)는 건축/건설이나 화물 운반에 사용되는 장비로 화물 등을 들어올리는 업무를 수행. 즉, 아래에 위치한 것을 위로 끌어올리는 역할을 하는 장비로 ‘들어올리다’라는 의미를 가진다
• 자바스크립트에서 호이스팅(Hoisting)은 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것
• 이는 변수의 범위(Scope)에 따라 다르게 수행될 수 있다. 함수 내에서 선언한 함수 범위(function scope)의 변수는 해당 함수의 최상위로, 함수 밖에서 선언한 전역 범위(global scope)의 전역 변수는 스크립트 단위의 최상위로 끌어올려진다.

예제

  testFunction();

  // 변수 선언 및 할당 이전에 호출 테스트 
  function testFunction() {
  // 선언부만 호이스팅 되어 아무런 값도 할당되어 있지 않다.
    alert("not defined : " + name);	
  }
  //자바스크립트 내부적으로 var name; 과 name ="hahaha"로 선언과 할당을 분리하여 변수 선언부는 함수 상단으로 끌어올려 선언
  var name = "hahaha";		
  // 변수 초기화 이후 값 확인
  alert("defined : " + name);	

실행결과

not defined : undefined     //변수 선언부만 함수 상담으로 끌어올려져 undefind 출력
defined : hahaha          	//초기화된 값으로 호출

3. 내장함수 - Timer

• setTimeout(함수, ms) : 함수의 실행을 의도적으로 지연
• clearTimeout(id) : setTimeout 함수 실행을 취소
• setInterval(함수, ms) : 부여된 시간 간격 이후로 주기적으로 실행
• clearInterval(id) : setInterval 함수 실행을 취소

4. array와 함수

실습

function func(a,b,c) {
		document.write(`${ a } : ${ b } : ${ c }<br>`);
	}
	
function func01() {
  document.write(arguments[0] + ', ' + arguments[1] + ', ' + arguments[2] + '<br>');
}

function func02() {
  for(let i of arguments){
  document.write(i + ', ')
  }
  document.write('<br>')
}

var arr = [1, 2, 3];

func(1,23,30);
func01(arr);
func02(arr);
func(arr);

실행결과

1 : 23 : 30
1,2,3, undefined, undefined
1,2,3,
1,2,3 : undefined : undefined