본문 바로가기

자바스크립트 리뷰

getter와 setter 간단명료 정리! 일단 코드는 아래 페이지에 있다. getter는 뭘까? 객체 내에 있는 함수로 객체의 프로퍼티들을 함수에서 사용할 수 있게 해준다. 프로퍼티들의 value 값들을 갖고 다양한 함수를 만들 수 있다. setter는 뭘까? setter가 있으면 객체의 프로퍼티 값들을 외부에서 바꿔줄 수 있다. 그렇다면 getter 와 setter 의 조합되면 setter 로 프로퍼티 값들을 바꿔 주고, 그 바뀐 값들로 getter가 함수로 실행해 줄 수 있다. 이 모든 작업을 객체 외부에서 객체에 접근하듯이 직관적으로 수행할 수 있다. getter와 setter 모두 객체 안에 프로퍼티처럼 존재하기 때문이다. 자세한 코드는 아래 페이지를 참조바란다. https://ko.javascript.info/property-acces.. 더보기
깊은 복사는 다른 객체를 생성해 낸다고 보아도 되겠다. [JS 문법 종합반 3주차 - 1] 얕은 복사는 중첩된 객체를 얕은 복사하면 문제가 있었다. 관련하여 게시물참조 https://gamunbidev.tistory.com/54 그런 문제를 해결하는 것이 깊은 복사다. 깊은 복사를 하면 복사당한 객체나 복사로 생긴 객체 하나를 수정하면 그 건드린 객체만 바뀐다. (얕은 복사에서는 하나를 수정하면 둘다 바뀌는 문제가 있었다.) 여러 말 할 필요 없이 코드를 보자. var user = { name: 'wonjang', urls: { portfolio: 'http://github.com/abc', blog: 'http://blog.com', facebook: 'http://facebook.com/abc', }, arr: ['a', 'b'] }; // 깊은 복사 var copyObjectDeep = .. 더보기
얕은 복사의 문제점: 중첩된 객체를 복사하면 복사당한 객체는 복사로 생겨난 객체와 동시에 수정된다. [JS문법 종합반 3주차 - 1] 얕은 복사는 문제가 있다. 무엇일까? 중첩된 객체를 얕은 복사를 할 때가 문제이다. 중첩된 객체란 객체 안에 객체가 있는 경우다. 이 중첩된 객체가 복사당하면 복사 결과물인 객체와는 당연히 따로 서로 다른 객체가 되어야 할 것이다. 그런데 그게 안된다. 복사당한 객체를 수정하면 복사결과 객체까지 바뀌어 버린다. 반대로 복사결과 객체를 수정하면 복사당한 객체도 바뀐다. 객체내부의 중첩객체를 수정하면 그렇다. 얕은 복사는 for in 구문을 활용해서 하는데 코드는 아래와 같다. 문제가 있는 코드다. var user = { name: 'wonjang', urls: { portfolio: 'http://github.com/abc', blog: 'http://blog.com', facebook: 'http://f.. 더보기
중첩 데이터의 메모리 저장방식 [JS문법 종합반 3주차 ] 일단 내용 전반은 스파르타 코딩클럽 [JS 문법 종합반 ] 3주차 데이터 타입 부분 강의자료를 보자. (개인 pc에 저장함,링크는 생략) 아래와 같은 객체가 있다고 하자. var obj = { x: 3, arr: [3, 4, 5], } 메모리에서 obj.arr[1] 을 찾아보고자 한다. 어떻게 찾아 들어가야 할까? 큰 그림을 보자면 obj는 아래와 같은 방식으로 메모리에 할당된다. 특이한 점은 참조형 데이터는 메모리에서 별도의 공간을 갖게 된다는 점이다. obj 는 참조형 데이터라서 별도의 메모리 영역을 갖게 된다. 아래 부분이다. 여기에 obj의 프로퍼티들이 들어가게 된다. 또 arr 역시 참조형 데이터라서 별도의 영역을 갖게 된다. 아래 부분이다. 여기서 3이라는 데이터가 기존에 변수 x를 위해 이미.. 더보기
메모리: 참조형 데이터는 가변하다. [ JS문법 종합반 3주차 -1] 참조형 데이터는 변수명에 객체가 할당되면 참조형 데이터 중 하나인 것 같다. 참조형 데이터의 메모리 저장방식은 가변하다. 하나의 객체가 변수명에 들어간 상태를 가정해 설명해 보겠다. 아래와 같은 코드에서 obj1.a =2 ; 를 실행하는 순간 a / @5001 --> a / @5003 으로 바뀐다. // 참조형 데이터는 별도 저장공간(obj1을 위한 별도 공간)이 필요합니다! var obj1 = { a: 1, b: 'bbb, }; obj1.a = 2; 속성의 데이터를 가리키는 영역이 바뀌었다. a 속성의 값은 더이상 1이 아니라 2이므로 그 2를 5003번에 넣어 주었고 a속성이 저장된 메모리는 5003번을 가리키게 되었다. 속성값이 바뀌면서, 속성이 가리키는 번호가 바뀐 것이다. 이것이 가변성이다. 일.. 더보기
메모리: 변수와 상수 그리고 불변하다와 불변하지 않다. [ JS문법 종합반 3주차] 자바스크립트의 메모리 관리 방식에 있어서 [변수]와 [상수]의 차이점은 뭘까? 불변하다와 불변하지 않다의 차이점은 뭘까? 일단 큰 그림은 스파르타 코딩클럽 [JS 문법 종합반 ] 3주차 데이터 타입 부분 강의자료를 보자. (개인 pc에 저장함,링크는 생략) 말로 설명해 보자. [변수]와 [상수]의 차이점은 메모리에서 변수 영역의 주소값이 바뀔 수 있으면 [변수], 바뀌지 못하면 [상수]다. 변수 부분의 주소값은 항상 메모리의 데이터 영역중 하나를 가리키게 된다. 여기서 [변수]에 대한 변수 영역 메모리라면 어떤 데이터 영역을 가리킬지 그 주소를 바꿔줄 수 있다. 그래서 아래처럼 a 라는 [변수] 에 새로운 값이 할당되면 7이라는 값의 주소가 메모리의 데이터 영역에 새로 생기게 되고 메모리에서 a의 변수 .. 더보기
new Set() 기본개념과 교집합 구하는 메소드 만들기 [JS문법 종합반 2주차 - 3] Set은 수학적 집합의 개념을 표현할 수 있는 문법이다. Set은 고유한 값을 저장하는 자료 구조이다. Set은 값만 저장하며, 키를 저장하지 않는다. Set은 값이 중복되지 않는 유일한 요소로만 구성된다. 같은 값을 두 번 넣는다면 저장되지 않는다. Set을 사용하면 다음과 같은 작업을 수행할 수 있다. 값 추가 및 값 존재여부 확인 값 삭제 모든 값 제거 Set 크기확인 위의 모든 기능들을 정리했고, 교집합 구하는 메소드를 정리해 보았다. 자바스크립트 내장 메소드인 filter()를 사용한다. // Set 두개를 정의한다. const setA = new Set([1, 2, 3, 4, 5]); const setB = new Set([2, 4]); // setA와 setB의 교집합을 구해 보자. cons.. 더보기
new Map() 완전정리 [JS문법 종합반 2주차 - 3] new Map() 기능은 {key-value} pair 를 저장한다. 객체도 그러하지만 new Map()만의 장점을 아래 정리해 본다. 1) key 에 문자열 뿐만 아니라 다양한 값이 올 수 있다. 2) myMap.keys() 와 같은 메소드로 iterator를 리턴받을 수 있으며 이 iterator는 이름만큼이나 반복문에 집어넣어 돌리기에 적합하다. 코드와 주석(!) 을 보자. const myMap = new Map(); // Map 하나를 새로 만든다. myMap.set('one', 1) // key-value pair 를 만든다. myMap.set('two', 2) myMap.set('three', 3) console.log(myMap.keys()) // key들의 iterator가 출력된다. fo.. 더보기

티스토리툴바