JavaScript18 [모던JS DeepDive] 7장 연산자 연산자란? 연산자: 하나 이상의 표현식을 대상으로 다양한 연산을 수행하여 하나의 값을 만드는 것 - 피연산자: 연산의 대상, 표현식이여야 함(값으로 평가될 수 있는) - 연산자 표현식도 값으로 표현될 수 있는 표현식이여야 함 다양한 연산자 대분류 중분류 연산자 의미 부수효과* 산술 연산자 - 수학적 계산을 수행하여 새로운 값 생성 - 불가능할 경우 NaN 반환됨 이항 산술 연산자 (피연산자가 2개) +, -, *, /, % 사칙연산, 나머지 X 단항 산술 연산자 (피연산자가 1개) ++, -- 증가, 감소 - 전위: 피연산자의 값을 먼저 증/감시킨후 다른 연산 수행 - 후위: 먼저 다른 연산을 수행후 피연산자 값을 증/감시킴 O + 효과 없음 - 숫자 타입이 아닌 피연산자에 사용시 숫자 타입으로 변환하여.. 2023. 1. 3. [모던JS DeepDive] 6장 데이터 타입 자바스크립트의 데이터 타입(data type) 데이터타입 - 값의 종류 - 모든 값은 데이터 타입을 갖는다. 구분 데이터 타입 설명 특이 사항 원시타입 (primitive type) 숫자(number) 숫자 - 정수, 실수 구분 없음 (모두 실수로 처리) - ±Infinity, NaN 포함 숫자 타입 값은 배정밀도 64비트 부동소수점 형식을 따르는 2진수로 저장된다. 문자열(string) 문자열 - 16비트 유니코드 문자(UTF-16)의 집합으로 표현 - '', "", ``으로 감싸야 함(토큰과 구분하기 위함) - 변경 불가능함 템플릿 리터럴 표기법 도입 - 백틱으로 표현 - 멀티라인 문자열(이스케이프 시퀀스 사용하지 않아도 됨), 표현식 삽입(표현식을 ${}으로 감쌈, 표현식 평가결과는 문자열로 타입변.. 2023. 1. 3. [모던JS DeepDive] 5장 표현식과 문 값, 표현식, 문 세미콜론과 세미콜론 자동 삽입 기능 세미콜론(;) - 문의 종료를 나타냄 - 종료 위치를 파악하고 순서대로 하나씩 문을 실행하게 해줌 - 코드 블록 뒤에는 붙이지 않음 (코드블록은 자체 종결성을 가지므로) - 생략 가능 -> 자동 삽입 기능(ASI, automatic semicolon insertion)이 암묵적으로 수행되기 때문 표현식인 문과 표현식이 아닌 문 표현식과 문의 구별 - 값으로 평가되면 표현식인 문이고, 아니면 표현식이 아닌 문이다. - 변수에 할당해 본다. (표현식이면 값으로 평가되어 변수에 할당 가능, 아닌 경우 에러 발생함) - 크롬 개발자 도구에서 표현식인 문을 실행하면 언제나 평가된 값을 반환하고, 표현식이 아닌 문을 실행하면 언제나 undefined를 출력한다... 2023. 1. 3. [모던JS DeepDive] 4장 변수 변수의 필요성과 정의 프로그래밍을 통해 만든 애플리케이션은 데이터를 입출력한다. 그리고 변수는 이 데이터를 관리하기 위한 핵심 개념이다. 컴퓨터가 데이터를 다루는 방법은 데이터를 메모리에 기억하고, CPU로 연산하여, 결과값을 메모리에 기억해서 출력하게 된다. 메모리란? - 데이터를 저장할 수 있는 메모리셀의 집합체 변수의 필요성 - 메모리 주소를 통한 직접 접근의 위험성 및 어려움으로 변수가 필요함 -> 직접 접근시, 치명적인 오류 발생 가능성 있음, 메모리 주소는 코드 실행될 떄 상황에 따라 임의 결정되므로 계속 변경된다. - 즉, 값을 메모리에 저장하고 재사용하기 위해 변수가 필요해졌다. 변수의 정의 - 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 .. 2023. 1. 3. [모던JS DeepDive] 2장 자바스크립트란? 자바스크립트의 탄생과 표준화 연도 사건 설명 1995 자바스크립트 탄생 넷스케이프 커뮤니케이션즈에서 도입 - 웹페이지의 보조적인 기능 수행 - 브라우저에서 동작 - 경량 프로그래밍 언어 1996 JScript 출시 MS에서 IE에 자바스크립트의 파생버전인 JScript를 출시함 1997 ECMAScript 1 사양 완성 - 자바스크립트와 JScript의 양립으로 자바스크립트 파편화, 크로스 브라우징 이슈 (모든 브라우저에서 동작하지 않음) 발생하여 넷스케이프에서 ECMA에 표준화를 요청함 2009 ES5 HTML5와 함께 출현한 표준 사양 2015 ES6(ECMAScript 2015) ECMA 사양에 주요 기능 대거 도입 자바스크립트의 성장의 역사 시기 등장 기술 설명 1999 Ajax (Asynchro.. 2023. 1. 2. [모던JS DeepDive] 1장 프로그래밍 1.1 프로그래밍이란? 프로그래밍이란 커뮤니케이션이다. - 기계가 실행할 수 있을 정도로 요구사항을 정확하고 상세하게 설명하는 작업 / 그 결과물이 코드 1.2 프로그래밍 언어 컴퓨터는 기계어만 이해 할 수 있다. 그래서 프로그래밍 언어가 필요하다. 프로그래밍 언어는 사람이 이해할 수 있는 약속된 구문으로 구성된 언어로, 이를 이용해 프로그램을 작성하면 번역기의 역할을 하는 컴파일러 또는 인터프리터가 컴퓨터가 이해할 수 있는 기계어로 번역을 해준다. 즉, 사람과 기계(컴파일러/인터프리터)가 모두 이해할 수 있는 약속된 형태의 인공어이다. 1.3 구문과 의미 프로그래밍도 결국 커뮤니케이션으로, 구문(Syntax)와 의미(semantic)의 조합으로 표현된다. 구문이 틀리면 에러가 발생하고, 의미가 틀리면 .. 2023. 1. 2. 자바스크립트 논리 연산자 정리 자바스크립트의 논리 연산자 자바스크립트에는 세가지 논리 연산자가 있다. - && (and), || (or), ! (not) - 피연산자로 모든 타입의 값을 받을 수 있고, 연산 결과도 모든 타입이 될 수 있다. 논리 연산자 사용 Boolean형 피연산자 다른형의 피연산자 || (OR) a || b a, b 하나라도 true이면 true 둘다 false이면 false 첫번째 truthy를 반환 없을 경우 마지막 피연산자를 반환 - 피연산자를 boolean형으로 변환 후 연산한다. - 반환시 형변환전 원래 값으로 반환한다. - 단락 평가를 진행함(반환 직후 평가 중단됨) && (and) a && b a, b 모두 참일때 true 둘 중 하나라도 false이면 false 첫번째 falsy를 반환 없을 경우 마.. 2022. 11. 9. DOM 노드 탐색 프로퍼티의 비교 (childNodes vs. children) DOM 노드란? 문서 객체 모델(DOM, Document Object Model)을 구성하는 객체 - 모든 HTML 태그는 객체로 노드이다. - 요소내의 문자, 공백, 개행 등의 특수 문자는 모두 텍스트 노드이다. [주요 노드 타입] - document node(문서 노드) : DOM의 진입점이 된다. - element node(요소 노드) : HTML 태그에서 만들어 진다. DOM 트리를 구성한다. - text node(텍스트 노드) : 텍스트를 포함하는 노드이다. - comment node(주석 노드) : 주석 노드로, 화면에 보이지는 않으나 주석 노드도 DOM으로부터 정보를 읽을 수 있다. DOM 노드 탐색하기 이러한 노드는 프로퍼티로 탐색하거나 수정할 수 있다. 그 중 주요 탐색 프로퍼티를 비교해.. 2022. 11. 9. [스터디] 자바스크립트 코드 품질 좋은 코드란? 코드로 문제를 잘 해결하는 것도 중요하지만, 사람이 읽기 좋게 쓰는것도 중요하다. 함께 일하는 사람들은 물론 미래의 나를 위해서도 필요하다. 즉, 좋은 코드란 가독성이 좋은 코드이다. 좋은 코드, 클린 코드를 위한 여러가지 추천이 있지만, 사실 같이 일하는 사람들과의 규칙을 준수하는 것이 가장 중요하겠다. 이 글에서는 공부를 하는 입장에서 문서나 책에서 추천하는 방법들을 몇가지 정리해보도록 하겠다. (다른 자료를 참고하여, 예제를 복사하지 않았습니다. 상세한 조건들은 reference글들을 참고바랍니다.) 코드 품질 향상을 위한 방법들... 1. 적당한 간격 아래 그림과 같이 적당한 공백과 들여쓰기, 띄어쓰기가 필요하다. 가로 들여쓰기 : 스페이스 2개 혹은 4개를(혹은 탭) 사용하는 것이.. 2022. 11. 1. 이전 1 2 다음
