강표오빵

가비지 콜렉션 (garbage collection)

강표오빵 — Sun, 23 Feb 2020 21:36:10 +0900

공부합시다! 웹 프론트 엔드 개발자분들 화이팅!

자바스크립트는 실행 환경에서 코드 실행 중에 메모리를 관리해서 가비지 콜렉션 언어라고도 불릴 수 있다.

자동으로 필요한 메모리를 할당하고 사용하지 않는 메모리는 회수한다 하지만 특정 시점에서 메모리를 회수하도록 할 수 있다.

예로 함수의 지역 변수 같은 경우는 함수가 종료되면 지역 변수를 할당 하던 메모리가 회수되는데 이렇게 명확하지 않은 경우도 많다.

1. 브라우저의 가비지 컬렉션 알고리즘

1-1. 표시하고 지우기 (mark-and-sweep)

(대략) 메모리에 저장된 변수 전체에 표시를 남기고 컨텍스트에 있는 변수와 그 변수가 참조하는 변수에서 표시를 지운다.

이 후에 표시가 남아있는 변수가 담긴 메모리는 회수한다.

1-2. 참조 카운팅 (reference counting) - 거의 안쓰지만 인터넷 익스플로러에서는 네이티브 자바스크립트가 아닌 객체에 접근해야하기 때문에 쓰인다.

(대략) 변수를 선언하고 참조 값이 할당되면 참조 카운트를 증가 시킨다. 다른 변수가 같은 값을 참조하면 카운트가 증가한다. 해당 값을 참조하는 변수에 다른 값을 할당하면 원래 값의 참조 카운트는 줄어든다.

참조 카운트가 0이 되면 해당값에 접근할 방법이 없으며 가비지 컬렉터 실행시 메모리를 회수한다.

* 하지만 참조 카운팅의 경우 순환참조라는 문제가 발생한다.

각 객체가 서로를 참조하고 있을 경우는 해당 컨텍스트가 종료되도 참조 카운트가 0이 되지 못하고 이 코드가 여러번 실행되면 낭비되는 메모리가 늘어나게 된다. 이럴경우 각 변수에 null 을 할당하면서 가비지 컬렉터에서 메모리를 회수하게끔 할 수 있다.

과거 ie 는 가비지 컬렉터는 자주 사용해서 성능이슈가 있었던 만큼 가비지 컬렉터는 변수의 수가 많은 만큼 상당한 비용이 든다. 그러므로 전역 변수나 전역 객체의 프로퍼티와 순환 참조에 대한 참조는 수동으로 참조를 제거하는것이 좋은데 보통 null 을 할당해서 다음 가비지 컬렉터 실행 때 회수하도록 한다.

컨텍스트, 스코프 (context, scope)

강표오빵 — Sun, 23 Feb 2020 20:41:20 +0900

공부합시다! 웹 프론트 엔드 개발자들 화이팅!

각 컨텍스트에는 변수 객체(해당 컨텍스트에서 정의된 모든 변수와 함수)가 연결되어 있다.

전역 컨텍스트 = 가장 바깥 컨텍스트 (웹 브라우저에서 window)

컨텍스트는 포함된 코드가 모두 실행됐을때 변수 객체와 함께 없어진다. 전역 컨텍스트는 앱 종료시에 끝난다.

함수를 호출하면 실행 컨텍스트가 생성되고 컨텍스트 스택에 쌓인다.

함수가 끝나면 해당 컨텍스트를 스택에서 꺼내고 컨트롤을 이전 컨텍스트에 반환한다.

함수의 매개변수도 변수 객체와 동일하게 간주된다.

컨텍스트에서 코드를 실행하면 스코프 체인이 만들어 진다.

스코프 체인의 목적은 실행 컨텍스트가 접근할 수 있는 변수 객체에 순서를 정의하는 것이다.

스코프 체인의 앞쪽은 항상 실행 컨텍스트의 변수 객체이다. (함수 컨텍스트라면 활성화 객체(:항상 arguments 변수 단 하나로 시작하고 전역 컨텍스트에 존재하지 않는)를 변수 객체로 사용한다)

변수객체의 다음 순서는 부모 컨텍스트이며 그다음은 조부모 다음다음.. 전역 컨텍스트에 도달해 전역 컨텍스트의 객체는 스코프 체인의 마지막에 존재한다.

식별자는 스코프 체인 순서를 따라가며 검색하고 없다면 에러가 발생한다.

컨텍스트는 스코프 체인을 통해 외부 컨택스트 전체에 접근 가능하지만 반대로는 안된다.

catch문, with문으로 스코프 체인을 확장할 수 있고 스코프 체인 앞부분에 임시 변수객체가 만들어진다.

블록 레벨 스코프가 없어서 if문, for문 에서 선언한 변수는 if문, for문이 끝나도 존재한다.

var 키워드를 사용해 변수를 선언하면 가장 가까운 컨텍스트에. 키워드 없이 선언하면 전역컨텍스트에 생성된다. (strict 모드에서 에러)

