• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Object - JS객체 ★★★★★

목차
  1. Object 예제 - 가능한 속성값 종류
  2. Object/Propery/Method 정의
  3. JS 일반변수 생성
  4. Object 구문
  5. Object 선언 줄바꿈
  6. Object Property(속성) 접근
  7. Object Method(메서드) 접근
  8. Object 변수 생성 - new 키워드 사용
  9. Object 선언 금지 유형
  10. Object 예제 - 중첩 Object 선언 (※ 반복문 이용)

 

Object 예제 - 가능한 속성값 종류

 

<script>

var hz = {

    host:"Homzzang.com", // 문자열

    year:2012, // 숫자

    site: function() {return this.host + " " + this.year}, // 메서드

    lang1: {"HTML":"뼈대","CSS":"의상", "JS":"동작"}, // 객체

    lang2: {"PHP":"소통","SQL":"DB", "BS":"통합틀"} // 배열

};

document.write(hz.host); // 문자열

document.write("<br>");

document.write(hz.year); // 숫자

document.write("<br>");

document.write(hz.site()); // 메서드

document.write("<br>");

document.write(hz.lang1.HTML); // 객체

document.write("<br>");

document.write(hz.lang2['PHP']); // 배열

</script>

결과보기


[주의] 아래처럼, PHP 연관배열생성 방식 사용하면 작동 안 함.


lang2: array("PHP" =>"소통","SQL"=>"DB", "BS"=>"통합틀") // 배열

 

 

Object/Property/Method 정의

객체(Object), 속성(Properties), 메서드(Methods) 개념 이해하기
 
객체(Object)

  속성(Property) = 객체의 정적외관측면  메서드(Methods) = 객체의 동적작동측면
 
컴퓨터


  객체명.속성명 = 속성값

  컴퓨터.이름 = 홈짱
  컴퓨터.모델 = 2012
  컴퓨터.무게 = 1kg
  컴퓨터.색깔 = 파랑


객체명.메서드명() 

 컴퓨터.부팅() 
 컴퓨터.작동()
 컴퓨터.다운() 
 컴퓨터.종료() 
 
※ 모든 컴퓨터는 동일한 속성 갖지만, 구체적인 속성값은 제각각 다름.
※ 모든 컴퓨터는 동일한 작동 갖지만, 구체적인 작동법은 제각각 다름.

 

JS 일반변수 생성


<p id="homzzang"></p>

<script>
var computer = "홈짱";// 변수 하나에 데이터 값이 달랑 하나만 들어감
document.getElementById("homzzang").innerHTML = computer;
</script>

 

Object 구문

[변수만 먼저 선언]

 

var Object = new Object(); // 방법1 : (예제) var computer = new Object();

var Object = {}; // 방법2 : (예제) var computer = {};

 


[변수에 '속성/값'을 한번에 선언]

 

Object = {Property:value, Property:value, ..... }

객체명 = {속성명:속성값, 속성명:속성값,  ........} ; 

[예제]
var computer = {name:"homzzang", year:2012, weight:1, color:"blue"};

 


[예제]

 

<p id="homzzang"></p>

<script>
var com = {name:"Homzzang.com", year:2012}// 선언
document.getElementById("homzzang").innerHTML = com.name + " " + com.year// 출력
</script>

 

결과보기

 

1.

JS에서 객체는 속성:속성값 형식의 여러 데이터를 중괄호인 { }로 묶은 것을 말함.

(예)  {name:"homzzang", year:2012, weight:"1", color:"blue"};


2. 

JS 객체 활용하면 여러 데이터를 하나의 변수에 담을 수 있음.


3. 

JS에서 객체가 할당된 변수를 객체이름 (= 객체명: Object Name)이라고 함. (예) var computer = {name:"homzzang", year:2012, weight:"1", color:"blue"};


4. 

JS 객체에서 속성과 속성값은  콜론( : )으로 구분하며, 속성:속성값 세트들은 콤마( , )로 구분.


5. 

JS 객체 안의 속성값이 문자이면 따옴표로 묶고, 숫자이면 따옴표로 묶지 않음.


6. 

JS 객체 속성엔, 정적측면인 속성(Properties)과 동적측면인 메서드(methods) 존재.


7. 

JS 객체의 메서드(Methods)는 함수 정의 형식으로 저장된 속성값을 말함.

 

<p id="homzzang"></p>

<script>
var hz = {
    name : "홈짱",
    year : "2012",
    intro : function(c) {  // c는 임의로 써넣은 것일 뿐 필수 아님.
       return this.name + " " + this.year;  // 같은 객체 내 다른 속성 접근 시, 객체명 대신 this 사용 가능.
    }
};

document.getElementById("homzzang").innerHTML = hz.intro()// 호출・출력
</script>


결과보기


PS. 아래처럼 함수 부분을 별도로 빼고, 함수명만 적어도 됨.

 

<p id="homzzang"></p>


<script>

var hz = {

    name : "홈짱",

    year : "2012",

    intro : plus // 함수명만 적어야 함.

};

  

