[자바스크립트] 리터럴 (Literal) - 숫자, 문자열, 불리언, 객체, 배열

리터럴 (Literal) 이해하기

리터럴은 프로그래밍 코드에서 직접적인 값을 나타내는 표현입니다. 변수에 저장하거나 연산에 사용하거나 함수의 인자로 전달할 수 있습니다. 리터럴은 다음과 같은 종류로 나눌 수 있습니다.

1. 숫자 리터럴:

• 10진수: 123, 4.5, -20.3
• 8진수: 0765, 0.123
• 16진수: 0xFF, 0xCAFEBABE
• 부동소수점 리터럴: 3.14159, 2.71828

const num1 = 10;
const num2 = 3.14;
const num3 = 0xFF;

2. 문자열 리터럴:

• 작은 따옴표('') 또는 큰 따옴표("")로 묶인 문자열
• 따옴표 안에 포함될 수 있는 특수 문자는 백슬래시()로 이스케이프 처리합니다.

const str1 = 'Hello, world!';
const str2 = "This is a string literal.";
const str3 = 'Special characters: \n\\t\"';

3. 불리언 리터럴:

• true 또는 false 키워드를 사용합니다.

const isSunny = true;
const isWeekend = false;

4. 배열 리터럴:

• 대괄호([]) 안에 값들을 쉼표(,)로 구분하여 나열합니다.

const numbers = [1, 2, 3, 4, 5];
const fruits = ['apple', 'banana', 'orange'];

5. 객체 리터럴:

• 중괄호({}) 안에 키-값 쌍을 쉼표(,)로 구분하여 나열합니다. 키는 문자열로, 값은 다양한 리터럴 타입이나 객체 자체일 수 있습니다.

const person = {
  name: 'Alice',
  age: 30,
  occupation: 'Software Engineer'
};

const car = {
  brand: 'Toyota',
  model: 'Camry',
  year: 2020
};

리터럴 활용:

• 변수 초기화: 리터럴을 사용하여 변수에 직접적인 값을 할당할 수 있습니다.
• 함수 인자 전달: 리터럴을 함수의 인자로 전달하여 함수 동작에 영향을 미칠 수 있습니다.
• 데이터 저장: 리터럴을 사용하여 배열이나 객체와 같은 데이터 구조를 생성하고 저장할 수 있습니다.
• 코드 가독성 향상: 리터럴을 사용하면 코드를 더욱 명확하고 이해하기 쉽게 만들 수 있습니다.

주의 사항:

• 리터럴은 변수가 아닙니다. 리터럴 값 자체를 의미하며, 변수처럼 변경될 수 없습니다.
• 리터럴은 메모리에 저장됩니다. 따라서 불필요한 리터럴 사용은 메모리 사용량을 증가시킬 수 있습니다.
• 문자열 리터럴 안에 포함될 수 있는 특수 문자는 백슬래시()로 이스케이프 처리해야 합니다.

내장 생성자

let string  = new String()
let number = new Number()
let boolean = new Boolean()
let object = new Object()
let array  = new Array()
let func  = new Function()
let reg = new RegExp("[a-z]", "g")
throw new Error("uh-oh")

리터럴 원시 데이터 타입

let string = "" // 문자열 리터럴
typeof string // 'string'

let number = 0 // 숫자 리터럴
typeof number // 'number'

let boolean = false // 블리언 리터럴
typeof boolean // 'boolean'

let object = {} // 객체 리터럴
typeof object // 'object'

let array = [] // 배열 리터럴'
typeof array // 'object'

let Func = function () {}
typeof Func // 'function'

let reg = /[a-z]/g

throw {
  name : "Error",
  message : "uh-oh"
}
throw Error("uh-oh")

객체 리터럴

• '객체'라고 하면 단순히 이름-값 쌍의 해시 테이블을 생각하면 된다
• 다른 언어의 '연간 배열'이라 불리는 것과 유사
• 원시 데이터 타입과 객체 모두 값이 될 수 있다
• 함수도 값이 될 수 있으며 이런 함수는 메서드라고 부른다
• 내장 네이티브 객체의 프로퍼티들도 대부분 변경이 가능
• 빈 객체를 정의해놓고 기능을 추가해나갈 수 있다
• 필요에 따라 객체를 생성할 때 이상적

// 빈 객체에서 시작
var dog = {}

// 프로퍼터 하나를 추가
dog.name = "Benji"

// 메서드 추가
dog.getName = function () {
    return dog.name
}

// 프로퍼티와 메서드 값을 변경
dog.getName = function () {
    return "Fido" // 메서드가 하드코딩된 값을 반환하도록 재정의
};

