JS)모던 자바스크립트 Deep Dive 8장 ~ 10장/ 8장 제어문, 9장 타입 변환과 단축 평가, 10장 객체 리터럴

8장 제어문

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다.

 

8-1. 블록문

• 0개 이상의 문을 중괄호 { } 로 묶은 것.
• 코드블록 또는 블록이라 부름.
• 자바스크립트는 블록문을 하나의 실행 단위로 취급.
• 단독으로 사용가능하나 주로 제어문이나 함수를 정의할때 사용. 
• 블록문 끝에는 세미콜론 붙이지 않음.

// 블록문
{
  var foo = 10;
}

// 제어문
var x = 1;
if (x < 10) {
  x++;
}

// 함수 선언문
function sum(a,b) {
  return a + b;
}

 

8-2. 조건문

주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 불리언 값으로 평가될 수 있는 표현식이다. 

 

1). if ... else 문

• 조건식이 불리언이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 암묵적으로 불리언 값으로 변경.
• 조건식의 평가 결과가
  • true ➨ if 문의 코드 블록 실행  
  • false ➨ else문의 코드 블록이 실행.
• 조건을 추가하고 싶으면 ' else if ' 문을 사용.
• if 문과 else 문 2번 이상 사용 가능 불가 ❌ /  else if 문은 여러번 사용 가능 ⭕
• 대부분의 if ... else 문은 삼항 조건 연산자로 바꿔 쓸 수 있음.

 // 홀수 짝수를 찾는 if ... else와 삼항연산자 예시

  //( if ... else 예시 )
  // x가 짝수이면 result 변수에 문자열 '짝수'를 할당, 
  //     홀수이면 문자열에 '홀수'를 할당
  var x = 2;
  var result;
  
  if (x % 2) {  // 2 % 2는 0. 0은 false로 암묵적 강제 변환됨.
    result = '홀수';
  } else {
    result = '짝수';
  }
  
  console.log(result);   //짝수

 

  // ( 삼항연산자 예시 )
  var x = 2;
  
  // 0은 false로 취급.
  var result = x % 2 ? '홀수' : '짝수';
  console.log(result);  //짝수

 

• 삼항 조건 연산자는 값으로 평가되는 표현식을 만듬. 따라서 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있음.
  • 반면 if ... else 문은 표현식이 아닌 문. 값처럼 사용할수 없기 때문에 변수에 할당 할 수 없음.
• 단순히 값을 결정하여 변수에 할당 => 삼항 조건 연산자
• 조건에 따라 실행할 코드가 복잡 => if ... else

 

2). switch 문

switch문은 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.

• switch문의 표현식과 일치하는 case문이 없다면 실행 순서는 default 문으로 이동. default 문은 선택사항.
• 논리적으로 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용.

switch (표현식) {
  case 표현식1:
    switch 표현식과 표현식1 일치하면 실행될 문;
    break;
  case 표현식2:
    switch 표현식과 표현식2 일치하면 실행될 문;
    break;
  default:
    switch 표현식과 일치하는 case 문이 없으면 실행될 문;
}

 

 

8-3. 반복문

조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 조건식이 거짓일 때까지 계속 반복 평가한다. 

• 반복문 대체 가능 기능들
  • 배열 순회 => forEach 메서드
  • 객체 프로퍼티 열거 => for ... in 문
  • 이터러블 순회 => for ... of 문 (ES6 도입)

 

1). for 문

조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행.

for 문 내에 for문을 중첩으로 사용 가능.

반복 횟수가 명확할 때 주로 사용.

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  조건식이 참인 경우 반복 실행될 문;
}

for (let i = 0; i < 2; i++) {
  console.log(i);
}
// print
// 0 
// 1

• for문 실행순서
•  

//문자열 인덱스 검색 string.indexOf(변수명);

 

2). while 문

조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.

• 반복 횟수가 불명확할 때 주로 사용.
• 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 논리적으로 참, 거짓 구별.

 

3). do ... while 문

코드 블록을 먼저 실행하고 조건식을 평가한다. 무조건 한번 이상 실행됨.

 

8-4. break 문

레이블 문, for, for ... in, for ... of, while, do ... while 등의 반복문 또는 switch 문의 코드 블록을 탈출.

이외에 사용시 SyntaxError(문법 에러)가 발생.

