COMMON Archives - icodebroker

[JAVASCRIPT/COMMON] JSON 표준 내장 객체 : stringify/parse 메소드를 사용해 JSON 직렬화/역직렬화하기

■ JSON 표준 내장 객체의 stringify/parse 메소드를 사용해 JSON 직렬화/역직렬화하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var sourceContact = { name : '홍길동', phone : '012-3456-7890' };

var sourceJSON = JSON.stringify(sourceContact);

var targetContact = JSON.parse(sourceJSON);

var sourceContact = { name : '홍길동', phone : '012-3456-7890' };

var sourceJSON = JSON.stringify(sourceContact);

var targetContact = JSON.parse(sourceJSON);

[JAVASCRIPT/COMMON] 객체 얕은 복사하기

■ 객체를 얕은 복사하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


const sourceObject = { x : { y : 1 }};

const targetObject = { ...sourceObject };

console.log(targetObject   === sourceObject  ); // false
console.log(targetObject.x === sourceObject.x); // true

const sourceObject = { x : { y : 1 }};

const targetObject = { ...sourceObject };

console.log(targetObject === sourceObject ); // false

console.log(targetObject.x === sourceObject.x); // true

[JAVASCRIPT/COMMON] string 클래스 : 유사 배열 객체로 사용하기

■ string 클래스에서 유사 배열 객체로서 사용하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var text = "string";

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
console.log(text[0]); // s

// 원시 값인 문자열이 객체처럼 동작한다.
console.log(text.length); // 6
console.log(text.toUpperCase()); // STRING

var text = "string";

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.

console.log(text[0]); // s

// 원시 값인 문자열이 객체처럼 동작한다.

console.log(text.length); // 6

console.log(text.toUpperCase()); // STRING

[JAVASCRIPT/COMMON] 객체 리터럴 내부에서 계산된 속성 이름을 사용해 속성 키 동적으로 생성하기

■ 객체 리터럴 내부에서 계산된 속성 이름을 사용해 속성 키를 동적으로 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


// ES6
var prefix = "prop";
var i      = 0;

var object1 = { };

// 객체 리터럴 내부에서 계산된 속성 이름으로 속성 키를 동적으로 생성한다.
object1[`${prefix}${++i}`] = i;
object1[`${prefix}${++i}`] = i;
object1[`${prefix}${++i}`] = i;

console.log(object1); // {prop1: 1, prop2: 2, prop3: 3}

// ES6

var prefix = "prop";

var i = 0;

var object1 = { };

// 객체 리터럴 내부에서 계산된 속성 이름으로 속성 키를 동적으로 생성한다.

object1[`${prefix}${++i}`] = i;

console.log(object1); // {prop1: 1, prop2: 2, prop3: 3}

[JAVASCRIPT/COMMON] 메소드 축약 표현을 사용해 메소드 정의하기

■ 메소드 축약 표현을 사용해 메소드를 정의하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var object1 =
{
    name : "Lee",

    sayHello()
    {
        console.log(`Hi! ${this.name}`);
    }
};

object1.sayHello(); // Hi! Lee

var object1 =

{

name : "Lee",

sayHello()

{

console.log(`Hi! ${this.name}`);

}

};

object1.sayHello(); // Hi! Lee

[JAVASCRIPT/COMMON] 계산된 속성 이름을 사용해 속성 키 동적으로 생성하기

■ 계산된 속성 이름을 사용해 속성 키를 동적으로 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


// ES5
var prefix = "prop";
var i      = 0;

var object1 = { };

// 계산된 속성 이름으로 속성 키를 동적으로 생성한다.
object1[prefix + ++i] = i;
object1[prefix + ++i] = i;
object1[prefix + ++i] = i;

console.log(object1); // {prop1: 1, prop2: 2, prop3: 3}

// ES5

var prefix = "prop";

var i = 0;

var object1 = { };

// 계산된 속성 이름으로 속성 키를 동적으로 생성한다.

object1[prefix + ++i] = i;

console.log(object1); // {prop1: 1, prop2: 2, prop3: 3}

[JAVASCRIPT/COMMON] 속성 축약 표현하기

■ 속성 축약을 표현하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var x = 1;
var y = 2;

var object1 =
{
    x : x,
    y : y
};

console.log(object1); // {x: 1, y: 2}

var object2 = { x, y };

console.log(object2); // {x: 1, y: 2}

var x = 1;

var y = 2;

var object1 =

{

x : x,

y : y

};

console.log(object1); // {x: 1, y: 2}

var object2 = { x, y };

console.log(object2); // {x: 1, y: 2}

[JAVASCRIPT/COMMON] delete 연산자 : 객체 속성 삭제하기

■ delete 연산자를 사용해 객체 속성을 삭제하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee"
};