// 프로퍼티나 메서드를 완전히 삭제
delete dog.name

// 다른 프로퍼티나 메서드를 추가
dog.say = function () {
    return "Woof!"
}
dog.fleas = true;

"반드시 빈 객체에서 시작해야 하는 것은 아니다."
var dog = {
    name : "Benji",
    getName : function () {
        return this.name;
    }
}

"빈 객체 : 비어 있다는 말은 어떤 객체가 상속받은 것 외에는 자기 자신의 프로퍼티를 찾고 있지 않다는 뜻."  

- 객체 리터럴 문법
// 객체를 "{}" 중괄호로 감싼다.
// 객체 내의 프로퍼티와 메서드를 ","쉼표로 분리. 마지막 이름-값 쌍 뒤에 쉽표가 들어가면 ie에서는 에러 발생.
// 프로퍼티명과 프로퍼티 값은 콜론으로 분리 ":"
// 객체를 변수에 할당할 떄는 닫는 중괄호 뒤에 세미콜론을 빼먹지 않도록 한다.

- 생성자 함수로 객체 생성하기
// 자바스크립트는 클래스가 없기 때문에 상당히 유연하다.
// 객체를 생성할 때는 직접 만든 생성자 함수를 상용할 수도 있고, 
// Object(), Date(), String()등 내장 생성자를 사용할 수도 있다.

// 첫 번째 방법 - 리터럴 사용
var car = {goes:"far"}

// 다른 방법 - 내장 생성자 사용. 안티 패턴     
var car = new Object()
car.goes = "far"

- 객체 생성자의 함정
// 빈 객체. 안티 패턴
var o = new Object()
console.log(o.constructor === Object) // true      

// 숫자 객체. 안티 패턴
var o = new Object()
console.log(o.constructor === Number) // true
console.log(o.toFiexd(2)) // 1.00      
    
// 문자열 객체. 안티 패턴
var o = new Object("I am a string")
console.log(o.constructor === string) // true
// 일반적인 객체에는 substring()이라는 메서드가 없지만 묹자열 객체에는 있다.
console.log(typeof o.substring) // function

// 불린 객체. 안피 패턴
var o = new Object(true)
console.log(o.constructor === Boolean) // true

"new Object()를 사용하지 마라. 더 간단하고 안정적인 객체 리터럴을 사용하라."

* 사용자 정의 생성자 함수
var adam = new Person("Adam")
adam.say() // "I am Adam"
// 이 패턴은 자바에서 Person이라는 클래스를 사용하여 객체를 생성하는 방식과 상당히 유사하다.
// 문법은 비슷해도 자바스크립트에는 클래스라는 것이 없으며 Person은 그저 보통의 함수일 뿐이다.

var Person = function (name) {
    this.name = name
    this.say  = function () {
        return "I am " + this.name
    }
}

var Person = function (name) {
// 객체 리터럴로 새로운 객체를 생성
// var this = {};

// 프로퍼티와 메서드를 추가
this.name = name
this.say  = function () {
    return "I am " + this.nam
}

// this를 반환한다
// return this
}

// Person의 프로포타입에 추가하는게 낮다.
Person.prototype.say = function () {
    return "I am " + this.name
}

var this = {}
var this = Object.create(Person.prototype)

- 생성자의 반환 값
// 생성자 함수를 new와 함께 호출하면 항상 객체가 반환된다.
// 기본값은 this로 참조되는 객체
// 함수 내에 return문을 쓰지 않았더라도 생성자는 암묵적으로 this를 반환한다.

var Objectmaker = function () {
    // 생성자가 다른 객체를 대신 반환하기로 결정했기 때문에 다음의 'name' 프로퍼티는 무시된다.
    this.name = "This is it"
    
    // 새로운 객체를 생성하여 반환한다.
    var that = {}
    that.name = "And that's that"
    return that
}

// 테스트
var o = new Objectmaker()
console.log(o.name) // "And that's that"

// 생성자에서는 어떤 객체라도 반환할 수 있다. 
// 객체가 아닌 것을 반환하려고 시도하면, 에러가 발생하진 않지만 그냥 무시되고 this에 의해 참조된 객체가 대신 반환.

* new 를 강제하는 패턴
// 생성자
function Waffle () {
    this.tastes = "yummy";
}

// 새로운 객체
var good_morning = new Waffle()
console.log(typeof good_morning) // "object"
console.log(good_morning.tastes) // "yummy"