• 레이블문 : 식별자가 붙은 문  ❗❗사용하지 말것❗❗

  // foo라는 레이블 식별자가 붙은 레이블 문

  foo: console.log('foo');

  // foo라는 레이블 식별자가 붙은 레이블 블록문

  foo: {

    console.log(1);

    break foo; // foo 레이블 블록문 탈출.

    console.log(2);

  }

  console.log('Done!');

 

8-5. continue 문 

반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다.

• 반복문을 탈출하지 않음.

💫문자열에서 특정 문자의 개수를 세는 예제

   var string = 'Hello World';
   var search = 'l';
   var count = 0;
   
   // 문자열은 유사 배열이므로 for 문으로 순회할 수 있음. 
   for (var i = 0; i < string.length; i++) {
     // 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동.
     if (string[i] !== search) continue;
     count + t; // continue 문이 실행되면 이 문은 실행되지 않음.
   }  
   
   console.log(count); // 3
   
   // 참고로 String.prototype.match 메서드를 사용해도 같은 동작. 
   const regexp = new RegExp(search, 'g');
   console.log(string.match(regexp).length); //3

 

동일한 동작의 for 문.

  for (var i = 0; i < string.length; i++) {
     // 'l'이면 카운트를 증가시킴.
     if (string[i] === search) count++;
   }

 

 

9장 타입 변환과 단축 평가

 

9-1. 타입 변환이란?

• 개발자가 의도적으로 값의 타입을 변환하는 것.
  • 명시적 타입 변환 또는 타입 캐스팅.
  • 숫자를 문자열로 타입 캐스팅. toString()
• 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환.
  • 암묵적 타입 변환 또는 타입 강제 변환.
  • 문자  연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성.  
  •    var x = 10;

       var str = x + "";

       console.log(typeof str, str);  // string 10

       

       // x 변수의 값이 변경된 것은 아님.

       console.log(typeof x, x);  // number 10

 

9-2. 암묵적 타입 변환

개발자의 의도와 상관없이 자바스크립트 엔진이 코드의 문백을 고려해 암묵적으로 테이터 타입을 강제 변환(암묵적 타입 변환).

• 문자열, 숫자, 불리언 같은 원시 타입 중 하나로 타입을 자동 변환.
• 기존 변수를 재할당 하여 변경하는 것이 아니라 자바스크립트 엔진은 표현식을  피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버림.

 

1). 문자열 타입으로 변환

• + 연산자는 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작.
  • 숫자 1 + 문자열 2 = 문자열12
• 템플릿 리터릴의 표현식 삽입은 표현식의 평가 결과를 문자열로 암묵적 타입 변환 시킴.
• 숫자로 계산후 표현식을 문자열로 변환.
•   const sum = `1 + 1 = ${1 + 1}`  // string  1 + 1 = 2

    console.log(typeof sum, sum);

 

2). 숫자 타입으로 변환

산술 연산자의 역할은 숫자 값을 만드는 것이다. 따라서 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다.

• 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN.
• 비교 연산자도 숫자 타입이 아닌 값을 암묵적으로 숫자 타입으로 변환.
  • +빈 문자열 (' '), +빈 배열 [ ], +null, +false, +'0' =>  0
  • +true, +'1' => 1
  • +객체{ }, +빈 배열이 아닌 배열 [ 1, 2 ], +(function(){}) , +undefined타입, 문자열 => NaN   
  • +Symbol()  => 에러 메시지 (TypeError)

 

3). 불리언  타입으로 변환

• 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy값 또는 Falsy값으로 구분한다.  즉, 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환된다.
• false , undefined, null, 0, -0, NaN, 빈문자열' ' => false로 평가되는 Falsy값.
• Falsy 값 외의 값은 모두 true로 평가되는 Truthy값.

*Truthy / Falsy 값을 판별하는 함수 

   // 전달받은 인수가 Falsy 값이면 true, Truthy 값이면 false를 반환.
   function isFalsy(v) {
     return !v;
   }
   
   // 전달받은 인수가 Truthy 값이면 true, Falsy 값이면 false를 반환.
   function isTruthy(v) {
     return !!v;
   }
   
   // 모두 true를 반환한다.
   isFalsy(false);
   isFalsy(undefined);
   isFalsy(null);
   isFalsy(0);
   isFalsy(NaN);
   isFalsy('');
   
   // 모두 true를 반환한다.
   isTruthy(true);
   isTruthy('0'); // 빈 문자열이 아닌 문자열은 Truthy 값이다.
   isTruthy({});
   isTruthy([]);

 

 