function plus(c) {  

       return this.name + " " + this.year;  

}


document.getElementById("homzzang").innerHTML = hz.intro(); 

</script>

 

결과보기

 
8. 
속성값엔 문자열, 숫자, 객체, 배열 등 다양한 데이터형식 올 수 있음. (맨 위 예제 참고)
 

Object 선언 줄바꿈

 

JS 객체 선언은 한줄로 써도 되고, 줄바꿔 써도 상관 없음. 공백 역시 무시함.

 


[한줄로 표현]

<p id="homzzang"></p>

<script>
var com = {name:"홈짱", year:2012}; // 한 줄 표현
document.getElementById("homzzang").innerHTML = com.name + " " + com.year 
</script>

 


[여러 줄로 표현]
 
<p id="homzzang"></p>

<script>
var com = {
     name:"홈짱", 
     year:2012
};
document.getElementById("homzzang").innerHTML = com.name + " " + com.year
</script>
 

 

Object Property(속성) 접근

 

방법1. Object.Property
방법2. Object['Property']

 


방법1. 객체이름.속성이름   (예) com.name , com.year

 

<p id="homzzang"></p>

<script>
var com = {
    name : "홈짱",
    year : 2012,
    color : "blue"
};
document.getElementById("homzzang").innerHTML =
com.name + " " + com.year + " " + com.color// 객체명.속성명 형식
</script>

 

결과보기


방법2. 객체이름['속성이름']  (예) com['name'] , com['year'] 

주의: 대괄호 묶고, 반드시 안에 따옴표로 묶음.  큰따옴표든 작은따옴표든 상관 없음.  

 

<p id="homzzang"></p>


<script>
var com = {
    name : "홈짱",
    year : 2012,
    color : "blue"
};
document.getElementById("homzzang").innerHTML =
com["name"] + " " + com["year"] + " " + com["color"]// 객체명["속성명"] 형식
</script>



[주의] 아래처럼 대괄호 안의 속성명을 따옴표로 묶지 않으면 아무것도 출력 안 됨.

 

<p id="homzzang"></p>

<script>
var com = {
    name : "홈짱",
    year : 2012,
    color : "blue"
};
document.getElementById("homzzang").innerHTML =
com[name] + " " + com[year] + " " + com[color]// 속성명을 따옴표로 안 묶으면 출력 안 됨.
</script>


결과보기 

 

Object Method(메서드) 접근

 

Object.Method() 

 


[예제1]

 

<p id="homzzang"></p>

<script>
var com = {
    name : "홈짱",
    year : "2012",
    model : function(c) {  // c는 임의로 써넣은 것일 뿐 필수 아님. 
       return this.name + " " + this.year;  
    }
};

document.getElementById("homzzang").innerHTML = com.model()
</script>

 

결과보기 (결과값: 홈짱 2012)


PS. [주의]  Object.Method() 에서 소괄호 () 빼면, 정상적으로 출력되지 않고 함수 정의 내용 출력.

 

<p id="homzzang"></p>

<script>
var com = {
    name : "홈짱",
    year : "2012",
    model : function(c) {  
       return this.name + " " + this.year;  
    }
};

document.getElementById("homzzang").innerHTML = com.model// ()이 빠지면 정상출력 안 됨.
</script>
 

[예제2] - 함수 정의를 객체 밖에 한 후, 해당 함수명만 지정해도 됨.

 

<p id="homzzang"></p>


<script>

var com = {

    name : "홈짱",

    year : "2012",

    model : hz

};


function hz(c) {  // c는 임의로 써넣은 것일 뿐 필수 아님. 

       return this.name + " " + this.year;  

}    

    

document.getElementById("homzzang").innerHTML = com.model(); 

</script>

 

결과보기 (결과값: 홈짱 2012)

 

 

Object 변수 생성 - new 키워드 사용

 

JS 변수가 키워드 new와 함께 선언되면, 그 변수는 객체로 생성됨.


var x = new String();      // 문자열객체
var y = new Number();   // 숫자객체
var z = new Boolean();   // 참거짓객체

 

Object 선언 금지 유형

 

문자열(Strings), 숫자(Numbers), 참거짓(Booleans)으로 객체 선언 금지.

왜냐하면, JS 코드를 복잡하게 만들어, 실행 처리 속도를 떨어뜨림.

 

 

Object 예제 - 중첩 Object 선언 (※ 반복문 이용)

※ 멤버1의 각 과목 점수와 멤버2 각 과목 점수 비교해 멤버1 이긴 줄 표시.

 

<script>

let members = {1:{},2:{}};


for(i=1; i<=9; i++){

    members[1][i] = document.getElementById('a_mb'+i).textContent;

    members[2][i] = document.getElementById('b_mb'+i).textContent;

    if (members[1][i]>members[2][i]){

        $('.tr_'+i+' .win').addClass('on');

    }

}

</script>

 

깜봉 님 (221010) https://sir.kr/qa/475932

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012