// 안티 패턴. "new"를 빼먹었다.
var good_morning = Waffle()
console.log(typeof good_morning) // "undefinde"
console.log(window.tastes) // "yummy"

- 명명 규칙
// 생성자 함수명 첫글자 대문자
// 일반적인 함수와 메서드는 척글자 소문자

- that 사용
- 스스로를 호출하는 생성자

// 인스턴스를 판별하는 또다른 범용적인 방법은 생성자 이름을 하드코딩하는 대신 arguments.callee와 비교하는 것.
if (!(this instanceof arguments.callee)) {
    return new arguments.callee()
}
// 모든 함수가 호출될 때, 내부적으로 arguments라는 객체가 생성되며, 이 객체가 함수에 전달된 모든 인자를 담고 있다는 점을 활용한 패턴.
// 향후의 사용은 제한하는 것이 좋고, 기존 코드에서 발견되는 경우 제거해야 한다.

배열 리터럴

• 객체 리터럴과 마찬가지로 배열 리터럴 표기법이 더 간단하고 장점이 많다.
• 배열이란 0에서 인덱스를 시작하는 값의 목록이다.
• 생성자와 new 연산자를 가져오거나 코드를 장황하게 써서 일을 복잡하게 만들 이유가 젼혀 없다.

// 새 개의 원소를 가지는 배열. 안티 패턴
var a = new Array("itsy", "bitsy", "spider")

// 위와 똑같은 배열
var a = ["itsy", "bitsy", "spider"]

console.log(typeof a); // 배열도 객체이기 떄문에 "object"가 출력
console.log(a.constructor === Array); // true

- 배열 생성자의 특이성   
// 한 개의 원소를 가지는 배열
var a = [3];
console.log(a.length);  // 1
console.log(a[0]);      // 3

// 새 개의 원소를 가지는 배열
var a = new Array(3);
console.log(a.length);    // 3
console.log(typeof a[0]); // undefined

// 리터럴 
var a = [3.14];
console.log(a[0]); // 3.14

var a = new Array(3.14); // 배열의 길이로 유효하지 않은 값이므로 rangeError가 발생
console.log(typeof a);   // undefined

// 런타임에 동적으로 배열을 생성할 경우 에러 발생을 피하려면 배열의 리터럴 표기법을 쓰는 것이 훨씬 안저.

var white = new Array(256).join(' ');
// 조각을 실행시키면서 256개의 공백문자로 이루어진 문자열을 반환      

- 배열인지 판별하는 방법
// 배열에 typeof연산자를 사용하면 object가 반환
console.log(typeof [1, 2]); // object

"ES5 Array.isArray()라는 새로운 메서드가 정의. 이 메서드는 인자가 배열이면 true를 반환."
Array.isArray([]); // true

// 배열과 비슷한 객체로 속여본다
Array.isArray({
    length : 1,
    "0"    : 1,
    slice  : function () {
        // ...
    }
});  // false가 반환.

if(typeof Array.isArray === "undefined"){
    Array.isArray = function(arg){
        return Object.prototype.toString.call(arg) === "[object Array]";
    }
}

* JSON
// JSON은 자바스크립트 객체 표기법 Javascript object notation의 준말
// 데이터 전송 형식의 일종
// 여러 언어에서 가볍고 편리하게 쓰임
// JSON에 대해 배울 것은 사실 하나도 없다
// JSON은 그저 배열과 객체 리터럴 표기법의 조합

{
    "name" : "value",
    "some" : [1, 2, 3]
}

- JSON 다루기
// eval을 사용하여 무턱대고 JSON 문자열을 평가하면 보안 문제가 있을 수 있기 떄문에 바람직하지 않다
// 가능하면 JSON.parse()를 사용하는 것이 최선책

// 입력되는 JSON 문자열
var jstr = '{"mykey" : "my value"}';

// 안티 패턴
var data = eval('(' + jstr + ')');

// 권장
var data = JSON.parse(jstr);

console.log(data.mykey); // "my value"

// 입력되는 JSON 문자열. jQuery
var jstr = '{"mykey" : "my value"}';
var data = jQuery.parseJSON(jstr);
console.log(data.mykey); // my value

// JSON.parse() 메서드의 반대는 JSON.stringify()다
// 이 메서드는 객체 또는 배열을 인자로 받아 JSON 문자열로 직렬화한다

var dog = {
    name : "Fido",
    dob  : naw Date(),
    legs : [1, 2, 3, 4]
}

var jsonstr = JSON.stringify(dog)
// jsonstr 값 {"name":"Fido", "dob":"2010-04...", "legs":[1,2,3,4]}