person.age = 20;

delete person.age;

// person 객체에 address 속성이 존재하지 않는다.
// 따라서 delete 연산자로 address 속성을 삭제할 수 없다.
// 이때 에러가 발생하지 않는다.
delete person.address;

console.log(person); // {name: 'Lee'}

var person =

{

name : "Lee"

};

person.age = 20;

delete person.age;

// person 객체에 address 속성이 존재하지 않는다.

// 따라서 delete 연산자로 address 속성을 삭제할 수 없다.

// 이때 에러가 발생하지 않는다.

delete person.address;

console.log(person); // {name: 'Lee'}

[JAVASCRIPT/COMMON] 속성 동적 생성하기

■ 속성을 동적 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee"
};

person.age = 20;

console.log(person); // {name: 'Lee', age: 20}

var person =

{

name : "Lee"

};

person.age = 20;

console.log(person); // {name: 'Lee', age: 20}

[JAVASCRIPT/COMMON] 속성 값 갱신하기

■ 속성 값을 갱신하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee"
};

person.name = "Kim";

console.log(person.name); // Kim

var person =

{

name : "Lee"

};

person.name = "Kim";

console.log(person.name); // Kim

[JAVASCRIPT/COMMON] 숫자 속성 키 참조하기

■ 숫자 속성 키를 참조하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee",
    1 : 10
};

console.log(person["1"]); // 10

console.log(person[1]); // 10

var person =

{

name : "Lee",

1 : 10

};

console.log(person["1"]); // 10

console.log(person[1]); // 10

[JAVASCRIPT/COMMON] 마침표 표기법/대괄호 표기법을 사용해 속성 참조하기

■ 마침표 표기법/대괄호 표기법을 사용해 속성을 참조하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name : "Lee"
};

console.log(person.name); // Lee

console.log(person["name"]); // Lee

var person =

{

name : "Lee"

};

console.log(person.name); // Lee

console.log(person["name"]); // Lee

[JAVASCRIPT/COMMON] 메소드 사용하기

■ 메소드를 사용하는 기본적인 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var circle =
{
    radius : 5,

    getDiameter : function()
    {
        return 2 * this.radius;
    }
};

console.log(circle.getDiameter()); // 10

var circle =

{

radius : 5,

getDiameter : function()

{

return 2 * this.radius;

}

};

console.log(circle.getDiameter()); // 10

[JAVASCRIPT/COMMON] 속성 리터럴을 사용해 속성 키 생성하기

■ 속성 리터럴을 사용해 속성 키를 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var sourceObject =
{
    0 : 1,
    1 : 2,
    2 : 3
};

console.log(sourceObject); // {0: 1, 1: 2, 2: 3}

var sourceObject =

{

0 : 1,

1 : 2,

2 : 3

};

console.log(sourceObject); // {0: 1, 1: 2, 2: 3}

[JAVASCRIPT/COMMON] 문자열/문자열 표현식을 사용해 속성 키 동적으로 생성하기

■ 문자열/문자열 표현식을 사용해 속성 키를 동적으로 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var sourceObject = { };
var key          = "hello";

sourceObject[key] = "world";

console.log(sourceObject); // {hello: 'world'}

var sourceObject = { };

var key = "hello";

sourceObject[key] = "world";

console.log(sourceObject); // {hello: 'world'}

[JAVASCRIPT/COMMON] 빈 문자열을 사용해 속성 키 생성하기

■ 빈 문자열을 사용해 속성 키를 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var sourceObject =
{
    "" : "" // 빈 문자열도 속성 키로 사용할 수 있다.
};

console.log(sourceObject); // {: ''}

var sourceObject =

{

"" : "" // 빈 문자열도 속성 키로 사용할 수 있다.

};

console.log(sourceObject); // {: ''}

[JAVASCRIPT/COMMON] 식별자 네이밍 규칙을 준수하지 않는 속성 키 사용하기

■ 식별자 네이밍 규칙을 준수하지 않는 속성 키를 사용하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    firstName   : "길동", // 식별자 네이밍 규칙을 준수하는 속성 키
    "last-Name" : "홍"    // 식별자 네이밍 규칙을 준수하지 않는 속성 키
};

console.log(person); // {firstName: '길동', last-Name: '홍'}

var person =

{

firstName : "길동", // 식별자 네이밍 규칙을 준수하는 속성 키

"last-Name" : "홍" // 식별자 네이밍 규칙을 준수하지 않는 속성 키

};

console.log(person); // {firstName: '길동', last-Name: '홍'}

[JAVASCRIPT/COMMON] 객체 리터럴을 사용해 객체 생성하기

