펭귄집

null과 undefined



이 두타입은 모두 자바스크립트에서 '값이 비어있음'을 나타낸다.

자바스크립트 화경 내에서 기본적으로 값이 할당되지 않는 변수는 undefined타입이며, undefined타입의 변수는 변수 자체의 값 또한 undefined이다.
=> 이처럼 자바스크립트에서 undefined는 타입이자, 값을 나타낸다는을 주의해야 한다

emptyVar변수에는 아무런 값이 할당되지 않으므로 undefined타입이 출력된 것이고,

이에반해 nullVar 변수와 같이 null 타입 변수의 경우는 개발자가 명시적으로 값이 비어있음을 나타내는데 사용한다.


여기서 주의할 점은 null 타입 변수인 nullVar의 typeof결과가 null이 아니라 object라는 것이다.
-> 자바스크립트에서는 null타입 변수인지를 확인할 때 typeof 연산자를 사용하는게 아니라 일치연산자(===)를 사용해서 변수의 값을 직접 확인해야 한다.


//null타입 변수 생성

var nullVar = null;

console.log(typeof nullVar == null);  //(출력값) false
console.log(nullVar === null); //(출력값) true




<참고문헌 : 인사이드자바스크립트>

'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글

함수 호이스팅  (1) 2017.08.31
자바스크립트 참조타입(객체타입)  (0) 2017.08.30
문자열  (0) 2017.08.30
참조타입의 특성  (0) 2017.08.25
for in 문과 객체 프로퍼티 출력  (0) 2017.08.10

문자열



문자열은 작은따옴표나 큰따옴표로 생성

자바스크립트에서는 문자 하나만을 별도로 나타내는 데이터 타입은 존재 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.30
null 과 undefined  (0) 2017.08.30
참조타입의 특성  (0) 2017.08.25
for in 문과 객체 프로퍼티 출력  (0) 2017.08.10
Javascript 문자열  (0) 2017.08.06

참조타입의 특성



자바스크립트에서는 기본타입인 숫자, 문자열, 불린값, null, undefined 5가지를 제외한 모든 값은 객체

배열이나 함수 또한 객체로 취급
-> 이러한 객체는 자바스크립트에서 참조타입이라고 부른다. 
=> 이것은 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문


//1번

var objA = {

val : 40;

};


//2번

var objB = objA;


console.log(objA.val);  //(출력값) 40

console.log(objB.val);  //(출력값) 40


//3번

objB.val = 50;

console.log(objA.val);  //(출력값) 50

console.log(objB.val);  //(출력값) 50



1번

objA 객체를 리터럴 방식으로 생성

여기서 objA변수는 객체 자체를 저장하고 있는 것이 아니라 새성된 객체를 가리키는 참조값을 저장


2번

변수 objB에 objA값을 할당.

objA는 1번에서 생성된 객체를 가리키는 참조값을 가지고 있으므로 변수objB에도 이같은 객체의 참조값이 저장

-> 즉, 아래 그림같이 objA와 objB 변수가 동일한 객체를 가리키는 참조값을 가지게 되는 것

=> 따라서 a.val과 b.val값이 40


objA ->

val : 40

objB ->


3번

변수 objB가 가리키는 객체의 val값을 40에서 50으로 갱신

이때 변수 objA도 변수 objB와 동일한 객체를 참조하고 있으므로 a.val값이 50으로 변경




<참고문헌 : 인사이드자바스크립트>


'전공서적 > 인사이드자바스크립트' 카테고리의 다른 글

null 과 undefined  (0) 2017.08.30
문자열  (0) 2017.08.30
for in 문과 객체 프로퍼티 출력  (0) 2017.08.10
Javascript 문자열  (0) 2017.08.06
Javascript 기본타입  (0) 2017.08.06

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 문자열

문자열은 작은따옴표나 큰따옴표로 생성

자바스크립트에서는 문자 하나만을 별도로 나타내는 데이터 타입은 존재 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'가 출력된다.

=> 즉, 자바스크립트에서는 한 번 생성된 문자열은 읽기만 가능하지 수정은 불가능하다. 


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



<참고문헌 : 인사이드자바스크립트>




참조에 의한 호출방식 (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()함수 호출 후에도 적용 되는 것





<참고문헌 : 인사이드자바스크립트>

Javscript 프토로타입



자바스크립트의 모든객체는 자신의 부모역할을 하는 객체와 연결되어있다.
-> 객체지향의 상속개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것처럼 쓸 수 있는 것 같은 특
징이 있다.

자바스크립트에서는 이러한 부모 객체를 프로토타입객체(짧게는 프로토타입)이라고 부른다.

ECMAScript 명세서에는자바스크립트의 모든객체는 자신의 프로토타입을 가리키는[[Protytpe]]라는 숨겨진 프로퍼티를 가진다고 설명하고 있다.

객체를 생성할 때 결정된 프로토타입 객체는 이의의 다른 객체로 변경한느 것도 가능하다

-> 즉, 객체를 동적으로 바꿀 수 있다는 것 
(Javascript에서는 이러한 특징을 활용해서 객체 상속 등의 기능을 구현한다.) 



<참고문헌 : 인사이드자바스크립트>


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 프로퍼티가 있다.




<참고문헌 : 인사이드자바스크립트>


배열 표준 메서드와 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프로퍼티는 배열 매서드에 동작에 영향을 줄수 있을만큼 중요한프로퍼티





<참고문헌 : 인사이드자바스크립트>