9-3. 명시적 타입 변환

 다양한 방법이 있음.

1. 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출, 
2. 표준 빌트인 메서드 사용 
3. 암묵적 타입 변환

 

 

1). 문자열  타입으로 변환

• 표준 빌트인 생성자 함수: String  
  
  •   String(1); => '1' , String(true) => 'true'
• 빌트인 메서드 :  Object.prototype.toString
  •   (1).toString(); => '1'
• 문자열 연결 연산자를 이용.
  •   1 + ' ';  => '1'

 

2). 숫자  타입으로 변환

• 표준 빌트인 생성자 함수: Number 
  •   Number('0'); => 0 , Number(true) => 1
• 빌트인 메서드 : parseInt, parseFloat 함수 (문자열만 숫자 타입으로 변환)
  •   parseInt('0'); => 0,   parseFloat('10.53');  => 10.53
• + 단항 산술 연산자.
  •   +'0';  => 0,  +'-1'   =>  -1

      +false;  => 0
• * 산술 연산자
  •   +'-1'  *  1;  =>  -1,   +'10.53'  *  1;   =>  10.53

       true  * 1;  =>  1,         false  *  1;    => 0  

 

3). 불리언  타입으로 변환

• 표준 빌트인 생성자 함수: Boolean
  •   Boolean('x'); => true,  Boolean('false'); => true,  Boolean(NaN); => false

      Boolean(null);  => false,  Boolean(undefined);  => false

      Boolean({});  => true, Boolean([]);  => true
• ❗ 부정 논리 연산자를 두번 사용 
  •   !!'x'; => true, !!''; => false,  !!0; => false, !!1; => true

덧) 스터디 질문 Q :
같은 빈배열 [ ] 인데
+[] // 0
Boolean([]); => true
두 예제의 값이 다름. 이유는?

====강사님 답 A====
타입 변환의 예제들은 이렇게 쓰지 말라는 것, 빈배열을 숫자로 변환하려는 시도 자체가 틀림. 그런 시도는 하면 안됨. 

 

 

 

9-4. 단축 평가

표현식을 평가하는 도중에 평가결과가 확정된 경우 나머지 평가 과정을 생략하는 것.

대부분의 프로그래밍 언어는 단축 평가를 통해 논리 연산을 수행.

 

1). 논리 연산자를 사용한 단축 평가

• 논리합과 논리곱 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있음.
• 두 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨.
• 좌항 => 우항으로 평가 진행.
  • 논리합(||) 
    • 두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환.
      • 조건이 Falsy값(거짓으로 평가되는 값)일때  if문 대체
      •    var done = false;

           var message = '';

           

           // if문

           // done이 false라면 message에 '미완료'를 할당

           if (!done) message = '미완료';

           

           // 단축 평가

           message = done || '미완료';

           console.log(message);   // 미완료
  • 논리곱(&&)
    • 두 개의 피연산자가 모두 true로 평가될때 true를 반환.
    • 조건이 Truthy 값(참으로 평가되는 값)일때  if문 대체
      •    var done = true;

           var message = '';

           

           // if문

           // done이 true라면 message에 '완료'를 할당

           if (done) message = '완료';

           

           // 단축 평가

           message = done && '완료';

           console.log(message);   // 완료

삼항 조건 연산자는 if ... else문 대체 가능.

   var done = true;

   var message = '';

   

   // if...else 문

   if (done) message = '완료';

   else message = '미완료';

   console.log(message); // 완료

   

   // 삼항 조건 연산자

   message = done ? '완료' : '미완료';

   console.log(message); // 완료

 

✨✨단축 평가의 유용한 패턴

1. 객체가 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할때
   •    // 📣에러발생

        var elem = null;

        var value = elem.value; // TypeError: Cannot read property 'value' of null

        

        

        // 논리곱(&&) 사용

        var elem = null;

        

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

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

        var value = elem && elem.value;

                

        console.log(value);  // null
2. 함수 매개변수에 기본값을 설정할 때
   • 함수 호출 시 인수를 전달 하지 않으면 매개변수에는 undefined가 할당. 이때 단축 평가를 사용해 매개변수에 기본값을 설정해 undefined로 인해 발생할 수 있는 에러를 방지.
     •    //단축 평가를 사용한 매개변수의 기본값 설정

          function getStringLength(str) {

            str = str || '';

            return str.length;

          }

          getStringLength();  // 0

          getStringLength('hi');  // 2

          

          

          //ES6의 매개변수 기본값 설정

          function getStringLength(str = '') {

            return str.length;

          }

          getStringLength();  // 0

          getStringLength('hi');  // 2

 

 

