자바스크립트 18

4-3 가비지 컬렉션 (Javascript)

자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 우리가 만드는 모든 것은 메모리를 차지한다. 가비지 컬렉션 : 도달 가능성이라는 개념을 사용해서 메모리 관리를 수행한다 모든 객체를 모니터링하고 도달할 수 없는 객체는 삭제한다. 도달 가능성..? => 어떻게든 접근하거나 사용할 수 있는 값을 의미한다. 도달 가능한 값은 메모리에서 삭제되지 않는다. let user={ name:'hello' } 참조가 사라지게 하려면? 다른 값으로 덮어쓰면 참조가 사라진다. user=null; 이제 hello는 도달할 수 없는 상태가 되었고, 가비지 컬렉터는 이제 hello에 저장된 데이터를 삭제하고, hello를 메모리에서 삭제한다. 즉, hello를 참조하는 변수가 없고, hello를 찾는 변수가 없을 ..

4-2 참조에 의한 객체 복사 (Javascript)

참조란? 객체의 실제 위치를 가리키는 포인터 복제는 똑같은 파일(100MB)을 한 개 더 생성하는 것 > 각각의 파일이고, 원본 파일을 변경해도 복제 파일에는 아무런 영향이 없다. 메모리는 똑같이 100MB씩이고! (복제!=복사) 참조는 복제와 다르다 참조는 바로가기 만들기를 이용해서 예시를 들어보자 바로가기 만들기는 원본 파일을 가리키고 있을뿐, 복제한 게 아니다. 따라서 바로가기 파일에서 값을 변경하면, 원본 파일도 변경이 동시에 이루어진다. 객체는 참조에 의해 저장되고 복사 된다. ※ 원시값(문자열, 숫자, 불린 값,null,undefined)은 값이 그대로 저장,할당,복사가 된다 이 때는 두 개의 독립된 변수에 각각 문자열이 저장된다. 복사된 값을 다른 메모리에 각각 할당하기에 서로 영향을 미치지..

4-1 객체 (Javascript)

일반적으로 우리가 눈으로 볼 수 있는 모든 것을 객체라고 한다. 프로그래밍에서의 객체는 무슨 의미일까? 프로그램을 구성하는 단위 중 하나를 의미한다. 여러 객체가 모여 하나의 프로그램이 완성되는 것! 객체 : 소프트웨어 세계에 구현할 대상 객체의 사전적인 의미 : 실제로 존재하는 것 ex) 책상, 컴퓨터 ... 이러한 유형적인 것뿐만 아니라, 무형적인 것도 객체로 간주한다. ex) 개념, 논리, 수학공식 ... 객체의 특징 >> 객체는 고유의 이름이 존재한다. 객체는 특징과 행동이 있다. 객체의 수는 무제한으로 늘어날 수 있다. 객체는 속성과 동작으로 구성되어 있다. 예를 들면, tv의 속성은 크기, 길이, 높이, 볼륨, 채널과 같은 것이 있으며, tv의 동작은 켜기, 끄기, 볼륨 높이기 등이 있다. 속..

좋은 주석을 작성하는 방법

1. 주석을 코딩하기 전에 작성해놓으면, 코딩을 하면서 구현이 쉬워진다. 이 코드들이 어떤식으로 어떻게 동작하는 지 먼저 설명하기 2. 함수에 주석을 다는 것이 가장 효율적이다. 3. 복잡한 소스코드보다 주석 없이도 빠르게 이해할 수 있는 코드가 좋다. >> 개발비용보다 유지보수 비용이 훨씬 크기 때문이다. 4. 프로토타입은 주석 필요 없다. 5. 설계 리뷰가 코드 리뷰보다 훨씬 중요! 6. 라이브러리나 프로그램, 함수 단위에서는 '무엇'인지 설명한다. 7. 실행문에 달아두는 주석은 코드가 '왜' 이렇게 동작하는 지 설명한다. 문서 주석 /** */ 구현 주석 /**/ or // 코드리뷰란? 한 명 또는 여러 명의 개발자들이 본인이 만들지 않은 코드의 내용을 점검하고 피드백을 주고 받는 과정이다. 이 과..

Chrome debugging 하기 (Javascript)