식별자를 찾으면 검색을 멈추기 때문에 상위 컨텍스트에 같은 이름의 식별자는 참조하지 못한다.

당연히 변수 검색에도 비용이 들어가니 전역변수보다 지역변수가 더 빨리 검색된다. 하지만 자바스크립트 엔진에서 최적화를 하므로 점점 그 차이는 좁아지고 있다.

배열의 값을 오름차순으로 바꾸기 (sort)

강표오빵 — Tue, 18 Apr 2017 06:32:32 +0900

강표오빵이 작업하다가 새로이 알게 된 내용을 정리해논 글 입니다.

알고 있는 지식안에서 글을 작성하다 보니 틀린 내용이 있을 수 있으니 확인바라며

올바른 내용을 알고 계신분은 이 글을 보시는 분들이나 저 스스로 바르게 알 수 있게 댓글을 달아주세요!

배열의 값을 오름차순으로 바꾸기

간단 합니다.


    var arrObj = [
        {
            no: 5,
            name: 'apple'
        },
        {
            no: 3,
            name: 'apple'
        },
        {
            no: 1,
            name: 'apple'
        },
        {
            no: 4,
            name: 'apple'
        },
        {
            no: 2,
            name: 'apple'
        }
    ];

    arrObj.sort(function(a, b){
        return (a.no < b.no) ? -1 : (a.no > b.no) ? 1: 0;
    });

canisue.com 에 따르면

sort()는 ecmascript 3 이며

ie6 +, firefox 2+, chrome 1+ 지원합니다.

원문

EcmaScript 3 Array.prototype methods: sort()

These methods are supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

문자열 뒤집기 (split, reverse, join)

강표오빵 — Tue, 18 Apr 2017 06:25:20 +0900

강표오빵이 작업하다가 새로이 알게 된 내용을 정리해논 글 입니다.

알고 있는 지식안에서 글을 작성하다 보니 틀린 내용이 있을 수 있으니 확인바라며

올바른 내용을 알고 계신분은 이 글을 보시는 분들이나 저 스스로 바르게 알 수 있게 댓글을 달아주세요!

문자열 뒤집기

아주 간단합니다.

문자열.split("").reverse().join("");

canisue.com 에 따르면

split(), reverse(), join() 모두 ecmascript 3 이며

ie6 +, firefox 2+, chrome 1+ 지원합니다.

원문

EcmaScript 3 String.prototype methods: split()

EcmaScript 3 Array.prototype methods: reverse()

EcmaScript 3 Array.prototype methods: join()

These methods are supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

split() 메서드는 받은 문자열을 인수에 있는 문자열로 나눠서 배열로 만듭니다.

(기존값이 변경되지 않습니다.)

split('') 는 문자 하나하나를 배열로 만들고

split(' ') 는 문자사이에 공백을 기준으로 배열로 만듭니다

아래의 콘솔값은 배열이며 value 는

'나는'

'강표오빵'

'입니다.'

var str = '나는 강표오빵 입니다.';
console.log(str.split(' '));

reverse() 메서드는 배열의 순서를 반대로 만들어 줍니다.

(기존값이 변경되지 않습니다.)

아래의 콘솔값은 배열이며 value 는

'입니다.'

'강표오빵'

'나는'

var str = '나는 강표오빵 입니다.';
console.log(str.split(' ').reverse());

join() 메서드는 배열의 값 사이에 인자값을 넣은 문자열을 만들어 줍니다.

(기존값이 변경되지 않습니다.)

join('') 는 배열을 공백없이 붙인 문자열을 만들고

join('?') 는 배열 사이에 '?' 를 넣고 문자열을 만듭니다.

아래의 콘솔값은 문자열이며

'입니다?강표오빵?나는' 입니다.

var str = '나는 강표오빵 입니다.';
console.log(str.split(' ').reverse().join('?'));

글 제목은 뭐라해야 할까

강표오빵 — Tue, 22 Nov 2016 23:37:08 +0900

강표오빵이 작업하다가 새로이 알게 된 내용을 정리해논 글 입니다.

알고 있는 지식안에서 글을 작성하다 보니 틀린 내용이 있을 수 있으니 확인바라며

올바른 내용을 알고 계신분은 이 글을 보시는 분들이나 저 스스로 바르게 알 수 있게 댓글을 달아주세요!

객체의 존재여부를 확인할 때

자바스크립트에선

if(document.getElementById('test')){}

제이쿼리에선

if($('#test').length){}

display:table-cell;

display:table-cell; 인 객체의 position 이 absolute라면 vertical-align:middle; 은 먹히지 않는다

display:flex;

컨텐츠 가로 중앙정렬은 justify-content:center;

display:inline-block;

display:inline-block; 인 객체들이 가로로 나열되 있을 때 document 의 가로크기가 더 작아 질 경우 크기에 맞춰 객체들이 아래로 떨어지는데 white-space:nowrap; 을 이용하면 가로로 유지된다