Study JavaScript

1. 'Script' tag "script" 태그를 이용하면 JavaScript을 HTML 문서 대부분의 위치에 삽입할 수 있다. 2. 외부 스크립트 2-1. js의 코드의 양이 많은 경우 js의 코드의 양이 많은 경우 파일로 따로 나누어 저장이 가능하며 src

자료형 Javascript에서 값은 항상 문자열이나 숫자형 같은 특정한 자료열에 속한다. 기본적으로 8가지의 자료형이 있다. Javascript의 변수는 자료형에 관계 없이 모든 데이터일 수 있는데, 어떤 순간에는 문자열, 다른 순간엔 숫자가 될 수 있다. 이처럼

※ 코로나 감염으로 인하여 몸상태가 좋지 않아 그동안 스터디에 참여하지 못했고 오늘 다시 재개했습니다. alert, prompt, confirm 1. alert 사용자가 확인(ok)버튼을 누를 때 까지 메세지 창이 떠있다. 2. prompt 사용자에게 보여줄

if( ) : ( ) 안에 들어가는 조건이 ture이면 코드가 실행된다.복수의 문을 실행하고 싶으면 중괄호{ } 를 사용한다.이때 boolean형 변환으로 인하여 0, ""(빈 문자열), null, undefined, NaN은 false가 된다.이 외의 값은 boole

'??' (nullish 병합 연산자) 는 짧은 문법으로 여러 피연산자 중 그 값이 "확정(할당)되어 있는 변수"를 찾을 수 있다.a ?? b : a가 null도 undefined도 아니면 a, 그 외의 경우는 b이를 '??'없이 동일한 코드로 표현 한다면 다음과 같다

while 반복문의 문법은 다음과 같이 사용할 수 있다.condition(조건)이 ture이면 반복문에 본문에 있는 코드가 실행된다.다음 예제는 i < 3 을 만족할 동안 i를 출력해주는 코드이다.위의 코드에서 반복문 본문이 총 3번 반복하는 것을 알 수 있다.아

복수의 if문은 switch문으로 대체할 수 있다.switch문은 하나 이상의 case문으로 구성되며 default는 필수가 아니다.코드의 진행 과정변수 x의 값과 첫 번째 case의 value1를 일치 비교 후, 두 번째 case의 value2와 비교한다. case의

프로그램을 구성하는 주여 구성 요소이다.함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러번 호출하여 사용이 가능 하다. 함수는 데이터이다.작성한 function_name()을 사용하여 호출하면 함수 본문이 실행된다.지역 변수(local variable) :

주요 코드 흐름 중간에 독립적인 구문 형태로 존재한다.실제 실행 흐름이 해당 함수에 도달했을 때 함수 실행이 가능하다.함수 선언은 정의되기 전에도 호출이 가능하다.(호이스팅 가능)표현식이나 구문 구성 내부에 생성, "=" 같은 할당 표현식을 사용한다.함수 선언 전에

※과제 이슈로 인해 공부를 많이 못했습니다

// 참조에 의한 객체 복사 // 원시형과 객체의 차이는 참조에 의해 저장되고 복사된다는 것이다. // 원시형은 값 그대로 저장, 할당되고 복사된다. // 원시형: 아래의 예시를 실행하면 두 개의 독립된 변수에 각각 문자열이 저장된다.

메소드는 객체 프로퍼티에 할당된 함수를 의미한다. 메소드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.this는 객체를 나타내며 정확하게는 메소드를 호출할 때 사용된 객체를 나타낸다.this의 값은 동일한 함수라도 다른 객체에서 호출했다면 this가 참

생성자 함수 이름의 첫 글자는 대문자로 시작한다(Pascal case)반드시 new 연산자를 붙여 실행한다.new를 써서 함수를 실행하면 아래와 같은 알고리즘이 동작한다.1\. 빈 객체를 만들어 this에 할당한다.2\. 함수 본문을 실행한다. this에 새로운 프로퍼

// # 심볼형 // ## 심볼: 유일한 식별자를 만들고 싶을 때 사용한다. // 심볼을 만들 때, 심볼 이름이라 불리는 설명을 붙일 수 있고 디버깅 시 아주 유용하다. // 심볼은 유일성이 보장되는 자료형이기 때문에 설명이

원시 값은 객체가 아니다.원시 값: string, number, bigint, boolean, symbol, null, undefined직접 입력e를 사용: e는 왼쪽의 수에 e 오른쪽에 있는 수 만큼의 10의 거듭제곱을 하는 효과가 있다.16진수: 0x8진수: 0o2

