Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

재훈재훈

여러가지 리터럴 본문

Computer Engineering/JavaScript

여러가지 리터럴

jaehoonx2 2018. 4. 7. 17:46


리터럴(Literal)

코드 내에서 데이터의 값을 표현하는 방식


리터럴 종류

숫자, 문자열, 배열, 객체, 함수, boolean, undefined, null



각 리터럴의 특징점


숫자 리터럴

Infinity, NaN(Not a number)  -> typeof 연산 결과는 모두 'number'

    -> isFinte 연산 결과는 둘 다 false

var inf = 1 / 0;
document.writeln('inf: ' + inf + '<br/>'); // inf: Infinity
document.writeln('typeof inf: ' + typeof inf + '<br/>'); // typeof inf: number
document.writeln('isFinite(inf): ' + isFinite(inf) + '<br/>'); // isFinite(inf): false
document.writeln('isNaN(inf): ' + isNaN(inf) + '<br/>'); // isNaN(inf): false
document.writeln('<br/>');

var nan = 1 * "dollar";
document.writeln('nan: ' + nan + '<br/>'); // nan: NaN
document.writeln('typeof nan: ' + typeof nan + '<br/>'); // typeof nan: number
document.writeln('isFinite(nan): ' + isFinite(nan) + '<br/>'); // isFinite(nan): false
document.writeln('isNaN(nan): ' + isNaN(nan) + '<br/>'); // isNaN(c): true
document.writeln('<br/>');

문자 리터럴

- 큰따옴표(")나 작은 따옴표(')를 사용하여 표현한다.

- 줄바꿈 문자(\n) -> 웹페이지 상에서는 동작하지 않는다.



배열 리터럴

- 배열의 원소의 갯수는 length 프로퍼티를 이용하여 알 수 있음 (arr.length)

- 자바스크립트 배열 원소는 어떤 데이터 타입도 사용 가능

- 이질적인 데이터도 사용 가능함


var arr1 = [];    // 빈 배열

var arr2 = [ '서울', '뉴욕', '도쿄' ];     // 1차원 배열

var arr3 = [

[ '베이징', '타이페이' ],

[ '시드니', '방콕' ],        // 2차원 배열

[ '호치민', '양곤' ]

   ];

document.writeln('arr1[0]: ' + arr1[0] + '<br/>'); // arr1[0] : undefined


document.writeln('arr2[0]: ' + arr2[0] + '<br/>'); // arr2[0]: 서울

document.writeln('arr2.length: ' + arr2.length + '<br/>'); // arr2.length: 3


document.writeln('arr3[0]: ' + arr3[0] + '<br/>'); // arr3[0] : 베이징, 타이페이

document.writeln('arr3.length: ' + arr3.length + '<br/>'); // arr3.length: 3


document.writeln('arr3[0][1]: ' + arr3[0][1] + '<br/>'); // arr3[0][1]: 타이페이

document.writeln('arr3[0].length: ' + arr3[0].length + '<br/>'); // arr3[0].length: 2


객체 리터럴

- 객체란?    프로퍼티의 모임(프로퍼티 : 이름이 붙어있는 값)

- 프로퍼티 표현 방법(2가지)

obj.num

obj.["num"]

- 메소드?    함수가 프로퍼티에 저장되면 메소드가 됨.

표현방법 - obj.function(op1, op2)


var point = { x : 5, y : 5 };                        // 객체 표현 시 {}로 감싸고 프로퍼티와, 프로퍼티 값의 구분은 :

var circle = {

center : point,                      // 객체 내 객체를 넣을 수 있음 - point 객체로 지정

width : function() {                    // 메소드, 함수도 객체 속 프로퍼티에 할당 가능하다!

    return ( this.center.x*this.center.y*3.14 );

    }

};

document.writeln('원의 넓이 : ' + circle.width() + '<br/>');           // 원의 넓이 : 78.5


var temp = { x : 3, y : 3 };

circle.center = temp;                                                    // 값의 변경


document.writeln('원의 넓이 : ' + circle.width() + '<br/>');           // 원의 넓이 : 28.26



함수 리터럴

- 객체 속 프로퍼티에 저장된 함수를 메소드라고 부름

- 함수도 데이터 타입이다. 그러므로 변수, 배열, 프로퍼티에 저장이 가능하며

  다른 함수의 파라미터로 넘겨줄 수 있다.

- 반환값이 없는 return문을 쓰거나 return 문이 없으면 undefined를 반환함



Boolean 리터럴

- 0, undefined, null, NaN, ""(공백문자열)은 논리연산에서 false로 변환되어짐.



Undefined & null

- undefined : 할당되지 않은 변수, 존재하지 않는 객체 프로퍼티가 반환하는 값

- null : 참조타입에서, 어떠한 객체도 나타내지 않는 값

논리연산 : false, 산술 연산 : 0, 문자열 연산 : "null"