모던 웹을 위한 Javascript jQuery 책을 보면서 정리하는 내용이다.
자바스크립트의 기본 자료형은 숫자, 문자열, 불, 객체, 함수, undefined로 배열이 없다.
alert(typeof ([]));
위 코드를 실행하면 object가 출력되는데, 왜 배열이 객체로 나오는걸까?
객체생성 예시)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>object</title> <script> /* 객체(object) */ var product = { 제품명: '바나나나', 유형 : '과일', 원산지 : '필리핀', 성분 : '바나나' }; document.write(product['제품명']); document.write(product['유형']); document.write(product['원산지']); document.write(product['성분']); alert(product.제품명);
alert(product.유형);
alert(product.원산지);
alert(product.성분); </script> </head> <body> </body> </html> | cs |
객체의 키는 식별자 또는 문자를 모두 사용할 수 있다. 대부분 개발자가 식별자를 키로 사용하지만 식별자로 사용할 수 없는 단어는 문자열을 사용할 수도 있다.
식별자가 아닌 문자를 키로 사용하면 무조건 대괄호를 사용해야 객체의 요소에 접근할 수 있다.
속성과 메소드
배열 내부에 있는 값을 요소라고 부른다. 객체 내부에 있는 값은 속성이라 부른다.
객체의 속성 중 함수 자료형인 속설을 특별히 메서드라고 부른다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>object</title> <script> /* 객체(object) */ var person = { name : 'moondol', eat : function (food) { alert(this.name + '가 ' + food + '를 먹어요!'); } }; person.eat('개구리'); </script> </head> <body> </body> </html> | cs |
결과 : moondol가 개구리를 먹어요!
자기 자신의 속성을 출력하려면 this를 활용한다.
객체와 반복문
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>object</title> <script> /* 객체(object) */ var product = { name : 'computer1', price : '1000', weight : '2kg' }; var output = ''; for (var key in product) { output += key + ' : ' + product[key] + '\n'; } alert(output); </script> </head> <body> </body> </html> | cs |
퇴사 관련 이야기들을 모아 책으로 출판했습니다.
아래 링크에서 전체 목차를 읽어보세요!
대기업 퇴사 이야기 전체보기 : http://www.bookk.co.kr/book/view/21659
아래 링크로 간단한 후기 링크를 남기면 배송비도 환급된다고 하니 참고해주세요.
http://www.bookk.co.kr/community/postscript
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| 자바스크립트 객체의 속성추가 및 제거 (0) | 2017.10.09 |
|---|---|
| 자바스크립트 in / with 키워드 (0) | 2017.10.08 |
| 자바스크립트 setTImeout 실행순서 (0) | 2017.10.05 |
| 자바스크립트 함수(2) 콜백함수 클로저 (0) | 2017.10.04 |
| 자바스크립트 함수 (0) | 2017.10.03 |