JavaScript) Start..

                                    
                                        a= 1 // 줄바꿈이 있어 세미콜론 생략 가능
                                        b= 10
                                        x= 1; y= 10 // 앞쪽 세미콜론은 생략 불가!
                                    
                                

                                    
                                        (a, b) => a + b // 화살표 함수(=>)는 앞의 매개변수 리스트와 같은 줄에 작성해야 한다!

                                        return (a + b) // 리턴문(return) 다음에 표현식(a + b)이 붙는 경우는 한 줄로 작성해야 한다!
                                    
                                

☞ break 문이나 continue 문 또한 마찬가지이다!

                                    
                                        console.log("이스케이프 문자: \u03c0") // π
                                        console.log("웃는 얼굴 이모지: \u{1F600}") // 😀
                                    
                                

☞ 이스케이프 시퀀스는 \u로 시작하여 4개의 16진수 숫자를 적거나, 또는 (16비트 이상이 필요한 이모지를 표시하기 위하여)1~6자리의 숫자를 넣어주는 중괄호({}) 문법으로 작성한다

➥ 여러 단어로 이루어진 이름을 지을 때는 보통 camelCase 표기법 및 snake_case 표기법 방식이 사용되는데, 코드 작성 시 (예컨대, 자신만의 사용자정의 변수 이름에는)kebab-case 표기법을 사용하고, (예컨대, 자신만의 사용자정의 함수 이름에는)PascalCase 표기법을 사용하는 식으로 일관성을 유지하는 것도 코드 작성 및 읽기에 도움이 될 수 있다!

                                    
                                        /* 변수의 선언 및 정의 ← 변수를 정의하면서 값을 할당해주면; 그 자체 문이다! */
                                        const radius= 2 // const 변수 radius를 선언하면서 값 2를 할당한다
                                        console.log(radius) // 2
                                        
                                        /* 함수 이름(area)으로 (인수 radius의 값 2를 전달하면서)area 함수를 호출한다 */
                                        area(radius); // 12.566370614359172
                                        
                                        /* 함수의 선언 및 정의 ← 함수는 '호이스팅'된다! */
                                        function area(radius) { /* 함수 객체({ .. })를 생성하여 이름(area)을 붙여준다 ← 전달된 인수가 있으면; 매개변수(radius)로 받는다 */
                                            // 전달받은 매개변수(radius)를 써서 작업을 수행하고(Math.PI * radius * radius),
                                            return Math.PI * radius * radius // 그 결과물을 호출자에게 돌려준다(retrun 문)
                                        }
                                    
                                

☞ 함수는 선언하는 즉시 맨 위로 끌어올려지고('호이스팅'), 그리하여 함수가 정의되기 이전에 이름으로 함수를 호출할 수 있다!

➥ 위 스크립트 코드를 실행한 결과는 [브라우저 개발자 화면]의 [콘솔] 탭에서 확인할 수 있습니다. 위 스크립트 코드를 작성한 가칭 _js.html 파일을 실행한 뒤 마우스 우측버튼 단축메뉴의 <검사>를 클릭하면; [브라우저 개발자 화면]으로 들어가게 되고, 거기서 다시 [콘솔] 탭으로 찾아가면 됩니다 ← html에서 스크립트를 적용하는 방식 및 콘솔창 등에 관해서는 본 html 강좌의 html의 Script 부분을 참조하십시오..

                                        
                                            if(조건) 코드; // 조건을 평가한 값이 참이라면; 코드를 수행하고, 아니라면; 그냥 건너뛰어 아래로 내려간다
                                        
                                    

                                        
                                            if(조건) 코드1; // 조건이 참이면; 코드1을 수행한다
                                            else 코드2; // 아니라면; 코드2를 수행한다
                                        
                                    

                                        
                                            조건 ? 코드1 : 코드2; // 조건이 참이면; 코드1을, 아니라면; 코드2를 수행한다
                                        
                                    

                                        
                                            if(조건) { // 조건이 참이면; 코드1을 수행한다
                                                코드1;
                                            } else { // 아니라면; 여기로 온다
                                                if(조건2) 코드 2; // 조건2가 참이면; 코드2를 수행한다
                                                else 코드3; // 아니라면; 여기로 온다
                                            }
                                        
                                    

                                        
                                            if(조건) 코드1; // 조건이 참이면; 코드1을 수행한다
                                            else if (조건2) 코드2; // 아니라면; 여기로 온다
                                            else if (조건3) 코드3; // 역시 아니라면; 여기로 온다
                                            else 그외; // 위 모든 조건을 만족하지 못하는 경우; 여기로 온다!
                                        
                                    

➥ 참고로, if 등의 조건문을 쓰는 대신, 조건 연산자 ?나 논리 연산자 || 및 &&를 적절히 활용하면; 보다 간결한 코드를 작성할 수 있다!

                                        
                                            switch(조건) { // 조건값(=== 비교)에 따라 맞는 case로 분기한다..
                                                case 1: 실행문; // break가 없으므로, 계속 다음 케이스를 수행한다..
                                                case 2: 실행문; // 조건에 맞는 case라면; 작업을 수행하고,
                                                    break; // 작업 수행 후에는 switch문을 빠져나간다!
                                                case 3: 실행문;
                                                    return "리턴"; // 실행문 안에 return문이 들어 있다면; break는 생략할 수 있다!
                                                default: 실행문; // 조건에 일치하는 case 값이 하나도 없을 때 여기로 온다
                                            }
                                        
                                    

➥ 부수 효과가 있는 표현식과 대입 할당문(및 증가/감소 연산자가 붙은 변수), 객체의 프로퍼티를 삭제하는 delete 연산자, 함수호출 또한 '부수 효과'가 있어 사실상의 '문'으로 볼 수 있다!

                                    
                                        let num // let 식별자를 붙여서 변수 num을 '선언'한다 ← num은 undefined 값으로 '초기화'된다! 

                                        let num2= 2 // 변수 num2를 '선언'하면서 동시에 '값'도 넣어준다 ← 변수의 '정의'
                                    
                                

☞ [관리자모드] 콘솔창에서 num을 쳐보십시오.. 변수를 '선언'만 하고 값 을 넣지 않았으므로 undefined 값이 나와야합니다! 변수 num2는 값 과 함께 정의하였으니 들어있는 값 2 가 나올겁니다..

                                    
                                        num= 1 // 선언된 변수에 값을 할당한다 ← 위에서 미리 존재를 알렸던 (선언만 한)변수 num에 추후 값을 할당한다!
                                    
                                

☞ 이제 값을 넣었으니 num을 치면 1이 나와야합니다.. 이어서, num3도 쳐보십시오. 선언한 적도, 정의한 적도 없는 변수이니 ReferenceError: num3 is not defined라고 나올겁니다.. ← 선언하지 않은 것(= 존재하지 않는 것)은 값을 넣을 상자(= 변수) 자체가 없다는 것이며(ReferenceError!), 정의된 값이 없다는 것은 상자(= 선언된 변수)는 있지만 그 안은 비었다는 것(undefined)을 의미한다!

➥ 스크립트에서 표현하고 다룰 수 있는 값 의 종류를 타입 ^type 이라고 하며, 프로그램에서 값 을 나중에 사용하려면 변수에 값 을 저장 ^할당 해야 한다. 변수에는 이름이 있고, 프로그램은 변수명 을 통해 값 을 참조한다. 한편, 리터럴은 직접 넣어준 데이터 값 이다: 3 (숫자), "hello, world" (문자열), true/false (참/거짓), null 등..

                                    
                                        let num= 1
                                        console.log(num) // 1

                                        num= 2 // num에 새로이 값 2를 할당한다 ← let 변수는 언제든 값을 바꿀 수 있다!
                                        console.log(num) // 2
                                        
                                        const str= '문자열'
                                        str= '새 문자열' // 타입 에러! ← const 상수는 초기값을 바꿀 수 없다!
                                    
                                

☞ let 변수는 언제든 값을 바꿀 수 있는 반면(곧, 변수 값 재할당이 가능하다!), const 상수는 초기값을 바꿀 수 없다(따라서, 선언과 동시에 값을 넣어주어야 한다!)

                                    
                                        function fnc() {
                                            for(let i=0; i<10; i++) {
                                                ; // let 변수 i는 for 블록 내부에서만 유효하다!
                                            }

                                            return i // 여기서는 for 블록 내부의 i 값에 접근할 수 없다!
                                        }
                                        console.log(fnc()) // ReferenceError! i is not defined
                                    
                                

☞ 블록 바깥에서 블록 내부 스코프로는 접근할 수 없기에 ReferenceError!가 발생한다!

➥ 블록 바깥에서 블록 내부 스코프로는 접근할 수 없지만, 블록 내부에서 블록 바깥 스코프로는 언제든 접근할 수 있다:

                                    
                                        function fnc() {
                                            let i; // fnc() 함수 내부 변수 i를 선언한다!

                                            for(i=0; i<10; i++) {
                                                ; // for 블록 내부에서 바깥의 i 변수에 접근할 수 있다!
                                            }

                                            return i
                                        }
                                        console.log(fnc()) // 10
                                    
                                

                                    
                                        function fnc() {
                                            /* ---
                                                아래 for 문의 var 변수 i는 선언과 함께 호이스팅되어 스코프(= fnc 함수)의 맨 위에 자리잡게 된다!
                                            - */
                                            for(var i=0; i<10; i++) { /* var 변수 i는 선언과 동시에 호이스팅된다! */
                                                ; // 루프를 돌 때마다 i 값이 증가된다..
                                            } /* 루프를 다 돈 후, 최종 i 값이 함수 스코프의 맨 위로 호이스팅된다! */
                                                
                                            /* ---
                                                위 for() {..} 블록의 var 변수 i는 호이스팅되므로, for 블록 바깥으로 나가게 되고..
                                                이 fnc() {..} 함수 스코프의 맨 위에 자리잡은 i 값을 (같은 함수 블록 내부 영역이므로)여기서 접근할 수 있다!
                                            - */ 
                                            return i // 나중에 이 함수가 호출되면; 루프를 다 돈 i 값(= 10)을 반환한다!
                                        }

                                        /* ---
                                            이제 fnc 함수를 호출하여 리턴값을 돌려받는데..
                                            함수 내부 var 변수 i의 (이미 맨 위로 호이스팅된!)최종 결과값인 10을 돌려받게 된다! 
                                        - */
                                        fnc(); // 10 ← 함수 호출
                                    
                                

