티스토리

sandwe

검색하기

블로그 홈

sandwe

sandwe.tistory.com/m

sandwe 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

33. 프로미스 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 전통적인 콜백 패턴은 콜백 지옥로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러 처리가 곤란해 여러 비동기 처리를 한번에 처리하는데 한계가 있다. ES6에서는 비동기 처리를 위한 새로운 패턴인 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴의 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다. 비동기 처리를 위한 콜백 패턴의 단점 1. 콜백 지옥 (Callback Hell) 🤔 콜백 지옥이 발생하는 이유? 결과 먼저: 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프의 변수에 할당할 수 없다. 따라서 비동기 함수의 처리 결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야 한.. 공감수 0 댓글수 0 2022. 11. 3.
32. Ajax Ajax란? 자바스크립트를 사용해 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 프로그래밍 방식 이전의 전통적인 웹페이지는 어떤 부분을 변경하고 싶다면 서버로부터 완전한 HTML 파일을 전송받아 웹페이지 전체를 처음부터 다시 렌더링해야 했다. 이는 불필요한 데이터 통신이 발생하고, 클라이언트와 서버와의 통신이 동기 방식으로 동작하므로 다음 처리가 블로킹 된다는 단점이 있다. Ajax 방식을 사용하면 서버로부터 웹페이지의 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식이 가능해진다. 그리고 클라이언트와 서버와의 비동기 통신이 가능하여 블로킹이 발생하지 않는다. JSON (JavaScript Object Notation) 클라이언트와 .. 공감수 0 댓글수 0 2022. 11. 1.
31. 비동기 프로그래밍 동기 처리와 비동기 처리 실행 컨텍스트 평가와 실행 과정 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(= call stack)에 push되고, 함수 코드가 실행된다. 즉, 함수의 실행이 시작된다. 함수 코드 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 pop되어 제거된다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 push 되기 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 2개 이상의 함수를 동시에 실행할 수 없다. 실행 컨텍스트 스택의 최상위 '실행 중인 .. 공감수 0 댓글수 0 2022. 10. 31.
30. 타이머 호출 스케줄링 타이머 함수를 사용하여 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하는 것 setTimeout, setInterval가 생성한 타이머가 만료되면 콜백 함수가 호출된다. setTimeout 함수가 생성한 타이머는 딱 한번 동작(콜백 함수가 한번 호출)하고, setInterval 함수가 생성한 타이머는 반복 동작(타이머 만료될 때마다 반복 호출)한다. JavaScript에는 타이머 생성할 수 있는 함수 setTimeout, setInterval와 타이머 제거할 수 있는 함수 clearTimeout, clearInterval을 제공한다. 타이머 함수는 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드다. 자바스크립트 엔진은 싱글 스레드로 동작한다. 자바스크립트 엔진은 단.. 공감수 0 댓글수 0 2022. 10. 31.
29. 이벤트 1. 이벤트 드리븐 프로그래밍(Event Driven Programming) 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 브라우저는 클릭, 키보드 입력, 마우스 이동 등의 어떤 이벤트가 일어나면 이를 감지하여 해당 타입의 이벤트를 발생시킨다. 특정 타입의 이벤트에 반응해 어떤 작업을 처리해주고 싶다면 다음의 2가지가 필요하다. 1. 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수 2. 이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 2. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타낸다. 이벤트 타입은 약 200여 가지가 있다. 다음 mdn 문서에서 다양한 이벤트 타입을 확인 가능하다. https://developer.mozilla.org/ko.. 공감수 0 댓글수 0 2022. 10. 26.
19. 클로저 클로저 정의 클로저는 자바스크립트 고유의 개념은 아니다. MDN - "함수와 그 함수가 선언된 렉시컬 환경의 조합" 렉시컬 스코프 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 것 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되어 변하지 않으므로 정적 스코프라고도 불린다. const x = 1; function foo() { const x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1 자바스크립트 엔진은 렉시컬 스코프를 따르므로 foo와 bar 함수의 상위 스코프는 전역이 된다. 클로저란? outer 함수를 호출하면 outer 함수가 실행되어 중첨 함수 inner를 반환하고 outer 함.. 공감수 2 댓글수 0 2022. 10. 12.
28. 브라우저 렌더링 과정 요청과 응답 브라우저의 주소창에 http://poiemaweb.com을 입력하면 루트 요청이 poiemaweb.com 서버로 전송된다. 서버는 루트 요청에 대해 암묵적으로 index.html을 응답한다. 브라우저의 렌더링 엔진은 전달받은 index.html을 파싱하는 도중 외부 리소스를 로드하는 태그(link, img, script 등)를 만나면 HTML 문서의 파싱을 일시 중단하고 해당 리소스 파일을 서버에 요청한다. HTML 파싱과 DOM 생성 서버로부터 응답된 HTML 문서는 문자열로 이루어진 순수 텍스트이다. 브라우저에 시각적인 픽셀로 렌더링하기 위해서 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조(객체)로 변환해 메모리에 저장한다. 이때, 브라우저가 이해할 수 있는 트리 형태의 자.. 공감수 1 댓글수 0 2022. 9. 26.
27. 이터러블 (Iterable), 스프레드 문법, 구조 분해 할당 이터러블 이터러블 프로토콜을 준수한 객체 즉, Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체 ✅ 이터러블 프로토콜 (Iterable Protocol) ES6 이전의 순회 가능한 데이터 컬렉션(배열, 문자열, 유사 배열 객체, DOM 컬렉션 등)은 통일된 규약 없이 나름의 구조를 가지고 for 문, for...in문, forEach 메서드 등 다양한 방법으로 순회할 수 있었다. ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for..of문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용하도록 일원화했다. Symbol.iterator 메서드를 직접 구현하지 않거나 상속받지 않은 일반 객체는.. 공감수 6 댓글수 0 2022. 8. 19.
26. 표준 빌트인 객체 - String 표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. String 생성자 함수 String 객체는 생성자 함수 객체이므로 new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. String 메서드 String 객체는 원본 String 래퍼 객체를 직접 변경하는 메서드는 존재하지 않는다. 즉, String 객체의 메서드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능(Immutable)한 원시 값이기 때문에 String 래퍼 객체도 읽기 전용 객체로 제공된다. String 래퍼 객체는 읽기 전용 객체다. 즉, writable 프로퍼티 어트리뷰트 값이 false다. String.prototype.indexOf 메서드를 호출한 문자열에서.. 공감수 4 댓글수 0 2022. 8. 19.
25. 표준 빌트인 객체 - Date Date Date는 빌트인 객체이면서 생성자 함수이다. UTC: 국제 표준시 KST: 한국 표준시, UTC에 9시간을 더한 시간으로 UTC보다 9시간 빠르다. UTC 00:00 AM = KST 09:00 AM 현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정된다. Date 생성자 함수 Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖는다. (내부적) 정수값은 1970년 1월 1일 00:00:00(UTC)을 기점으로 Date 객체가 나타내는 날짜와 시간까지의 밀리초를 나타낸다. (콘솔) 날짜와 시간 정보를 출력한다. /* 86400000ms는 1day를 의미한다. 1s = 1,000ms 1m = 60s * 1,000ms = 60,000ms .. 공감수 4 댓글수 0 2022. 8. 10.
24. 표준 빌트인 객체 - Math Math는 생성자 함수가 아니다. 따라서 정적 프로퍼티와 정적 메서드만 제공한다. Math.PI 원주율 PI 값을 반환한다. Math.abs 인수로 전달된 숫자의 절대값을 반환한다. Math.round 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환한다. Math.ceil 인수로 전달된 숫자의 소수점 이하를 올림한 정수를 반환한다. Math.floor 인수로 전달된 숫자의 소수점 이하를 내림한 정수를 반환한다. Math.sqrt 인수로 전달된 숫자의 제곱근을 반환한다. Math.random 임의의 난수(랜덤 숫자)를 반환한다. 반환한 난수는 0에서 1미만의 실수다. Math.pow 첫번째 인수를 밑으로, 두번째 인수를 지수로 거듭제곱한 결과를 반환한다. Math.pow 메서드 대신 ES7에 도입.. 공감수 3 댓글수 0 2022. 8. 10.
23. 표준 빌트인 객체 - Number Number는 표준 내장 객체 중 하나로, 원시 타입인 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. Number 생성자 함수 Number 표준 빌트인 객체는 생성자 함수 객체이다. new 연산자와 함께 호출해 Number 인스턴스를 생성할 수 있다. Number 생성자 함수에 인수를 전달하여 new 연산자와 함께 호출하면 [[NumberData]](=[[PrimitiveValue)라는 접근할 수 없는 내부 슬롯에 인수로 전달된 숫자를 할당한 Number 래퍼 객체를 생성한다. 인수를 전달하지 않고 호출하면 내부 슬롯에 0이 할당된다. 인수로 숫자가 아닌 값을 전달하면 숫자로 강제 변환 후 할당한다. Number 메서드 Number.isFinite 인수로 전달된 숫자값이 정상적인 유한수(Infin.. 공감수 2 댓글수 0 2022. 8. 9.
22. 배열 (Array) 배열의 특징 자바스크립트에서 배열의 타입은 객체 타입이다. 배열 타입이란 것은 따로 존재하지 않는다. 배열의 생성자 함수는 Array, 프로토타입 객체는 Array.prototype이다. Array.prototype은 배열을 위한 빌트인 메서드를 제공한다. 배열은 객체지만 일반 객체와 구별되는 특징을 갖는다. 구분 객체 배열 구조 프로퍼티 키와 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 따라서, 배열은 반복문을 통해 순차적으로 값에 접근하기 적합한 자료구조이다. 자바스크립트의 배열은 희소 배열이다 희소 배열이란 배열의 요소가 연속적으로 이어져 있지 않고 일부가 비어 있는 배열을 말한다. 자바스크립트의 배열은 일반적인 배열의 동작을 흉내내는 객체이다. 자.. 공감수 3 댓글수 0 2022. 8. 8.
17. this this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 자바스크립트의 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. this를 통해 객체의 프로퍼티나 메서드를 참조한다. 자바스크립트의 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. (자바나 C++ 같은 클래스 기반 언어에서 this는 항상 클래스가 생성하는 인스턴스를 가리킨다.) ❓ 바인딩 ✅ 식별자와 값을 연결하는 과정 ✅ 변수 선언은 변수이름과 확보된 메모리 공간의 주소를 바인딩하는 것 ✅ this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것 함수 호출 방식과 this 바인딩 this 바인딩은 함수 호출 시점에 결정되고, 함수가 호출된 방식에 따라 달라진다... 공감수 2 댓글수 0 2022. 8. 2.
16. 빌트인 객체 자바스크립트 객체의 분류 자바스크립트 객체는 다음과 같이 3개의 객체로 분류한다. 표준 빌트인 객체 (네이티브 객체) ECMAScript 사양에 정의된 객체 자바스크립트 실행 환경(브라우저 또는 Node.js)과 상관없이 언제나 사용 전역 객체의 프로퍼티로 제공, 별도의 선언 없이 전역 변수를 언제나 참조 가능 애플리케이션 전역의 공통 기능을 제공 호스트 객체 ECMAScript 사양에 정의되어 있진 않지만 자바스크립트 실행 환경에서 추가로 제공하는 객체 브라우저 환경 ➡️ DOM, BOM, Canvas, XMLHttpRequest, fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web Worker와 같은 클라이언트 사이드 Wep API를.. 공감수 4 댓글수 0 2022. 8. 2.
15. strict mode 암묵적 전역 function foo() { x = 10; } foo(); console.log(x); // 10 foo 함수에서 선언하지 않은 x 변수에 값 10을 할당하게 되면 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 이러한 현상을 암묵적 전역이라고 한다. 이는 개발자의 의도와 상관없이 오류를 발생시킬 가능성이 크다. 따라서 반드시 var, let, const 키워드를 사용한 변수 선언을 한 후 사용해야 한다. strict mode 자바스크립트 언어의 문법을 좀 더 엄격히 적용해 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬만한 코드에 대해 명시적인 에러를 발생시킨다. ES5부터 추가되었다. ESLint 같은 린트 도구를 사용하면 정적 .. 공감수 4 댓글수 0 2022. 8. 2.
14. 프로토타입 (Prototype) 객체지향 프로그래밍 프로그램을 명령어 또는 함수의 목록으로 보는 전통적인 명령형 프로그래밍의 절차지향적 관점에서 벗어나 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 실세계에서 실체는 특징이나 성질을 나타내는 속성(attribute/property)를 가지고 있고, 이를 통해 실체를 인식하거나 구별한다. 이를 프로그래밍에 접목시켜 사람에게는 다양한 속성(이름, 주소, 성별, 나이 등)이 있으나 구현하려는 프로그램에서는 사람의 이름과 주소라는 속성에만 관심있다고 가정하자. 이처럼 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현하는 것을 추상화라고 한다. 상속과 프로토타입 상속: 어떤 객체의 프로퍼티나 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는.. 공감수 3 댓글수 0 2022. 8. 1.
13. 일급 객체 일급 객체 자바스크립트의 함수는 일급 객체이다. 다음과 같은 조건을 만족하는 객체를 일급 객체라고 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. // 1. 무명의 리터럴로 표현이 가능하다. // 2. 변수나 자료 구조에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고, 변수에 할당된다. const increase = function (num) { return ++num; }; consst decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. co.. 공감수 2 댓글수 0 2022. 7. 31.
12. 생성자 함수에 의한 객체 생성 객체 생성 방식 이전에 다양한 객체 생성 방식 중 객체 리터럴을 사용한 객체 생성 방식을 살펴보았다. 이번에는 생성자 함수를 사용하여 객체를 생성하는 방법에 대해 알아보자. 2022.07.25 - [JavaScript/모던 자바스크립트 Deep Dive] - 8. 객체 리터럴 Object 생성자 함수 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수이다. 생성자 함수에 의해 생성된 객체를 인스턴스(Instance)라고 한다. new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가할 수 있다. 자바스크립트는 Object 생성자 함수 외에도 String, Number, Boolean, Functio.. 공감수 3 댓글수 0 2022. 7. 31.
11. 스코프 (Scope)와 전역 변수의 문제점, var/let/const 스코프 다른 코드가 식별자를 참조할 수 있는 유효 범위 식별자가 유효한 범위 식별자를 검색하는 규칙 식별자의 이름이 같아도 스코프가 다르기 때문에 같은 이름의 변수를 사용할 수 있다. 스코프 구분 코드의 가장 바깥 영역(전역)에 선언된 변수는 전역 스코프를 갖는 전역 변수로, 어디서든 참조 가능하다. 함수 몸체 내부에서 선언된 변수는 지역 스코프를 갖는 지역 변수로, 함수 내부와 내부 함수에서 참조 가능하다. 함수 레벨 스코프 자바스크립트의 var 키워드는 함수의 코드 블록만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프라고 한다. var i = 10; // for문에서 선언한 i는 전역 변수다. 이미 선언된 전역 변수 i가 있으므로 중복 선언되어 전역 변수의 값이 재할당된다. for (va.. 공감수 3 댓글수 0 2022. 7. 28.
10. 함수 함수 일련의 과정을 문(statement)로 표현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 함수는 함수 정의를 통해 생성하고, 함수 호출을 통해 실행한다. 함수를 언제 사용하는 것이 좋을까? 동일한 작업을 반복적으로 수행해야 하는 경우에는 정의된 함수를 재사용하는 것이 효율적이다. 함수 리터럴 함수 리터럴은 function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성된다. 함수 이름은 생략할 수 있다. 이름이 없는 함수를 무명 함수라고 한다. 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다. (함수 내에서 재귀적 호출이 가능하다) 함수 리터럴은 평가되어 값을 생성하며, 이 값은 객체이다. 즉, 자바스크립트에서 함수는 객체다. 함수는 일급 객체로 일반 객체와 달라 호출할 .. 공감수 1 댓글수 0 2022. 7. 28.
9. 원시 값과 객체의 비교 원시 타입 vs 객체 타입 원시 값 원시 타입의 값은 변경 불가능한 값이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다. 객체 값 객체는 변경 가능한 값이다. 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조된 값이 저장된다. 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다. 원시 값 원시 값은 변경 불가능한 값, 읽기 전용 값이다. (불변성) 변수는 원시 값의 재할당을 통해 값을 변경할 수 있다. 변수에 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당된 원시 값을 저장한다. 이때.. 공감수 1 댓글수 0 2022. 7. 26.
8. 객체 리터럴 객체 (Object) 0개 이상의 프로퍼티로 구성된 집합 프로퍼티 (Property) 프로퍼티는 키(key)와 값(value)로 구성된다. var person = { name: 'Lee', // 프로퍼티(name: 키, 'Lee': 값) age: 20 // 프로퍼티 }; 메서드 (Method) 프로퍼티 값(value)이 함수인 경우 일반 함수와 구분하기 위해 메서드라고 부른다. var counter = { num: 0, // 프로퍼티 increase: function () { // 메서드 this.num++; // this: 객체 자신을 가리키는 참조변수 } }; 객체: 프로퍼티와 메서드로 구성된 집합체 프로퍼티: 객체의 상태를 나타내는 값 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작.. 공감수 1 댓글수 0 2022. 7. 25.
7. 타입 변환과 단축 평가 타입 변환 기존 원시 값을 사용해 다른 타입의 새로운 원시 값으로 생성하는 것 기존 원시 값을 직접 변경하는게 아니다. 명시적 타입 변환 (= 타입 캐스팅): 개발자가 의도적으로 값의 타입을 변환하는 것 암시적 타입 변환 (= 타입 강제 변환): 표현식을 평가하는 도중에 자바스크립트의 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 코드에서 암묵적 타입 변환이 발생하는지, 발생한다면 어떤 타입의 어떤 값으로 변환되는지, 그리고 타입 변환된 값으로 표현식이 어떻게 평가될 것인지 예측 가능해야 한다. 암묵적 타입 변환 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다. 문자열 타입으로 변환 템플릿 리터럴의 표현식의 평과 결과를 문자열 타입으로 암묵적 타입 .. 공감수 1 댓글수 0 2022. 7. 23.
6. 제어문 제어문 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 조건문 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다. if ... else 문: 논리적 참, 거짓으로 실행할 코드 블록을 결정할 때 사용 switch 문: 다양한 케이스에 따라 실행할 코드 블록을 결정할 때 사용 break 키워드를 써야 해당 케이스 블록에서 탈출한다. 그렇지 않으면 실행 흐름이 다음 case 문으로 이동한다. // 월을 영어로 변환한다. (11 → 'November') var month = 11; var monthName; switch (month) { case 1: monthName = 'January'; break; case 2: monthName = 'February'; bre.. 공감수 1 댓글수 0 2022. 7. 22.
5. 연산자 (Operator) 연산자 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. ❓연산의 대상 = 피연산자(Operand) 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이어야 한다. 자바스크립트가 제공하는 다양한 연산자에 대해 살펴본다. 산술 연산자 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다. 이항 산술 연산자 2개의 피연산자를 산술 연산해 숫자 값을 만든다. + (덧셈), - (뺄셈), * (곱셈), / (나눗셈), % (나머지) 단항 산술 연산자 1개의 피연산자를 산술 연산하여 숫자 값을 만든다. .. 공감수 1 댓글수 0 2022. 7. 22.
4. 데이터 타입 (Data Type) 원시 타입과 객체 타입 원시 타입: 변경 불가능한 값(immutable value) 객체 타입: 변경 가능한 값(mutable value) 즉, 객체는 새로운 값을 다시 만들 필요없이 직접 변경이 가능하다는 것이다. 원시 타입 (primitive data type) number string boolean undefined null symbol (ES6에서 추가) 객체 타입 (object/reference type) object number (숫자 타입) 자바스크립트는 다른 프로그래밍 언어와 달리 하나의 숫자 타입만 존재한다. 정수, 실수, 2진수, 8진수, 16진수 리터럴은 모두 메모리에 64비트 부동소수점 형식의 2진수로 저장된다. 자바스크립트는 2진수, 8진수, 16진수를 표현하는 데이터 타입을 제공.. 공감수 1 댓글수 0 2022. 7. 21.
3. 표현식과 문 값 식(표현식)이 평가되어 생성된 결과 평가: 식을 해석해서 값을 생성하거나 참조하는 것 모든 값은 데이터 타입을 가지며 메모리에 2진수(비트)의 나열로 저장된다. 따라서 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 리터럴 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 값은 다양한 방법으로 생성할 수 있다. 가장 기본적인 방법은 리터럴을 사용하는 것이다. 자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성한다. // 숫자 리터럴 10.50 1001 // 정수 리터럴 0b01000001 // 2진수 리터럴 0o101 // 8진수 리터럴 0x41 // 16진수 리터럴 // 문자열 리터럴 'Hello' "World" // 불리언 리.. 공감수 1 댓글수 0 2022. 7. 20.
2. 변수 변수(Variable) 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 var result = 10 + 20; // result: 변수 이름, 변수값: 10 + 20이 계산된 결과인 30 변수는 메모리 셀에 저장된 값의 위치를 가리키는 상징적인 이름이다. 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 할당(Assignment) : 변수에 값을 저장하는 것 참조(Reference): 변수에 저장된 값을 읽어 들이는 것 변수 이름: 사람이 이해할 수 있는 언어로 값이 저장된 메모리 공간에 붙인 상징적인 이름 변수 이름을 사용해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소.. 공감수 4 댓글수 0 2022. 7. 18.
1. 개요 프로그래밍과 컴퓨팅 사고 프로그래밍 요구사항을 정확하게 이해한 후 코드로 적절한 문제 해결 방안을 정의하는 것 컴퓨팅 사고 컴퓨터와 사람은 사고, 인지의 방식이 다르다. 따라서, 컴퓨터의 관점에서 문제를 사고해야 한다. 해결 과제를 작은 단위로 분해하고 패턴화해서 추출하며, 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다. 예를 들어, '듣다'라는 행위는 사람에게는 당연한 하나의 기능이다. 또한, 소리가 '크다'/'작다'라는 표현은 상대적인 개념으로 기준이 불명확하다. 따라서, 컴퓨터에게는 "현재 볼륨보다 1단계 크게 조정하라", "볼륨을 60으로 조정하라"와 같이 양적 개념인 숫자를 사용해 명령해야 한다. 프로그래밍 언어 프로그래밍 언어를 통해 컴퓨터에게 명령을 전달하고, 컴퓨터는 .. 공감수 2 댓글수 0 2022. 7. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.