2021. 5. 21. 09:11ㆍ카테고리 없음
객체형 데이터 타입
객체형 데이터 타입은 소수의 데이터 요소가 아닌 다양한 데이터를 담을 수 있다는 특징이 있다.
1. 연관된 데이터들을 하나로 모을 수 있다.
2. 데이터를 가독성좋게 관리를 할수 있다.
3. 재사용성이 좋아지고 유지보수하는데 많은 이점이 생긴다.
1. 객체(object)
* 객체는 순서가 없는 정리정돈 상자이다
객체선언
* key : value 로 구성된 properties를 { } 중괄호로 묶어서 선언한다
ex) let 변수명 = {"key" : value};
* key값은 문자열을 사용한다.
따옴표가 없어도 되지만 띄어쓰기가 있다면 의도적으로 따옴표로 묶어줘야한다.
* value는 다양한 자료형이 올수있다
* value에 함수를 넣으면 method라고 한다
메소드: 특정기능을 정의한 코드의 집합
객체호출
* 객체 호출은 두가지 방법으로 할 수 있습니다
1. 변수명.key;
2. 변수명['key'];
2.배열 (array)
* 배열은 순서가 정해진 정리정돈 상자이다
배열선언
배열은 요소들을 [ ] 대괄호 로 묶어서 표현하고 각 요소들은 쉼표로 구분한다
요소에는 다양한 자료형이 사용하능하다
<script>
let alphabet = ['a','b','c','d','e']
</script>배열호출
배열의 각 요소들은 각각 숫자위치가 정해져있다.
이를 인덱스라고 하며 인덱스값으로 요소를 호출할수있다.
첫번째 인덱스는 0으로 시작한다
변수명[인덱스값];
<script>
let alphabet = ['a','b','c','d','e']
alert(alphabet[0]); // a
alert(alphabet[1]); // b
</script>3.함수 (function)
* 함수는 입력값에 따른 출력값을 주는 기능을 가진 상자이다.
(다른 인자를 입력하고 동일한 코드를 반복하여 다른결과를 출력할 수 있다)
함수선언
function키워드로 시작하고 그 뒤로 함수명, 괄호, 중괄호 로 선언한다.
<script>
function 함수명(parameter){
함수본문
};
</script>매개변수 (parameter)
매개변수는 함수의 선언에 나열되어 있는 변수들을 의미하며, 함수 호출시 전달된 인자를 받아들인다
함수호출
함수명 뒤에 ()를 붙여서 호출한다
()에는 인자가 들어갈 수 있다.
<script>
함수명(argument);
</script>* 주의 : ()없이 method에 접근하면 함수 정의를 반환한다
<script>
var person = {
firstName: "Byeong min",
lastName : "Choi",
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
// Byeong min Choi
document.getElementById("demo").innerHTML = person.fullName;
//function() { return this.firstName + " " + this.lastName; }
</script>
인자 (argument)
인자는 함수 호출시에 전달되는값이다.
1. 함수 호출시 매개변수보다 더 많거나 적은 인자를 전달 할 수 있다
<script>
function showMessage(firstName, lastName) {
alert("Hello " + firstName + " " + lastName);
}
showMessage("Choi", "Byeong", "Min");
// hello Choi Byeong
// 1-1. 더 많은 인자를 전달하면 무시된다.
showMessage("Choi");
// hello Choi undefined
// 1-2. 더 적은 인자를 전달하면 나머지 매개변수는 undefined를 정의한다.
showMessage();
// hello undefined undefiend
// 1-3 인자가 없으면 undefined를 정의한다.
</script>2-1 인자는 배열처럼 인덱스 값으로 접근이 가능하다
<script>
function showMessage(firstName, lastName) {
alert("Hello " + arguments[0] + " " + arguments[1]);
}
showMessage("Byeong", "Min");
// Hello Byeong Min
showMessage("Yu", "Jin");
// Hello Yu Jin
showMessage(111, 222);
// Hello 111 222
</script>
2-2 이 경우 인자는 매개변수가 없어도 유효하다
<script>
function showMessage() {
alert("Hello " + arguments[0] + " " + arguments[1]);
}
showMessage("Byeong", "Min");
// Hello Byeong Min
showMessage("Yu", "Jin");
// Hello Yu Jin
showMessage(111, 222);
// Hello 111 222
</script>
* 함수는 입력값에 따른 출력값을 주는 기능을 가진 상자에 비유했는데 출력값은 return이 담당한다.
ex1) 정상작동
<script>
function myFunction(p1, p2) {
let mul = p1 * p2;
let add = p1 + p2;
let sub = p1 - p2;
return mul; // 12
}
alert(myFunction(4,3))
// return mul; ->12
// return add; -> 7
// return sub; -> 1
</script>1. return은 함수 어디에나 위치할 수 있다.
2. 실행흐름이 return에 도달하면 함수의 실행은 그 지점에서 중단되고 함수를 호출한 곳에 값을 반환한다.
3. return이 없거나 return만 있는 함수는 undefined를 반환
ex2) 출력안됨 실행흐름이 return에 도달하면 즉시 함수종료하고 값을 호출한 곳으로 반환
<script>
function myFunction(p1, p2) {
let mul = p1 * p2;
return add; //함수종료
let add = p1 + p2;
let sub = p1 - p2;
}
alert(myFunction(4,3))
// 출력안됨
// return mul; -> 12
// return sub; -> 출력안됨
</script>ex3) return만 있으면 undefined출력
<script>
function myFunction(p1, p2) {
return;
}
alert(myFunction(4,3))
// undefined출력
// return에 계산식이 있으면 정상출력 ex) return p1 + p2; -> 7
</script>ex4) return이 없으면 undefined출력
<script>
function myFunction(p1, p2) {
let mul = p1 * p2;
}
alert(myFunction(4,3))
</script>
// undefined출력