☞ 전역변수인 var 변수와는 달리, 블록변수인 let 변수와 const 상수는 선언 과 초기화 가 분리되어 수행된다. 곧, 선언 시에는 스코프의 최상단으로 끌어올려지지만, 초기화 는 그 변수에 값 이 할당 된 이후에 수행되는 것이다!

                                    
                                        var topic= "전역변수"

                                        {
                                            topic= "블록변수" // 블록 바깥에 있는 var 전역변수 topic에 접근하여 변경할 수 있다!
                                        }
                                        console.log(topic) // 블록변수 ← 기존에 정의했던 topic 변수의 값이 바뀌었다!
                                    
                                

                                    
                                        var topic= "전역변수"

                                        { /* 블록변수 let는 블록 내부에서만 유효하다! */
                                            let topic= "블록변수" // 이름은 같지만, 블록 바깥의 전역변수 topic과는 전혀 무관한 새로운 블록 내부변수이다! 
                                            console.log(topic) // 블록변수 ← 먼저, 자신의 내부 블록에 접근한다!
                                        }

                                        console.log(topic) // 전역변수 ← 전역변수 topic의 값은 변함이 없다!
                                    
                                

➥ 스크립트에는 함수 스코프와 블록 스코프가 있는데, 이 스코프 에 의해 변수나 매개변수에 접근할 수 있는 영역이 달라진다. 함수 스코프는 선언된 함수 내부의 모든 변수와 함수들을 포함하며, 이때 var 전역변수는 중첩된 블록 내부로 들어가더라도(호이스팅되어 맨 위로 끌어올려지므로) 함수 내부 어디에서건 접근할 수 있다. 반면, let 변수나 const 상수는 해당 블록 안에서만 접근할 수 있다!

                                                    
                                                        #clickbox_testing { display: flex; justify-content: space-around; }
                                                        #clickbox_testing > div {
                                                            height: 4em; width: 8em; background-color: rgb(125 129 117 / 0.5);
                                                        }
                                                    
                                                

                                    
                                        const value= "문자열"
                                        typeof value === "string" ? value : value.toString(); // 이는 ((typeof value) === "string") ? A : B와 같다! 
                                        console.log(value) // "문자열"
                                    
                                        const value2= NaN
                                        typeof value2 === "string" ? value2 : value2.toString();
                                        console.log(value2) // "NaN"
                                    
                                

☞ null 및 undefined 를 제외한 모든 값에는 문자열로 변환하는 toString(); 메서드가 존재하는데, 그 결과는 대개 String(); 메서드가 반환하는 값과 같다!

➥ 삼항 조건 연산자 조건? 코드1 : 코드2;는 조건 이 'trusy한 값'이면; 코드1 을, 'falsy한 값'이면; 코드2 를 수행하는데, 이는 아래 if .. else 문과 같다:

                                    
                                        if(조건) 코드1; // '조건'이 참이면; '코드1'을 수행하라
                                        else 코드2; // 아니면; '코드2'를 수행하라 
                                    
                                

                                    
                                        const ary= ['a', 'b']

                                        if(ary.indexOf('a')) // 배열 ary에서 'a'의 인덱스번호는 0번이고, '0'은 'falsy한 값'이다!
                                            alert("참같은 값"); // (위 조건의 결과가 '참같은 값'이었다면; 이 코드가 수행되는데)
                                        else
                                            alert("거짓같은 값"); // "거짓같은 값" ← 위 조건의 결과 '0'은 '거짓같은 값'이므로 이 코드가 실행된다!
                                    
                                

➥ 예컨대, if(조건) { .. } 문은 조건 이 '참같은 값'이라면 내부 코드를 실행하고, '거짓같은 값'이라면 건너뛰게 되는데, 만약 '거짓같은 값'들을 명확히 구분해야 한다면; if(조건 === null) 식으로 명시적으로 비교해야 한다 ← 덧붙이자면; 객체나 배열이 비어 있는지(빈 객체 및 빈 배열 모두 '참같은 값'이다)를 확인하려면; [].length(배열의 길이), Object.keys({}).length(객체의 키 개수) 등의 방식을 사용해야 한다!

                                    
                                        /* [숫자와 (숫자형)문자열]의 결합: '+'는 무조건 문자열로 연결된다! */
                                        console.log("번호: " + 10) // "번호: 10" ← "번호: "는 숫자로 변환하여 계산할 수 없기에, 숫자 10을 문자열로 변환하여 문자열로 연결한다!
                                        console.log(100 + '200') // "100200" ← [숫자 + 문자열 숫자]도 무조건 문자열로 연결된다!
                                        console.log("10" + "3") // "103"

                                        /* '-', '*', '/' 등에서는 좀 다르게 작동한다! */
                                        console.log("10" * "3") // 30 ← 문자열을 숫자로 변환한 뒤 계산한다!
                                        console.log('200' - 100) // 100 ← 문자열을 숫자로 변환한 뒤 계산한다!
                                    
                                

                                    
                                        /* 변수값으로 할당 시 */
                                        let n= 1 - "zero" // 문자 "zero"는 숫자로 변환할 수 없으므로, 변수 n 값은 NaN이 된다!
                                        console.log(n) // NaN ← 숫자가 아님!

                                        /* NaN과 문자열의 결합 */
                                        console.log(n + "zero") // "NaNzero" ← NaN은 문자열로 변환할 수 있으므로 문자열 "zero"와 연결하여 문자열로 반환한다!
                                    
                                

☞ 예컨대, 숫자로의 변환이 필요할 때; 숫자로 인식할 수 있는 문자열은 숫자로 변환하고, 아니라면 NaN 으로 변환하는 식인데.. 약간 모호하긴 합니다만, 코드를 잘 살펴보시면 규칙을 이해할 수 있을겁니다 ㅡㅡ;

➥ 숫자로의 변환 시 true 는 1 로, false 와 null 및 빈 문자열 ""는 0 으로, undefined 와 문자열 은 NaN 으로 변환된다. 한편, NaN 은 수치 연산을 해서 정상적인 값을 얻지 못할 때 반환되는 값인데, 이 특별한 숫자형은 그 자신을 포함하여 다른 무엇과도 같지 않다!

✓   숫자를 문자열로 변환하는 것은 문자열 병합으로 충분하지만, 배열에서는 toString(); 메서드를 통해 각 요소를 문자열로 바꾼 다음 쉼표 등으로 연결한 문자열을 반환 받을 수 있기에 유용하게 사용할 수 있다:

                                    
                                        const arr= [1, true, false, "hello"]
                                        arr.toString(); // "1,true,false,hello" ← arr의 각 요소를 문자열로 변환한 뒤, (콤마로 구분하여)연결한다
                                    
                                

                                        
                                            Number("3") // 3 ← 문자열 "3"을 숫자 3으로 변환!
                                            String(false) // "false" ← 불린값 false를 문자열 "false"로 변환!
                                            String(true) // "ture" ← 불린값 true를 문자열 "true"로 변환!
                                            Boolean("") // false ← 빈 문자열을 불린 데이터 타입으로 변환!
                                            Boolean(" ") // true ← 공백 문자열을 불린 데이터 타입으로 변환!
                                        
                                    

                                        
                                            x + "" // + 연산에서 피연산자 중 하나가 문자열이면; 다른 피연산자(x)도 문자열로 변환된다!
                                            x - 0 // 마이너스 연산자와 함께 사용하여 x를 숫자로 변환한다!
                                            +x // 단항 +, - 연산자는 피연산자 x를 숫자로 변환한다!
                                            !!x // 부정 연산자 !(= 부정), !!(= 이중 부정)는 피연산자 x를 불린 데이터로 변환한다!
                                        
                                    

                                        
                                            let a= 10 // 숫자 데이터
                                            a= '문자' // 숫자 변수 a에 문자열을 넣음으로써 데이터 타입을 동적으로 변환한다!
                                            console.log(a) // "문자"
                                        
                                    

➥ 객체인 배열이나 함수와는 달리, 원시 데이터인 숫자와 문자열, 불린은 속성을 가질 수 없지만, 앞에 new 키워드를 붙여 자료형 변환 함수인 Number();, String();, Boolean(); 메서드를 쓰면 객체로 변환하여 쓸 수 있게 된다: const hi= new String("안녕하세요?"); ← 이제 인스턴스 변수 hi 는 String 객체로 다룰 수 있고, String 객체의 메서드를 이용할 수 있다!

✓   스크립트의 기본 데이터 타입인 String, Number, Boolean 객체에는 값만 저장되는 것이 아니라 해당 기본 타입에 특화된 값을 저장하며(= 프로퍼티), 또한 함수 형태의 특정 기능(= 메서드)을 제공하는 역할을 한다 - 곧, 기본 데이터 타입의 변수들도 이들을 위해 정의된 표준 프로퍼티와 메서드들을 객체처럼 호출할 수 있다!

                                    
                                        let num= "7" // 이 num은 숫자 데이터가 아니라 문자열 데이터 '7'이다!

                                        num += 1 // 문자열+숫자는 무조건 문자열로 결합된다!
                                        console.log(num) // '71' ← 문자열
                                        console.log(typeof num) // string ← 문자열 데이터
                                    
                                

                                    
                                        let num2= "7" // 이 num2는 숫자 데이터가 아니라 문자열 데이터 '7'이다!

                                        num2= Number(num2) + 1 // Number() 메서드로 문자열을 숫자로 변환한 뒤 숫자 1을 더해준다!
                                        console.log(num2) // 8 ← 숫자
                                        console.log(typeof num2) // number ← 숫자 데이터
                                    
                                