2). 옵셔널 체이닝 연산자 ?.

ES11에서 도입. (전에는 논리 연산자 &&를 사용한 단축평가를 통해 변수가 null 또는 undefined인지 확인.)

좌항의 피연산자가 null또는 undefined인 경우 undefined 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

   // 옵셔널 체이닝(?.) 연산자

   var elem = null;

   // elem이 null또는 undefined인 경우 undefined 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감.

   var value = elem?.value; //undefined

   

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

   // elem이 Falsy 값이면 elem으로 평가되고, elem이 Truthy 값이면 elem.value로 평가.

   var value = elem && elem.value;

            // elem.value && elem  순서 변경 하면 안됨!!

   console.log(value);  // null

 

• 논리 연산자 &&는 좌항 피연산자가 false로 평가되는 Falsy 값이면 좌항 피연산자를  그대로 반환. 하지만 0, 빈문자열 '' 은 객체로 평가될 때도 있음. (  21.3절 원시 값과 래퍼 객체에서 자세히...  )
  • false로 평가되는 Falsy값 => false , undefined, null, 0, -0, NaN, ' ' 
• 하지만 옵셔널 체이닐 연산자 ?. 는 좌항 피연산자가 false로 평가되는 Falsy 값이라도 null 또는 undefinded가 아니면 우항의 프로퍼티 참조를 이어감.

덧) 스터디 질문 Q : 
122p ' 0, 빈문자열 '' 은 객체로 평가될 때도 있음 '  의미는?

====강사님 답 A====
프로퍼티 접근 연산자 점 ( . ) 에서 좌항은 객체고 우항은 프로퍼티 키다.
프로퍼티 키는 식별자가 아니라 식별자(스코프에 기록되는 아이들)역할을 한다.
문법적으로는 식별자는 아니고 식별자(변수,함수,클래스 이름) 역할은 한다.
예제 9-28에서 str.length; 접근 연산자 점( . )이 나와 복선으로 적음.
자세한건 21.3절 래퍼 객체에서 다룸.

 

 

3). null 병합 연산자 ??

• ES11(ECMAScript2020)에서 도입. (도입 전에는 논리 연산자 ||를 사용한 단축평가를 통해 변수가 기본값을 설정.)
• 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환, 그렇지 않으면 좌항의 피연산자를 반환.
• 변수에 기본값을 설정할때 유용.
•  null 병합 연산자 ??는 좌항의 피연산자가 false로 평가되는 Falsy 값이라도 null 또는 undefinded가 아니면 좌항의 피연산자를 그대로 반환.
  • false로 평가되는 Falsy값 => false , undefined, null, 0, -0, NaN, ' ' 

 

10장 객체 리터럴

10-1. 객체란?

• 자바스클립트를 구성하는 거의 모든것이 객체.
• 원시타입은 단 하나의 값만 나타내지만 객체타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조.
• 원시 값을 제외한 나머지 값(함수, 배열 , 정규 표현식 등).
• 원시 값은 변경 불가능, 객체 타입의 값, 객체는 변경 가능한 값.
• 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성됨.
  • 자바스트립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있음.

 

• 자바스트립트 함수는 일급 객체이므로 값으로 취급 가능하며 함수도 프로퍼티 값으로 사용 가능.
  
  • 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부름.
    •  

 

• 객체는 프로퍼티와 메서드로 구성된 집합체.
  • 프로퍼티: 객체의 상태를 나타내는 값(data)
  • 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

객체는 객체의 상태를 나타내는 값(프로퍼티)과 프로퍼티를 참조하고 조작할 수 있는 동작(메서드)을 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

 

 

10-2. 객체 리터럴에 의한 객체 생성

객체 생성 방법 5가지

• 객체 리터럴(일반적인 방법)
• object 생성자 함수
• 생성자 함수
• Object.create
• 클래스(ES6)

객체 리터럴: 객체를 생성하기 위한 표기법.

