펭귄집

숫자



자바스크립트는 하나의 숫자형만 존재
모든 숫자를 64비트 부동 소수점 형태로 저장하기 때문 -> 이는 C언어의 double 타입과 유사

var키워드로 선언되 자바스크립트 변수에는 정수나 실수 구분없이 그 값을 바로 저장할 수 있으므로 intNum, floatNum변수 모두 typeof연산자의 결과값이 number

자바스크렙스에선 정수형이 따로 X, 모든 숫자를 실수로 처리 -> 나눗셈할 때 주의



var num = 5/2;


console.log(num); 
console.log(Math.floor(num));



결과

2.5


2



이같이 소수 부분을 버리고 정수부분만 구하고 싶으면 Math.floor() 메서드 사용 ㄱㄱ


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

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

Array() 생성자 함수  (0) 2017.11.16
Javscript배열 리터럴  (0) 2017.11.13
배열  (0) 2017.10.26
객체비교  (0) 2017.10.25
함수 호이스팅  (1) 2017.08.31

Array() 생성자 함수



배열은 일반적으로 배열 리터럴로 생성하지만, 배열 리터럴도 결국 자바스크립트 기본 제공 Array() 생성자 함수 로배열을 생성하는 과정을 단순화시킨 것.
생성자 함수로 배열과 같은 객체를 생성할 때는 반드시 new 연산자를 같이 써야한다는 거 알아둬

- 호출할 때 인자가 1개이고, 숫자일겨우 : 호출된 인자를 length로 갖는 빈 배열 생성

-  그 외의 경우 : 호출된 인자를 요소로 갖는 배열 생성


var foo = new Array(3);

console.log(foo);          
console.log(foo.length);  

var bar = new Array(1, 2, 3);
console.log(bar);     
console.log(bar.length);




결과값


[undefined, undefined, undefined]

3

1, 2, 3

3


foo 배열의 경우 Array() 생성자 함수를 호출 할 때 3이라는 인자 1개만 넘겼으므로, 3개의 요소가 있는 빈 배열 생성

반면, bar배열의 경우는 Array(1,2,3)와 같이 호출했으므로 1,2,3 세개의 숫작 요소인 배열이 생성

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


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

javascript 소수점 없앨 때  (0) 2017.11.23
Javscript배열 리터럴  (0) 2017.11.13
배열  (0) 2017.10.26
객체비교  (0) 2017.10.25
함수 호이스팅  (1) 2017.08.31

Javascript 배열


배열은 자바스크립트 객체의 특별한 형태이다.

-> 즉, 굳이 크기를 지정하지 않아도 되며, 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다. 




Javascript 배열 리터럴


배열리터럴은 자바스크립트에서 새로운 배열을 만드는데 사용하는 표기법이다.
객체리터럴 표기법 : ({ }) -> 중괄호

배열리터럴 표기법 : ([ ]) -> 대괄호





//배열 리터럴을 통한 5개 원소를 가진 배열생성

var colorArr = ['orange', 'yellow', 'blue', 'green', 'red'];
console.log([0]);  //(출력값) orange
console.log([1]);  //(출력값) yellow
console.log([4]);  //(출력값) red



객체 리터럴에서는 프로퍼티 이름과 프로퍼티값을 모두 표기해야 하지만,
배열리터럴에서는 각 요소의 값만 포함한다. 
객체가 프로퍼티의 이름으로 대괄호나 마침표표기법을 이용해 해당 프로퍼티에 접근했다면,
배열의 경우는 접근하고자 한느 원소에 배열 내 위치 인덱스 값을 넣어서 접근한다.

배열 내의 첫 번째 원소는 인덱스0부터 시작한다.




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

 



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

javascript 소수점 없앨 때  (0) 2017.11.23
Array() 생성자 함수  (0) 2017.11.16
배열  (0) 2017.10.26
객체비교  (0) 2017.10.25
함수 호이스팅  (1) 2017.08.31

배열


배열은 자바스크립트 객체의 특별한 형태이다.

-> 즉, 굳이 크기를 지정하지 않아도 되며, 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다.



배열 리터럴

배열리터럴은 자바스크립트에서 새로운 배열을 만드는데 사용하는 표기법이다.
객체리터럴 표기법 : ({ }) -> 중괄호
배열리터럴 표기법 : ([ ]) -> 대괄호


//배열 리터럴을 통한 5개 원소를 가진 배열생성

var colorArr = ['orange', 'yellow', 'blue', 'green', 'red'];


console.log([0]);  
console.log([1]);  
console.log([4]);  


출력

(출력값) orange

(출력값) yellow

(출력값) red



객체 리터럴에서는 프로퍼티 이름과 프로퍼티값을 모두 표기해야 하지만,
배열리터럴에서는 각 요소의 값만 포함한다. 

객체가 프로퍼티의 이름으로 대괄호나 마침표표기법을 이용해 해당 프로퍼티에 접근했다면,
배열의 경우는 접근하고자 한느 원소에 배열 내 위치 인덱스 값을 넣어서 접근한다.

배열 내의 첫 번째 원소는 인덱스0부터 시작한다.



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


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

Array() 생성자 함수  (0) 2017.11.16
Javscript배열 리터럴  (0) 2017.11.13
객체비교  (0) 2017.10.25
함수 호이스팅  (1) 2017.08.31
자바스크립트 참조타입(객체타입)  (0) 2017.08.30

