기린콩

자바스크립트 객체는 매우 유연하기 때문에 의도치 않은 변형이 일어날 수 있습니다. 

이때 객체 수정을 막는 방법은 아래와 같습니다.

1. const

1-1) 설명 : 블록 범위의 상수를 선언합니다. 

1-2) 기능 : 재할당 불가

1-3) 예외 : 객체 속성 추가, 수정, 삭제 가능

2. Object.freeze()

2-1) 설명 : 이 메서드는 객체를 동결합니다. Object.isFrozen() 메서드를 이용하여 객체의 동결여부를 확인할 수 있습니다.

2-2) 기능 : 

- 새로운 속성 추가 불가

- 기존 속성 삭제 불가

- 기존 속성값 변경 불가

- 프로토타입 변경 불가

2-3) 예외 : 

- Object.freeze(object) 호출의 결과는 object 스스로의 직속 속성에만 적용되며, object에 대해서만 속성 추가, 제거, 재할당 연산을 방지합니다. 만약 그 속성의 값이 객체라면, 그 객체는 동결되지 않으며 속성 추가, 제거, 재할당의 대상이 될 수 있습니다.동결된 객체가 변경될 수 있습니다.

- string, number, boolean 값은 언제나 불변하고, Function, Array 는 객체(object)임을 유의

const obj1 = {
  internal: {}
};

Object.freeze(obj1);
obj1.internal.a = 'aValue';

obj1.internal.a // 'aValue'

3. Object.seal()

3-1) 설명 : 이 메서드는 객체를 밀봉합니다. Object.isSealed() 메서드를 이용하여 객체의 밀봉여부를 확인할 수 있습니다.

3-2) 기능 :

- 새로운 속성 추가 불가

- 기존 속성 삭제 불가

3-3) 예외 : 

- 기존 속성값 변경 가능

4. Object.preventExtensions()

4-1) 설명 : 이 메서드는 객체의 확장을 제한합니다. Object.isExtensible() 메서드를 이용하여 객체의 확장여부를 확인할 수 있습니다.

4-2) 기능 : 

- 새로운 속성 추가 불가

4-3) 예외 : 

- 기존 속성 삭제 가능

- 기존 속성값 변경 가능

[References]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/seal

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions

private field 선언

- # prefix를 사용하여 field 명을 정의하는 경우 private field 로 사용할 수 있습니다.

- private 필드는 사용전에 선언되어야 합니다.

[example] 

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

let r = new Rectangle(10, 20);

console.log(r); // RectangleTest {height: 10, width: 20}

// class field 값 변경가능 
r.height = 20;

console.log(r); // RectangleTest {height: 20, width: 20}

// private field 정의
class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {
  this.#height = height;
  this.#width = width;
    // delete this.#height; // Uncaught SyntaxError: Private fields can not be deleted
    // this.#height = 10; // Uncaught SyntaxError: Identifier 'Rectangle' has already been declared
  }
}

let r = new Rectangle(10, 20);

// 접근불가
r.height; // undefined

[References]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/Private_class_fields

https://ui.toast.com/weekly-pick/ko_20200312

1. 소스 노출

브라우저에서 개발자 도구를 이용하면 누구나 웹사이트의 소스코드를 볼 수 있습니다.

만약 소스코드에 서비스 로직 또는 사용자 개인정보와 같은 민감정보들이 있다면 큰 문제가 됩니다.

2. 브라우저에 종속

브라우저별 JavaScript 지원 여부가 다르고, 브라우저의 정책이나 지원에 따라 기존의 동작이 변경되는 문제가 발생할 수 있습니다.

※ 크로스 브라우징(Cross Browsing) : W3C (World Wide Consortium)에서 채택된 웹표준 기술을 기본으로 적용하여 어느 한쪽에 최적화되지 않고, 공통 요소를 사용하여 다양한 기종 혹은 브라우저를 지원하는 웹페이지를 제작하는 기법을 말합니다. 

3. 동적객체

JavaScript 객체는 동적객체 이므로 속성 변경이 쉽다는 단점이 있습니다.