➥ Number(); 메서드는 엄격하게 오직 10진 정수에만 동작한다. 반면, parseInt("문자열"[, 진수]);, parseFloat("문자열");은 주어진 문자열 에서 숫자로 인식 가능한 한에서 정수, 실수로 변환하여 돌려주며(시작 부분에서 만나는 공백들은 건너뛰고, 숫자로 판단할 수 있는 부분만 변환한 뒤 나머지는 무시한다 - 시작부터 숫자가 아닌 것으로 판단되면 NaN 을 반환한다), 실수.toFixed(자릿수);는 실수 를 주어진 소수점 이하 자릿수 만큼 (반올림하여)표시해준다. 한편, 숫자.toString([진수]);으로 숫자를 기수 (기본값: 10진수)에 맞게 변환한 뒤 문자열로 반환할 수도 있다

                                    
                                        let a= prompt("첫번째 숫자 입력: "), b= prompt("두번째 숫자입력: ")

                                        if(isNaN(a) || isNaN(b)) { // a나 b 중 하나라도 숫자가 아니라면;
                                            alert("정확히 입력해주세요!")
                                        } else { // 모두 숫자를 입력했으면;
                                            a= Number(a); // 입력받은 값을 숫자로 변환하여 변수 a에 값으로 넣는다
                                            b= Number(b); // prompt(); 함수는 문자열로 값을 반환하므로 Number(); 메서드를 써서 다시 숫자로 바꿔준 것이다!
                                            console.log(a + b) // 숫자 계산
                                        }
                                    
                                

☞ 자바스크립트의 숫자 형식 관련 메서드는 모두 숫자가 아니라 문자열을 반환한다 - 따라서, 숫자 형식을 바꾸는 건 실제로 표시하기 직전에 해야 한다! 한편, 숫자를 저장하거나 계산할 때는 따로 형식을 지정하지 않은 숫자 타입이어야 한다!

➥ 자바스크립트에서 숫자는 모두 64bit 더블형 실수로 처리된다 - 따라서, 두 숫자의 일치 여부를 판별할 때는 주의해야 한다! 한편, 소수 부분을 버린 정수 부분만을 구하려는 경우는 Math.floor(숫자); 메서드를 사용하면 된다: const num= Math.floor(5/2) // 2 ← 소수점 이하는 버림!

                                    
                                        Math.abs(-10) // 10 ← 절대값
                                        Math.sqrt(16) // 4 ← 제곱근
                                        Math.pow(2, 10) // 1024 ← 2의 10승, 제곱 연산자를 써서 2 ** 10으로 하면 더 간결하다!
                                        Math.sign(2) // 1 ← 부호계산: -1, 0, 1
                                        Math.log(Math.E) // 1 ← Math.E의 로그값 계산
                                    
                                

☞ 수학/삼각 함수들은 주로 캔버스나 SVG 애니메이션 효과 등에서 많이 사용된다!

                                        
                                            Math.min(1, 5, 3, 9) // 1 ←  가장 작은 수
                                            Math.max(1, 5, 3, 9) // 9 ←  가장 큰 수
                                        
                                    

                                        
                                            const season= ['봄', '여름', '가을', '겨울']

                                            const seasonNum= Math.floor(Math.random() * season.length) // (0 ~ 0.999)*4 = 0/1/2/3
                                            console.log(season[seasonNum]); // 봄, 여름, 가을, 겨울 중에서 무작위로 나온다!
                                        
                                    

                                        
                                            Math.floor(Math.random()*100 + 1); // 1부터 100까지의 정수

                                            const x= 1, y= 10
                                            x + (y-x)*Math.random(); // 1 이상 10 미만 실수
                                            x + Math.floor((y-x)*Math.random()); // 1 이상 10 미만 정수
                                            x + Math.floor((y-x+1)*Math.random()); // 1 이상 10 이하 정수
                                        
                                    

➥ 비밀번호 등 보안이 중요한 경우에는 crypto.getRandomValues( .. );에 타입지정 배열과 그 값을 인수로 전달하여 보다 안전한 난수 배열을 생성할 수 있다:

                                    
                                        const ra16= crypto.getRandomValues(new Uint16Array(5)); // 16비트 정수 5개로 된 배열
                                        document.write(ra16.join(' ')); // 50016 64878 25229 61035 52674
                                    
                                

☞ Unit16Array/Unit32Array(n);는 부호없는 16/32비트 정수 n 개가 든 배열을 생성한다!

                                    
                                        console.log("Hello! " + "world") // Hello! world ← 문자열+문자열 연결

                                        const str= "string" // 문자열 변수 str에 "string"을 넣어준다
                                        console.log(12 + str[0]) // "12s" ← 12와 str 변수의 첫번째 문자(str[0])를 문자열로 연결한다!
                                        console.log(str + 12) // "string12" ← 문자열 str에 숫자 12를(문자열로 변환하여) 문자열로 연결한다!
                                        
                                        console.log(1 + 2 + "5") // "35" ← 먼저 1+2 계산을 수행한 뒤, 문자열로 결합한다!
                                        console.log("5" + 1 + 2) // "512" ← 문자열이 앞에 오면; 모두 문자열로 연결된다!
                                        
                                        console.log(`'10+2'는 ${10+2}임`) // '10+2'는 12임 ← (템플릿 리터럴에서는; 먼저)수식 계산 이후, 문자열로 연결한다!
                                    
                                

                                    
                                        console.log('String'.length) // 6 ← 문자열의 길이

                                        const str= "String"
                                        console.log(str[0]) // S ← 스크립트에서 인덱스 번호는 0부터 센다!
                                        console.log(str[str.length-1]) // g ← 인덱스번호는 0부터 시작하며, 따라서 맨 끝은 length-1이 된다!
                                        
                                        console.log("".length, " ".length, "  ".length) // 0 1 2 ← 빈 문자열 "" 대 공백 문자열 " ", "  "
                                    
                                

✓   문자열은 배열은 아니지만 배열처럼 다룰 수 있는 객체로서, 배열처럼 인덱스 번호 로 각 문자에 접근할 수 있고, 그 길이를 재는 length 속성도 갖지만, 실제로는 배열이 아닌 객체(= 유사배열 객체)이다!

                                    
                                        console.log("2행\nlines") // 두 행을 한 줄 코드로 작성함!
                                        // 2행
                                        // lines

                                        console.log(`
                                            2행
                                            lines
                                        `) // 템플릿 리터럴(` .. `)에서는 보이는대로 줄이 나뉜다 ← html의 pre 태그와 같다!

                                        console.log('1행\
                                        lines') // 1행lines ← '\'는 연결된 한 행의 문자열을 (가독성을 위해)행을 나누어 작성한다!
                                    
                                

☞ 곧, 리터럴 문자열 안에서 단독 \는 줄바꿈을 하지 않고 문자열이 이어짐을 의미한다!

                                    
                                        const kim= "김", love= "\ud83d\udc99"
    
                                        console.log(kim, kim.length) // 김 1
                                        console.log(love, love.length) // 💙 2 ← 써로게이트 페어문자(= 2byte 문자)
                                    
                                

                                    
                                        let str= "hello"

                                        console.log(str.toUpperCase()) // HELLO ← 여기서는 바뀐 값이 표시되지만;
                                        console.log(str) // "hello" ← 그래로 원본 값은 변함이 없다!
                                    
                                

☞ 인수로 주어진 str 을 일시적으로 String 객체로 변환하여 작업을 수행한 뒤, 임시 String 객체는 자동 삭제되고 원래의 "hello" 문자열은 여전히 원래대로 존재한다 ← 직접 넣어준 문자열이나 숫자 등의 원시(리터럴) 데이터는 항구불변이다!

✓   String 객체의 모든 메서드는 원시 문자열 자체를 변경하지는 않으면서 그 사본을 반환한다. 곧, 일단 생성된 리터럴 문자열은 읽기만 가능할 뿐(예컨대, 문자열의 인덱스를 이용하여 접근하여 변경해도)수정되지는 않는다 - 따라서, 이러한 '비파괴적' 메서드는 그 리턴 값을 활용해야 한다!

                                    
                                        let t= prompt("연락처: ", "") // 010-2000-2572
                                        alert(t.substring(0, t.length-4) + "****") // 010-2000-****
                                    
                                

☞ 곧, 원시 값의 데이터 변환을 위한 것이 아니라면; 원시 값을 처리할 때는 그 메서드를 바로 호출하여 사용하면 되고, 굳이 String 객체 등으로 변환하여 처리할 이유는 없다!

☞ 참고로, 맨 앞의 \는 줄바꿈을 이스케이프한다 ← 없애면; 줄바꿈한 뒤 안의 내용을 표시한다!