자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없으며, 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장된다.작은 따옴표('')큰 따옴표("")백틱(\`\`): 표현식을 ${...}으로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식

다음과 같은 두 가지 방법으로 빈 배열을 만들 수 있다.보통은 두 번째 방법으로 배열을 선언하며 대괄호 안에 초기 요소를 넣어주는 것이 가능하다.각 배열 요소엔 0부터 시작하는(zero-based) index(숫자)가 매겨져 있다. 이 숫자들은 배열 내의 순서를 나타낸

배열의 맨 앞이나 끝에 요소(item)를 추가하거나 제거하는 메소드는 12일에 이미 학습한 바 있다.arr.push(...items): 맨 끝에 요소 추가arr.pop(): 맨 끝 요소 제거arr.shift(): 맨 앞 요소 제거arr.unshift(...items):

반복 가능한 객체를 의미하며 이는 배열을 일반화한 객체이다.iterable 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있다.대표적인 iterable은 배열과 문자열이며 이 외에도 다수의 내장 객체가 반복이 가능하다.직접 iterable객체를 만들어

Map 맵(Map)은 key가 있는 data를 저장한다는 점에서 "객체"와 유사하다. "map"은 key에 다양한 자료형을 허용한다는 점에서 차이가 있다. map에는 다음과 같은 주요 메소드와 프로퍼티가 있다. > new Map() – 맵을 생성 map.set(k

"가비지 컬렉션"에서 배웠듯이 javascript엔진은 도달 가능한 값(추후 사용될 가능서잉 있는)을 메모리에 유지한다.자료구조를 구성하는 요소도 자신이 속한 자료구조가 메모리에 남아있는 동안 대개 도달 가능한 값으로 취급되어 메모리에서 삭제되지 않는다.객체의 프로퍼티

keys(), values(), entries()를 사용할 수 있는 자료구조는 다음과 같다.MapSetArray일반 객체에도 순회 관련 메소드가 있긴 한데, keys(), values(), entries()와는 문법에 차이가 있다.일반 객체엔 다음과 같은 메서드를 사용

객체와 배열은 javascript에서 가장 많이 쓰이는 자료구조이다.개발을 할 때 함수에 객체나 배열을 전달해야 하는 경우가 생기는데 가끔 이 객체나 배열의 전체 데이터가 아니라 일부 데이터만 필요한 경우가 생긴다.이럴 때 객체나 배열을 변수로 "분해"할 수 있게 해주

날짜를 저장할 수 있고, 날짜와 관련된 메소드도 제공해주는 내장 객체 Date에 대해 알아보자.Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도 등으로 활용할 수 있다.new Date()를 호출하면 새로운 Da

객체를 문자열로 전환을 할 때 toString메소드를 사용한다. 그런데 개발 과정에서 해당 객체에서 프로퍼티가 추가되거나 삭제, 수정이 될 수 있다.이렇게 되면 매번 수정을 해야하기 때문에 번거로울 것이다.javascript에서는 이런 문제를 해결해주는 방법이 있는데

문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있다. 이때 함수가 자기 자신을 호출할 수도 있는데 이를 재귀라고 부른다.간단한 예시로 부터 재귀에 대해 알아보자. x를 n제곱해주는 함수 pow(x, n)을 만들어 보자.이를 구현하는 방법은 두 가지가 있

함수 정의 방법과 상관 없이 함수에 넘겨주는 인수의 개수엔 제약이 없다.아래의 예시를 보면함수를 정의할 때는 인수를 2개만 받도록 하고, 실제 함수 호출 시 이보다 더 많은 '여분의' 인수를 전달했지만 에러는 발생하지 않았다. 단, 반환 값은 처음 2개의 인수만을 사용

변수의 유효범위와 클로저 변수 var: var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프다. var의 선언은 함수가 시작되는 시점에서 처리가 된다. 예전에 자주 쓰이지만 현재는 let과 const를 사용한다. let: let으로 선언한 변수는 const:

변수 var는 let과 유사하다. 둘이 바꿔써도 큰 문제 없이 동작한다.하지만 var는 초기 javscript 구현 방식 때문에 let과 const로 선언한 변수와는 다른 방식으로 동작한다.오래된 스크립트에서 var를 만난다면 let으로 바꿔줘야 할 테고, 바꿔줄 경우

함수는 호출이 가능한 "행동 객체"이다. 함수를 호출 및 객체처럼 함수에 프로퍼티를 추가·제거하거나 참조를 통해 전달할 수 있다.함수 객체엔 몇 가지 쓸만한 프로퍼티가 있다."name"프로퍼티를 사용하면 함수 이름을 가져올 수 있다.함수 객체에 이름을 할당해주는 로직에

함수 표현식과 함수 선언문 이외에 함수를 만들 수도 있는 방법이 하나 더 있다. 잘 사용하는 방법은 아니지만, 이 방법 외에는 대안이 없을 때 사용한다.new Function 문법을 사용하면 함수를 만들 수 있다.새로 만들어지는 함수는 인수 arg1...argN과 함수

setTimeout에 메소드를 전달할 때처럼, 객체 메소드를 콜백으로 전달할 때 ’this 정보가 사라지는’ 문제가 생긴다.이 문제를 어떻게 해결할까?객체 메소드가 객체 내부가 아닌 다른 곳에 전달되어 호출되면 this가 사라진다.setTimeout을 사용한 아래 예시

화살표 함수 화살표 함수는 단순히 함수를 짧게 쓰는 용도로 사용되지 않는다. javascript에서는 함수를 생성하고 그 함수를 어딘가에 전달한다. ex) arr.forEach(func), setTimeout(func) 등... 어딘가에 함수를 전달하게 되면 함수의

객체에는 프로퍼티가 저장되고, 이는 key-value쌍으로 이루어진 것으로 우리는 알고 있었다.오늘은 객체 프로퍼티의 추가적인 부분들인 추가 구성 옵션 몇 가지와 getter, setter함수를 만드는 법을 알아보자!객체 프로퍼티는 value와 함께 플래그(flag)라

개발을 하다 보면 기존에 있는 기능을 가져와 확장해야 하는 경우가 생긴다.사람에 관한 프로퍼티와 메소드를 가진 user라는 객체가 있는데, user와 상당히 유사하지만 약간의 차이가 있는 admin과 guest 객체를 만들어야 한다고 가정해 보자. 이때 user의 메소

어제 공부했던 proto는 브라우저를 대상으로 개발하고 있다면 다소 구식이기 때문에 더는 사용하지 않는 것이 좋다고 한다. 표준에도 관련 내용이 명시되어있다. 대신 아래와 같은 최신 메소드들을 사용하는 것이 더 좋다. Object.create(proto, [desc

prototype 프로퍼티는 javascript 내부에서도 광범위하게 사용된다. 모든 내장 생성자 함수에서 prototype 프로퍼티를 사용한다.빈 객체가 있다고 가정해보자"\[object Object]" 문자열을 생성하는 코드는 어디에 있을까? toString 메소드

javascript에서 함수는 이곳저곳 전달될 수 있고, 객체로도 사용될 수 있다. 이번 시간에는 함수 간에 호출을 어떻게 포워딩(forwarding) 하는지, 함수를 어떻게 데코레이팅(decorating) 하는지에 대해 알아보자!CPU를 많이 잡아먹지만 결과는 안정적

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀이며, 객체를 정의하기 위한 상태(멤버 변수)와 메소드(함수)로 구성된다.실무에서는 동일한 종류의 객체를 여러 개를 생성해야 하는 경우가 잦다.이럴 때 new 연산자와 생성자

클래스 상속을 사용하면 클래스를 다른 클래스로 확장할 수 있다.기존의 기능을 토대로 새로운 기능을 만들 수 있다는 것이다.먼저 Animal이라는 클래스를 만들어 보자.객체 animal과 클래스 Animal의 관계를 그림으로 나타내면 아래와 같다.또 다른 클래스 Rabb

super는 먼저 앞에서 배운 내용만으론 super가 제대로 동작하지 않는다.내부에서 super는 ‘어떻게’ 동작할까?. 객체 메서드가 실행되면 현재 객체가 this가 된다. 이 상태에서 super.method()를 호출하면 엔진은 현재 객체의 프로토타입에서 metho

property가 아닌 클래스 함수 자체에 메소드를 설정할 수도 있다.이런 메소드를 "정적(static) 메소드"라고 부른다.정적 메소드는 아래와 같이 클래스 안에서 static키워드를 붙여 만들 수 있다.정적 메소드는 메소드를 프로퍼티 형태로 직접 할당하는 것과 동일

객체 지향 프로그래밍 중에서 가장 중요한 원리 중 하나는 '내부 인터페이스'와 '외부 인터페이스'를 구분 짓는 것이다.프로그래밍에서 특별한 문법과 컨벤션을 사용해 안쪽 세부사항을 숨긴다.객체 지향 프로그래밍에서 프로퍼티와 메소드는 두 그룹으로 분류된다.내부 인터페이스(