분류 전체보기 201

[JavaScript] 값, 리터럴, 표현식, 문

값(value) 표현식이 평가되어 생성된 결과 // 10 + 20은 평가되어 값 30을 생성함 10 + 20; // 30 // 변수sum에 값 30이 할당 var sum = 10 + 20; 리터럴(literal) 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 표현식(expression) 값으로 평가될 수 있는 문. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조함 var score = 100; // 100은 리터럴. 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 // 그 자체로 표현식 var score = 50 + 50; // 50 + 50은 리터럴과 연산자로 이루어짐. 100이란 값을 생성하므로 표현식 score; // 변수를 참조하여 100이란 값으..

JavaScript 2021.12.26

[JavaScript] 자바스크립트의 변수

변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 식별자 (=변수 이름) 어떤 값을 구별해서 식별할 수 있는 고유한 이름 값이 아닌 메모리 주소를 기억함. 메모리 주소에 붙인 이름 값의 할당 변수 선언 - 런타임 이전에 먼저 실행(값은 undefined로 초기화) 값의 할당 - 소스코드가 순차적으로 실행되는 시점인 런타임에 실행 undefined로 초기화된 변수에 값을 할당할때는 기존 메모리에 덮어쓰는것이 아닌 새로운 메모 공간을 확보한 후 그곳에 값을 저장한다. 이는 값을 재할당할때도 마찬가지라서 이전 값이 저장된 메모리 공간은 필요없어짐. 이런 값들은 가비지 콜렉터에 의해 자동 해제된다. *가비지 콜렉터: 메모리 공간을 주기적으로 검사하여 더 이..

JavaScript 2021.12.26

웹 브라우저의 동작 방식