■ 객체 리터럴을 사용해 객체를 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var person =
{
    name     : "Lee",
    sayHello : function()
    {
        console.log(`Hello! My name is ${this.name}.`);
    }
};

console.log(typeof person); // object
console.log(person); // {name: 'Lee', sayHello: ƒ}

var person =

{

name : "Lee",

sayHello : function()

{

console.log(`Hello! My name is ${this.name}.`);

}

};

console.log(typeof person); // object

console.log(person); // {name: 'Lee', sayHello: ƒ}

[JAVASCRIPT/COMMON] 객체 리터럴을 사용해 빈 객체 생성하기

■ 객체 리터럴을 사용해 빈 객체를 생성하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var empty = { }; // 빈 객체

console.log(typeof empty); // object

var empty = { }; // 빈 객체

console.log(typeof empty); // object

[JAVASCRIPT/COMMON] null 병합 연산자 사용하기

■ null 병합 연산자를 사용하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var text = null ?? "디폴트 문자열";

console.log(text); // "디폴트 문자열"

var text = null ?? "디폴트 문자열";

console.log(text); // "디폴트 문자열"

[JAVASCRIPT/COMMON] ?. 연산자 사용하기

■ ?. 연산자를 사용하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var element = null;

var value = element?.value;

console.log(value); // undefined;

var element = null;

var value = element?.value;

console.log(value); // undefined;

[JAVASCRIPT/COMMON] && 연산자 : 단축 평가 기능을 사용해 객체 변수가 null/undefined 여부 확인하고 속성 참조하기

■ && 연산자의 단축 평가 기능을 사용해 객체 변수가 null/undefined 여부 확인하고 속성을 참조하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var element = null;

// element가 null이거나 undefined와 같은 Falsy 값이면 element로 평가되고
// element가 Truthy 값이면 element.value로 평가된다.
var value = element && element.value;

console.log(value); // null;

var element = null;

// element가 null이거나 undefined와 같은 Falsy 값이면 element로 평가되고

// element가 Truthy 값이면 element.value로 평가된다.

var value = element && element.value;

console.log(value); // null;

[JAVASCRIPT/COMMON] || 연산자 : 단축 평가 기능을 사용해 함수 매개 변수에 기본값 설정하기

■ || 연산자의 단축 평가 기능을 사용해 함수 매개 변수에 기본값을 설정하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


function getStringLength(source)
{
    source = source || "";

    return source.length;
}

console.log(getStringLength());         // 0
console.log(getStringLength("테스트")); // 3

function getStringLength(source)

{

source = source || "";

return source.length;

}

console.log(getStringLength()); // 0

console.log(getStringLength("테스트")); // 3

[JAVASCRIPT/COMMON] || 연산자 : 단축 평가 기능을 사용해 if문 대체하기

■ || 연산자의 단축 평가 기능을 사용해 if문을 대체하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


var done1    = false;
var message1 = "";

// done1이 false라면 message1에 "미완료"를 할당한다.
if(!done1)
{
    message1 = "미완료";
}

console.log(message1);

// if문은 단축 평가로 대체 가능하다.
// done2가 false라면 message2에 "미완료"를 할당한다.
var done2    = false;
var message2 = "";

message2 = done2 || "미완료";

console.log(message2);

var done1 = false;

var message1 = "";

// done1이 false라면 message1에 "미완료"를 할당한다.

if(!done1)

{

message1 = "미완료";

}

console.log(message1);

// if문은 단축 평가로 대체 가능하다.

// done2가 false라면 message2에 "미완료"를 할당한다.

var done2 = false;

var message2 = "";

message2 = done2 || "미완료";

console.log(message2);

[JAVASCRIPT/COMMON] 논리 연산자의 단축 평가 사용하기

■ 논리 연산자의 단축 평가 기능을 사용하는 방법을 보여준다. ▶ 예제 코드 (JAVASCRIPT)


// 논리합(||) 연산자
console.log("cat" || "dog"); // "cat"
console.log(false || "dog"); // "dog"
console.log("cat" || false); // "cat"
console.log(true  || "dog"); // true
console.log("cat" || true ); // "cat"

// 논리곱(&&) 연산자
console.log("cat" && "dog"); // "dog"
console.log(false && "dog"); // false
console.log("cat" && false); // false
console.log(true  && "dog"); // dog
console.log("cat" && true ); // true

// 논리합(||) 연산자

console.log("cat" || "dog"); // "cat"

console.log(false || "dog"); // "dog"

console.log("cat" || false); // "cat"

console.log(true || "dog"); // true

console.log("cat" || true ); // "cat"

// 논리곱(&&) 연산자

console.log("cat" && "dog"); // "dog"

console.log(false && "dog"); // false

console.log("cat" && false); // false

console.log(true && "dog"); // dog

console.log("cat" && true ); // true