☞ 이 코드는 html 문서의 중간에서 인라인 <script> .. </script> 코드 안에서 템플릿 리터럴로 <ul> 목록을 만들어준 것입니다!

                                        
                                            let today= new Date(); // 현재의 날짜/시간 정보를 가져온다
                                            console.log(today); // Thu Feb 27 2025 12:06:13 GMT+0900 (한국 표준시)
                                        
                                    

                                        
                                            let date= new Date("2025-1-1") // date1에 인자를 주어 날짜/시간 정보를 넣는다 ← "2025-01-01" 식으로 넣어도 된다!
                                            console.log(date1) // Wed Jan 01 2025 00:00:00 GMT+0900 (한국 표준시)
                                        
                                    

                                        
                                            let d= new Date(2025, 0, 1); // 2025/1/1 00:00:00
                                            console.log(d) // Wed Jan 01 2025 00:00:00 GMT+0900 (한국 표준시)

                                            console.log(d.toString()) // Wed Jan 01 2025 00:00:00 GMT+0900 (한국 표준시) ← (문자열 데이터로 변환된)지역 시간
                                            console.log(d.toLocaleString()) // 2025. 1. 1. 오전 12:00:00 ← (각 국가별 형식으로 표기하는)지역 시간
                                            console.log(d.toDateString()) // Wed Jan 01 2025 ← (시간은 뺀)지역 시간
                                            console.log(d.toLocaleDateString()) // 2025. 1. 1. ← (날짜만의)지역 시간
                                            console.log(d.toTimeString()) // 00:00:00 GMT+0900 (한국 표준시) ← (시간만의)지역 시간
                                            console.log(d.toLocaleTimeString()) // 오전 12:00:00 ← (각 국가별 형식으로, 시간만의)지역 시간
                                            console.log(d.toUTCString()) // Tue, 31 Dec 2024 15:00:00 GMT ← UTC 시간
                                            console.log(d.toISOString()) // 2024-12-31T15:00:00.000Z ← ISO 8601 표준 형식(년-월-일T시:분:초:밀리초)의 UTC 시간
                                        
                                    

                                    
                                        let today= new Date(); // 현재의 날짜/시간 정보를 가져온다
                                        console.log(today); // Thu Jun 12 2025 09:33:06 GMT+0900 (한국 표준시)

                                        const year= today.getFullYear(); // 4자리 연도 정보
                                        const month= today.getMonth() + 1; // 월 정보(0 ~ 11) ← 월은 0부터 시작한다!
                                        const day= today.getDate(); // 일 정보(1 ~ 31)

                                        const week= today.getDay(); // 요일 정보(0 ~ 6) ← 일요일이 0이다!
                                        const week_list= ['일', '월', '화', '수', '목', '금', '토'];
                                        const week_result= week_list[week]; // 요일 구하기

                                        const ymd= `${year}년 ${month}월 ${day}일 (${week_result}요일)`
                                        console.log(ymd); // 2025년 6월 12일 (목요일)
                                    
                                

                                    
                                        let today= new Date(); // 현재의 날짜/시간 정보를 가져온다
                                        console.log(today); // Thu Jun 12 2025 09:39:48 GMT+0900 (한국 표준시)

                                        today.setDate(today.getDate() + 7) // 날짜 설정: 7일 후
                                        console.log(today) // Thu Jun 19 2025 09:39:48 GMT+0900 (한국 표준시)

                                        today.setFullYear(today.getFullYear() + 1) // 연도 설정: 다음 해
                                        console.log(today) // Fri Jun 19 2026 09:39:48 GMT+0900 (한국 표준시)
                                    
                                

                                    
                                        const date1= new Date("2025/01/01"), date2= new Date("2026/01/01");

                                        const date3= date2.getTime() - date1.getTime(); // 시간 간격
                                        const differ_date= date3/(24*60*60*1000); // 24시간x60분x60초x1000밀리초 ← 시간 간격을 날로 환산한다
                                        console.log(differ_date); // 365
                                    
                                

                                    
                                        const date= new Date();
                                        console.log(date) // Thu Jun 12 2025 09:48:43 GMT+0900 (한국 표준시)

                                        date.setTime(date.getTime() + 3000); // 3000밀리초(= 3초) 이후로 설정
                                        console.log(date); // Thu Jun 12 2025 09:48:46 GMT+0900 (한국 표준시)
                                    
                                

                                    
                                        const start= Date.now();
                                        // .. ← 작업 수행
                                        const end= Date.now();
                                        console.log(`작업에 걸린 시간: ${end - start}ms`);
                                    
                                

경주는 맑은 날

                                        
                                            const number= 3500

                                            new Intl.NumberFormat().format(number) // 3,500 ← 기본값: 해당 지역에 맞는 표기법으로 표시된다!
                                            new Intl.NumberFormat("ko-KR", {style: "currency", currency: "KRW"}).format(number) // ₩123,457 ← 한국 원화로 표기
                                        
                                    

                                        
                                            let pounds= Intl.NumberFormat("en", { style: "currency", currency: "GBP" })

                                            console.log(pounds.format(1000)) // £1,000.00                                
                                        
                                    

✓   {옵션객체}의 두번째 인자인 currency: "값" 에는 다음과 같은 옵션들을 사용할 수 있다:

• useGrouping: false 천 단위 구분자 사용하지 않음
• minimumInterDigits: n 숫자의 정수 부분 자릿수 ← 실제 숫자보다 지정된 자릿수가 크면; 앞에 0 을 붙여서 맞춘다!
• minimumFractionDigits/maximumFractionDigits: n 숫자의 소수점 아래 부분 최소(기본값: 0)/최대(기본값: 3) 자릿수 지정 ← 실제 숫자보다 지정된 자릿수가 크면; 뒤에 0 을 붙여서 맞추며, 작으면; 반올림한다!

                                        
                                            let date= new Date(Date.UTC(2025, 6, 7)) // 월은 0부터 시작한다!

                                            console.log(new Intl.DateTimeFormat().format(date)) // 2025. 7. 7. ← 기본값: 해당 지역에 맞는 표기법으로 표시된다!
                                            console.log(new Intl.DateTimeFormat("ko-KR").format(date)) // 2025. 7. 7. ← 한국에서는 년/월/일 순서
                                        
                                    

                                    
                                        let options= { // 긴 날짜 서식에 더해 요일 추가
                                            year: "numeric", month: "long", day: "numeric", weekday: "long"
                                        }
                                        console.log(new Intl.DateTimeFormat("ko-KR", options).format(today)) // 2025년 7월 7일 월요일

                                        options= { // 숫자로 된 날짜와 시간
                                            year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric"
                                        }
                                        console.log(new Intl.DateTimeFormat("default", options).format(today)) // 2025. 7. 7. 오후 9:29:36 ← 옵션을 지정하면서 지역은 브라우저 기본값을 사용할 때: 'default' 지정

                                        options= { // 오전/오후 시간 표시가 필요할 때
                                            hour: "numeric", dayPeriod: "short"
                                        }
                                        console.log(new Intl.DateTimeFormat("ko-KR", options).format(today)) // 오전 9시
                                    
                                

✓   옵션값 키워드 정리:

• year: numeric (4자리: 2005), 2-digit (항상 2자리: 05)
• month: numeric (가급적 짧은 숫자), long (전체 이름: January), short (약어: Jan)
• day: numeric (가급적 짧은 숫자), 2-digit (항상 2자리)
• hour, minute, second: numeric (가급적 짧은 숫자), 2-digit (항상 2자리)
• hour12: true / false (12시간제로 표시할 지 여부)

                                    
                                        let date= new Date(Date.UTC(2025, 6, 7)) // 월은 0부터 시작한다!

                                        console.log(new Intl.DateTimeFormat().format(date)) // 2025. 7. 7. ← 기본값: 해당 지역에 맞는 표기법으로 표시된다!
                                        console.log(new Intl.DateTimeFormat("ko-KR").format(date)) // 2025. 7. 7. ← 한국에서는 년/월/일 순서
                                    
                                

░ 나중에 더 필요해지면; 최신 API를 사용하는 날짜-시간 관련 JavaScript 라이브러리인 Day.js 도 참조하십시오.. 이를 쓰면 좀 더 쉽고 다양하게 날짜/시간을 다룰 수 있습니다!

• usage: sort/search Collator 객체를 사용하는 방법 지정 ← 기본값인 sort 는 엄격한 비교이며, search 는 느슨한 비교이다
• sensitivity: base/accent/case/variant 문자열 비교시 대소문자와 악센트를 감안할지 여부 지정 ← base 는 기본 글자만 비교하며, variant (이는 sort() 정렬에서의 기본값이다)는 악센트와 대소문자까지 엄격히 비교한다
• ignorePunctuation: true 공백과 구두점을 무시하고 비교한다
• numeric: true 정수 또는 정수가 포함된 문자열을 숫자 순서로 비교한다
• caseFirst: upper/lower 대문자/소문자를 앞에 둔다 ← 이는 배열의 sort() 메서드의 기본 동작이며, 대문자가 소문자보다 앞에 오는 유니코드 순서와는 다르다!

                                    
                                        // 사용자의 지역에 맞게 정렬하는 기본 비교 함수
                                        const collator= new Intl.Collator().compare
                                        console.log(["a", "z", "A", "Z"].sort(collator)) // ['a', 'A', 'z', 'Z']
                                        console.log(["다", "마", "가", "하"].sort(collator)) // ['가', '다', '마', '하']

                                        // 파일 이름에 숫자가 포함되는 경우가 많으므로 따로 정렬해야 한다:
                                        const f_name= new Intl.Collator(undefined, { numeric: true }).compare
                                        console.log(["Page10", "Page5"].sort(f_name)) // ['Page5', 'Page10']

                                        // 대상 문자열과 비슷한 문자열을 모두 찾는다:
                                        const fuzzy= new Intl.Collator(undefined, { sensitivity: "base", ignorePunctuation: true }).compare
                                        let str= ["food", "fool", "Foo Bar"]
                                        console.log(str.findIndex(s => fuzzy(s, "foobar") === 0)) // 2 ← 찾은 요소의 인덱스번호
                                        console.log(str.findIndex(s => fuzzy(s, "f00bar") === 0)) // -1 ← 찾지 못함
                                    
                                

☞ 국제화 API의 첫번째 인자로 undefined 값을 주면; 기본값으로 설정된다!

✓   대부분의 전역객체와는 달리, Intl은 생성자가 아니므로 new 연산자와 함께 사용하거나 Intl 객체를 함수로 호출할 수 없다. Math 객체와 마찬가지로 Intl의 모든 프로퍼티와 메서드는 정적이다!

                                    
                                        const num= 0 // falsy한 값
                                        console.log(!num, !!num) // true false
                                        
                                        const n_null= null // falsy한 값
                                        console.log(!n_null, !!n_null) // true false
                                        
                                        const u_underfined= undefined // falsy한 값
                                        console.log(!u_underfined, !!u_underfined) // true false
                                        
                                        const x= '' // falsy한 값
                                        console.log(!x) // true
                                    
                                

➥ 불린 값을 숫자로 바꿀 때는 조건 연산자 ?를 사용할 수 있다:

                                    
                                        const b= true // trusy한 값
                                        const n= b ? 1 : 0 // b가 trusy한 값이면; 1을, 아니라면; 0을 리턴한다
                                        console.log(n) // 1
                                    
                                

                                    
                                        const str= '5' // 문자열
                                        const x= -str // (숫자로된 문자열의 숫자로의 데이터 변환과 함께)부호 변환
                                        console.log(x) // -5
                                    
                                

