📖 Function(함수)

자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가진다.

• 1. 함수의 이름
• 2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
• 3. 중괄호({})로 둘러싸인 자바스크립트 실행문

• 함수 이름(function name)은 함수를 구분하는 식별자(identifier)이다.

• 매개변수(parameter)란 함수를 호출할 때 인수(argument)로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.

📖 객체(Object)

JavaScript는 객체기반의 스크립트 언어이며 Javascript를 이루고 있는 거의 모든 것은 객체이다. 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key/Value Pair를 저장할 수 있는 구조이다.

객체 생성 방법

• 1. 객체리터럴을 사용하여 단일 객체를 정의하고 만든다.(객체 리터럴 : 중괄호안에 key:value 의 목록, 객체 리터럴을 사용하면 한 명령문에서 객체를 정의하고 만들 수 있다.)

• 2. new 키워드를 사용하여 단일객체를 정의하고 만든다.(단순성,가독성 및 실행속도를 위해서라면 객체리터럴 사용 권장)

var obj1 = new Object();
var coworkers={};

ex)

var coworkers={
          "programmer":"choims",
          "designer":"choims2"
        };

• Key : "programmer", "designer"
• Value : "choims", "choims2"

객체 접근 방법

var coworkers={
          "programmer":"egoing",
          "designer":"leezhe"
        };
        document.write("programmer : "+coworkers.programmer+"<br>");
        document.write("programmer : "+coworkers.designer+"<br>");

• 아래와 같은 방법으로도 가능하다.

 var coworkers={
          "programmer":"choims",
          "designer":"choims2"
        };
        document.write("programmer : "+coworkers["programmer"]+"<br>");
        document.write("programmer : "+coworkers["designer"]+"<br>");

객체에 Key/Value 추가 방법

coworkers.bookkeeper = "duru";
document.write("bokkeper : "+coworkers.bookkeeper+"<br>");

혹은

coworkers["bookkeeper"] = "duru";
document.write("programmer : "+coworkers.bookkeeper+"<br>");

• 띄어쓰기가 포함되게 할려면 아래 방법 사용

coworkers["data scientist"] = "taeho";
document.write("data scientist : "+ coworkers["data scientist"]+"<br>");

객체와 반복문

 var coworkers={
          "programmer":"choims",
          "designer":"choims2"
        };
       

        document.write("programmer : "+coworkers.programmer+"<br>");
        document.write("programmer : "+coworkers.designer+"<br>");
        coworkers.bookkeeper = "duru";
        document.write("programmer : "+coworkers.bookkeeper+"<br>");
        coworkers["data scientist"] = "taeho";
        document.write("data scientist : "+ coworkers["data scientist"]+"<br>");

위 코드와 아래코드의 결과는 동일

 for(var key in coworkers){
            document.write(key+'<br>');
        }

📖 객체프로퍼티와 메소드

Property(프로퍼티)

• {name(이름/키):value(값)} 의 형태로 이루어져 있으며, object의 속성이다.

메소드(Method)

• 메소드란 객체가 가지고 있는 동작이며 객체 내의 함수를 메소드라 칭한다.

메소드와 함수의 차이점

• 메소드는 객체가 가지고 있는 동작이기 때문에 메소드를 수행하기 위해서는 객체를 통해서 해당 메소드를 수행해야 하며 그 동작을 수행하는 주체는 객체이다.

메소드 생성 방법

coworkers.showAll = function(){
        for(var key in this){
            document.write(key+' : '+this[key]+'<br>');
        }
      }
      coworkers.showAll();

객체 활용

• 클린코드로 작성하게 해준다.

 var Body={
    setColor : function(color){
      document.querySelector('body').style.color=color;
    },
    setBackgroundColor : function(color){
      document.querySelector('body').style.backgroundColor=color;
    }
  }
  var Links={
    setColor : function(color){
      var alist = document.querySelectorAll('a');
    var i=0;
    while(i<alist.length){
      alist[i].style.color=color;
      i=i+1;
      }
    }

📖 파일로 쪼개서 정리 정돈하기

• color.js에 javascript 코드 저장

<script src="color.js"></script>

• 훨신 더 효율적이고 돈도 적게드는 방법