-

switch특정 변수나 상수 또는 반환값에 따라 작업을 실행하나의 값이 여러 경우 중 어디에 해당하는 지 찾을 때 유용switch (표현식) { case value1: // value1일 때 실행 break; case value2: // value2일 때 실행 break; default: // 어떤 case와도 일치하지 않을 때 실행} expression의 결과와 case의 값을 **===(엄격 비교)**로 비교함.일치하면 해당 case의 코드를 실행하고 break를 만나면 빠져나감.break가 없으면 다음 case로 계속 넘어감(이걸 "fall-through"라고 부름).어느 case에도 일치하지 않으면 default 실행.표현식 안에 설정 가능한 값값을 도출할 수 있는..

Framework (프레임워크)어플리케이션을 만들 때 기본 구조와 흐름을 정해놓고 개발을 하도록 도와주는 도구프레임워크는 기본적으로 전체적인 뼈대, 아키텍처, 규칙을 제공하고 개발자는 그 위에 기능을 구현하는 형태보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함프레임워크는 '제어의 역전(Inversion of Control)'을 가짐. 즉, 개발자가 호출하는 게 아니라 프레임워크가 개발자의 코드를 호출하는 방식으로 동작종류구분예CSSBootstrap, Tailwind CSS, Bulma, FoundationJSAngular, React, Vue.js, Svelte, Express, Next.js, Nuxt.js✓ "틀(frame)" + "작업(work)" = 작업을..

this의 값은 함수가 호출되는 방식에 따라 다름객체 내 this객체 내 this를 호출하는 경우 해당 객체를 가리킴// 스코프 내 this 호출 const temp = { inner : function(){ console.log(this) } } temp.inner() // 해당 객첼ㄹ 가리킴전역 범위에서의 this전역 범위에서 this 호출 시 Window 객체를 가리킴 'use strict' 를 활용하여 Window 객체 참조 방지 가능strict 모드에서 window 객체 대신 undefined로 값을 설정하는 규칙이 적용되어 undefined가 되는 경우 bind() 함수를 활용하여 this 값을 수동으로 설정 할 수 있음// 전역 범위에서 this 호출 function temp02(){ con..

브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 주요 브라우저 내장객체Window : 브라우저 창이 열릴 때마다 하나씩 생성되는 객체 Document : 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체Location : 현재 페이지에 대한 URL 정보를 저장하고 있는 객체Navigator : 현재 사용 중인 웹 브라우저의 정보를 저장하고 있는 객체Screen : 현재 사용 중인 화면 정보를 저장하고 있는 객체Window 객체브라우저 창이 열릴 때마다 하나씩 생성되는 자바스크립트 최상위 객체 자바스크립트의 모든 객체는 window객체에 포..

값에 의한 전달 (Copy by Value)값에 의한 전달기본적으로 모든 primitive 값은 copy by value원본 데이터와 복사본의 데이터가 서로 따로 제어 됨let origin = 'hi'let clone = originclone +=' john'console.log(origin); // hiconsole.log(clone); // hi john참조에 의한 전달(Copy by Reference)참조에 의한 전달원본 데이터와 복사본의 데이터가 같이 제어 됨const newObj = { name :'john'}originObj.name = 'Mike'console.log(originObj.name); // Mikeconsole.log(cloneObj.name); // Mikeconsole.l..

데이터 분류1. 원시 타입(Primitive Type)원형데이터로 더 이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태Boolean, String, Number, Undefined, Null, Symbol2. 객체 타입(Object Type) 참조데이터로 기본 타입을 제외한 모든 타입이 포함원형 데이터가 아닌 다른 데이터를 참조하는 데이터Array, Object, Date...데이터 타입 종류타입설명number숫자로 된 자료형- 정수와 실수 구분없이 모든 숫자 자료형을 number로 간주string문자열로 된 자료형boolean- true: any other value- false : 0, null, undefined, NaNnull명확하게 빈 값인 경우 ※ type은 object 에 ..

배열자바스크립트의 기본 데이터 타입 객체의 한 종류[] 안에 데이터 입력배열의 요소는 자료형에 제한이 없음 (boolean, 숫자, 문자열, 배열, 객체 등을 가질 수 있음객체와는 달리 데이터를 요소로만 저장하는 형태 배열 초기화// 빈 배열const arr1 = []// 데이터가 있는 배열 정의const arr2 = [2,3,1]// 배열 안에 배열 정의const arr3 = [[11,22], [33,44]]// 배열 안에 객체 정의const arr4 = [{name :'a'}, {name:'b'}]// new Array 활용 (단, 인수를 1개 정의 시 배열에 넣을 수 있는 데이터 수가 결정됨)const arr5 = new Array('1', '2')배열 요소 접근메서드설명반환배열[해당 요소의 ind..

숫자 표현 자바스크립트의 기본 데이터 타입 중 하나로 정수와 소수를 사용하며, 타입은 Number 16진수, 10진수, 8진수, 2진수의 표현이 가능 최대 표현 범위가 정해져 있다 MIN_SAFE_INTEGER ~ MAX_SAFE_INTEGER를 벗어난 값은 계산 결과에 오차가 발생' 정수 결과 설명 Number.MAX_VALUE 1.7976931348623157e+308 최대 정수 값 Number.MIN_VALUE 5e-324 최소 정수 값 Number.MAX_SAFE_INTEGER 9007199254740991 다룰 수 있는 최대 정수값 Number.MIN_SAFE_INTEGER -9007199254740991 다룰 수 있는 최소 정수값 부정확한 결과로 반환 되는 수 계산 시 부적절한 결과로 반환되는..

클래스 객체 지향 프로그래밍언어에서 객체를 효율적으로 사용가능하게 하는 문법 추상화 : 프로그램에서 필요한 요소만을 사용하여 객체를 표현하는 것 객체 지향 프로그래밍 : 객체들을 정의하고 객체를 활용하여 프로그램을 만드는 것 인스턴스(객체) : 클래스를 기반으로 생성한 객체 클래스 생성 클래스를 기반으로 만든 객체를 기본적으로 인스턴스(객체)라고 부름 // [형식] 클래스 생성 class 클래스명 { // 클래스명은 대문자로 시작 } // 클래스 생성 [형식] const temp = new 클래스명 생성자 (Constructor) 객첼를 초기화하고 클래스의 속성을 설정 객체가 클래스로 부터 생성될 때 자동으로 호출 생성자 이름은 항상 constructor로 정의 생성자의 주요역할 1. 객체 초기화 : 클..

속성 존재 여부 확인 객체에 없는 속성 접근 시 undefined가 리턴 되므로 해당 조건을 통한 존재여부 확인 가능 특정 속성이 false로 반횐될 수 있는 값(0, false,빈 문자열)이 아닐 떄에는 단순 조건문 처리로 처리 const person = { name: 'John', age: 20, hobby: '', }; person.gender === undefined ? console.log('속성 존재하지 않음') : console.log('속성 존재'); // false로 반환될 수 있는 경우를 대비한 전제한 상태로 조건 처리 person.hobby || console.log('속성존재') // false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제가 있을 시 기본 속성을 지정해둠 pe..