☞ 참고로, 변수가 아닌 리터럴 숫자 데이터 앞에 붙을 경우에는 그저 양수, 음수를 의미할 뿐이다!

                                    
                                        let a= 1
                                        let b= a++ // 먼저, b에 1을 넣어주고(b= 1), 자신을 1만큼 증가시킨다(a= 2)
                                        console.log(a, b) // 2, 1
                                        
                                        let c= ++a // 자신을 1만큼 증가시켜서(a= 3) c에 넣어준다(c= 3) 
                                        console.log(a, c) // 3, 3
                                    
                                

➥ ++x가 x= x+1과 항상 같지는 않다!

                                    
                                        x= "1"
                                        console.log(x++) // 1 ← 1을 반환한 뒤, 자신을 1만큼 증가시킨다(x= 2)
                                        console.log(++x) // 3 ← 먼저 1만큼 증가시킨 뒤(x= 2+1), 그 값을 반환한다
                                    
                                        x= "1"
                                        console.log(x= x+1) // "11" ← 문자열 x에 1을 문자열로 연결하여 반환한다!
                                    
                                

☞ ++ 연산자는 항상 피연산자를 (할 수 있다면)숫자로 변환해서 계산할 뿐, 문자열 병합을 수행하지는 않는다!

( * 여기서부터는 연산자의 우선 순위가 높은 쪽에서 낮은 쪽으로 내려가는데, 괄호 연산자 ()는 연산자의 우선 순위를 높이거나 명확히 하기 위해 사용된다 ← 곧, ()는 ! ++ 등의 단항 연산자를 제외하고는 우선 순위가 가장 높다! )

➥ + 연산자는 피연산자가 모두 숫자이면 더하고(덧셈 연산), 모두 문자열이면 병합하며(문자열 연결), 문자열 + 숫자 (및 숫자 + 문자열) 이라면; 숫자를 문자열로 변환한 뒤, 하나로 연결하여 연결된 문자열로 반환한다:

                                    
                                        console.log(1 + '2weak') // 12weak ← 문자열 병합
                                        console.log(1 + 2 + "문자열") // 3문자열 ← 산술 연산 이후 문자열로 병합
                                        console.log(1 + (2 + "문자열")) // 12문자열 ← 문자열로 병합
                                    
                                

                                    
                                        console.log(true + true) // 2 ← true를 1로 변환한 뒤 산술 연산
                                        console.log(1 + null) // 1 ← null을 0으로 변환한 뒤 산술 연산
                                        console.log(1 + undefined) // NaN ← undefined를 NaN으로 변환한 뒤 산술 연산을 하되, NaN으로는 산술 연산을 할 수 없으므로 NaN을 리턴한다!
                                    
                                

                                    
                                        let a= 1, b= 2 // 콤마 연산자 ,는 앞에서 뒤로 순차적으로 해석해나간다!
                                        console.log(a += b) // 3 ← 이는 a= (a + b)와 같다!

                                        const c= 1, d= 2 // const 상수는 값을 변경할 수 없다!
                                        console.log(c += d) // Uncaught TypeError: Assignment to constant variable.
                                    
                                

➥ 참고로, 문자열의 경우; +=는 계속적으로 뒤에 덧붙여진다. 곧, 문자열 연결이 되는데, 이는 스크립트로 <ul>(및 <li>) 리스트를 작성하는 경우 등에 유용하게 쓰일 수 있다!

✓   예컨대, + 연산자가 문자열을 우선시하는 반면(하나라도 문자열이면; 모두 문자열로 변환하여 연결한다!), 비교 연산자는 숫자를 우선시하여 두 피연산자 중 하나라도 숫자라면 나머지 연산자도 숫자로 변환하여 비교하려 시도하고, 두 연산자가 모두 문자열인 경우에만 문자열로 비교하는 식이다!

✓   문자열 비교시의 순서는 유니코드에서 정의한 것으로 특정 언어나 지역에서 받아들이는 순서 개념과는 다를 수 있다. 또한, 영문 대/소문자를 구별하며 대문자의 ASCII 값이 소문자의 ASCII 값보다 작다는 것도 염두에 두어야 한다!

➥ 참고로, String.localeCompare(); 메서드는 해당 지역의 상식에 맞는 알파벳 순서를 판단 기준에 포함하며, Intl.Collator 속성을 쓰면 좀 더 상식적인 문자열 비교를 할 수 있다!

                                    
                                        console.log(1 == '1') // true ← '=='는 숫자 값만으로 비교한다!
                                        console.log(1 === '1') // false ← '==='는 숫자 값만 아니라 데이터 타입까지 비교한다!                                        

                                        console.log("1" == true) // true ← 먼저, 불린 true를 숫자 1로 바꾸고, 이어서 문자열 "1"을 숫자 1로 바꾼 다음 비교한다!
                                    
                                

➥ 보통은 일치 연산자를 쓰는 것이 권장되지만, 가끔은 동등 연산자도 유용하게 쓰일 수 있다. 예컨대, 특정 값이 비어 있음을 판단하는 경우에 활용할 수 있다:

                                    
                                        function isEmpty(a) {
                                            if(a == null) return; // a 값이 null이라면; 아무 일도 하지말고 그냥 리턴하라!
                                            else { 그렇지 않으면; 이 코드를 수행하라 }
                                        }
                                    
                                

☞ 동등 연산자 ==는 null == undefined, "0" == 0, "0" == false, "1" == true를 모두 참으로 간주한다!

                                    
                                        let x= 0

                                        const result= true || x++ // '참같은 값'이 앞에 오면; 앞쪽만(!) 평가하여 반환한다 ← 단축 평가!
                                        console.log(result, x) // true 0

                                        const result2= false || x++ // '거짓같은 값'이 앞에 오면; 뒤쪽을 평가하여 반환한다 ← 부수 효과!
                                        console.log(result2, x) // 0 1 ← 먼저, result2에는 기존 x 값이 반환되고, 이후에 x 값이 증가된다!
                                    
                                

                                    
                                        let x= 0

                                        const opt= {} || ++x // 빈 객체 {}는 Trusy한 값이므로; opt에는 {}가 들어가고, x 값은 그대로이다 ← 단축 평가!
                                        console.log(opt, x) // {} 0

                                        const opt2= '' || ++x // 빈 문자열 ''는 Falsy한 값이므로; x는 1이 증가하고, opt2에는 증가한 x 값이 들어간다 ← 부수 효과!
                                        console.log(opt2, x) // 1 1
                                    
                                

☞ 불린( true/false ) 피연산자를 사용하면 논리 연산자는 항상 불린 값으로 반환한다. 그러나 피연산자가 불린이 아니라면; 그 결과를 결정한 값으로 반환한다!

                                    
                                        const p= { name: 'Kim', age: 18 }

                                        console.log(null && p.age) // null ← 앞쪽 null이 이미 거짓이므로, 뒤쪽은 건너뛴다(= 단축 평가)
                                        console.log({} && p.age) // 18 ← 빈 객체는 참이므로, 뒤쪽을 평가하여 반환한다(= 부수 효과)
                                    
                                

                                    
                                        function isLeap(y) { // 윤년 확인 함수
                                            if((y%400 === 0) || (y%4 === 0) && (y%100 !== 0)) return "윤년임!";
                                            else return "윤년 아님!";
                                        }
                                        alert(isLeap(2025)) // 윤년 아님!
                                    
                                

☞ 참고로, &&가 ||보다 연산자의 우선순위가 높은데, 이런 경우에는 ()를 사용해주는 것이 알아보기 쉽다: (y%400 === 0) || ((y%4 === 0) && (y%100 !== 0))

➥ if 문은 논리 연산자를 써서 표현할 수도 있는데, 아래는 객체를 초기화하는데 쓰인 각각의 코드이다:

                                    
                                        let opt= true
                                        if(opt) opt= {} // 조건이 참이므로, opt에는 {}가 들어간다
                                        // opt= opt && {} ← (앞이 참이기에)뒤쪽도 살펴야 하므로, 부수 효과가 발생하여 opt는 {} 값으로 초기화된다!

                                        let opt2= false
                                        if(! opt2) opt2= {} // 조건이 참이므로, opt2에는 {}가 들어간다!
                                        // opt2= opt2 || {} // ← (앞이 참이 아니기에)뒤쪽도 살펴야 하므로, 부수 효과가 발생하여 opt2는 {} 값으로 초기화된다!
                                    
                                

                                    
                                        const x= 0 // 'falsy'한 값들: 0, "", NaN 대 null, undefined

                                        console.log(x || 10) // 10 ← x는 'falsy'한 값이므로, ||에서는 뒤쪽도 평가한다!
                                        console.log(x && 10) // 0 ← x는 'falsy'한 값이므로, &&에서는 뒤쪽은 건너뛴다!

                                        console.log(x ?? 10) // 0 ← x가 null이나 undefined는 아니므로, 뒤쪽은 건너뛴다!
                                    
                                

                                    
                                        let z // 값을 주지 않고 선언만 한 변수에는 'undefined'가 들어간다!
                                        console.log(z ?? 10) // 10  ← z 값이 'undefined'이므로, 뒤쪽 값을 넣어 초기화한다!
                                    
                                

☞ ?? 연산자는 앞 부분이 null 이나 undefined 라면(곧, 값이 정의되지 않은 경우); 뒤쪽을(평가하여) 반환하며(= 부수 효과), 아니라면; 앞쪽 값을 (그대로)반환하는 것이다(= 단축 평가) ← 이는 null 이나 undefined 처럼 실제로 값이 비어있는 경우에만 디폴트 값을 설정하고 싶을 때 유용하게 사용할 수 있다!

➥ 곧, a ?? b는 (a !== null && a !== undefined) ? a : b와 같다! ← 참고로, && 및 || 대 ?? 연산자간의 우선 순위는 명확하지 않으므로, 혼용 시에는 ()를 사용해주는 것이 좋다!

                                    
                                        a ||= b // a= a || b
                                        a &&= b // a= a && b
                                        a ??= b // a= a ?? b
                                    
                                

                                    
                                        x= a ** b ** c // 지수 연산자: x= a ** (b ** c)
                                        y= ~-x // 단항 연산자: y= ~(-x)
                                        q= a ? b:c ? d:e // ? 연산자: q= a ? b : (c ? d:e)
                                    
                                

