개발 일기

자바스크립트 - 함수 / 배열 / 객체 본문

Tech/Javascript

자바스크립트 - 함수 / 배열 / 객체

flow123 2021. 10. 19. 22:29

함수

자바스크립트는 함수의 비중이 높은 언어다.

function get_member1(){
    return 'egoing';
}
 
function get_member2(){
    return 'k8805';
}

alert(get_member1());
alert(get_member2());

return 의 기능

(1) 함수를 종료시킴

(2) RETURN 뒤의 ; (세미콜론) 전 까지를 출력값으로 반환함.

 

함수를 정의하는 또 다른 방식 - 변수에 함수 할당하기 

var numbering = function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();

익명함수는 언제 쓸까? 이름이 필요 없고, 바로 써야할 때.

(function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
})();

 

배열

연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 타입.

function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}

//members 라는 변수에 return 값들을 담는다. 

var members = get_members();

document.write(members[0]);
document.write(members[1]);
document.write(members[2]);

 

배열을 이렇게 사용할 수도 있다.

function get_members(){
  return ['egoing', 'k8805', 'sorialgi']
}

members = get_members();

for(var i = 0; i < members.length; i++) {
  documnet.write(members[i].toUpperCase()+"<br />");
}

배열을 제어하기.

(1) 하나의 원소 추가 - Push

var li = ['a', 'b', 'c', 'd', 'e']; 
li.push('f');
alert(li);

//결과값: ['a', 'b', 'c', 'd', 'e', 'f']

(2) 복수의 원소 추가 - concat

var li = ['a', 'b', 'c', 'd', 'e']; 
li = li.concat('f','g');
alert(li);

 

객체

객체 - 배열: 데이터를 담는 그릇이라는 점에서 동일하다.

배열 객체 
-index 값으로 숫자를 씀.
-대괄호 사용
-저장된 데이터 순으로 저장됨. 그러니 순서 자체도 중요한 정보이다.		 -first, second 등 원하는 값으로 index를 사용할 수 있음.
-중괄호 사용.
-객체는 순서없이 저장되고, 'key'-'value' 쌍이다.

*그러니 인덱스 값으로 문자를 쓰고 싶다면 객체를 써야 한다. 파이썬의 dictionary 도 객체에 해당한다.

 객체를 사용하려면 변수를 만들고 객체를 담아내자.

var grades = {'egoing':10, 'k8805':6, 'sorialgi' :80}

아래와 같이 만들수도 있다.

var grades = {}; // var grades = new Object(); 로도 표현 가능. 
grades['egoing'] = 10;
grades['k8805'] = 6;
grades['sorialgi'] = 80;

 

 

자바스크립트 객체로 FOR 문 돌리고 LIST 화 하기.

<html>
<head>
    <title></title>
</head>
<body>

<ul>
    <li>egoing</li>
    <li>egoing</li>
    <li>egoing</li>
</ul>

<script type="text/javascript">
var grades = {'egoing':10, 'k8805':6, 'sorialgi':80};
for (var name in grades) {
    document.write("key: "+name+"value :"+grades[name]+"<br />");
}
</script>
</body>
</html>

*for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name 에 담아서 반복문 실행.

객체 뿐만 아니라 배열도 for 문으로 쓸 수가 있다.

 

객체 지향 프로그래밍 - 객체 안에는 함수가 저장될 수 있다.

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();

this: 자바스크립트에서 약속된 변수. 여기서는 이 function 을 갖고 있는 변수다.

함수가 소속되어 있는 객체를 가리킨다.

//여기서 this 는 grades 를 가리킨다. 

var grades = {
  'list':{'egoing': 10, 'k8805': 6, 'sorialgi': 80},
   'show' : function(){
   		alert(this.list);
	}
} 

grades['show']();

var grades = {
  'list':{'egoing': 10, 'k8805': 6, 'sorialgi': 80},
   'show' : function(){
        for(var name in this.list) {
        	console.log(name,this.list[name]);
	}
} 
}
 
grades['show']();
//grades.show(); 도 같은 결과.

이렇게 하게 되면, 키 값과 value 를 하나씩 읽어준다.

위의 코드는 grades 라는 객체 안에 list 라는 데이터와 show라는 함수가 포함되어 있다.

연관되어 있는 데이터 / 연관 되어 있는처리 함수를 묶어두는 것을 객체 지향 프로그래밍이라고 한다.

 

 

* 이고잉님의 생활코딩 Javascript 강의를 듣고 적은 노트입니다.  

'Tech > Javascript' 카테고리의 다른 글

모듈과 라이브러리  (0) 2021.10.19
'Tech/Javascript' Related Articles more
Comments