Front-end/JavaScript 썸네일형 리스트형 [JavaScript] 자바스크립트 기본 - 연산자 산술 연산자 사칙 연산에 관련된 연산자 * / + -와 나머지 연산자 %, 거듭제곱 연산자 **가 대표적인 산술 연산자 할당 연산자 a = b 형태의 할당 연산자와 a *= 2 형태의 복합 할당 연산자가 있음 비트 연산자 인수를 32비트 정수로 변환하여 이진 연산 수행 조건부 연산자 매개변수가 3개인 연산자로 cond ? resultA : resultB와 같은 형태 cond가 true이면 resultA를 false이면 resultB 반환 논리 연산자 AND 연산자 &&, OR 연산자 || , NOT 연산자 ! 가 있음 nullish 병합 연산자 ??는 피연산자 중 실제 값이 정의된 피연산자를 찾는데 쓰임 a가 null 이나 undefined가 아니면 a ?? b 의 평가 결과는 a, a가 null 이나 .. 더보기 [JavaScript] 자바스크립트 기본 - 형변환(type conversion) 1. 형변환(type conversion) 함수와 연산자에 전달되는 값이 적절한 자료형으로 변환되는 것 전달받은 값을 의도적으로 원하는 타입으로 변환(명시적 변환) 2. 형변환 종류 1) 문자형으로 변환 문자형의 값이 필요한 경우 발생 alert 메서드는 매개변수로 문자형을 받기 때문에 매개변수로 들어오는 값을 문자형으로 형변환 함 String(value)을 사용하면 문자형으로 명시적 형변환 가능 원시 자료형을 문자형으로 변환할 때, 대부분 그 결과를 예상할 수 있을 정도로 명시적인 방식으로 일어남 let value = true; alert(typeof value); // boolean value = String(value); // 변수 value엔 문자열 "true"가 저장 alert(typeof va.. 더보기 [JavaScript] 자바스크립트 기본 - 자료형 자료형 자바스크립트는 8가지 기본 자료형을 갖음 특징 동적타입(dynamically typed)언어 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바뀔 수 있음 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있으며, 변수가 문자열일 수 있고 숫자가 될 수 도 있음 let message = "hello"; message = 12345; 1. 숫자형(number type) 정수 및 부동 소수점 숫자(floating point number)를 나타냄 숫자형의 종류 1) 일반적인 숫자 2) 특수 숫자값(special numeric value) Infinity, -Infinity 어떤 숫자보다 더 큰 특수 값, 무한대(♾️)를 나타냄 NaN 계산 중 에러 발생을 나타내주는 값 부정확하거나 .. 더보기 [JavaScript] 템플릿 리터럴(Template literals), 태그드 리터럴(tagged literals) 1. 템플릿 리터럴(template literals) - 자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법 - 따옴표 대신 backquote, backtick 이라는 `백틱` 기호를 사용해서 문자를 만드는 형태 2. 템플릿 리터럴의 장점 1) 문자 중간 엔터키 입력 가능 - 자바스크립트 문자열은 문자 중간에 엔터키치면 안되는데 백틱으로 문자를 만들면 엔터키 자유롭게 가능 var 문자 = `안녕 하세요`; 2)문자 중간에 변수를 집어넣을 때 편리함 - 자바스크립트 문자열은 문자 중간에 변수를 넣고 싶은 경우 문자를 쪼개서 + 기호로 넣어야 하는데 백틱으로 문자를 만들면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있음 var 이름 = '김하늘'; var 문자 = `안녕하세요 ${이름.. 더보기 [JavaScript ES6] 변수(variable) var let const 와 Hoisting, 전역변수, 참조 1. 변수(variable) - 변수: 자료를 임시로 저장하는 공간 - 오브젝트, 배열, 함수 등 모든 자료들을 담을 수 있음 - 자바 스크립트에서 변수를 만들 때 var, let, const라는 3개 키워드를 사용할 수 있음 var let const 재선언 O X X 재할당 O O X 범위 function {} {} 2. 변수의 선언 1) 선언 방법 var 이름; let 나이; const 성별; 2) 차이점: var는 재선언 가능 / let, const는 재선언 불가능 - let, const로 만들면 같은 이름의 변수 재선언 불가(에러 발생) - 변수 이름을 중복해서 만드는 실수를 방지해 줌 let 나이; let 나이; //에러 const 성별 = '여자'; const 성별 = '남자'; //에러 .. 더보기 [JavaScript] Arrow function 화살표 함수 1. Arrow function 문법 ES6 문법 이후 새롭게 등장한 함수를 만들 수 있는 문법 1) 자바스크립트에서 함수 만드는 기존 문법 (1) function 예쁜함수(){ //어쩌구 } (2) var 예쁜함수 = function(){ //어쩌구 } 함수 사용법 예쁜함수(); 2) ES6 신문법 Arrow function 으로 함수 만들기 - function이라는 길고 복잡한 키워드 대신에 () => {} 의 형태로 만드는 함수 var 예쁜함수 = () => { //어쩌구 } 2. Arrow function의 장점 1) 함수 본연의 입출력 기능을 직관적으로 표현하는 문법 cf) function 문법을 사용하는 이유 1. 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 .. 더보기 [JavaScript] this 키워드 this는 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있음 사용하는 환경(위치) this가 의미하는 것 태그 안 또는 일반 함수 내부 window{} 오브젝트 strict mode의 일반 함수 내부 undefined 오브젝트 내 함수(메서드) 내부 함수를 동작시키는(메서드를 가진) 오브젝트 생성자(constructor) 내부 생성자를 통해 새로 생성된 오브젝트 이벤트 리스너 내부 e.currentTarget 1. 그냥 쓰거나 함수 안에서 쓰면 this는 window{} 오브젝트를 뜻함 HTML 파일에 window {...생략...} 출력 됨 1-2. strict mode일 때 함수 안에서 쓰면 this는 undefined IE 10버전 이상에서 'use strict'라는 키워드를 페이지 .. 더보기 [JavaScript] <script> 위치에 따른 동작 순서 1. head 내부 동작순서: HTML parsing 후 main.js 가져오고 실행 parsing HTML page is ready fetching js executing js - 단점: js파일에서 데이터를 가져와서 페이지를 보여줘야하는 경우 에러 발생 3. head + async 동작순서: asyn 옵션 boolean type(default: true), 브라우저가 pasing 하다가 fetch 명령하고 실행, 그리고 다시 parsing HTML parsing HTML blocked parsing HTML page is ready fetching js executing js 4. head + defer 동작 순서: defer 옵션: parsing 하다가 fetch만하고 다시 parsing후 pars.. 더보기 이전 1 2 다음
