for in 문과 객체 프로퍼티 출력
전공서적/인사이드자바스크립트2017. 8. 10. 13:07
for in 문과 객체 프로퍼티 출력
for in 문을 사용하면, 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다
for in문이 수행되면서 prop 변수에 foo객체의 프로퍼티가 하나씩 할당
//객체 리터럴을 통한 foo 객체 생성
var foo = {
name : 'foo',
age : 30,
major : 'computer science'
};
//for in문을 이용한 객체 프로퍼트 출력
var prop;
foo(prop in foo){
console.log(prop, foo[prop]);
}
출력결과
name foo
age 30
major 'computer science'
<참고문헌 : 인사이드자바스크립트>
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| 문자열 (0) | 2017.08.30 |
|---|---|
| 참조타입의 특성 (0) | 2017.08.25 |
| Javascript 문자열 (0) | 2017.08.06 |
| Javascript 기본타입 (0) | 2017.08.06 |
| 참조에 의한 호출방식 (Call By Value) (0) | 2017.08.02 |
Javascript 문자열
전공서적/인사이드자바스크립트2017. 8. 6. 01:11
Javascript 문자열
문자열은 작은따옴표나 큰따옴표로 생성
자바스크립트에서는 문자 하나만을 별도로 나타내는 데이터 타입은 존재 X
var str = 'test';
console.log(str[0], str[1], str[2], str[3]); //(출력값) test
안돼는코드
str[0] = 'T';
console.log(str); //(출력값) test
문자열은 문자배열처럼 인덱스를 이용해서 접근할 수 있다.
여기서 주목할 점은 str[0] = 'T'로 변경했을 때 에러가 발생하지 않았으나 원래 문자열은 'test'가 출력된다.
=> 즉, 자바스크립트에서는 한 번 생성된 문자열은 읽기만 가능하지 수정은 불가능하다.
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| 참조타입의 특성 (0) | 2017.08.25 |
|---|---|
| for in 문과 객체 프로퍼티 출력 (0) | 2017.08.10 |
| Javascript 기본타입 (0) | 2017.08.06 |
| 참조에 의한 호출방식 (Call By Value) (0) | 2017.08.02 |
| Javascript 프토로타입 (0) | 2017.08.02 |
Javascript 기본타입
전공서적/인사이드자바스크립트2017. 8. 6. 00:36
Javascript 기본타입
Javascript에서 기본타입은 숫자, 문자, boolean값을 비롯해 null, undefined 라는 타입이 있다.
이들 타입의 특징은 그 자체가 하나의 값을 나타낸다는 것이다.
Javascript는 느슨한 타입 체크 언어
Example1)
변수를 선언할 때 타입을 미리 정하지 않고 var라는 한가지 키워드로만 변수를 선언하는 것
이렇게 선언된 변수에는 어떤 타입의 데이터라도 저장하는 것이 가능
-> 변수에 어떤 형태의 데이터를 저장하느냐에 따라 해당 변수의 타입이 결정
Example2)
//숫자 타입
var intNum = 10;
var floatNum = 0.1;
//불린 타입
var boolVar = true;
//undefined 타입
var emptyVar;
//null 타입
var nullVar = null;
console.log(
typeof intNum
typeof floatNum
typeof boolVar
typeof emptyVar
typeof nullVar
);
출력결과
number number boolean undefined object
<참고문헌 : 인사이드자바스크립트>
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| for in 문과 객체 프로퍼티 출력 (0) | 2017.08.10 |
|---|---|
| Javascript 문자열 (0) | 2017.08.06 |
| 참조에 의한 호출방식 (Call By Value) (0) | 2017.08.02 |
| Javascript 프토로타입 (0) | 2017.08.02 |
| Javascript 배열의 요소 생성 (0) | 2017.08.02 |
참조에 의한 호출방식 (Call By Value)
전공서적/인사이드자바스크립트2017. 8. 2. 23:54
참조에 의한 호출방식 (Call By Value)
기본타입과 참조타입의 경우는 함수 호출반식도 다름
기본타입의 경우는 값에의한호출(call by value)방식
-> 즉, 함수를 호출할 때 인자로 기본타입의 값을 넘길 땐, 호출된 함수의 매개변수로 복사된 값이 전달
=> 때문에 함수 내부에서 매개변수를 이용해 값을 변경해도, 실제로 호출된 변수의 값이 변경되지는 않음
객체와 같은 참조타입의 경우 함수를 호출할 때 참조에의한 호출(call by Reference)방식으로 동작
-> 즉, 함수를 호출할 때 인자로 참조 타입인 객체를 전달할경우, 객체의 프로퍼티값이 함수의 매개변수에 복사X, 인자로 넘긴 객체의 참조값이 그대로 함수내부로 전달
=> 때문에 함수 내부에서 참조값을 이용해서 인자로 넘긴 실제 객체의 값을 변경할 수 있다.
var a = 100;
var objA = { value : 100 };
function changeArg(num, obj){
num = 200; //1번
obj.value = 200; //2번
console.log(num);
console.log(obj);
}
changeArg(a, objA); //3번
console.log(a);
console.log(A);
출력결과
200
{value : 200}
100
{value : 200}
3번에서 changeArg()함수를 호추하면서 인자값으로 기본타입인 숫자를가진 변수 a와 참조타입인 객체objA를 넘김
1번과 2번처럼 함수 내부에서 매개변수 num과 obj를 이용해 인자로 전달된 a와 objA.val의 값을 100에서 200으로 바꿨지만, 함수 호출이 끝난후에는 참조타입인 객체 objA.value 프로퍼티만이 실제 값으로 변해있다는 걸 알 수 있음
함수 내부에서 매개변수num을 이용해서 100을 200으로 바꿔도 변수a의 값은 변하지 않음
객체의 경우는 매개변수obj로 objA가 참조하는 객체의 위치 값이 그대로 전달되므로 실제 객체의 value 프로퍼티값이 changeAtr()함수 호출 후에도 적용 되는 것
<참고문헌 : 인사이드자바스크립트>
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| Javascript 문자열 (0) | 2017.08.06 |
|---|---|
| Javascript 기본타입 (0) | 2017.08.06 |
| Javascript 프토로타입 (0) | 2017.08.02 |
| Javascript 배열의 요소 생성 (0) | 2017.08.02 |
| Javascript 배열 표준 메서드와 length 프로퍼티 (0) | 2017.08.02 |
Javascript 프토로타입
전공서적/인사이드자바스크립트2017. 8. 2. 23:51
Javscript 프토로타입
자바스크립트의 모든객체는 자신의 부모역할을 하는 객체와 연결되어있다.
-> 객체지향의 상속개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것처럼 쓸 수 있는 것 같은 특
징이 있다.
자바스크립트에서는 이러한 부모 객체를 프로토타입객체(짧게는 프로토타입)이라고 부른다.
ECMAScript 명세서에는자바스크립트의 모든객체는 자신의 프로토타입을 가리키는[[Protytpe]]라는 숨겨진 프로퍼티를 가진다고 설명하고 있다.
객체를 생성할 때 결정된 프로토타입 객체는 이의의 다른 객체로 변경한느 것도 가능하다
-> 즉, 객체를 동적으로 바꿀 수 있다는 것
(Javascript에서는 이러한 특징을 활용해서 객체 상속 등의 기능을 구현한다.)
<참고문헌 : 인사이드자바스크립트>
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| Javascript 기본타입 (0) | 2017.08.06 |
|---|---|
| 참조에 의한 호출방식 (Call By Value) (0) | 2017.08.02 |
| Javascript 배열의 요소 생성 (0) | 2017.08.02 |
| Javascript 배열 표준 메서드와 length 프로퍼티 (0) | 2017.08.02 |
| Javascript 배열과 객체 (0) | 2017.08.02 |
Javascript 배열의 요소 생성
전공서적/인사이드자바스크립트2017. 8. 2. 23:46
Javascript 배열의 요소 생성
객체가 동적으로 프로퍼티를 추가할 수 있듯이, 배열도 동적으로 배열 원소를 추가할 수 있다.
자바스크립트 배열의 경우는 값을 순차적으로 넣을 필요없이 아무 인덱스 위치에나 값을 동적으로 추가할 수 있다.
//빈배열
//1번
var emptyArr = [];
console.log(emptyArr[0]); //(출력값) undefined
//배열 요소 동적 생성
//2번
emptyArr[0] = 100;
emptyArr[3] = 'eight';
emptyArr[7] = true;
console.log(emptyArr);
//(출력값) [100, undefined X2, "eight", undefined X3, true]
console.log(emptyArr.length); //(출력값) 8
2번
자바스크립트가 배열의 크기를 현재 배열의 인덱스 중 가장 큰 값을 기준으로 정하기 때문이다
자바스크립트의 모든 배열은 이러한 length 프로퍼티가 있다.
<참고문헌 : 인사이드자바스크립트>
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| 참조에 의한 호출방식 (Call By Value) (0) | 2017.08.02 |
|---|---|
| Javascript 프토로타입 (0) | 2017.08.02 |
| Javascript 배열 표준 메서드와 length 프로퍼티 (0) | 2017.08.02 |
| Javascript 배열과 객체 (0) | 2017.08.02 |
| Javascript 배열의 프로퍼티 동적 생성 (0) | 2017.08.02 |
Javascript 배열 표준 메서드와 length 프로퍼티
전공서적/인사이드자바스크립트2017. 8. 2. 23:05
배열 표준 메서드와 length 프로퍼티
자바스크립트는 배열에서 사용가능한 다양한 표준 메서드를 제공
이러한 배열 메서드는 length 프로퍼티를 기반으로 동작하고 있다.
Example)
push()메서드는 인수로 넘어온 항목을 배열의 끝에 추가하는 자바스크립트 표준배열 메서드임
이 메서드는 배열의 현재 length값의 위치에 새로운 원소값을 추가함
배열의 length프로퍼티는 '현재 배열의 맨 마지막 원소의 인덱스 + 1'을 의미함
-> 결국 length프로퍼티가 가리키는 인덱스에 값을 저장하는 것== 배열의 끝에 값을 추가하는것
//arr 배열 생성
var arr = ['zero','one','two'];
//push() 메서드 호출
arr.push('three');
console.log(arr); //(출력값) ['zero','one','two','three']
//length값 변경 후, push()메서드 호출
arr.length = 5;
arr.push('four');
console.log(arr); //(출력값) ['zero','one','two','three',undefined,'four']
push()메서드로 arr[3]위치에 'three'문자열을 저장함으로써 배열의 끝에 원소를 추가함
arr.length프로퍼티값을 임의로 5로 바꿈
push()메서드는 현재 변경된 arr.length가 가리키는 배열의 5번째 인덱스, arr[5]에 'four'문자열을 추가
-> 배열의 length프로퍼티는 배열 매서드에 동작에 영향을 줄수 있을만큼 중요한프로퍼티
<참고문헌 : 인사이드자바스크립트>
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| Javascript 프토로타입 (0) | 2017.08.02 |
|---|---|
| Javascript 배열의 요소 생성 (0) | 2017.08.02 |
| Javascript 배열과 객체 (0) | 2017.08.02 |
| Javascript 배열의 프로퍼티 동적 생성 (0) | 2017.08.02 |
| Javascript 배열 요소 삭제 (0) | 2017.08.02 |
Javascript 배열과 객체
전공서적/인사이드자바스크립트2017. 8. 2. 23:02
배열과 객체
자바스크립트에서 배열 역시 객체
하지만 배열은 일반객체와 약간의 차이가 있다.
//1번
//colorsArray 배열
var colorsArray = ['orange','yellow','green'];
console.log(colorsArray[0]); //(출력값) orange
console.log(colorsArray[1]); //(출력값) yellow
console.log(colorsArray[2]); //(출력값) green
//colorsObj 객체
var colorObj = {
'0' : 'orange',
'1' : 'yellow',
'2' : 'green'
};
console.log(colorsObj[0]); //(출력값) orange
console.log(colorsObj[1]); //(출력값) yellow
console.log(colorsObj[2]); //(출력값) green
//2번
//typeof 연산자 비교
console.log(typeof colorsArray); //(출력값) object (not array)
console.log(typeof colorsObj); //(출력값) object
//3번
//length 프로퍼티
console.log(colorsArray.length); //(출력값) 3
console.log(colorsObj.length); //(출력값) undefined
//4번
//배열 표준 메서드
colorsArray.push('red'); //['orange','yellow','green','red']
colorsObj.push('red'); //Uncaught TypeError: Object #<Object> has no method 'push'
1번 - 배열과 객체 생성
colorSArray배열의 형태와 유사하게 객체 리터럴 방식으로 colorsObj객체를 생성
객체프로퍼티설명할 때, 대괄호 안에는 접근하려는 프로퍼티의 속성을 문자열 형태로 적어야 한다고했음
(colorObj[0]이아니라 colorObj['0']형태로 기입해야 맞는거 BUT 저렇게 안써도 제대로출력됨)
-> 이유는 자바스크립트엔진이 []연산자 내에 숫자가 사용될 경우, 해당 숫자를 자동으로 문자열 형태로 바꿔주기때문
2번 - typeof 연산자 비교
typeof 연산결과는 배열과 객체가 모두 object인걸 기억해야함
-> 즉, 자바스크립트도 배열을 객체로 생각하는 것
3번 length 프로퍼티 존재 여부
배열 colorsArray와 객체 colorObj는 근본적 차이가 있음
colorsObj는 객체이므로 length 프로퍼티가 존재 X
-> colorsArray.length는 3이 출력되지만 colorsObj.length 결과가 undefined인 이유
4번 - 배열 표준 메서드 호출 여부
배열과 객체의 또하나의 차이점은 colorObj는 배열이 아니므로 push()메서드와 같은 표준 배열 메서드를 사용X
-> 배열과 객체가 자신의 부모인 프로토타입 객체가 서로 다르기때문
객체리터럴방식으로 생성한 객체의 경우, 객체 표준 메서드를 저장하고 있는 Object.prototype 객체가 프로토타입.
배열의 경우 Array.prototype 객체가 부모객체인 프로토타입.
Array.prototype객체의 프로토타입은 Object.prototype 객체가 된다.
객체는 자신의 프로토타입이 가지는 모든 프로퍼티 및 메서드들을 상속받아 사용 O이므로 배열은 Array.prototype에 포함된 배열 표준 메서드와 Object.prototype의 표준 메서드들을 모두 사용할 수 있다.
<참고문헌 : 인사이드자바스크립트>
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| Javascript 배열의 요소 생성 (0) | 2017.08.02 |
|---|---|
| Javascript 배열 표준 메서드와 length 프로퍼티 (0) | 2017.08.02 |
| Javascript 배열의 프로퍼티 동적 생성 (0) | 2017.08.02 |
| Javascript 배열 요소 삭제 (0) | 2017.08.02 |
| Javascript 배열의 프로퍼티 열거 (2) | 2017.08.02 |
Javascript 배열의 프로퍼티 동적 생성
전공서적/인사이드자바스크립트2017. 8. 2. 22:59
배열의 프로퍼티 동적 생성
//배열생성
var arr = ['zero','one','two'];
console.log(arr.length); //(출력값) 3
//프로퍼티 동적 추가
arr.color = 'blue';
arr.name = 'number_array';
console.log(arr.length); //(출력값) 3
//배열 원소 추가
arr[3] = 'red';
console.log(arr.length); //(출력값) 4
//배열 객체 출력
console.dir(arr);
arr배열에 동적으로 color와 name프로퍼티를 추가함
주목할점 - 배열에 동적 프로퍼티가 추가될 경우는 배열의 length가 값이 3으로 바뀌지 않는다는것
그런다음 다시 arr[3]에 원소를 추가하면 length가 4로 바뀜
-> 즉, 배열의 length프로퍼티는 배열 원소의 가장 큰 인덱스가 변했을 경우만 변경
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| Javascript 배열의 요소 생성 (0) | 2017.08.02 |
|---|---|
| Javascript 배열 표준 메서드와 length 프로퍼티 (0) | 2017.08.02 |
| Javascript 배열과 객체 (0) | 2017.08.02 |
| Javascript 배열 요소 삭제 (0) | 2017.08.02 |
| Javascript 배열의 프로퍼티 열거 (2) | 2017.08.02 |
Javascript 배열 요소 삭제
전공서적/인사이드자바스크립트2017. 8. 2. 22:52
배열 요소 삭제
배열도 객체임으로 배열요소나 프로퍼티를 삭제하는데 delete연산자가 사용 가능
var arr = ['zero','one','two','three'];
delete arr[2];
console.log(arr); //(출력값) ["zero","one",undefined X1,"three"]
console.log(arr.length); //(출력값) 4
delete arr[2]로 배열의 요소를 삭제하면, arr[2]에 undefined가 할당된다.
그러나 delete연산자로 배열 요소 삭제 후에도 배열의 length값은 변하지 않는다.
-> 즉, delete 연산자는 해당 요소의 값을 undefined로 설정할 뿐 원소자체를 삭제하지는 않는다.
=> 이때문에 보통 배열에서 요소들을 완전히 삭제할 경우 자바스크립트에서 splice()배열 메서드를 사용한다.
splice() 배열 메서드
splice(start, deleteCount, item ...)
start : 배열에서 시작위치
deleteCount - start에서 지정한 시작 위치부터 삭제할 요소의 수
item - 삭제할 위치에 추가할 요소
var arr = ['zero','one','two','three'];
arr.splice(2,1); //2번째 요소를 시작점으로 1개의 원소를 삭제한다
console.log(arr); //(출력값) ["zero","one","two","three"]
console.log(arr.length); //(출력값) 3
splice(2,1) 메서드로 arr배열 내 2번째 위치부터 1개의 요소를 삭제했다.
delete연산자와 다르게 배열요소를 완전히 없애게 된다
-> 따라서 배열 개수도 3
<참고문헌 : 인사이드자바스크립트>
'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글
| Javascript 배열의 요소 생성 (0) | 2017.08.02 |
|---|---|
| Javascript 배열 표준 메서드와 length 프로퍼티 (0) | 2017.08.02 |
| Javascript 배열과 객체 (0) | 2017.08.02 |
| Javascript 배열의 프로퍼티 동적 생성 (0) | 2017.08.02 |
| Javascript 배열의 프로퍼티 열거 (2) | 2017.08.02 |
