javascript
-
[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-모던자바스크립트] 가비지 컬랙션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..
-
[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자3Javascript& React study 2021. 10. 9. 05:00
undefined와 비교하는 것 이외에도 in을 사용하게 되면 프러퍼티 존재 여부를 확인할 수 있다. "Key" in object let user = { name : "John", age : 30 } alert("age" in user); // user.age가 존재하므로 true가 출력 alert("blabla" in user); // user.blabla는 존재하지 않기 때문에 false가 출력 in 왼쪽에 반드시 프로퍼티 이름이 와야한다. 프로퍼티 이름은 보통 따옴표로 감싼 문자열이다. 따옴표를 생략하면 엉뚱한 변수가 조사 대상이 된다. let user = { age: 30 }; let key = "age"; alert( key in user ); // true, 변수 key에 저장된 값 ("age..
-
[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자2Javascript& React study 2021. 10. 8. 05:00
변수 key는 런타임에 평가가 되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있는데 점 표기법은 이러한 방식이 불가능하다고 볼 수 있다. let user = { name : "John", age : 30 }; let key = "name"; console.log(user.key); // undefined 계산된 프로퍼티 객체를 만들 경우 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우에는 이를 계산된 프로퍼티(computed property) 라고 부른다. let fruit = prompt('어떤 과일을 구매하시겠습니까?','apple'); let bag { [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받는다. } console.log(bag.apple..
-
[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자Javascript& React study 2021. 10. 7. 05:00
자바스크립트에서는 총 8가지 자료형이 있다. 이중에서 7개는 하나의 데이터 (문자열,숫자만)담을 수 있기 때문에 원시형 (primitive type)이라고 부른다. 객체는 다양한 데이터를 담을 수 있다. 객체는 중괄호 {...}를 이용해서 만들 수 있다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 넣을 수 있는 프로퍼티(property)를 여러개 넣을 수 있다. 키에는 문자형, 값에는 모든 자료형이 허용된다. let user = new Object(); // '객체생성자' let user = {}; // '객체 리터럴' 리터럴과 프로퍼티 중괄호 {...}안에 는 '키:값' 쌍으로 구성된 프로퍼티가 들어간다. '콜론(:)'을 기준으로 하여 왼쪽에는 키가 오른쪽에는 값이 위치한다. let use..