1. 개발자 도구 F12를 누르고 소스패널로 가면, 이런 화면이 나온다 만약 아래와 같은 화면이 나오지 않는다면 소스패널 바로 밑부분에 화살표 아이콘을 눌러보기! 그러면 왼쪽 탭이 뿅하고 등장한다. 디버깅을 설정하고 싶은 줄번호를 클릭하면 설정 완료! 소스 패널에서 설정하기가 번거로우면, 코드상에서 디버깅 설정을 해두는 방법도 있다. 원하는 위치에 debugger; 명령어를 입력해주면 끄~읕! console.log() >> 원하는 것을 콘솔에 입력할 수 있다. console.log('기본'); console.info('정보'); console.warn('경고'); console.error('에러'); console.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은 실시간으로 바..

자바스크립트 헷갈리는 부분 모음집

1. null 비어있음, 존재하지 않음을 나타낸다. 2. undefined 값이 할당되지 않은 상태를 나타낸다. 3. prompt(question,[default]) 확인 버튼을 눌렀을 땐 사용자가 입력한 값 반환해주고, 취소 버튼을 누르면 null이 반환된다. 4. confirm(question) 확인을 누르면 true 값 반환, 그 외의 경우는 false값 반환 5. + 연산자 만약 피연산자 중 하나가 문자열일 때, 나머지 하나를 문자형을 바꾼 뒤 두 문자열을 연결한다. 6. null 병합 연산자 ?? a??b 만약 a가 null이나 undefined가 아니면, 위 식의 값은 a 반대로 a가 null이나 undefined이면 위 식의 값은 b 7. 비교연산자 == 형이 다른 값끼리 비교할 경우, 피연..

2-17 화살표 함수 기본 (Javascript)

화살표 함수를 이용하면, 함수 표현식보다 더 간결한 문법으로 함수를 생성할 수 있다! 화살표 함수 형식 let function(a,b)=>expression; 만약 매개변수가 1개밖에 없다면? let function n=>expression; 매개변수가 하나도 없다면? let function()=>expression; 만약 화살표 함수의 본문이 여러줄인 경우? {}을 이용해서 묶어주기! 과제 출처 ko.javascript.info/arrow-functions-basics 화살표 함수 기본 ko.javascript.info

2-16 함수 표현식과 함수 선언문(Javascript)

함수 선언문 vs 함수 표현식 함수 선언문 1. 함수는 독자적인 구문 형태로 존재한다. 2. 선언문이 정의되기 전에도 호출할 수 있다. 전역 함수 선언문은 따라서 어느 위치에 있던 간에 사용이 가능하다. >> 자바스크립트의 내부 알고리즘 때문에 가능한 일이다. 자바스크립트는 스크립트 실행 전, 준비 단계에서 전역에 선언된 함수 선언문을 찾고, 해당 함수를 생성한다. 즉 스크립트 실행 전 초기화 단계에서 함수 선언 방식으로 정의한 함수가 이미 생성된다는 말이다. 3. 함수 선언문은 함수가 선언된 코드 블럭{} 안에서만 유효하다. 함수 표현식 1. 표현식이나 구문 구성 내부에 생성된다. 할당연산자 =를 이용해서 만든다. 2. 실제 실행 흐름이 해당 함수에 도달 했을 때 함수를 생성한다. 그래서 그 구문에 실..

2-13 while과 for 반복문

do... while 반복문 do { //본문 } while(condition); 조건이 truthy지 아닌지 상관없이, 본문을 최소 한 번 이상 실행해야 할 때 사용한다. 근데 대다수의 상황에선 while() {}가 적합하게 사용되는 중! 반복문 빠져나오기 Break let sum=0 while (true){ let value=+prompt("숫자를 입력하세요",''); if (!value) break; sum+=value; } alert('합계:' + sum); if (!value) break; >> 사용자가 아무것도 입력하지 거나, cancel버튼을 눌렀을 때 활성화된다. 반복문이 즉시 중단되고 alert가 실행됌 다음 반복으로 넘어가기 Continue : 현재 실행 중인 이터레이션을 멈추고 다음 ..

카테고리 없음 2021.03.09

2-9 비교 연산자 (Javascript)

자바스크립트의 문자열 비교 알고리즘은 유니코드순이다. 대문자 A와 소문자 a 비교 시, a의 값이 더 크다. 일치 연산자 동등연산자 ==은 0과 false를 구별하지 못한다. 왜냐면 자료형의 동등 여부까지 검사할 수 없기 때문이다. alert(' '==false); // true 일치 연산자 ===를 사용하면, 형변환 없이 값 비교 가능하다. 일치 연산자는 엄격한 동등 연산자이다. 자료형의 동등 여부까지 검사한다. alert(0===false); // false 마찬가지로 !==는 부등 연산자 !=의 엄격한 형태이다. !==는 불일치 연산자 alert(null===undefined) // false alert(null==undefined) // true >> 동등 연산자는 null과 undefined를 ..