☞ 연산자의 우선 순위가 헷갈리는 경우에는; ()로 묶어주는 것이 최선이다!

☞ 참고로, 연산자 중에서 (단항 연산자를 제외하고는)() 연산자의 우선 순위가 가장 높고, , 연산자는 가장 낮다!

➥ 프로퍼티 접근 및 호출 표현식의 우선 순위는 다른 어떤 연산자보다도 우선 순위가 높다: 예컨대, typeof myProperty.functions[x](y) { .. }에서 typeof 연산자는 프로퍼티 접근(myProperty), 배열 인덱스([x]), 함수 호출(functions(y) { .. }) 이후에 이루어진다!

                                        
                                            let sum= 0
                                            for(let i=1; i<6; i++) { // 카운터 변수 선언 및 초기화; 조건 평가; 증감 카운터
                                                sum += i // 0+1, 1+2, 3+3, 6+4, 10+5
                                            } // i 값은 최종적으로 6이 된다!

                                            console.log(sum) // 15
                                            console.log(i) // Uncaught ReferenceError: i is not defined ← 여기서는 for 블록 내부 변수 i에 접근할 수 없다!
                                        
                                    

                                        
                                            let ctr= 0 // 카운터 변수 선언 및 초기화
                                            while(ctr < 5) { // 조건 평가
                                                console.log(ctr) // 0 1 2 3 4

                                                ctr++ // 증감 카운터
                                            } // ctr 값은 최종적으로 5가 된다!

                                            console.log(ctr) // 5
                                        
                                    

                                        
                                            let ctr= 0 // 카운터 변수 선언 및 초기화
                                            do { // 일단, 루프에 들어간다!
                                                console.log(ctr) // 0 1 2 3 4

                                                ctr++ // 증감 카운터
                                            } while (ctr < 5); // 나오면서, 조건을 평가한다!

                                            console.log(ctr) // 5
                                        
                                    

스크립트 문 연습 예제

                                        
                                            const arr= [1, 2, 3, 4, 5]
    
                                            const target= 3
                                            for(let i=0; i < arr.length; i++) {
                                                if(arr[i] === target) { // 원하는 것(변수 target의 값)을 찾으면;
                                                    alert(`목표물 ${target} 발견함, 바로 루프를 빠져나갑니다..`);
                                                    break; // 원하는 것을 찾았다면; 더 이상 루프를 돌지 않고 벗어난다
                                                }
                                            }
                                        
                                    

➥ return 문은 (함수 안에서만 쓰여)현재 함수를 즉시 빠져나가는데, 호출자에게 전달하는 값이 있으면; 그 값을 반환하고, 없으면; undefined 를 반환한다!

                                    
                                        const date= new Date();
                                        console.log(date) // Thu Jun 12 2025 10:36:29 GMT+0900 (한국 표준시)

                                        date.setMonth(date.getMonth()+3, date.getDate()+15) // 3개월 15일 후
                                        console.log(date) // Sat Sep 27 2025 10:36:29 GMT+0900 (한국 표준시)
                                    
                                

                                    
                                        let today= new Date(), before= new Date('2020-6-1'), after= new Date('2026-5-31');

                                        let lastDay= today.getTime() - before.getTime(); // 시작일로부터 오늘까지의 경과 시간
                                        let nextDay= after.getTime() - today.getTime(); // 오늘부터 종료일까지 남은 시간

                                        let result1= Math.floor(lastDay / (1000*60*60*24)); // 경과한 시간을 일 수로 바꿈
                                        let result2= Math.ceil(nextDay / (1000*60*60*24)); // 남은 시간을 일 수로 계산

                                        console.log(`이사온 첫날부터 ${result1}일 지남, 계약 마지막날까지 ${result2}일 남음!`) // 이사온 첫날부터 1837일 지남, 계약 마지막날까지 353일 남음!
                                    
                                

                                    
                                        const date1= new Date(2025, 6, 1), date2= new Date(2026, 5, 31);
                                        console.log(date1 > date2) // false

                                        const days_differ= date2 - date1;
                                        console.log("남은 일 수: " + days_differ/(1000*60*60*24)) // 남은 일 수: 365
                                    
                                

                                    
                                        const toNum= new Date().valueOf() // 날짜 데이터의 숫자 변환
                                        console.log(toNum) // 1749692838181
                                    
                                

                                        
                                            const arr= [] // 빈 배열 선언
                                            arr[0]= "서울" // 배열의 요소에 값 넣기
                                            arr[1]= "부산"
                                            arr[3]= "경주"
                                            console.log(arr.length) // 4 (배열의 길이, 곧 배열 내 요소 수) ← arr[2]에는 배열의 '빈' 요소가 들어가 있다!
                                            console.log(arr) // ['서울', '부산', empty, '경주'] ← Array(4) 0: "서울" 1: "부산" 3: "경주" length: 4
                                        
                                    

                                        
                                            const ary= [[1, 2, 3], 1, '경주', false, {id: "이름", pw: "비번"}] // 리터럴 배열 선언 및 정의
                                            console.log(ary[2], ary[0][2]) // 경주 3 ← 대괄호 접근법으로 배열 요소의 값 가져오기
                                        
                                    

                                        
                                            const num= 1
                                            const nums= [num, num+1, num+2] // 표현식을 써서 만든 배열의 요소들 ← 콤마 연산자는 앞에서부터 순차적으로 나아간다!
                                            console.log(nums) // [1, 2, 3]
                                        
                                    

➥ 배열 생성 시 Array.of(값1[, 값2, ..]) 메서드를 사용할 수도 있는데, 이 메서드는 인수로 주어진 값[들] 을 배열의 요소로 만들어 반환한다: Array.of() // 빈 배열 [] 생성, Array.of(1, 2, 3) // [1, 2, 3]

                                        
                                            const el= ['요소1', '요소2', '요소3']

                                            for(let i=0; i <= el.length-1; i++) { // 배열 요소의 앞으로부터 루프를 돌 때: 0, 1, 2
                                                document.write(`${el[i]} `) // 요소1 요소2 요소3
                                            }

                                            for(let j= el.length-1; j >= 0; j--) { // 배열 요소의 뒤로부터 루프를 돌 때: 2, 1, 0
                                                document.write(`${el[j]} `) // 요소3 요소2 요소1
                                            }
                                        
                                    

                                    
                                        let arr= [] // 빈 배열 선언
                                        arr[0]= 1 // 빈 배열에 요소 추가
                                        arr[1]= 2
                                        console.log(arr) // [1, 2]

                                        arr.push("three", undefined) // push() 메서드로 arr 배열 맨 뒤에 배열 요소를 추가한다
                                        console.log(arr) // [1, 2, 'three', undefined]

                                        delete arr[1] // 배열의 [1]번 요소 제거
                                        console.log(`배열은 [${arr}]이고, 길이는 ${arr.length}임`) // "배열은 [1,,three,]이고, 길이는 4임" ← length 값은 변함이 없다!
                                    
                                

➥ delete 연산자로 배열의 특정 요소 값을 삭제할 수는 있지만, 해당 요소의 값만 undefined 로 설정될 뿐(= '빈 요소') 배열의 길이는 달라지지 않는다 - 배열의 요소 자체를 삭제하려면; splice() 메서드를 써야 한다 ← 참고로, 배열에서 '빈 요소'란 배열에 요소를 추가하거나 제거할 때, 또는 length 속성으로 길이를 설정해줄 때 undefined 값을 갖게 되는 요소를 말한다!

                                    
                                        const arr= [1, 2, 3, 4, 5]

                                        arr.length= 3 // length 속성으로 배열의 길이를 줄인다 ← 뒷부분은 실제로 삭제된다!
                                        console.log(arr) // [1, 2, 3]
                                        
                                        arr[3]= "요소 추가"
                                        console.log(arr, arr.length) // [1, 2, 3, '요소 추가'] 4
                                    
                                

➥ Array 객체의 데이터 타입을 typeof 연산자로 확인하면 object 로 나오므로, 배열 여부를 확인하려면 Array.isArray() 메서드를 사용해야 한다:

                                    
                                        console.log(typeof [], typeof {}, Array.isArray([])) // object object true
                                    
                                

                                    
                                        let arr= [1, 2, 3]

                                        delete arr[1]
                                        console.log(arr.length) // 3 ← 하나의 요소를 삭제해도 배열의 전체 길이는 변함이 없다!
                                    
                                

                                    
                                        let arr= [1, 2, 3]

                                        console.log("0" in arr) // true ← 배열 arr에 0번 인덱스가 있다
                                        console.log(2 in arr) // true ← 좌측의 2는 문자열 "2"로 변환하여 평가한다!
                                        console.log(3 in arr) // false ← 배열 arr에 3번 인덱스는 없다!
                                    
                                

                                    
                                        let obj= { x: 1, y: 2 } // 객체의 키는 그 자체 문자열이다!

                                        delete obj.x
                                        console.log(obj) // {y: 2} ← 배열에서와는 달리, 객체에서는 객체의 키(와 값) 자체가 삭제된다!
                                        console.log("x" in obj) // false
                                        console.log("y" in obj) // true
                                        console.log(x in obj) // Uncaught ReferenceError! x is not defined ← 객체의 키는 문자열 형태로 주어져야 한다!
                                    
                                

☞ 배열에서와는 달리, 객체에서는 in 연산자의 왼쪽 피연산자는 반드시 문자열 형태로 주어져야 한다!