3-1) 원시값 변수에 새로운 값을 할당시 원본값이 변경됩니다. 원본값을 보존하여 복사가 필요한 경우 문제가 발생합니다.

- 원시값 : Boolean, String, number, null, undefined

- 참조값 : Object, Array

3-2) class 의 속성(property)들은 기본적으로 public 하며 class 외부에서 읽히고 수정될 수 있습니다.

(ES2019 에서는 해쉬 # prefix 를 추가해 private class 필드를 선언할 수 있게 되었습니다.)

[References]

https://wooooooak.github.io/javascript/2019/04/22/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98%EC%B9%98%EB%AA%85%EC%A0%81%EC%9D%B8%EB%8B%A8%EC%A0%90/

https://kirinkong.tistory.com/115

https://kirinkong.tistory.com/114

프로토타입이란?

JavaScript에서는 기본 데이터 타입인 boolean, number, string, 그리고 특별한 값인 null, undefined 빼고는 모두 객체입니다.  객체가 만들어지기 위해서는 자신을 만드는 데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만듭니다. 이때 만들어진 객체 안에 __proto__ (비표준) 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있습니다. 이 숨겨진 링크를 프로토타입이라고 정의합니다.

[테스트 소스]

// 1. 생성자 함수 선언 (함수명은 대문자로 시작)
// 생성자 함수 필요성 : 여러개의 동일한 property를 가지는 객체를 생성하기 위해서 필요합니다.
function Person() {}

// 2. 객체 생성
var p1 = new Person();
var p2 = new Person();

// 3. prototype을 사용한 함수 정의
Person.prototype.getNmae = function() {
    return "A";
}

console.log(p1.getNmae()); // A
console.log(p2.getNmae()); // A

// 4. p1객체의 getName() 리턴값 수정
// 생성된 객체를 이용하여 프로토타입 객체의 멤버를 수정하면 프로토타입 객체의 멤버를 수정하는 것이 아닌 자신의 객체에 멤버를 추가한다.
p1.getNmae = function() { 
    return "B" 
}

console.log(p1.getNmae()); // B
console.log(p2.getNmae()); // A

// 5. 프로토타입 객체 멤버 수정
Person.prototype.getNmae = function() { 
    return "C"; 
}

console.log(p1.getNmae()); // B
console.log(p2.getNmae()); // C

[이미지]

[References]

https://www.nextree.co.kr/p7323/

https://doitnow-man.tistory.com/132

Synchronous (동기) : 정해진 순서에 맞게 코드가 순차적으로 실행하는 방식

Asynchronous (비동기) : 코드가 언제 실행되는지 예측할 수 없는 비동기적 방식

JavsScript is synchronous. (자바스크립트는 동기적이다.)

hoisting이 완료된 이후부터 코드가 작성한 순서에 맞춰서 동기적으로 실행된다.

hoisting : var(변수선언), function declaration(함수선언) 들이 자동적으로 제일 위로 올라가는 것 

[Test Case]

[Test 설명]

자바스크립트 엔진은 코드를 위에서부터 밑으로 실행합니다. 

브라우저 api는 무조건 브라우저에게 먼저 요청을 보낸다.

이런 경우 응답을 기다리지 않고 바로 다음 코드로 넘어간다.

브라우저에서 지정된 시간이 지난 후 콜백 함수를 실행한다.

이 콜백 함수는 바로 실행된되는 것이 아닌 setTimeout 이라는 함수 안에 하나의 파라미터 인자로 지정한 함수를 전달한다.

setTimeout : browser에서 제공되는 api로 지정된 시간이 지나면 콜백함수를 호출하는 비동기 함수이다.

                 setTimeout 에는 timehandler 콜백 함수를 전달하고 timeout 하는 시간(milisecond)을 지정하는 인자들이 있다.

콜백 함수 : 전달한 함수를 부르는 나중에 부르는 경우

[참고영상]

드림코딩 by 엘리 / 자바스크립트 / 11.비동기 처리

https://www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=12&t=0s