Javascript& React study
-
[JAVASCRIPT-모던자바스크립트] 옵셔널 체이닝 '?.'Javascript& React study 2021. 10. 24. 05:00
최근에 추가됨 스펙에 추가된지 얼마 되지 않은 문법이다. 구식 브라우저의 경우 폴리필이 필요하다 옵셔널 체이닝 (optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 자바스크립트를 배우기 시작했다고 한다면 옵셔널 체이닝이 등장하게 된 배경 상황등을 직접 겪어보지 않았을 것이라 생각한다. 여기서 몇 가지 사례를 재현하면서 옵셔널 체이닝이 등장했는지 알아보는것이 좋다. 사용자가 여러 명 있는데 몇 명은 주소 정보를 가지고 있지 않다고 가정한다면 이럴 때 user.address.street를 사용해서 주소 정보에 접근하게 되면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자. aler..
-
[JAVASCRIPT-모던자바스크립트] new 연산자와 생성자 함수2Javascript& React study 2021. 10. 23. 05:47
new function() {...} 재사용할 필요가 없는 복잡한 객체를 만들어야 한다고 했을때 많은 양의 코드가 필요할 것이다. 이럴때에는 익명 생성자 함수로 감싸주는 방식을 사용할 수 있다. let user = new function() { this.name = "John"; this.isAdmin = false; // 사용자 객체를 만들기 위한 여러 코드 // 지역 변수, 복잡한 로직, 구문등 // 다양한 코드가 들어가게 된다. } 생성자 함수의 경우 익명함수이기 때문에 어디에서도 저장이 되지 않는다. 처음 만들 때 단 한번만 호출될 목적으로 만들었기 때문에 재사용이 불가능하다. 익명 생성자 함수를 이용하게 되면 재사용을 막으면서 코드를 캡슐화할 수 있다. 생성자와 return문 생성자 함수에는 보..
-
[JAVASCRIPT-모던자바스크립트] 메서드와 this 3 / new 연산자와 생성자 함수Javascript& React study 2021. 10. 22. 05:35
this가 없는 화살표 함수 화살표 함수는 일반 함수와는 달리 '고유한' this를 가지지 않습니다. 화살표 함수에서 this를 참조하면 화살표 함수가 아닌 '평범한'외부 함수에서 this 값을 가져옵니다. 아래 예시에서 함수 arrow()의 this는 외부 함수 user.sayHi()의 this가 됩니다. let user = { firstName : '보라', sayHi() { let arrow = () => alert(this.firstName); arrow(); } }; user.sayHi(); // 보라 별개의 this가 만들어지는 것은 원하지 않으면서 외부 컨택스트에 있는 this를 이용하고 싶은 경우에는 화살표 함수가 유용한다. new 연산자와 생성자 함수 객체 리터럴 {...} 을 사용하면 ..
-
[JAVASCRIPT-모던자바스크립트] 메서드와 this 2Javascript& React study 2021. 10. 21. 05:07
자유로운 this 자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다르다. 자바스크립트에서는 모든 함수에 this를 사용할 수 있다. 즉 아래와 같이 코드를 작성하더라도 에러가 발생하지 않는다. function sayHi() { alert( this.name ); } this값은 런타임에 의해서 결정이 된다고 볼 수 있다. 컨택스트에 따라 달라질 수 있다. 동일한 함수라고 할지라도 다른 객체에서 호출했다고 한다면 'this'가 참조하는 값이 달라진다. let user = { name : 'John' }; let admin = { name : 'Admin' }; function sayHi() { alert( this.name ); } // 별개의 객체에서 동일한 함수를 사용 user..
-
[JAVASCRIPT-모던자바스크립트] 메서드와 thisJavascript& React study 2021. 10. 20. 05:46
객체의 경우 사용자 (user), 주문(order)등과 같이 실제 존재하게 되는 개체 (entity)를 표현하고자 할 때 생성 let user = { name: "John", age: 30 }; 사용자의 경우 현실에서 장바구니에서 물건을 선택하거나 로그인,로그아웃 하기 등의 행동을 한다. 사용자를 나타내는 객체 user도 특정한 행동을 할 수 있다. 자바스크립트에서는 객체에 프로퍼티에 함수를 할당해서 객체에게 행동할 수 있는 능력을 부여한다. 메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여한다. let user = { name : "John", age: 30 } user.sayHi = function() { alert('안녕하세요!'); }; user.sayHi(); // 안녕하세요 -> s..
-
[JAVASCRIPT-모던자바스크립트] 가비지 컬랙션2Javascript& React study 2021. 10. 15. 05:00
참조 두 개 참조를 user에서 admin으로 복사했다고 가정해보자. // user엔 객체 참조 값이 저장됩니다. let user = { name : "John" }; let admin = user; 그리고 위에서 한것처럼 user의 값을 다른 값으로 덮어써 봅시다. user = null; 전역 변수 admin을 통하면 여전히 객체 John에 접근할 수 있기 때문에 John은 메모리에서 삭제되지 않습니다. 이 상태에서 admin을 다른 값 (null 등)으로 덮어쓰면 John은 메모리에서 삭제될 수 있습니다. 연결된 객체 function marry (man, woman) { woman.husband = man; man.wife = woman; return { father: man, mother: woma..
-
[JAVASCRIPT-모던자바스크립트] 참조에 의한 객체 복사2 / 가비지 컬랙션Javascript& React study 2021. 10. 14. 05:00
지금까진 user의 모든 프로퍼티가 원시값인 경우만 가정했으나 프로퍼티는 다른 객체에 대한 참조 값일 수도 있다. 이러한 경우에는 아래와 같이 진행될 것이다. let user = { name : "John", sizes: { height: 182, width: 50 } }; alert( user.sizes.height ); // 182 clone.sizes = user.sizes로 프로퍼티를 복사하는 것만으로는 객체를 복제할 수 없다. user.sized는 객체이기 때문에 참조값이 복사되기 때문이다. clone.sizes = user.sizes로 프로퍼티를 복사하면 clone과 user는 같은 sizes를 공유하게 된다. let user = { name : "John", sizes: { height: 1..
-
[JAVASCRIPT-모던자바스크립트] 참조에 의한 객체 복사Javascript& React study 2021. 10. 10. 05:00
객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)'저장되고 복사된다는 것이다. 원시값(문자열 숫자,불린값)은 값 그대로 저장 할당되고 복사는 아래와 같이 된다. let message = "Hello"; let phraaw = message; 예시를 실행하면 두 개의 독립된 변수에 각각 문자열 "Hello!"가 저장됩니다. 하지만 객체의 동작방식은 이와 다르다고 할 수 있다. 변수엔 객체가 그대로 저장되는 것이 아니라 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. 그림을 통해 변수 user에 객체를 할당할 떄 무슨 일이 일어나는지 알아보자 let user = { name : "John" } 객체는 메모리 내 어딘가에 저장되며 변수 use..