➥ delete 연산자와는 달리, in 연산자는 undefined 값은 없는 것으로 간주하며, 따라서 for .. in 문에서 (인덱스 번호에는 있어도)빈 요소 는 건너뛴다:

                                    
                                        let ary= [1, 2, 3]
                                        ary[4]= 5 // [1, 2, 3, ,5] // 빈 요소(ary[3])에는 'undefined' 값이 할당된다!
                                        console.log(ary.length) // 5 ← 빈 요소도 length에 포함된다!
                                        
                                        for(let i=0; i < ary.length; i++) { // for 문 ← 루프 변수 i로 루프를 돈다
                                            document.write(`${i}:${ary[i]} `) // 0:1, 1:2, 2:3, 3:undefined, 4:5
                                        } // 배열에서 빈 요소도 인덱스 번호를 갖고, 값은 'undefined'이다!
                                        
                                        for(let j in ary) { // for .. in 문 ← 배열의 인덱스 번호로 루프를 돈다
                                            document.write(`${j}:${ary[j]} `) // 0:1, 1:2, 2:3, 4:5
                                        } // for .. in 문에서는 배열의 '빈 요소'는 건너뛴다!
                                    
                                

                                        
                                            let str= "문자열"

                                            console.log(str.charAt(0)) // 문 ← String 객체의 메서드인 charAt() 메서드
                                            console.log(str[0]) // 문 ← 문자열에 배열처럼 접근할 수 있다!
                                        
                                    

                                    
                                        const p= { // 리터럴 객체 p
                                            name: 'jc', // 객체의 속성(키: '값')
                                            per: function() { return 'K' } // 객체의 메서드(키: 함수 객체)
                                            // 또는, per() { return 'K' } // 객체의 메서드 ← ES6 단축 표기법
                                        }
                                        console.log(`${p.per() + p.name}`) // Kjc
                                    
                                

➥ ES6 문법에서는 기존 변수를 써서 객체를 생성할 수 있다:

                                    
                                        const x= 1, y= 2

                                        const obj= { x, y } // 기존 변수를 써서 객체 생성하기 ← ES6
                                        console.log(obj) // {x: 1, y: 2}

                                        console.log(obj.x, obj.y) // 1 2
                                    
                                

                                    
                                        let per= {} // 빈 객체 생성
                                        per= { // 빈 객체에 속성(이름: 값) 정의
                                            name: 'Kjc', rank: 3
                                        }
                                        
                                        per.star= '스타' // per 객체에 동적으로 star 속성을 추가하고, 값을 넣어준다
                                        console.log(`${per['name']}님은 제 마음 속의 ${per.star}입니다!`) // Kjc님은 제 마음 속의 스타입니다!
                                    
                                

☞ 객체의 속성 이름에 표현식(가령, -)이나 예약어가 포함되어 있거나 심볼, 숫자인 경우, 프로퍼티 이름이 계산의 결과일 때는 반드시 [] 연산자로 접근해야 한다!

✓   객체의 속성값에 [] 문법으로 접근할 때는 따옴표를 필요로 하지만, for .. in 문에서는; 루프를 도는 객체의 속성키(및 배열의 인덱스번호)는 이미 문자열 타입이므로 대괄호 안에서 따옴표는 필요하지 않다:

                                    
                                        const per= { name: 'Kim', age: 30, gender: '남' }
                                        console.log(`${per.name}: ${per['age']} `) // Kim: 30 ← 객체의 키에 접근할 때 []에서는 (. 문법에서와는 달리)따옴표로 둘러싸야 한다!

                                        for(let p in per) { // for .. in 문 내부에서는; 이 p(= 키)는 이미 문자열이므로, [] 안에 따옴표를 써서는 안된다!
                                            document.write(`${p}: ${per[p]} `)  // name: Kim age: 30 gender: 남
                                        }
                                    
                                

☞ for(i in 객체/배열) { .. }에서 i 에는 할당 표현식의 왼쪽에 올 수 있는 것이라면 모두 가능한데, 배열의 인덱스번호 나 객체의 속성키 에 해당한다(i 에는 모두 문자열로 들어간다) ← 곧, 배열의 인덱스번호 는 객체의 속성키 와 같다고 보면 된다!

                                    
                                        const pet= {
                                            name: '구름',
                                            eat(food) { // 전달받은 매개변수 '물'로 작업한다
                                                console.log(this.name + '은 ' + food + '을 먹고 산다') // 구름은 물을 먹고 산다 ← 이 this는 pet 객체 자신의 this이다!
                                            }
                                        }
                                        
                                        pet.eat('물') // pet 객체의 eat() 메서드를 호출하면서 인수 '물'을 전달한다!
                                    
                                

☞ this 키워드는 자바스크립트에서 매우 중요하면서, 또 아주 어려운 개념인데.. 일단은, this 는 지금 실행 중인 코드를 지니고 있는 객체(곧, 위에서는 pet 객체 자신)라고 알아두면 됩니다

                                    
                                        const per= { name: 'Kjc', age: 39, gen: '남' }

                                        delete per.local // 객체에 없는 속성을 제거하려 해도, 에러는 나지 않는다!

                                        /* in 연산자로 객체의 속성값에 접근할 때, 좌측 피연산자는 반드시 문자열 형태여야 한다! */
                                        if('gen' in per) delete per.gen // 객체에 접근할 때, 속성 키(gen)는 그 자체 문자열이다!
                                        console.log('gen' in per) // false ← gen 속성은 방금 지웠다!
                                    
                                

☞ 객체에 없는 속성을 제거하려 해도, 에러는 내지 않고 그저 조용히 지나칠 뿐이다 ← 참고로, delete 연산자로 객체 및 배열 자체를 삭제할 수는 없다!

➥ 객체.hasOwnProperty(속성)은 객체 가 특정 속성 을 (자체적으로)가지고 있는지를 확인하며, Reflect.ownKeys(객체)는 객체 가 지닌 모든 자체 프로퍼티 키를 반환한다 ← 참고로, 객체의 프로퍼티 열거 시의 순서는 매우 복잡한 규정을 따르므로 배열과는 달리 일정한 순서는 보장하기 어렵다!

                                    
                                        const obj= { a: 1, b: 2, c: 3 }

                                        const is1= obj || obj.d || obj.d.value // obj가 참이므로 obj를 반환한다(= 단축 평가)
                                        console.log(is1) // {a: 1, b: 2, c: 3}

                                        const is2= obj && obj.d && obj.d.value // obj는 참이지만, obj.d는 없는 프로퍼티이므로 undefined를 반환한다 ← 그 뒤는 평가하지 않는다!
                                        console.log(is2) // undefined

                                        console.log(obj.d.length) // TypeError! ← obj.d는 없는 프로퍼티이므로 길이를 잴 수가 없다!
                                    
                                

                                    
                                        const obj= { x: 1, y: 2, z: 3 }

                                        let es1= ""
                                        for(let e of Object.keys(obj)) { // Object.keys(obj)
                                            es1 += e
                                        }
                                        console.log(es1) // xyz

                                        let es2= ""
                                        for(let e of Object.values(obj)) { // Object.values(obj)
                                            es2 += e
                                        }
                                        console.log(es2) // 123

                                        let es3= ""
                                        for(let [k, v] of Object.entries(obj)) { // 중첩 배열로 가져온 쌍으로 된 키와 값을 각각의 변수로 해체 할당한다!
                                            es3 += k + ":" + v + " " // 키와 값을 문자열로 결합한다!
                                        }
                                        console.log(es3) // x:1 y:2 z:3
                                    
                                

                                    
                                        let obj= { Seoul: 2, Pusan: 3, Gj1: 2, Ulsan: 1, Gj2: 3 }

                                        Object.keys(obj).filter(o => o.match(/^Gj/)).forEach(o => console.log(`${o}:${obj[o]}`)) // Gj1:2 Gj2:3
                                    
                                

➥ 단지 객체가 소유한 프로퍼티 이름 및 값만 조회하려는 경우라면; Object.keys/values()가 더 적합하며, 키와 값 모두 가져오려면; Object.entries()를 사용할 수 있다 ← 여기서는 hasOwnProperty() 체크가 필요하지 않기에 객체의 속성 키나 값, 키&값만 필요한 때에는 for .. in 루프보다 편리하다!

☞ 배열의 순회 시, 현재 다루는 배열이 '꽉찬' 배열인지, '빈' 요소들이 포함되어 있는지 확신할 수 없는 경우에는 체크 코드를 넣어줄 필요가 있다: if(arr[i] === undefined) continue; ← '빈' 요소 등 유효하지 않은 값은 건너뛰어 다음 조건 평가로 간다!

                                    
                                        const obj= { x: 1, y: 2, z: 3 } // 객체의 선언 및 정의

                                        let keys= ""
                                        for(let key in obj) { // 객체의 키로 루프를 돈다
                                            if(! obj.hasOwnProperty(key)) continue; // 열거가능한 키가 아니라면(예컨대, 상속된 프로퍼티)는 건너뛴다!
                                            if(typeof obj[key] === "function") continue; // 객체의 메서드(= 함수)도 건너뛴다!

                                            keys += key; // 객체의 키를 하나의 문자열로 연결한다
                                        }
                                        console.log(keys) // xyz
                                    
                                

☞ 모든 객체의 프로퍼티에는 자신이 정의한 속성만 아니라 상위 객체로부터 '상속된'(및 '열거 불가능'으로 설정된) 속성 또한 존재한다!

                                    
                                        const obj= { x: 1, y: 2, z: 3 }
                                        let ary= []

                                        let i= 0
                                        for(ary[i++] in obj) { // obj의 키들을 순회하며 ary 배열의 요소로 넣는다!
                                            ;
                                        }
                                        console.log(ary) // ['x', 'y', 'z']

                                        for(let v of ary) { // ary 배열의 값인 v로 루프를 돈다
                                            document.write(v) // xyz
                                        }
                                    
                                

☞ 배열을 대상으로 작업할 때는 for .. in 루프가 아닌 for .. of 루프를 쓰는 것이 보다 간결하다!

➥ for .. in 루프는 실제로 객체의 프로퍼티 전체를 열거하지는 않으며, 오직 열거 가능한 프로퍼티만 순회한다 - 심볼, 스크립트의 여러 내장 메서드들이 열거 불가능한 반면, 열거 가능한 상속된 프로퍼티가 루프의 순회 대상에 예기치않게 끼어들 수도 있다. 또한, 프로퍼티를 삭제하거나 새로이 생성하는 경우 등에도 애매한 문제가 발생할 수 있다. 따라서, 배열에서는 for .. in 문 대신 for .. of 문과 Object.keys() 등의 메서드를 조합해서 쓰는 것이 보다 안전하다!

                                    
                                        const names= ['K', 'j', 'c']

                                        let str= ""
                                        for(let letter of names) { // 배열의 요소값으로 루프를 돈다
                                            str += letter; // 배열의 각 요소값들을 문자열로 연결한다
                                        }
                                        console.log(str) // "Kjc" ← 문자열

                                        let str2= ""
                                        for(let [idx, letter] of names.entries()) { // 배열 names에서 인덱스번호와 값의 쌍을 배열로 가져온다
                                            str2 += (idx+ ":" + letter + " ") // 배열의 인덱스번호와 값의 쌍을 가져와 문자열로 연결한다
                                        }
                                        console.log(str2) // 0:K 1:j 2:c
                                    
                                