• 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법
• { } 중괄호 안에 0개 이상의 프로퍼티를 정의.
• 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성.
• 코드블록의 닫는 중괄호 뒤에는 세미콜론을 붙이지 않지만 객체 리터럴의 닫는 중괄호 뒤에는 세미콜론을 붙임.
• 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식.
• 객체 생성과 동시에 프로퍼티를 만들거나 객체 생성 후 동적으로 프로퍼티 추가 할 수 있음.
• 객체 리터럴 외에 객체 생성 방식은 모두 함수를 사용함.

 

10-3. 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성.

• 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값.
  • 프로퍼티 값에 접근할 수 있는 이름, 식별자 역할.
  • 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표 사용.
  • 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓰지만 에러는 발생하지 않음. 
• 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값.

   var person = {

     // 프로퍼티 키: name, 프로퍼티 값: 'Lee'

     name: 'Lee',

     // 프로퍼티 키: age, 프로퍼티 값: 20

     age: 20,

   };

10-4. 메서드

메서드는 객체에 묶여 있는 함수를 의미.
12장 함수에서 자세히...

   var circle = {

     radius: 5, // 프로퍼티

   

     // 원의 지름

     getDiameter: function () { // 메서드

       return 2 * this.radius; // this는 circle을 가리킴

     }

   };

   

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

메서드 내부의 this키워드는 객체 자신(circle)을 가리키는 참조변수.

22장 this에서 자세히...

 

10-5. 프로퍼티 접근

• 프로퍼티 접근 방법 2가지
  • 마침표 프로퍼티 접근 연산자 ( . )를 사용하는 마침표 표기법(dot notation).
    • 연산자 좌측에는 객체로 평가되는 표현식 기술.
    • 연산좌 우측에는 프로퍼티 키를 지정.
    •    var circle = {

           radius: 5, // 프로퍼티

         }

         

         // 마침표 표기법에 의한 프로퍼티  접근

         console.log(circle.radius);  // 5
  • 대괄호 프로퍼티 접근 연산자([ ... ])를 사용하는 대괄호 표기법(bracket notation).
    • 연산자 좌측에는 객체로 평가되는 표현식 기술.
    • 연산자 내부에는 프로퍼티 키를 지정.
    • 반드시 따옴표로 감싼 문자열. 따옴표 없으면 식별자로 해석.
    •    // 대괄호 표기법에 의한 프로퍼티 접근

         console.log(circle[ 'radius' ]);  // 5

 

 

 

10-6. 프로퍼티 값 갱신

• 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신됨.
•    var person = {

       name: 'Lee'

     };

     

     // person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.

     person.name = 'Kim';

     

     console.log(person); // {name: "Kim"}

 

덧) 스터디 질문 Q :
'프로퍼티 값이 갱신 됨'. 이라는 표현이 쓰여 있는데 값이 저장 될때 새로운 메모리 주소에 값이  재할당 되는게 아니라 '갱신'이라는 표현을 쓰는 이유는?

====강사님 답 A====
위 예제에서 재할당은 왼쪽(name)에 식별자가 와야함.  
재할당이 돼야한다면 person객체에 name도 식별자가 되야함. name은 프로퍼티.
주소값이 변하지 않은 상황에서 값이 바뀌기 때문에 갱신이라 표현함.

 

 

10-7. 프로퍼티 동적 생성

• 존재하지 않은 프로퍼티에 값을 할당하면 프로퍼티가 동적으로  생성되어 추가되고 프로퍼티 값이 할당됨.
  • 동적(dynamic): 상황에 따라 실시간으로 변하는 성질
•  
•    var person = {
       name: 'Lee'
     };
     
     // person 객체에는 age 프로퍼티가 존재하지 않음.
     // 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당됨.
     person.age = 20;
     
     console.log(person);   // {name: "Lee", age: 20}

10-8. 프로퍼티 삭제 (덧,,안티패턴 - 쓰지말 것)

• delete 연산자는 객체의 프로퍼티를 삭제.
• delete 연산자의 피연산자 프로퍼티 값에 접근할 수 있는 표현식이어야 함.
• 존재하지 않는 프로퍼티를 삭제하면 아무런 에러없이 무시됨.
•    var person = {

       name: ' Lee'

     };

     

     // 프로퍼티 동적 생성.

     person.age = 20;

     

     // person 객체에 age 프로퍼티가 존재,

     // 따라서 delete 연산자로 age 프로퍼티 삭제 가능.

     delete person.age;

     

     // person 객체에 address 프로퍼티 존재 안함.

     // 따라서 delete 연산자로 address 프로퍼티 삭제 불가능, 에러 발생 안함.

     delete person.address;

     

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

 

 

