Study/JavaScript (36) 썸네일형 리스트형 코어 자바스크립트 - 실행 컨텍스트(Execution Context) 실행 컨텍스트(Execution Context)는 실행 문맥/맥락/환경으로 이해할 수 있습니다. 이 자리에서 코드가 어떤 역할을 수행하는지를 이해하기 위해서는 코드의 주변 코드나 변수를 파악해야 합니다. 그렇게 영향을 주는 환경을 일컬어서 context라고 합니다. 즉, Execution Context는 코드를 실행하는데 필요한 배경이 되는 조건/환경이 되겠습니다. Execution Context 동일한 조건 / 환경을 지니는 코드 뭉치 를 실행할 때 필요한 조건 / 환경정보 자바스크립트에서는 동일한 조건을 지니는 것이 4가지 밖에 없습니다. 전역공간 / 함수 / eval / module 중 eval은 여러 문제를 야기하는 위험한 명령어기에 제외하겠습니다. 전역공간과 module은 코드가 실행되는 순간에.. 코어 자바스크립트 - 데이터 타입 자바스크립트의 타입은 Primitive Type(기본형)과 Reference Type(참조형)으로 구분된다. 자바스크립트 메모리는 stack memory(변수, 기본형 데이터, 정적 할당)과 heap memory(참조형 데이터, 동적 할당)으로 나뉜다. 기본형 데이터 기본형에서 데이터를 바꿀 때 가리키고 있는 주소를 직접 바꿔놓게 된다 let a; a = 'abc'; 주소 1002 1003 1004 ~~~ ~~~~ 5002 5003 5004 5005 데이터 이름: a 값: @5003 'abc' 참조형 데이터 let obj = { a: 1, b: 'bbb' }; 주소 1002 1003 1004 ~~~ ~~~~ 5002 5003 5004 5005 데이터 이름: obj 값: @5003 @7001~ ? 1 'b.. JavaScript [객체를 원시형으로 변환 1] obj1 + obj2 처럼 객체끼리 더하는 연산 혹은 obj1 - obj2 처럼 객체끼리 빼는 연산을 하면 자동 형 변환이 일어납니다. 객체는 원시값으로 변환되고 그 후 의도한 연산이 수행됩니다. 앞서 형 변환 챕터에서 객체의 형 변환은 다루지 않았습니다. 그러나 이제는 메서드와 심볼에 대해 배웠으니 이것에 대해 알아볼 차례입니다. 1. 객체는 논리 평가 시 true를 반환합니다. 단 하나의 예외도 없습니다. 따라서 객체는 숫자, 문자형으로만 형 변환이 일어난다고 생각하면 됩니다. 2. 숫자형으로의 형 변환은 객체끼리 빼는 연산을 할 때나 수학 관련 함수를 적용할 때 일어납니다. 객체 Date끼리 차감하면 (date1 - date2) 두 날짜의 시간 차이가 반환됩니다. 3. 문자형으로의 형 변환은 대게 .. JavaScript[심볼형] 자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용합니다. 숫자형, 불린형 모두 불가능하고 오직 문자형, 심볼형만 가능합니다. 지금까지는 프로퍼티 키가 문자형인 경우만 살펴보았습니다. 이번 챕터에선 프로퍼티 키로 심볼값을 사용해보면서 심볼형 키를 사용할 때의 이점에 대해 살펴보도록 하겠습니다. 심볼 '심볼'은 유일한 식별자를 만들고 싶을 때 사용합니다. Symbol() 을 사용하면 심볼값을 만들 수 있습니다. // 심볼 id에는 'id'라는 설명이 붙습니다. let id = Symbol("id"); 심볼은 유일성이 보장되는 자료형이기 때문에, 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다릅니다. 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만을 합니다... JavaScript [옵셔널 체이닝 '?.'] 옵셔널 체이닝 ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 옵셔널 체이닝이 필요한 이유 사용자가 여러명 있는데 그중 몇 명은 주소 정보가 없다고 가정하겠습니다. 이럴 때 user.address.street 를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 또 다른 사례로 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있습니다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생합니다.. JavaScript [new 연산자와 생성자 함수] 객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다 보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇습니다. 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있습니다. 생성자 함수 생성자 함수와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫 글자는 대문자로 시작합니다. 반드시 'new' 연산자를 붙여 실행합니다. function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"); alert(user.na.. JavaScript [메서드와 this] 객체는 사용자, 주문 등과 같이 실제 존재하는 개체를 표현하고자 할 때 생성됩니다. let user = { name: "John" age: 30 }; 사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기, 로그아웃하기 등의 행동을 합니다. 이와 마찬가지로 객체도 특정한 행동을 할 수 있습니다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에 행동할 수 있는 능력을 부여해줍니다. 우리는 이를 일반적인 함수와 구분짓기 위해 메서드라고 부릅니다. 즉, 객체 안에 있는 함수를 메서드라고 합니다. 매서드 만들기 객체에게 인사할 수 있는 능력을 부여해줍시다. let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }.. JavaScript [참조에 의한 객체 복사] 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참조에 의해' 저장되고 복사된다는 것입니다. 원시값(문자열, 숫자, 불린값)은 '값 그대로' 저장, 할당되고 복사되는 반면에 말이죠. // 원시값이 되다는 것을 보여주는 예시 let message = "Hello!"; let phrase = message; 객체는 위의 예시와는 다르게 작동합니다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장됩니다. 다음 예시를 통해 좀 더 자세히 알아보겠습니다. let user = { name: "John" }; 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 참조할 수 있는 값이 저장됩니다. 따라서 객체가 할당된 변수를 복사할 땐 객체.. 이전 1 2 3 4 5 다음