객체비교


동등연산자(==)를 사용하여 두 객체를 비교할 때도 객체의 프로퍼티 값이 아닌 참조값을 비교한다는 것을 알아야 한다.


var a = 100;
var b = 100;

var objA = { value : 100 };
var objB = { value : 100 };

var objC = objB;

1번
console.log(a == b);       
2번
console.log(objA == objB);  
3번
console.log(objB == objC); 


출력값

1번

console.log(a == b);        //(출력값) true
2번
console.log(objA == objB);  //(출력값) false
3번
console.log(objB == objC);  //(출력값) true


1번
a와 b는 숫자100을 저장하고 있는 기본타입의 변수
기본타입으 경우 동등 연산자(==)를 이용해서 비교할때 값을비교
두 변수 모두 100이라는 동일한 값을 가지고 있으므로 a==b의 결과가 true

2번
아래그림처럼 objA와 objB는 다른객체지만 같은 형태의 프로퍼티값을 갖고있음
하지만 동등연산자(==)로 두 객체를 비교하면 1번과 다르게 결과가 false
-> 이유는 1번처럼 기본타입의 경우는 값 자체를 비교해서 일치여부를 판단하지만, 객체와 같은 참조타입의 경우는 참조값이 같아야 true


objA ->    value : 100

objB ->
               value : 100

objC -> 


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


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

Javscript배열 리터럴  (0) 2017.11.13
배열  (0) 2017.10.26
함수 호이스팅  (1) 2017.08.31
자바스크립트 참조타입(객체타입)  (0) 2017.08.30
null 과 undefined  (0) 2017.08.30

함수 호이스팅



함수를 생성하는 3가지 방법이 있는데 동작방식이 약간의 차이가 있다. 

=> 그 중 하나가 함수 호이스팅(Function Hoisting)


함수표현식만을 사용할 것을 권장하는데 그 이유는 함수 호이스팅때문

//함수 선언문 방식과 함수 호이스팅

//1번
add(2,3);  // 5

//함수 선언문 형태로 add() 함수 정의
//2번
function add(x,y) {
     return x + y;
}

//3번
add(3,4);  // 7


1번
이 시점에서 add()함수가 정의되지 않았음에도 2번에 정의된 add()함수를 호출하는 것이 가능하다.
-> 이것은 함수가 자신이 위치한 코드에 상관없이 함수 선언문 형태로 정의한 함수의 유효범위는 코드의 맨 처음부터 시작한다는 것을 확인할 수 있다.
=> 이것이 함수 호이스팅

3번

2번에서 정의된 add() 함수가 정상적으로 호출


이러한 함수 호이스팅은 함수를 사용하기 전에 반드시 선언해야한다는 규칙을 무시하므로 코드의 구조를 엉성하게 만들 수도 있음
-> 함수 표현식 사용 이유

함수 표현식으로하면 위의 결과가 달라


//함수 표현식 방식과 함수 호이스팅
//1번
add(2,3);  //uncaught type error

//함수 표현식 형태로 add()함수 정의
//2번
var add = function(x,y){
     return x + y;
}

//3번
add(3,4);  //7


1번
add()함수는 2번에서 함수 표현식 형태로 정의되어 있어 호이스팅이 일어나지않는다.
-> 따라서 3번과 같이 함수가 생성된 이후에 호출이 가능.
1번에서는 add()함수를 호출한 시점에서 아직 add()함수가 생성되기 전이므로 uncaught type error 에러가 발생

3번

add()함수가 생성된 후에는 함수가 정상적으로 동작한다는 것을 확인 가능


이러한 함수 호이스팅이 발생하는 원인은 자바스크립트의 변수생성(Instantiation)초기화(Initialization) 작업이 분리돼서 진행되기 때문


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

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

배열  (0) 2017.10.26
객체비교  (0) 2017.10.25
자바스크립트 참조타입(객체타입)  (0) 2017.08.30
null 과 undefined  (0) 2017.08.30
문자열  (0) 2017.08.30

자바스크립트 참조타입(객체타입)



자바스크립트에서 숫자, 문자열, 불린값, null, undefined 같은 기본 타입으 제외한 모든 값은 객체다.
-> 따라서 배열, 함수, 정규표현식 등도 모두 결국 자바스크립트 객체로 표현된다.

자바스크립트에서 객체는 단순히 '이름(key) : 값(value)' 형태의 프로퍼티들을 저장하는 컨테이너로서, 해시라는 자료구조와 유사하다.

자바스크립트에서 기본타입은 하나의 값만을 가지는데 비해, 참조타입인 객체는 여러개의 프로퍼티들을 포함할 수 있으며, 이러한 객체의 프로퍼티는 기본타입의 값을 포함하거나, 다른객체를 가리킬 수 있다.

-> 이러한 프로퍼티의 성질에 따라 객체의 프로퍼티는 함수로 포함할 수 있으며, 자바스크립트에서는 이러한 프로퍼티를 메서드라 부른다.



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


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

객체비교  (0) 2017.10.25
함수 호이스팅  (1) 2017.08.31
null 과 undefined  (0) 2017.08.30
문자열  (0) 2017.08.30
참조타입의 특성  (0) 2017.08.25

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