자바스크립트 48

[js 딥다이브] 10장 객체 리터럴

10.1 객체란? 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조임. 원시 타입의 값은 변경 불가능한 값이지만, 객체는 변경 가능한 값이다. var person = { name: 'Girl', // 프로퍼티 age: 16 // age 프로퍼티키, 16 프로퍼티값 }; 10.2 객체 리터럴에 의한 객체 생성 JS의 객체 생성 방법 객체 리터럴 (가장 일반적인 방법) Object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 객체 리터럴은 중괄호 {}안에 0개 이상의 프로퍼티를 정의함. 변수가 할당되는 시점에 JS엔진은 객체 리터럴을 해석해 객체를 생성함. 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성됨. 객체 리터럴의 중괄호는 코드 블록이 아님 주..

[js 딥다이브] 09장 타입변환과 단축평가

9.1 타입 변환이란? 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입변환 또는 타입 캐스팅이라고 함. 개발자의 의도와 상관없이 표현식을 평가하는 도중에 JS 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 경우를 암묵적 타입 변환 또는 타입 강제 변환이라고 함. 9.2 암묵적 타입 변환 JS엔진은 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가함 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동변환. 9.2.1 문자열 타입으로 변환 + 연산자는 피연산자 중 하나 이상이 문자열일때 문자열 연결 연산자로 동작함. 문자열 연결 연산자는 문자열 값을 만드는 것이기 때문에 문자열이 아닌 것을 문자열로 암묵적 타입변환함. '10' + 2..

[js 딥다이브] 08장 제어문

8.1 블록문 0개 이상의 문을 중괄호로 묶은 것으로 코드 블록 또는 블록이라 부르기도 함. js는 블록문을 하나의 실행 단위로 취급함. 단독 사용이 가능하나 제어문이나 함수를 정의할때 사용하는 것이 일반적 // 블록문 { var foo = 10; } // 제어문 var x = 1; if (x < 10) { x++; } // 함수 선언문 function sum(a, b) { return a + b; } 8.2 조건문 8.2.1 if else 문 if (조건식) { // 조건식이 참이면 실행 } else if (조건식2) { // 조건식2가 참이면 실행 } else { //조건식이 거짓이면 실행 } 8.2.2 switch 문 switch (표현식) { case 표현식1: switch 문의 표현식과 표현식1..

[js 딥다이브] 07장 연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 함. 피연산자는 값으로 평가될 수 있는 표현식이여야함. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식임. // 산술 연산자 5 * 4 // 20 // 문자열 연결 연산자 'My name is ' + 'Lee' // 'My name is Lee' // 할당 연산자 color = 'red' // 'red' // 비교 연산자 3 > 5 // false // 논리 연산자 true && false // false // 타입 연산자 typeof 'Hi' // string 7.1 산술 연산자 수학적 계산을 수행해 새로운 숫자값..

[js 딥다이브] 06장 데이터 타입

JS(ES6)는 7개의 데이터 타입을 제공하고, 7개의 데이터 타입은 원시 타입과 객체 타입으로 분류할 수 있다. 구분 데이터타입 표기 설명 원시타입 숫자 타입 number 숫자. 정수와 실수의 구분 없이 하나의 숫자 타입만 존재 문자열 타입 string 문자열 불리언 타입 boolean 논리적 참과 거짓 undefined 타입 undefined var 키워드로 선언된 변수에 암묵적으로 할당하는 값 null 타입 null 값이 없다는 것을 의도적으로 명시할때 사용하는 값 심벌 타입 symbol ES6에서 추가된 7번째 타입 객체 타입 object, funtion, array, map 객체, 함수, 배열 등 숫자 1과 문자열 '1’은 비슷해보이지만 전혀 다른 값임. 명확한 의도에 따라 타입을 정하고 쓰자...

[js 딥다이브] 05장 표현식과 문

5.1 값 값(value)은 식(표현식 expression)이 평가(evaluate)되어 생성된 결과를 말함. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미함. 10 + 20; // 30 // 10 + 20은 평가되어 숫자 값 30을 생성함. 모든 값은 데이터 타입을 가지며, 메모리에 2진수(비트의 나열)로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음. ex) 메모리에 0100 0001을 숫자로 해석하면 65지만 문자로 해석하면 A임. var sum = 10 + 20; // sum 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당됨 위 예제의 sum 변수에 할당되는 것은 10 + 20이 아니라 해당식이 평가된 결과인 30임. 즉, 변수 sum이 기억이..

[js 딥다이브] 04장 변수

JS 딥다이브 책 공부를 시작함. 1, 2, 3장은 굳이 정리가 필요없을 듯 하여 생략한다! 😎 49장은 내가 쓰는 환경에선 불필요해서(vite, turbopack 사용) 생략 꼭 필요한 내용만 요약해봄 4.1 변수가 뭐야? 왜 필요함? 계산이 끝난 결과를 재사용하기 위해 메모리 공간에 남겨둠. 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말함. 변수에 값을 저장하는 것은 할당(대입, 저장) 변수에 저장된 값을 읽어 들이는 것은 참조 4.2 식별자 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말함. 식별자는 값이 아니라 메모리 주소를 기억하고 있음. 4.3 변수 선언 변수를 사용하려면 반드시 선언이 필요함. ..

얕은 복사와 깊은 복사

얕은 복사와 깊은 복사가 이해가 안되네요. 라는 질문이 들어왔음. 간단하게 두가지 비교를 하고 손쉽게 적용할 수 있는 깊은 복사 방법을 알아보기로 하자. 얕은 복사 사본에 속성을 추가하거나 변경하면 복사본에만 영향을 줌. const original = { name: "girl", age: 18, class: [ "korean", "math" ] }; // 얕은 복사 방법 const clone = { ... original }; // 사본에 속성 추가 clone.height = 163; // 속성 확인 (얕은 복사 후 자식 속성에 변경 확인) console.log(original); // { name: "girl", age: 18, class: [ "korean", "math" ] } console.log..

TIP/JS 2023.10.15
728x90