10-9. ES6에서 추가된 객체 리터럴의 확장 기능

1). 프로퍼티 축약 표현

객체 리터럴의 프로퍼티는 프로퍼티 키와 프로퍼티 값으로 구성된다. 프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다.

• ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략 가능. 이때 프로퍼티 키는 변수 이름으로 자동 생성됨.
  •    // ES5

       var x = 1, y = 2;

       var obj = {

         x: x,

         y: y

       };

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

       

       // ES6

       let x = 1, y = 2;

       // 프로퍼티 축약 표현

       const obj = { x, y };

       

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

 

 

2). 계산된 프로퍼티 이름

계산된 프로퍼티 이름이란 프로퍼티키로 사용할 표현식을 대괄호([ ...])로 묵은 것.

• ES5에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면 객체 리터럴 외부에서 대괄호 ([ ...])  사용. 
  •    // ES5

       const prefix = 'prop';

       let i = 0;

       

       var obj = {};

       

       // 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성

       obj[prefix + '-' + ++i] = i;

       obj[prefix + '-' + ++i] = i;

       obj[prefix + '-' + ++i] = i;

       

       console.log(obj);  // {prop-1: 1, prop-2: 2, prop-3: 3}

       
• ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성 가능.
  •    // ES6

       const prefix = 'prop';

       let i = 0;

       

       // 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성

       const obj = {

         [`${prefix}-${++i}'`]: i,

         [`${prefix}-${++i}'`]: i,

         [`${prefix}-${++i}'`]: i

       };

       

       console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}

 

 

3). 메서드 축약 표현

• ES5에서 메서드를 정의하려면 프로퍼티 값으로 함수를 할당하지만
  • (엄밀히 따지면 이건 함수)
  •    // ES5
       const obj = {
         name: 'Lee',
         sayHi: function() {
           console.log('Hi! ' + this.name);
         }
       };
       
       obj.sayHi(); // Hi! Lee
• ES6에서는 메서드를 정의할때 function 키워드를 생략한 축약 표현을 사용. (이건 메서드. 이 문법 쓰는걸 권고❗❗👍)
  •    // ES6

       const obj = {

         name: 'Lee',

         // 메서드 축약 표현

         sayHi() {

           console.log('Hi ' + this.name);

         }

       };

    
    

      obj.sayHi(); // Hi! Lee
• ES6의 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수와 다르게 동작.
• 26.2절 메서드에서 자세히...

 

덧) 스터디에서 나온 이런저런 내용 240715월-

*오류를 잡기위한 방어선
1. 정적분석 eslint-사소한 실수를 막아주는 툴들
2. 타입스크립트라는 툴
3. 그걸 벗어나는 오류를 잡기위해서는 유닛테스트, 통합테스트 등 테스트 코드.

*else if 안쓸수 있음 안쓰는 것이 좋음.
*제어문은 코드를 읽기 어렵게 만든다 특히 for문. 함수형 기법에서는 포문 안씀.
array.from안에 for문이 돈다, 그래서 잘 알고 있어야함.
요지는 헷갈리고 복잡해서 filter, map, reduce 등 다른걸 추천. 

*코딩은 복잡성과 싸움. 복잡한걸 안복잡하게 만들어야 함.
*코테- 명령형, 함수형(속도가 느린 경향) 두 가지 방법으로 연습 추천.
알고리즘- 복잡도 계산
실무- 가독성, (가독성 + 복잡도 둘다 잘하면 베스트)

*JS는 언어고, 언어는 문법과 맥락이 있어야한다. 

*우리는 타인이 읽었을때 추측 가능한 코드를 써야한다.
우리 팀에서 제일 못하는 사람이 우리 팀의 실력이다.
우리 회사에 갓 들어온 신입사원도 실수 하지 않는 코드를 써야한다.

 

 

 

참고

도서 - 모던 자바스크립트 Deep Dive -이웅모

이웅모 강사님 홈피  -  https://poiemaweb.com/js-prototype

이웅모 강사님 유튜브  -  https://www.youtube.com/watch?v=0AjTZG6bGq8

 

✅ 덧, 부분은 스터디 내용을 기억에 의존해서 쓴 글이라 틀린 부분이 있다면 댓글 부탁드립니다.- 뽀짝코딩 주인장-