www.google.com 을 주소창에 치면? 서버에서 컨텐츠를 가져오려면 저장되어있는 주소가 필요하다. 그런데 이 IP주소는 숫자로 되어있어서 사람들은 기억하기 쉬운 문자 주소를 사용한다. 1. 브라우저가 캐시에서 주소를 찾음 => 그 사이트를 이전에 방문한 적 있는지? + IP주소를 알고있는지? 확인 1-1. 캐시에서 찾는 순서: 브라우저 캐시→OS캐시→router캐시→ISP캐시 1-2. URL에 해당하는 IP못찾으면 운영체제에게 웹사이트를 찾도록 요청 OS는 URL의 주소를 system32에 있는 hosts파일에서 찾는다. 거기서도 못찾으면? => DNS 서버에서 IP주소 요청 2. 이제 OS가 IP주소를 알게되었고 이걸 브라우저에 전달함 3. Browser가 TCP와 연결함(3-way-handsh..

WEB 2021.12.26

[JavaScript] 호이스팅: 변수와 함수의 호이스팅 차이점

자바스크립트에는 호이스팅이라는 개념이 있다. 호이스팅은 코드를 실행하기 전 선언한 변수가 해당 스코프 최상단으로 끌어올려져 실행되는 것을 말한다. function getData() { console.log(greeting); var greeting = 'hi'; } getData(); 이와 같은 코드를 실행하면 어떻게 될까? greeting변수가 console.log 아래에 선언되어있기 때문에 에러가 날 것이라 예상할 수 있지만 var로 선언한 greeting이 최상단으로 끌어올려져 var greeting; console.log(greeting); // undefined greeting = 'hi'; 과 같이 실행되는 것과 동일하다. 변수 할당이 아닌 변수 선언만 최상단으로 끌어올려지기 때문에 값은 un..

JavaScript 2021.12.14

JavaScript와 비교한 TypeScript의 특징과 장점

TypeScript를 알기 전에 JavaScript는 어떤 특징을 가진 언어인지 먼저 살펴보겠다. 자바스크립트는 90년대 후반에는 전성기를 누렸지만 오래가지 못하고 안 좋은 이미지를 가진 언어로 취급되었다. 그러다가 05년 Ajax와 HTML5의 등장으로 자바스크립트가 재평가되었다. 자바스크립트는 크게 네 가지 특징을 가지고 있다. 스크립트 언어: 간편한 코딩을 목적으로 만든 언어. 객체지향적인 구조도 가지고 있어 재이용성과 유지보수성 인터프리터 언어: 일괄 해석을 하는 컴파일 과정이 필요 없음 여러 환경에서 이용 가능: Node.js, Windows Script Host, Android/IOS 등 에서 실행 가능 여러 요소로 구성됨 무엇보다 JavaScript는 동적 타입 언어이다. 동적 타입의 언어는..

JavaScript 2021.12.10

[JavaScript] 이벤트 루프: 자바스크립트는 싱글 스레드라면서 왜 비동기 방식인가요?

자바스크립트하면 떠오르는 이미지 중 대표적인 것 중 하나가 '비동기'일 것이다. 하지만 자바스크립트는 싱글 스레드로 동작하는 언어라고 말하던데 어떻게 싱글 스레드이면서 비동기적일 수가 있는 걸까? 먼저 노드의 특징인 이벤트 기반에 대한 내용을 알아야 한다. 이벤트 기반 시스템에서는 특정 이벤트가 발생할 때 미리 지정해둔 콜백 함수가 실행된다. 이벤트가 발생하면 이벤트 리스너에 등록해둔 콜백 함수를 호출하고 이벤트가 없거나 이미 다 처리했다면 노드는 대기 상태에 들어간다. 여기서 이벤트 루프라는 개념이 등장한다. 이벤트 루프는 여러 이벤트가 동시에 발생할 때 어떤 순서로 콜백 함수를 호출할지 결정해준다. *이벤트 루프: 이벤트 발생 시 호출할 콜백 함수들을 관리, 순서를 결정한다. 노드가 종료될 때까지 작..

JavaScript 2021.12.10

[JavaScript] 자바스크립트 소수점 계산시 오류 발생????

console.log(0.1 + 0.2); console.log(0.2 * 6); 위의 두 출력 결과는 어떻게 나올까? 실행해보면 결과는 각각 0.30000000000000004 이랑 1.2000000000000002 으로 예상과는 다른 숫자를 도출해낸다. 이건 자바스크립트의 오류인걸까? 결론부터 말하자면 자바스크립트 언어의 오류는 아니다. 전에 타입을 써야하는 이유에 대해 쓴 글을 읽어보면 그 이유를 알 수 있다. 2021.11.24 - [프로그래밍] - 타입을 사용하는 이유 타입을 사용하는 이유 컴퓨터의 숫자 표현 방법 인류는 10진수를 사용하고 컴퓨터는 2진수를 사용한다. 컴퓨터도 같이 10진수를 사용하면 기계어를 다룰 때 더 편할 텐데 왜 그렇게 되었을까? 숫자를 디지털로 변환할 bomoto.ti..

JavaScript 2021.12.10

[JavaScript] == vs === (동등 연산자와 동치 연산자)

다른 언어와 다르게 자바스크립트에는 비교 연산자로 == 과 === 두 가지가 있는데 둘은 수행하는 역할이 다르다. == 동등 연산자(Equal Operator) 비교하려는 값이 타입이 다르다면 같은 타입으로 변경하여 비교를 한다. 쉽게 말하자면 자바스크립트가 어떻게든 둘을 같은 값으로 보기 위해 노력한다고 할 수 있다. (귀여운 js...) console.log('1' == 1); //true console.log(true == '1'); //true console.log(true == 1); //true console.log(false == 0); //true console.log('' == 0); //true console.log([] == 0); //true 위의 경우 전부 true를 반환한다. =..

JavaScript 2021.12.10

[JavaScript] 익명 함수, 화살표 함수에 대해(함수 선언식과 함수 표현식)

기존의 방식으로 사용하던 함수에는 필요 없는 부분이 많다. 이런 부분을 전부 걷어내고 사용하자는 의도로 만들어진 것이 화살표 함수다. 화살표 함수 화살표 함수에는 =>만 있을 뿐 function키워드나 return키워드, 인수의 괄호, 중괄호가 모두 생략되었다. function getFirstLetter(str) { return str[0]; } 이와 같은 함수를 이름이 함수의 일부분으로 선언되었다는 뜻으로 기명 함수라고 한다. 혹은 아래와 같이 이름이 지정되지 않은 익명 함수를 선언하고 변수에 할당하는 방식도 있다. const getFirstLetter = function () { return str[0]; }; 여기서 화살표 함수를 만들기 위해 function키워드와 인수를 감싸던 괄호를 제거해보자...

JavaScript 2021.12.10

[JavaScript] 읽기쉬운 코드를 위해서 const를 사용하자: const, let, var에 대해

변수를 선언할 때 깔끔하고 읽기 쉬운 코드를 작성하고 싶다면 const를 즐겨 써야 한다. 설명에 앞서 const, let, var의 특징에 대해 알아보자. 유효 범위 lexical scope: var / block scope: let, const 재할당 가능 여부 가능: let, var / 불가능: const 1 먼저 유효 범위에 대해 알아보면 블록 스코프인 let과 const는 변수를 선언한 중괄호를 벗어나면 변수에 접근할 수 없는 반면 var는 한 번 선언하면 어디서든 접근할 수 있다. * 여기서 헷갈리면 안 되는 게 자바스크립트는 함수 레벨 스코프를 사용하기 때문에 여기서 말하는 중괄호는 if문이나 for문 같은 제어문을 말하는 것이다. 자세한 사항은 스코프에 대해 더 알아보기 아래의 예시처럼 v..

JavaScript 2021.12.10