Book01 자바스크립트 코어 문법과 라이브러리, 함수와 함수단위 프로그래밍

변수

1. 변수 만들때 주의사항
   숫자로 시작하면 에러
   환경 변수의 값을 담는 상수 변수는 대문자(대소 문자 구분)
   
   
2. 데이터 종류
   숫자, 문자, 논리형, 특수형(undefined)-변수는 선언했지만 값이 아직 할당되지 않은 상태, 함수, null, 클래스, 객체
   
   
3. 배열
   

   var userName = ['ddandongne', '철수', '영희', '아영', '정희', '선희', '영자', '병철'];
   document.write("userName[0] = "+userName[0]);

전위 후위 연산자

    var a = 1;
    var b = ++a;
    //a=2, b=2
    var a = 1;
    var b = a++;
    //a=2, b=1

    

형변환

1. 문자를 숫자로
   정수 형
   

   var value="123.456";
   parseInt(value);
   Number(value);
   
   

   실수 형
   

   parseFloat(value);
   Number(value);

   
   
2. 숫자를 문자로
   일반 문자 형
   

   var value=15;
   String(value);

   
   16진수 문자 형
   

   var value=15;
   value.toString(15);

   
   실수 문자 형
   

   var value=123.456;
   value.toFixed(2);

   
   

멤버변수(프로퍼티) - 클래스 내부에 만드는 변수

멤버함수(메서드) - 클래스 내부에 만드는 함수

arguments

1. 매개변수의 모든 정보가 담겨있는 장소(객체)
2. 배열은 아니지만 배열처럼 사용
3. 매개변수의 개수는 arguments의 length 프로퍼티를 이용

함수

• 리터럴방식

var hello = function(name){
  alert(name+"님 환영합니다.");
}
hello();

• 익명 함수(리터럴 방식으로 만들어진 이름 없는 함수)

//익명 함수 활용 전
function(){
  alert("안녕하세요. 환영합니다.");
}
$("#btnStart").click(hello);

//익명 함수 활용 후 : 함수를 재사용 하지 않을 경우
$("#btnStart").click(function(){
  ("안녕하세요. 환영합니다."); 

}); 

• 일반적인 방식

function hello(name){
  alert(name + "님 환영합니다.");
}
hello();

• 객체 방식

var hello2 = new Function("name", "alert(name + '님 환영합니다.');");
helllo2();

콜백 함수

특정 함수의 매개변수 값으로 콜백 함수를 넘기고 처리 결과를 콜백 함수의 매개변수에 담아 콜백 함수를 호출, 로직 구현과 처리 부분을 나눠 코딩을 함

function calculator(op, num1, num2, callback){
  var result = "";

  switch (op) {
    case "+" :
      result = num1 + num2;
      break;
    case "-" :
      result = num1 - num2;
      break;
    case "*" :
      result = num1 * num2;
      break;
    case "/" :
      result = num1 / num2;
      break;

    default :
      result = "지원하지; 않는 연산자입니다.";
  }
  callback(result);

}

function print1(result){
  document.write('두 수의 합은 = '+result+'입니다.\n');
}
function print2(result){
  document.write('정답은 = '+result+'입니다.\n');
}
calculator("+", 10, 20, print1);
calculator("+", 10, 20, print2);

• 동기

함수가 호출된 후 끝날 때까지 다음 구문을 실행하지 않고 대기

• 비동기

함수가 호출된 후 끝날 때까지 기다리지 않고 바로 다음 구문을 실행 

클로저 함수

함수 내부에 만든 지역변수가 사라지지 않고 계속해서 값을 유지하고 있는 상태, 내부함수에서 내부함수를 포함하고 있는 함수의 변수를 사용하는 구조이며 내부함수를 클로저 함수

function addCount(){
  var count = 0;
  count++;
  return count;
}

document.write('1. count = '+addCount()+'\n');
document.write('2. count = '+addCount()+'\n');
document.write('3. count = '+addCount()+'\n');
//Count = 1, Count = 1, Count = 1

function createCounter(){
  var count = 0;
  function addCount(){
    count++;
    return count;
  }
  return addCount;
}

var count = createCounter();

document.write('1. count = '+count()+'\n');
document.write('2. count = '+count()+'\n');
document.write('3. count = '+count()+'\n');
//1. count =1, 2. count = 2, 3. count = 3

장점

함수 내부에 데이터가 만들어지기 때문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있음(private데이터) 

 

타이머 함수

 setInterval

일정 시간마다 특정 구문을 실행하는 타이머

function addCount(){
  count++;
  output.text(count);
}
setInterval(addCount,1000);

setTimeout

일정 시간 지난 후 딱 한 번 실행되는 타이머

setTimeout(function(){
  alert("안녕하세요. 환영합니다.");
}, 3000);

clearInterval

타이머 멈추기

timerId = setInterval(function() {
  count++;
  $output.text(count);
}, 1000);

$("#stop").click(function() {
  clearInterval(timerId);
});

Math 클래스

 

String 클래스

Date 클래스

Array 클래스

배열 만들기(2가지 방법)

//배열 리터럴 방싱
var menys = ["menu1", "menu2", "menu3", "menu4"];
//배열 클래스 방식
var users = new Array("menu1", "menu2", "menu3", "menu4");

splice()

//start 추가 또는 삭제할 배열 요소의 시작 위치
//deleteCount start부터 시작하여 삭제할 배열 요소의 개수, 요소를 추가할 때는 0을 적용
//element 추가 요소
var result = 배열.splice(start, deleteCount [,element]);
var menuItems = ['menu1', 'menu2', 'menu3', 'menu4'];
menuItems.splice(2,0,'new');

sort()

//String은 function으로 return b-a가 안먹힘...왜지?
var userNames = ['영희', '철수', '미자', '진수', '딴동네'];
console.log("실행 전 : " + userNames.join(","));
userNames.sort();
console.log("내림차순 : " + userNames.join(","));
userNames.sort().reverse();
console.log("오름차순 : " + userNames.join(","));
//숫자
var aryData = [5, 2, 8, 9, 3, 6, 4, 1, 77];
console.log("실행 전 : " + aryData.join(","));
aryData.sort(function(a, b){ return a-b; });
console.log("오름차순 : " + aryData.join(","));
//둘다 가능
//aryData.sort(function(a, b){ return a-b; }).reverse();
aryData.sort(function(a, b){ return b-a; });
console.log("내림차순 : " + aryData.join(","));