☞ entries() 메서드는 배열 및 객체에서 '키'(또는, '인덱스번호')와 '값'의 쌍을 배열로 반환한다!

                                    
                                        const nums= [1, 2, 3] // 배열

                                        for(let i of nums) { // 배열의 값으로 순회한다
                                            document.write(i + " ") // 1 2 3
                                        }

                                        nums.forEach(num => document.write(`${[num] + " "}`)); // 1 2 3
                                    
                                

☞ 배열에서 값(만) 가져올 때는 Array 객체의 forEach() 메서드를 쓰면 코드가 한결 간결해진다!

➥ 배열.forEach(콜백함수(요소)) 메서드는 콜백함수 를 인수로 받아 배열 의 각 요소 를 순회하면서 특정 작업을 반복해나가게 된다 ← forEach() 메서드는 for .. of 문과는 달리, '빈 요소' 및 존재하지 않는 요소에 대해서는 undefined 를 반환하지 않고 그냥 건너뛰어 다음 요소로 넘어간다는 점에서 더욱 유용하다!

                                    
                                        let [x, y]= [1, 2, 3] // 3번째 요소는 버려진다!
                                        console.log(x, y) // 1 2
                                        
                                        let [x2, y2]= [1] // y2는 값이 없으므로 undefined가 된다!
                                        console.log(x2, y2) // 1 undefined
                                        
                                        let [z, , c]= [1, 2, 3] // 2번째 요소는 버려진다!
                                        console.log(z, c) // 1 3
                                    
                                

                                    
                                        let x=1, y=2; // 이 세미콜론은 반드시 필요하다!

                                        // 위 세미콜론이 생략되면; 다음 줄의 '['와 연결되어(곧, y=2[x, y]가 된다!) 구문 에러가 발생한다!
                                        [x, y] = [y, x] // x=2, y=1 ← 변수값 교체
                                        console.log(x, y) // 2 1
                                    
                                

                                    
                                        const ary= ["I", "love", "Javascript!"]

                                        function getAry([x, y, z]) { // 배열의 요소들로 해체 할당 ← 이름과 무관하게, 그저 순서대로 들어간다!
                                            return `${x} ${y} ${z}`
                                        }
                                        console.log(getAry(ary)) // I love Javascript!
                                    
                                

                                    
                                        const ary= [1, 2, 3, 4, 5]

                                        const arr2= [...ary] // 펼침 연산자로 배열 복제
                                        console.log(arr2) // [1, 2, 3, 4, 5]
                                        
                                        const arr3= [-1, 0, ...ary, 0, -1] // 배열의 병합 및 복제
                                        console.log(arr3) // [-1, 0, 1, 2, 3, 4, 5, 0, -1]
                                    
                                

                                                                           
                                        const city= ["3대 도시: ", "서울", "부산", "대구"]

                                        const [first, ...cities]= city; // 배열의 분해 및 복제 ← first에 ary 배열의 첫번째 요소가 변수로 들어가고, 나머지 요소는 새 배열 cities(["서울", "부산", "대구"])로 할당된다!
                                        console.log(first + cities.join("/")) // 3대 도시: 서울/부산/대구
                                    
                                

                                    
                                        const book= ['소소한이야기', 'Kjc', 20_000]

                                        function bookFnc(title, author, price){
                                            return `${title}: by ${author}, ${price}`
                                        }
                                        console.log(bookFnc(...book)) // 소소한이야기: by Kjc, 20000 ← ... 연산자를 써서 함수의 인자로 전달한다!

                                        const book3= ['소소한이야기2', 'Lee']
                                        console.log(bookFnc(...book3, 25_000)) // 소소한이야기2 by Lee 25000
                                    
                                

✓   for 루프는 배열을 복제하는 가장 기본적인 수단이다:

                                    
                                        const ary= [1, 2, 3, 4, 5]

                                        let arr2= []
                                        for(let i=0; i < ary.length; i++){ // for 루프로 배열 복제
                                            arr2[i]= ary[i]
                                        }
                                        console.log(arr2) // [1, 2, 3, 4, 5]
                                    
                                

➥ 배열 분해에 꼭 배열만 써야하는 것은 아니다. ... 연산자는 모든 이터러블 객체(곧, for .. of 문의 대상이 될 수 있는 객체)에서 작동된다:

                                    
                                        let [first, ...rest] = "Kjc" // 문자열의 분해 및 해체 할당
                                        console.log(first, rest) // K ['j', 'c']
                                    
                                

                                    
                                        const obj= { city: "경주", san: "남산" }

                                        const { city, san } = obj // obj 객체를 해체하여 (이름이 같은)각각의 변수에 할당한다 ← 이것은 obj와는 전혀 다른 새로운 객체이다!

                                        obj.city= '서울' // obj 객체의 city 속성 값 변경
                                        console.log(obj.city, obj.san) // 서울 남산 

                                        console.log(city, san) // 경주 남산 ← 새로운 객체
                                    
                                

                                    
                                        const eat= { morning: ["미역국", "잡곡밥"] }

                                        const { morning: [a, b] } = eat
                                        // const { morning } = eat // 객체의 해체할당
                                        // const [a, b] = morning // 배열의 해체할당

                                        console.log(a, b) // 미역국 잡곡밥
                                    
                                

                                    
                                        const obj= { s1: "I", s2: "love" }

                                        function getObj({s1, s2, what="javaScript"}) { // 객체의 프로퍼티 해체할당 및 새 변수 추가
                                            return `${s1} ${s2} ${what}`
                                        }
                                        console.log(getObj(obj)) // I love javaScript!
                                    
                                

☞ 이렇게 해체 할당으로 들어오는 매개변수는 let 변수로 설정되므로 함수 본체 내부에서 해당 변수의 값을 변경하는 것도 가능하다!

                                    
                                        const source= '마늘', meat= '치킨'

                                        const menuPrinting= function() {
                                            console.log(`${this.source} 맛이 들어간 ${this.meat}입니다!`) // 여기서 this는 자신을 호출한 bbq 객체를 가리킨다!
                                        }
                                        
                                        const bbq= { source, meat, menuPrinting } // 변수와 함수를 결합한 새로운 객체를 생성한다
                                        bbq.menuPrinting(); // 마늘 맛이 들어간 치킨입니다!
                                    
                                

                                    
                                        const morning= "아침"
                                        const eat= {first: "미역국", last: "잡곡밥"}

                                        const foods= { // 변수와 객체를 결합하여 새로운 객체를 생성한다
                                            morning, ...eat // eat 객체의 해체 할당
                                        }
                                        console.log(foods) // {morning: '아침', first: '미역국', last: '잡곡밥'}
                                    
                                

✓   for .. of 문과 Object.entries(객체) 메서드를 함께 써서 객체 의 해체 할당을 할 수도 있다:

                                    
                                        let obj= { Kim: 1, Lee: 2 }

                                        for(const [name, value] of Object.entries(obj)) { // for .. of 루프를 이용한 해체 할당
                                            console.log(name + ": " + value) // Kim: 1 Lee: 2
                                        }
                                    
                                

                                    
                                        let list= [ { color: "빨강"}, { color: "파랑"} ]

                                        const addColor= (c, list) => [...list, { color: c }] // ... 연산자 사용
                                        console.log(addColor("흰색", list)) // [{color: "빨강"}, { color: "파랑"}, {color: "녹색"}, {color: "흰색"}]
                                        console.log(list) // [{ color: "빨강"}, { color: "파랑"}, {color: "녹색"}] ← 원본은 그대로다!
                                    
                                

                                    
                                        function directions(...args) { // ... 연산자로 받는 매개변수는 항상 배열로 들어온다!
                                            const [start, ...remaining]= args // 서울, ...remaining
                                            const [finish, ...stops]= remaining.reverse() // (remaining의 순서를 뒤집어서)부산, ...stops
                                            const stops2= stops.reverse() // 수원, 대전, 대구 순으로 다시 순서를 바꿔주기 위한 것임!

                                            console.log(`
                                                경부선 철도는 ${start}에서 출발하여.. 중간에 ${stops.length}개 도시(${stops2})를 거치면서, ${finish}에서 끝납니다!
                                            `) // 경부선 철도는 서울에서 출발하여.. 중간에 3개 도시(수원, 대전, 대구)를 거치면서, 부산에서 끝납니다!
                                        }

                                        directions("서울", "수원", " 대전", " 대구", "부산")
                                    
                                

                                    
                                        let target= { x: 1, y: 3 }, src= { y: 2, z: 3 }

                                        for(let k of Object.keys(src)) { // src의 프로퍼티 키로 루프를 돈다
                                            target[k]= src[k] // target에 src의 키를 생성하고, src에서 가져온 값들을 넣는다
                                        }
                                        console.log(target) // {x: 1, y: 2, z: 3} ← 같은 이름의 프로퍼티는 덮고, 없는 프로퍼티는 새로 추가한다!
                                    
                                

                                    
                                        let target= { x: 1, y: 3 }, src= { y: 2, z: 3 }

                                        for(let k of Object.keys(src)) { // src의 프로퍼티 키로 루프를 돈다
                                            // 같은 이름의 프로퍼티는 건너뛰고, 없는 프로퍼티는 새로 추가한다!
                                            if(! (k in target)) { // target에 같은 키가 있다면; 건너뛴다!
                                                target[k]= src[k]; // 값 복사
                                            }
                                        }
                                        console.log(target) // {x: 1, y: 3, z: 3} ← 새로운 키만 추가한다!