[javascript] 기본 (모던 JS정리)

모던 js 정리

https://ko.javascript.info/

​

자바스크립트 엔진

1. V8 chrome, opera
2. Spider-monkey - fire fox
3. Trident or chakra -IE(버전마다 다름)
4. chakraCore -Microsoft Edge
5. squirrelFish-Safari

​

자바스크립트와 함께 쓸수있는 언어들

1. Coffe script : 자바스크립트를 위한 syntactic sugar

1. 1. Type script :ms가 개발, 개발을 단순화하기위한 목적의 언어
   2. Flow :focebook이 개발, 단순화 위함이나 타입스크립트랑 다른방법
   3. Dart :브라우저 아닌 환경에서 동작하는 고유엔진을 가진언어, 모바일앱과같은 내용작동, google이 개발

​

-자바스크립트 추가되는 기능을 브라우저가 지원하는지 확인할 때

http://caniuse.com

​

-자바스크립트 기능목록

https://kangax.github.io/compat-table

​

-자바스크립트 명세서

https://tc39.es/ecma262/

​

Mozilla 재단이 운영하는 MDN JavaScript Reference에 예제와 함께 정보를 제공한다. 필요한 용어를 검색할 때, "MDN [원하는 용어]" 를 검색해보는 것도 좋다.

* 비슷한 사례로 MSDN이 있다.(Microsoft에서 운영)

​

개발자는 크롬과 파이어폭스 브라우저를 선호 (dev tool좋아서)

​

<script>태그의 속성

1. Type : html4에선 스크립트 태그 안에 type속성을 꼭 적어야 했음 (현재는 의미도 바뀌고 필수아님)
2. Language : 자바스크립트가 기본언어 되면서 쓸필요 없어진 속성

​

외부 스크립트 연결하기 (여러개 연결가능)

<script src=“”></script>

ㄴsrc에는 절대경로, 상대경로, url 사용가능

ㄴ외부 연결하는것이 브라우저 성능,속도, 트레픽 절약 상 좋음

(스크립트를 캐시에 저장해서 사용하기 때문)

ㄴ외부스크립트로 작성한 태그 내부에 코드 작성시 실행할 수 없음

​

Statement (문)

ㄴ줄바꿈이 있으면 세미콜론으로 자동간주되어 생략가능

(항상 그러한 것 아님)

ㄴ자바스크립트가 대괄호 [...]앞에는 세미콜론이 있다고 가정하지 않음 (자동삽입 발생하지 않음)

ㄴ결과적으로 세미콜론은 항상 사용하는 것이 안전하다.

ㄴ주석이 길어도 문제 되지 않음 (통상 배포전에 코드 압축하는 도구 사용시 주석삭제해주는 경우가 많아서)

​

엄격모드 (“use strict”나 ‘use strict’로 사용)

ㄴ기존에 오랫동안 사용했던 ECMAscript5(ES5)에 새로운 기능들이 추가되었는데 새로 추가된기능들은 ES5에서는 활성화 되지 않았음

(호환성문제 발생)

ㄴ이를 수정하고 변경사항들이 활성화 되도록, 스크립트 전체가 최근 방식으로 동작할수있도록 하는 방법

ㄴ스크립트 최상단에 지시해야함 (엄격모드 코드 아래코드부터 실행됨)

ㄴ엄격모드를 취소할 수 없음 (이전방식으로 되돌릴수 없음 )

ㄴ브라우저 콘솔에는 엄격모드가 적용되어 있지 않음

ㄴ콘솔에서 엄격모드 이용방법

(Use strict입력후 shift+enter키눌러서 스크립트 입력하기 /

콘솔창에 입력 불가시 코드를 function으로 감싸서 입력하기)

ㄴ클레스와 모듈 사용시 ‘use strict’쓰지 않아도 자동으로 엄격모드로 작동함

​

​

변수

데이터를 저장할때 쓰이는 ‘이름이 붙은 저장소’ 로 온라인쇼핑몰의 판매중인 상품이나 장바구니 등의 정보, 채팅 애플리케이션의 사용자 정보 혹은 메시지등의 정보 저장하는 용도로 사용함

**재할당 재선언 가능 0

​

1. 저장소의 이름 선언을 한줄에 여러개 할수있긴 하지만 권장하지 않음
2. 가독성을 위해 한줄에는 하나의 변수 작성이 좋음
3. 저장소의 이름선언과 동시에 데이터 할당가능

Ex.) let user = ‘hyosun’;

1. 쉼표로 한번에 선언할수있음

Ex.) let user = 'John'

, age = 25

, message = 'Hello';

1. 할당했던 데이터값을 변경할수있으나 변경시 이전에 저장된 데이터값은 제거됨
2. 변수 두 개를 선언하고, 한 변수의 데이터를 다른 변수에 복사할 수있음

Ex.) let Hello = 'Hello world!';

let message;

message = Hello; //여기서의 hello는 변수로 선언된 헬로를 말함

// 이제 두 변수는 같은 데이터를 가집니다.

alert(Hello); // Hello world!

alert(message); // Hello world!

1. 변수를 두번선언하면 에러가 발생함

Ex.)let message = "This";

let message = "That"; //message변수 두번 선언함>문법상에러

1. 함수형언어(대표적으로 스칼라scala,얼랭erlang)는 변수로선언된 값!변경을 금지하고있음 (선언된 저장소에 값이 저장되면 영원히 그 값을 주지하기때문에 다른 값저장을 원하면 새로 변수를 선언해야 함)

* var는 let보다 오래전부터 사용하던 변수(미묘한 차이있지만 큰차이는 아님)

​

​

​

변수 명명 규칙

1. 변수명에는 오직 문자와 숫자,$와_만 들어갈수있음(띄어쓰기금지)
2. 첫글자는 숫자로 선언 불가
3. 대소문자는 구별되어 변수명 apple과 변수명 Apple은 서로 다른 변수이다.
4. 알파벳을 사용하는 것을 권장한다. (알파벳외에도 사용은 가능하나 권장하지 않음)
5. 예약어 목록에 있는 단어는 변수명으로 사용불가

(예약어 예시: let, class, return, function)

1. 변수는 변수명이 선언되어있어야 사용가능

(let을 이용한 선언없이 단순히 값을 할당해 변수로 생성은 가능하나 과거스크립트와 호환되지 않는 방법으로 권장하지 않음)

​

상수(constant)

변화하지 않는 변수를 선언할 때 상수 const를 사용함

1. 값이 절대 변하지 않음을 의미함

*재할당 할 수 없기 때문에 상수를 변경하려고 하면 에러발생함

1. 위 속성을 이용하여 값이 변경되는것을 방지하기 위해서는 상수로 선언하는 것이 좋음
2. 대문자 상수는 ‘하드 코딩한’ 값의 별칭을 만들 때 사용하면 좋음

(실행 전에 이미 값을 알고 있고, 코드에서 직접 그 값을 쓰는 경우에 사용 >생일은 변하지 않기때문에 대문자 상수 쓰는게 좋고, 나이같이 매년 변하는 내용은 변수선언이 좋다.)

1. 이전에 선언되었던 변수를 재사용하는것보다 새로 변수를 선언하는 것이 좋음 (기존 변수 재사용하면 디버깅에 엄청난 시간을 쏟아야 함)

​

​

동적 타입 언어 (dynamically typed)

: 자료 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀수 있는 언어

​

자료형

1. 숫자형 (number type) : 정수 및 부동 소숫점 숫자를 나타냄 (일반적인 숫자외에 Infinity, -Infinity, NaN과 같은 특수 숫자값도 포함됨 / 어떤 숫자든 0으로 나누면 무한대얻을수있음)
2. BigInt :길이에 상관없이 정수를 나타낼수있음 (암호관련작업같이 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업해야할때 필요)
3. 문자형 (String) :문자열은 따옴표로 묶음 (“큰따옴표”, ‘작은따옴표’, ₩백틱₩) (백틱안에 ${}넣어서 원하는 변수나, 연산을 넣을수있다.)
4. Boolean (논리타입) : true와 false 두가지 값밖에 없는 자료형
5. Null : 어떤 자료형에도 속하지 않는 값으로 존재하지 않는(nothing), 비어있는(empty), 알수없는(unknown)값을 나타냄, 개발자가 설정하는 값
6. Undefined : 값이 할당되지 않는 상태를 나타냄 (변수 선언하고 값할당안했을때 해당변수는 undefined할당됨, 개발자가 변수에 정의할수있지만 null을 사용하는 것이 바람직함 (값이 할당되지 않는 변수의 초기값을 위해 예약어로 남겨두는 편이 좋음)
7. Object (객체) : 객체는 원시 자료와 다르게 데이터 컬랙션, 복잡한 개체를 표현할수 있다. (원시(promitive)자료 : 문자열이든 숫자든 한가지만 표현할수있는 자료형)
8. Symbol (심볼) : 객체의 고유한 식별자를 만들때 사용함

​

​

Typeof

​

위 자료형은 typeof 연산자를 통해 인수의 자료형을 알수있음

​

Typeof 대입, typeof(‘대입’) 두가지 모두 사용가능

​

typeof undefined // "undefined"

​

typeof 0 // "number"

​

typeof 10n // "bigint"

​

typeof true // "boolean"

​

typeof "foo" // "string"

​

typeof Symbol("id") // "symbol"

​

typeof [] //object;

​

typeof new String()//object;

​

typeof NaN//number

​

​

typeof Math // "object" (1)Math는 수학 연산을 제공하는 내장 객체이므로 "object"가 출력

​

typeof null // "object" (2) object를 반환, 진짜로 null이 object는 아니고, js 언어자체의 오류임

​

typeof alert // "function" (3)함수면 "function"을 반환함/ 그런데 '함수’형은 따로 없고, 함수는 객체형에 속함/ 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호환성 유지를 위해 남겨진 상태

​

alert, prompt, confirm

ㄴ브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능

ㄴ브라우저에서 제공하는 사용자와 상호작용할수있는 3가지 함수

​

Alert : 모달창(model window)을 띄워 사용자가 확인버튼을 누를때까지 메시지를 보여주는 모달창을 계속 떠있게 함

alert("Hello");

​

Prompt : 메시지와 입력필드(input field), 확인, 취소 버튼이 있는 모달창을 띄움 (사용자가 입력필드에 기재한 문자열을 반환함)

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`);

​

Confirm : 메시지와 확인 취소 버튼이 있는 모달창을 보여줌 (확인버튼은 true, 취소버튼은. False를 반환)

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss );

​

​

​

형변환

​

문자형으로 변환 :

1)String();생성자 함수 이용

2)let obj = (1).toString(); //이용하면 “1”으로 출력

3)더하기 연산자 이용 (빈문자열을 더해주면됨)

let str = 1 +’’; //숫자1아닌 “1”로 출력됨

​

숫자형으로 변환 :

1)Number()생성자 함수이용

2).parseInt();정수만을 반환, .parseFloat();실수로 반환

(다만 문자도 NaN, 불린도 NaN처리되어 숫자형됨)

3)더하기 혹은 곱하기 연산자 이용

​

3 -1)더하기연산자 앞에 아무것도 넣지 않아야함

console.log(+ '문자열'); // NaN

console.log(+ true); //1 number

console.log(+ false); //0 number

console.log(+ ''); // 0 number

console.log(+ '-1'); // -1 number

​

3 -2)곱하기 연산자는 *1만을 사용 > 원래값을 돌려줌

console.log('0'*1); //0 number

console.log('-1.2'*1); //0 number

console.log(true*1); //1 number

console.log(false*1); //0 number

console.log('문자열'*1); //NaN number

​

**숫자형 변환시 아래 규칙을 따른다

전달받은 값	형 변환 후
undefined	NaN
null	0
true / false	1 / 0
string	전달받은 문자열을 “그대로” 읽되, 처음과 끝의 공백을 무시합니다. 문자열이 비어있다면 0이 되고, 오류 발생 시 NaN이 됩니다.

​

3.boolean으로 변환:

​

1) Boolean()생성자 함수 >이렇게 쓰는 경우는 많지 않음

console.log(Boolean('a')); //논리 타입 true

console.log(Boolean('')); //false

console.log(Boolean(0)); //false

console.log(Boolean(1)); //true

console.log(Boolean(50)); //true

console.log(Boolean(NaN)); //false

console.log(Boolean(null)); //false

console.log(Boolean(undefined)); //false

console.log(Boolean([])); //true

console.log(Boolean({})); //true

​

**불린으로 변환시 아래 규칙을 따른다

전달받은 값	형 변환 후
0, null, undefined, NaN, ""	false
그 외의 값	true

문자열 "0"과 " "같은 공백은 불린형으로 변환 시 true가 됩니다.

​

​

​

​

JS수학연산자

• 덧셈 연산자 +,
• 뺄셈 연산자 -,
• 곱셈 연산자 *,
• 나눗셈 연산자 /,
• 나머지 연산자 %,
• 거듭제곱 연산자 **

​

할당연산자

무언가를 할당할 때 쓰이는 =도 연산자입니다. 이 연산자는 할당(assignment) 연산자라고 불리는데, 우선순위는 3으로 아주 낮습니다.

​

복합할당연산자

변수에 연산자를 적용하고 그 결과를 그 변수에 다시 저장하는 것

+= , -= ,*= ,/= ,%= ,**=

​

​

증가 감소 연산자

​

-증가(increment) 연산자 ++는 변수를 1 증가시킵니다.

​

-감소(decrement) 연산자 --는 변수를 1 감소시킵니다.

​

• counter++와 같이 피연산자 뒤에 올 때는, '후위형(postfix form)'이라고 부릅니다. (출력값과 실제값은 1의 차이를 가짐)

​

​

• ++counter와 같이 피연산자 앞에 올 때는, '전위형(prefix form)'이라고 부릅니다. (출력값과 실제값 같음)

​

​

비트 연산자

비트 연산자(bitwise operator)는 인수를 32비트 정수로 변환하여 이진 연산을 수행 (웹개발시 잘안씀, 암호 다뤄야 할때는 써야함)

​

쉼표 연산자

쉼표로 구분되어있지만 마지막 값만을 반환함 (잘안씀)

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (3 + 4의 결과)

​

산술 연산자

=(대입 혹은 할당), +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지값), **(거듭제곱)

ㄴ대부분 사칙연산의 방식을 따름 (+,-만 있을때는 왼쪽으로 오른쪽으로 순차 연산하고 곱하기 나누기있다면 먼저 연산후 더하기 빼기 나중연산됨 ,()가 있는 경우 ()먼저 연산후 나머지 연산함)

​

​

비교 연산자

왼쪽의 피연산자 기준, 비교연산하여 불린(true1 or false0)으로 반환

​

<, >, ==(같다), <=(작거나 같다), <=(크거나 같다), !=(같지 않다), ===(완전히 같다), !==(완전히 같지 않다)

​

ㄴ=== (완전히 같다)의 경우 데이터 타입까지 비교함

주로 조건문에서 많이 사용되며 결과 값은 true(1)와 false(0)로 출력

​

** 문자열의 비교연산시

1. alert( 'Z' > 'A' ); // true 첫글자부터 순차적으로 알파벳 순서를 숫자로 치환하여 비교
2. alert( 'Glow' > 'Glee' ); // true 첫글자 같으면 다음글자계속 비교
3. alert( 'Bee' > 'Be' ); // true 알파벳순서가 계속 같으면 글자길이 긴것이 많음으로 처리됨

Cf.)대문자 'A'와 소문자 'a'를 비교했을 때 소문자 'a'가 더 큰것으로 처리

​

** 다른데이터 타입의 값 비교

1. alert( '2' > 1 ); // true, 숫자열문자형은 숫자로 자동변환되어 비교됨 ‘2’는 2로 변환되어 비교됨
2. alert( '1' === 1 ); // false, ===는 데이터 타입까지 비교함
3. alert( true == 1 ); alert( false == 0 ); // true, true는1로, false는 0으로 자동변환되어 비교함

​

일치연산자

1. 동등 연산자(equality operator) ==은 0과 false, ‘’과 false를 구별하지 못함

alert( '' == false ); // true

alert( 0 == false ); // true

1. 구분을 위해서는 일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교할 수있음 (데이터 타입까지 비교하는 엄격비교)

alert( 0 === false ); // false

1. Null;과 undefined;비교하기

ㄴalert( null === undefined ); // false, 데이터타입달라서

ㄴalert( null == undefined ); // true, 엄격비교 안하면 같다고 뜸

ㄴ산술 연산자나 비교연산자로 비교하면 null은 0, undefined는 NaN으로 자동 변환되며 이는 모두 숫자형임

​

alert( null > 0 ); // (1) false, null을 0으로 자동변환

alert( null == 0 ); // (2) false, 구별못함

alert( null >= 0 ); // (3) true, null을 0으로 자동변환

​

alert( undefined > 0 ); // false ,undefined가 NaN으로 변환되는데(숫자형으로의 변환), NaN이 피연산자인 경우 비교 연산자는 항상 false를 반환하고 아래도 그와 같은 이유로 false

alert( undefined < 0 ); // false

alert( undefined == 0 ); // false, undefined은 null이랑 같다고 뜨고 그이외의 값과는 같지 않다고 처리됨

​

ㄴ함정을 피하는 방법

• 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의할 것
• 또, undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의할 것

​

조건부 연산자 ‘?’

​

피연산자가 세 개이기 때문에 조건부 연산자를 '삼항(ternary) 연산자’라고 부르기도함

let 변수명 = condition ? value1 : value2; //condition이 참이면 v1실행, 거짓이면 v2 실행됨

ㄴcondition은 괄호() 안넣어도 되지만, 가독성을 위해 쓰는것 권장

ㄴcondition이 비교연산자를 사용한 식이라면 v1과 v2를 적지 않아도 v1은 true를 v2는 false를 반환한다.

let accessAllowed = age > 18 ? true : false; //아래와 동일하게 동작

let accessAllowed = age > 18;

​

다중 ‘?’

let age = prompt('나이를 입력해주세요.', 18);

​

let message = (age < 3) ? '아기야 안녕?' :

(age < 18) ? '안녕!' :

(age < 100) ? '환영합니다!' :

'나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

​

alert( message );

1. 첫 번째 물음표에선 조건문 age < 3을 검사합니다.
2. 그 결과가 참이면 '아기야 안녕?'를 반환합니다. 그렇지 않다면 첫 번째 콜론 ":"에 이어지는 조건문 age < 18을 검사합니다.
3. 그 결과가 참이면 '안녕!'를 반환합니다. 그렇지 않다면 다음 콜론 ":"에 이어지는 조건문 age < 100을 검사합니다.
4. 그 결과가 참이면 '환영합니다!'를 반환합니다. 그렇지 않다면 마지막 콜론 ":" 이후의 표현식인 '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!'를 반환합니다.

​

부적절한 ‘?’ > if대신쓰는것은 가독성에 좋지 않다.

let company = prompt('자바스크립트는 어떤 회사가 만들었을까요?', '');

(company == 'Netscape') ?

alert('정답입니다!') : alert('오답입니다!');

​

물음표 연산자?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어짐.

여러 분기를 만들어 처리할 때는 if를 사용 할 것

​

논리 연산자

ㄴ ||(OR), &&(AND), !(NOT)

1. or연산자 사용하여서 변수 또는 표현식으로 구성된 목록에서 첫 truthy얻기

let firstName = "";

let lastName = "";

let nickName = "바이올렛";

​

alert( firstName || lastName || nickName || "익명"); // 바이올렛;

모든 변수가 falsy이면 "익명"이 출력되었을 것임, 빈객체(‘’)는 false이기 때문에, 다만 1개의 변수에만 실제값이 있어야 정확히 작동가능한 예시

​

1. !(not)

ㄴ값을 역으로 반환함

alert( !true ); // false

alert( !0 ); // true

​

ㄴnot을 두개 연달아 사용(!!)하면 불린형으로 변환 할수있음

alert( !!"non-empty string" ); // true

alert( !!null ); // false

​

​

​

단락 평가 (단락회로평가)

: 논리 연산자의 특성을 이용하여 구문작성

 

- truthy: 참인듯

빈배열[], 빈객체{}

 

- falsy(falsey): 거짓인듯

false, 0, -0(-1,-2), '', null, undefined, NaN...

​

- boolean && 실행 문장, boolean || 실행문장

|| or 연산자

true || 조건 ->왼쪽이 참이면 오른쪽은 실행하지 않음

false || 조건 ->왼쪽이 거짓이면 오른쪽 내용이 반환

 

&& and 연산자

false && 조건 ->왼족이 거짓이면 오른쪽 실행하지 않음

​

false && console.log(`콘솔 앞 왼쪽의 조건이 거짓이면 이 내용은 반환되지 않음`); //많이씀

​

true && console.log(`콘솔 앞 왼쪽의 조건이 참이면 이 내용은 반환됨`); //많이씀

​

​

‘for’ 반복문

​

for (초기값; 범위지정; 증가값) { 실행문;}

​

Ex.)for (let i = 0; i < 3; i++) { // 0, 1, 2가 출력됩니다.

alert(i);}

​

구성 요소
begin	i = 0	반복문에 진입할 때 단 한 번 실행됩니다.
condition	i < 3	반복마다 해당 조건이 확인됩니다. false이면 반복문을 멈춥니다.
body	alert(i)	condition이 truthy일 동안 계속해서 실행됩니다.
step	i++	각 반복의 body가 실행된 이후에 실행됩니다.

​

For문의 초기값란에서 변수선언 된형태를 ‘인라인’변수선언이라고 하고,

for (let i = 0; i < 3; i++) {

alert(i); // 0, 1, 2}

alert(i); // Error: i is not defined

​

For문 밖에서 정의된 변수를 사용하는것도 가능함

let i = 0;

for (i = 0; i < 3; i++) { // 기존에 정의된 변수 사용

alert(i); // 0, 1, 2}

alert(i); // 3, 반복문 밖에서 선언한 변수이므로 사용할 수 있음

for문의 구성요소중 초기값과 증가값은 생략할수있다.

모든 구성요소를 생략하고 구성하면 실행문이 무한 반복됨

for (;;) {

// 끊임 없이 본문이 실행됩니다.}

​

반복문 빠져나오기

1. 조건이 falsy를 만나면 반복문이 종료됨
2. Break;를 통해 빠져나올수있음 (break는 사용자가 아무것도 입력하지 않거나 Cancel버튼을 눌렀을 때 활성화되어 반복문이 중지됨)

<->continue는 전체 반복문을 멈추지 않고, 현재 실행 중인 실행값을 멈추고 반복문이 다음 실행값을 강제로 진행시키도록 함 (현재 반복을 종료하고 다음반복으로 넘어가고싶을때 사용)

for (let i = 0; i < 10; i++) {

​

// 조건이 참이라면 남아있는 본문은 실행되지 않습니다.

if (i % 2 == 0) continue;

​

alert(i); // 1, 3, 5, 7, 9가 차례대로 출력됨

}

​

1. 삼항 연산자 ?에서는 continue;와 break;를 사용할 수 없다.
2. break를 쓸수없는 상황에서는 label (레이블)을 사용할수 있다.

레이블은 반복문 앞에 콜론과 함께쓰이는 식별자로 아래 형식으로 작성함

labelName: for (...) {

...}

위 형식을 활용 해서 outer라는 레이블 안에 반복문을 구성한 예시)

outer: for (let i = 0; i < 3; i++) {

​

for (let j = 0; j < 3; j++) {

​

let input = prompt(`(${i},${j})의 값`, '');

​

// 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.

if (!input) break outer; // (*)

​

// 입력받은 값을 가지고 무언가를 함

}

}

alert('완료!');

​

위 예시에서 break outer는 outer라는 레이블이 붙은 반복문을 찾고, 해당 반복문을 빠져나오게 해줌

​

1. continue 지시자를 레이블과 함께 사용하는 것도 가능합니다. 두 가지를 같이 사용하면 레이블이 붙은 반복문의 다음 실행문이 실행됩니다.

​

​

switch문

​

switch(x) {

case 'value1': // if (x === 'value1')

...

break;

​

case 'value2': // if (x === 'value2')

...

break;

​

default:

...

break;

}

​

case문 안에 break문이 없으면 case조건에 해당하는지 판별후 true가 되어도 멈추지 못하고 다음 케이스로 계속 넘어감

​

switch문은 엄격 비교를 하기때문에 데이터 타입까지 비교가 된다.

​

​

​

while 반복문

: 조건이 참인 동안 반복

​

let 식별자 = 초기값;

while(조건) { <<종료될 수 있는 조건 필요

조건이 만족될때까지의 실행문;

증감식; 이 값이 없으면 초기값으로 무한 반복

}

​

do.. while 문: 반복문

실행문이 먼저 작성되어 조건탐색전(참이든 거짓이든) 무조건 한 번은 실행

 

let 초기값;

do {

실행문;

증감값;

} while(조건)

​

​

함수

​

함수 Function이란?

1. 특정 기능을 실행하기 위한 코드의 집합으로 호출을 통해 재사용가능

2. 객체 자료형중 하나이기 때문에 변수 대입가능

3. 함수는 선언 함수와 익명 함수로 생성가능

​

- 선언함수

: 이름을 가진 함수 선언문

선언함수의 경우 어느 곳에서나 호출 가능

함수명 (); <-함수 호출 calling. 여러번 호출 가능하며 재사용이 목적

function 함수명 (매개변수) {

실행문;

return반환값;

} <-선언함수의 경우 세미클론 생략 가능

Ex.)function getName(){

alert (`이름을 가진 선언 함수`);

}

​

​

- 익명함수

: 이름이 없는 함수 표현식 (변수에 값을 할당하는 것처럼 함수를 변수에 대입)

이름이 없기때문에 변수나 상수에 대입하여 사용.

이름이 없기 때문에 *반드시* 함수를 호출하는 코드보다 먼저 작성되어야 함

const 변수명 = function(){

실행문;

return반환값;

}; <-세미클론 붙여야함

ex.) window.onload = function() {};

const getName = function(){

alert('이름없는 익명 함수');

};

​

변수명 (); <-익명함수 호출. 반드시 함수보다 호출 작성이 나중에 되어야 함

 

-매개변수(parameter, 인수, 인자)

함수 외부에서 내부로의 접근은 매개변수를 통해 전달

 

function num(매개변수1, parameter2, 인수,...) {

실행문;}

​

num(인수);

​

()은 값을 전달하기 위한 통로

​

-1)지역변수 : 함수내에서 선언된 변수 > 함수내에서만 접근가능

-2)외부변수 : 함수 외부에서 선언된변수 > 함수내에서 접근,재할당가능,. 모든 함수에서 접근가능

​

​

-익명함수 표현식에서 매개변수 값이 대입되지 않으면 undefined로 뜸

-함수 호출할때 변수명(매개변수);형태로 적거나 함수선언할때 function(a=100,b)<-a처럼 기본값을 부여하는 방식이 있다.

​

-return키워드

함수안에서 선언된 변수나 값의 경우 외부에서 접근 불가능

리턴 키워드를 이용해 호출한 곳으로 반환

혹은 함수 실행후 결과를 다시얻고자 할 때 사용

혹은 함수 종료를 위해 사용

 

function fn(x) {

실행문;

return; 함수 강제종료하는 키워드로 이 다음 구문은 실행되지 않음

return 반환값; 반환값을 데이터로 반환

​

-화살표 함수

ES6+이상 사용

함수 표현식(익명함수)에서만 사용가능

this, arguments,new 키워드 사용어려움

본문이 여러줄인경우 {} 사용 권장

{}사용시 반드시 return키워드를 통해 반환

 

변수명 = () => 실행문. 매개 변수가 없는 경우 반드시 ()작성

변수명 = para1, para2 => { 매개변수가 있는경우 ()생략가능< 생략거의안함 (가독성때문에 )

실행문;

return 반환값;

​

1)const noName = function(){

console.log(`함수 표현식으로 작성된 익명함수`);

2) -1)에서 표현된 내용을 화살표 함수로 변경

const noName = () =>console.log(`화살표 함수`);

noName();

​

​

객체

ㄴ자바스크립트는 8개의 데이터 타입을 가지는데 그중 7개는 원시형 데이터(string, number, boolean, null. Undefined, symbol), 나머지 한가지는 객체형 데이터(array, function, 정규표현식)이다.

ㄴ객체는 원시형과 달리 다양한 데이터를 담을수 있다.

ㄴ객체는 {…}중괄호를 이용해 만들고 중괄호 안에는 key : value로 구성된 property를 여러개 넣을수있다.

ㄴ이 property에는 모든 자료형이 들어갈수 있다. (key는 property의 이름)

ㄴ상수로 선언된 객체의 property를 변경하는 것은 가능하다.

const user = { name: "John"};

user.name = "Pete"; // 가능

user=ID //불가능

ㄴproperty에 띄어쓰기 있으면 [‘’]안에 작성해야한다.

let user = {};

user["likes birds"] = true; //let key = "likes birds”;와 같음

​

객체엔 다음과 같은 추가 연산자를 사용할 수 있습니다.

• 프로퍼티를 삭제하고 싶을 때: delete obj.prop
• 해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때: "key" in obj
• 프로퍼티를 나열할 때: for (let key in obj)

​

​

자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있습니다.

• Array – 정렬된 데이터 컬렉션을 저장할 때 쓰임
• Date – 날짜와 시간 정보를 저장할 때 쓰임
• Error – 에러 정보를 저장할 때 쓰임
• 기타 등등

​

​

​

빈객체를 만드는 방법

1. 객체 생성자 방식

- let user = new Object();let user = new Object();

​

1. 객체 리터럴 방식

-let user = {};

​

property의 값 읽는 방법 > “점표기법 (dot notation) “

let user = { name: "John", age: 30 };

user.name; (객체이름.key이름)

ㄴ점표기법이 불가능한경우

변수로 선언된 내용을 그대로 가져올때

let user = { name: "John", age: 30};

​

let key = prompt("사용자의 어떤 정보를 얻고 싶으신가요?", "name");

​

alert( user[key] ); //가능

​

​

let key = "name"; //불가능

alert( user.key ) // undefined

​

(계산된 프로퍼티)

​

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

​

let bag = {

[fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.

};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

​

property값을 기존 변수에서 받아와 사용하는 경우 (단축프로퍼티)

​

function makeUser(name, age) {

return {

name: name, > 이런경우에는 name이라고만 써도 동일한 구문됨

age: age,

// ...등등

};

}

​

let user = makeUser("John", 30);

alert(user.name); // John

매개변수와 객체프로퍼티의 값을 일치시켜서 정보 입력하는 방법

​

‘in’ 연산자로 프로퍼티 존재 여부 확인하기

let user = { name: "John", age: 30 };

​

alert( "age" in user ); // user.age가 존재하므로 true가 출력됩니다.

​

대부분의 경우, 일치 연산자를 사용해서 프로퍼티 존재 여부를 알아내는 방법("=== undefined")은 꽤 잘 동작합니다. 그런데 가끔은 이 방법이 실패할 때도 있습니다. 이럴 때 in을 사용하면 프로퍼티 존재 여부를 제대로 판별할 수 있습니다.

프로퍼티는 존재하는데, 값에 undefined를 할당한 예시를 살펴봅시다.

let obj = { test: undefined };

​

alert( obj.test ); // 값이 `undefined`이므로, 얼럿 창엔 undefined가 출력됩니다. 그런데 프로퍼티 test는 존재합니다.

​

alert( "test" in obj );//true출력됨

​

‘for…in’ 반복문 을 객체에 활용하기

​

for..in 반복문을 사용하면 객체의 모든 키를 순회할 수 있습니다. for..in은 앞서 학습했던 for(;;) 반복문과는 완전히 다르며, 객체안에있는 프로퍼티의 수만큼 반복합니다.

​

let user = {

name: "John",

age: 30,

isAdmin: true

};

​

for (let key in user) {

// 키

alert( key ); // name, age, isAdmin

// 키에 해당하는 값

alert( user[key] ); // John, 30, true

}

​

객체 정렬 방식

정수 프로퍼티(integer property)는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬

​

메서드

: 객체 프로퍼티에 할당된 함수

ㄴ메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있음

​

// 아래 두 객체는 동일하게 동작합니다.

​

user = {

sayHi: function() {

alert("Hello");

}

};

​

// 단축 구문 : 일반적인 방법으로 선언했을때와 미묘한 차이가 있기는 함

user = {

sayHi() { // "sayHi: function()"과 동일합니다.

alert("Hello");

}

};

​

궁금했던 용어 : 객체 지향 프로그래밍

객체를 사용하여 개체를 표현하는 방식을 객체 지향 프로그래밍(object-oriented programming, OOP) 이라 부릅니다.

OOP는 그 자체만으로도 학문의 분야를 만드는 중요한 주제입니다. 올바른 개체를 선택하는 방법, 개체 사이의 상호작용을 나타내는 방법 등에 관한 의사결정은 객체 지향 설계를 기반으로 이뤄집니다. 객체 지향 프로그래밍 관련 추천도서로는 에릭 감마의 ‘GoF의 디자인 패턴’, 그래디 부치의 ‘UML을 활용한 객체지향 분석 설계’ 등이 있습니다.

​

구조분해 할당 ==비구조 할당 ==구조분해

: 배열이나 객체의 속성을 해체해서 그 값을 개별 변수에 담을 수 있게 한 표현식

​

1. 일반적인 객체선언방식

const menu = {

coffee: '카페라떼',

price : 4000,

size:'tall',

option: '디카페인'

};

​

const data = {

a:10, b:20, c:30

}

​

const obj ={ x: 10, y: 20};

function sum1(num) {

return num.x + num.y;

}

console.log(sum1(obj));

​

​

1. 위 선언을 구조분해 할당으로 작성

const {coffee, price, size, option} =menu;

​

const {a, b, c} =data;

​

ㄴ구조분해 할당을 해두면 객체이름 생략하고 출력할수 있다.

console.log(coffee, price, size, option); //객체이름 생략가능

ㄴ구조분해 할당을 해두면 아래와 같이 객체의 키네임 변경가능하다.

const {a:aa} =data; //객체의 키변경 가능 a->aa로 변경된 것

​

function sum2 ({x,y}){ //객체의 키 값을 넣으면 구조분해할당

return x+y;

}

console.log(sum1(obj));

ㄴ함수 매개변수 안에 직접 객체 대입

​

​

배열 Array

여러개의 데이터를 담을 수 있는 특별한 변수로 인덱스 번호로 관리.

배열의 값은 변할수 있다.

 

배열작성 -> [0,1,2,3];

배열접근 (읽기) -> 배열명[인덱스번호];

인덱스 번호는 0부터 시작

 

 

1. 리터럴 작성 방식 (표현식)

const a = {};객체

const b = () => {} (함수)

const c = '문자열';

let arr1 = []; // 빈배열 생성. 배열로 초기화

​

1. 생성자 함수로 작성

const arr12=new Array();

console.log(arr2.length); //3 출력됨 > 자리수 3개라는 뜻

​

1. 배열 인덱스 2번의 객체안의 프로퍼티 불러올땐 .key이름

let arr1 = [{id:1, coffee:'아메리카노',},{id:2, coffee:'카페라떼',},{id:3, coffee:'바닐라라떼',}]

console.log(arr1[2].coffee);

​

1. .push()배열의 제일 마지막에 추가

​

1. .unshift()배열의 제일 처음에 추가

​

1. .concat()둘 이상의 배열을 연결(알아두기)

let arr2 =[1,2,3,4];

let arr2_1=arr2.concat(); //[1, 2, 3, 4] 복사본이지만, 아예 새로운 배열로 반환이 됨

let arr2_2 =arr2.concat(40, 50, 60); // [1, 2, 3, 4, 40, 50, 60]

​

​

1. .join()배열 안의 요소를 매개변수로 연결

console.log(arr2.join('/')); //1/2/3/4

console.log(arr2);[1, 2, 3, 4]

​

​

1. .pop()배열의 제일 마지막 요소 추출

console.log(arr2_3.pop()); //고양이

console.log(arr2_3); //[1, 2, 3, 4, '강아지'] <-고양이 위에서 추출됨

​

​

1. .shift()배열의 제일 처음 요소 추출

console.log(arr2_3.shift()); //1

console.log(arr2_3); // [2, 3, 4, '강아지'] <-1 위에서 추출됨

​

​

1. .splice(시작인덱스[, 요소의수, 대체요소])특정항목 삭제 및 대체[]안 내용 은 생략 가능함

let arr3 =[10,20,30,40,50];

console.log(arr3.splice(3)); //[10, 20, 30] 인덱스 3번 부터 추출 삭제

​

​

1. .splice(시작인덱스, 마지막인덱스) 시작 인덱스 부터 마지막 인덱스 전까지 추출

let arr5 = [10,20,30,40,50];

console.log(arr5.splice(0, 3)); //[10, 20, 30]

​

​

1. delete키워드 : 요소의 값만을 제거

​

-Array.prototype.filter(); < js,react많이 사용

: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

 

배열이름.filter(callback(element[, index[, array]])[, 또다른 구조만들기])

 

-callback : 처리할 현재요소, 인덱스, 호출한 배열

세가지 매개변수(element,index,array)를 받음

 

-반환값: 새로운 배열, false인경우는 빈 배열을 반환

​

const arr = [10,20,30,40,50];

const data = [

{id:1, coffee:'아메리카노'},

{id:2, coffee:'카페라떼'},

{id:3, coffee:'바닐라라떼'},

{id:4, coffee:'카페모카'},

{id:4, coffee:'아이스 카페모카'},

{id:5, coffee:'에스프레소'}

];

​

//배열.filter (현재값 => {return 조건})

const output1 = arr.filter(function (num){ //매개변수가 무한정 늘어나지 않도록 반복으로 통해 새로운 배열로 반환

return num >20;

});

console.log(output1); // 20보다 큰 수만 새로운 배열로 반환

​

const output2 = arr.filter(num=>num > 60); //없는것 찾았을때

console.log(output2); //빈배열 반환[]

​

//데이터를 삭제할 때 주로 사용함

const output3 = data.filter(num => num.id !== 2);

console.log(output3); // {id:2, coffee:'카페라떼'},빼고 나머지 다 반환 받기

​

​

배열Array_find

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Array.prototype.find();

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환

그 요소가 없다면 undefined를 반환

​

배열이름.find(callback 함수 [, thisArg])

​

-callback: 콜백함수에서 처리할 현재 요소[,현재 요소의 인덱스,find 함수를 호출한 배열] 매개변수로 element, index, array를 받는다.

​

-반환값 : (주어진 판별 함수를 만족하는) 첫 번째 요소의 값. 그 외에는 undefined.

​

​

const arr = [10,20,30,40,50];

const data = [

{id:1, coffee:'아메리카노'},

{id:2, coffee:'카페라떼'},

{id:3, coffee:'바닐라라떼'},

{id:4, coffee:'카페모카'},

{id:4, coffee:'아이스 카페모카'},

{id:5, coffee:'에스프레소'}

];

​

// const output1 =arr.find(function(){});

const output1 =arr.find(function(num){ //배열안에서 요소의 값을 찾아주는 것

return num === 20;

});

console.log(output1);//배열에서 20을 찾고 첫번째로 찾은 20을 반환함

​

const output2 = arr.find(num => num === 5);

console.log(output2); //undefined 찾고자 하는 5가 없기때문에

​

const output3 = data.find(num => num.id === 3); //num은 매개변수

const output3_1 = data.find(num => num.coffee === '바닐라라떼');

console.log(output3);// {id:3, coffee:'바닐라라떼'}

console.log(output3_1);// {id:3, coffee:'바닐라라떼'}

​

​

const output4 = data.find(num => num.id === 4); // id:4가 두개이지만 아이스 모카가 출력되지 않은 이유는 > 첫번째로 찾은값만을 반환하기 때문이다.

console.log(output4);//{id: 4, coffee: '카페모카'}

​

const output5 = data.find(num => num.id !== 4);

console.log(output5); // {id:1, coffee:'아메리카노'} 처음에 나오는 하나의 값만을 반환하기 때문에 4 아닌 값을 찾기 위해 순차 순회하다가 id:1값만을 반환하는 것

​

Array.prototype.forEach()

배열객체에서만 사용함

배열의 각요소들이 반복될 때마다 함수를 호출함

​

배열명.forEach(callback(처리할 현재요소[, 인덱스[, 배열]]));

-callback: 매개변수로 (현재요소, 현재요소의 인덱스, 호출한 배열)을 입력

-반환 값 : undefined.

​

배열이 다섯개면 다섯개 호출함;

​

const arr = [10,20,30,40,50];

arr.forEach(function(elem, idx){

console.log(`현재요소 : ${elem}, 인덱스 번호 : ${idx}`);

})

​

***변수 in 객체 > 변수안에 객체가 있는지 확인하는 방법

​

for(변수 in 객체) {}

객체 프로퍼티(속성)를 순회할 때 주로 사용.

배열에서도 사용가능하나 배열도 한 객체이기 때문에 불필요한 프로퍼티까지 출력되고 요소의 순서가 보장되지 않음

​

const arr1 = [10,20,30,40]; //객체>배열

for(let idx in arr1) { // 배열의 요소 수만큼 반복한다. (4번반복 예정)

console.log(`인덱스 번호 : ${idx}, 요소의 값 : ${arr1[idx]}`)

}

const arr2 = {

coffee:'바닐라라떼',

price:4000,

size:'tall',

id:1

}

for(let i in arr2) {

console.log(i, arr2[i])

}

console.log(Object.keys(arr2)); //배열의 형태로 키 반환 ['coffee', 'price', 'size', 'id']

console.log(Object.values(arr2)); //배열의 형태로 값 반환 ['바닐라라떼', 4000, 'tall', 1]

console.log(Object.entries(arr2)); //배열의 형태로 객체 반환 [Array(2), Array(2), Array(2), Array(2)] >>안에는 ['coffee', '바닐라라떼']형태 들어있음

​

​

​

const arr = [10,20,30,40,50];

1. 전통적인 방식으로 배열을 돌리는 방법

for(let i =0; i<arr.length;i++){ //항상 요소의 갯수보다 적음

console.log(arr[i]);

}

​

for(변수 of객체){} 반복문, 배열을 다룰 때 주로 사용함

for (let i of arr){ //배열 arr의 요소 수만큼 순회하여 변수 i에 저장

console.log(i); //값으로 변환

}

​

​

Array.prototype.indexOf()

indexOf() 메서드는 배열내에서 찾는 요소의 첫 번째 인덱스번호를 반환

(존재하지 않으면 -1을 반환)

​

배열이름.indexOf(찾을 요소); <함수가 들어가는게 아님

​

반환 값 : 배열 내 요소의 최초의 인덱스 숫자를 반환함. 발견되지 않으면 -1.

​

const coffee = ['아메리카노','카페라떼','바닐라 라떼','카페모카','에스프레소'];

const txt = '카';

const coffee1= ['아메리카노','카페라떼','카페모카']

​

const output1 = coffee.indexOf('바닐라 라떼');

console.log(output1);//2

​

const output2 = coffee.indexOf('바닐라라떼');

console.log(output2);//-1 일치값이 없는경우

​

const output3 = coffee.filter(item => item.indexOf(txt) === -1 );

console.log(output3); //['바닐라라떼', '에스프레소']새로운 배열로 반환 받기

​

const output4 = coffee.filter(item => item.indexOf(txt) !== -1);

console.log(output4);

​

Array.prototype.map()

배열안의 요소를 콜백함수로 실행한 결과로 새로운 배열을 반환

기존배열은 수정하지 않음

배열명.map(callback(현재요소);

-callback : 현재요소, 인덱스, 호출한 배열

-반환값 : callback의 결과를 모은 새로운 배열

​

값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.

const arr1 = [10,20,30,40,50];

arr1.map(function(item, idx){console.log(`인덱스 번호는 ${idx}이고 요소는 ${item}입니다.`)});

​

​

const data = [

{id:1, coffee:'아메리카노'},

{id:2, coffee:'카페라떼'},

{id:3, coffee:'바닐라라떼'},

{id:4, coffee:'카페모카'},

{id:4, coffee:'아이스 카페모카'},

{id:5, coffee:'에스프레소'}

];

data.map((item, idx, arr)=>{ console.log(`인덱스번호 : ${idx}, 커피 : ${item.coffee}`)}); // item이라고 만 쓰면 객체자체를 반환한다.

​

console.log(`=====나열해서 반환하기======`)

const nums = [10, 2, 40, 20, 5, 11];

nums.map((item)=>{ console.log(`배열요소는 ${item*2}입니다.`)});

​

console.log(`=====배열로 반환하기======`)

const sum = num => num*2;

console.log(nums.map(sum));

​

​

즉시 실행 함수 :

함수 선언과 동시에 실행되는 함수, 호출X

한번만 호출되기 때문에 주로 초기화 값으로도 많이 사용.

전역으로 선언되는 것을 방지.

 

​

//선언즉시 실행함수;

//(function 함수이름 (){})();

//(function 함수이름 (){}());

​

콜백 함수 callback function

함수의 매개변수 (parameter) 로 함수를 넘기는 것

​

setInterval(콜백함수, 시간); 지정된 시간마다 함수 반복 실행

clearInterval(); << setInterval();함수 중단. 함수가 호출되지 않게 제거

setTimeout (콜백함수, 시간); //일정 시간 후 한번만 실행

​

...전개 구문

배열 문자열 객체 등을 복사해 반환

키-값의 쌍으로 객체 확장 반환도 할 수있음

뒤에 프로퍼티를 추가하면 갱신되는 성격이 있음

​

함수 호출 : myFunction(...iterableObj);

배열리터럴과 문자열 : [...iterableObj, '4', 'five', 6];

객체 리터럴(ECMAScript 2018에서 추가): let objClone = { ...obj };

​

const arr1 =['아메리카노','라떼','바닐라','에스프레소'];

const arr2 = arr1.concat();//배열이나 객체를 복사해 새로운 배열로 반환

const arr3 =[...arr1];

console.log(arr2); //['아메리카노', '라떼', '바닐라', '에스프레소']

console.log(arr3); //['아메리카노', '라떼', '바닐라', '에스프레소']

​

1. 전개구문 활용하여 배열에 객체추가하기

const data = [

{id:1, coffee:'아메리카노', size: 'tall'},

{id:2, coffee:'카페라떼', size: 'tall'},

{id:3, coffee:'바닐라라떼', size: 'tall'},

{id:4, coffee:'카페모카', size: 'tall'},

{id:5, coffee:'에스프레소', size: 'none'}

];

const data1 = data.concat({id:6, coffee:'아인슈페너'});

const data2 = [...data,{id:7, coffee:'콜드브루'}]

console.log(data1);

console.log(data2);

​

2. if else문으로 전개구문 활용하기

const data3 = data.map(item =>{

if(item.id === 1){return{

...item, coffee: '아이스 아메리카노'

}} else{

return item;

}});

console.log('data3',data3);

/* console.log('data3',data3);의 출력값

0: {id: 1, coffee: '아이스 아메리카노'} <<해당 아이디값의 coffee값만 변경됨

1: {id: 2, coffee: '카페라떼'}

2: {id: 3, coffee: '바닐라라떼'}

3: {id: 4, coffee: '카페모카'}

4: {id: 5, coffee: '에스프레소'} */

​

​

1. 조건? 참: 거짓; 삼항연산자로 전개구문활용하기

const data4 = data.map(item => item.id === 2? {...item, coffee: '아이스라떼'} : item);

console.log('data4',data4);

​

클로저

주변상태(렉시컬환경)의 참조와 함께 번들로 묶인 함수의 조합

1. 전역변수를 줄일수있다. =>다른 사람의 코드와 내 코드를 합쳤을 때 충돌을 막을수있음
2. 비슷한 형태의 코드를 재사용할수있게 된다.
3. For문과 var를 사용할때는 조심해야한다.

ㄴvar는 블럭스코프가 아니기 때문에 함수내부에 지역변수로 선언이 되어도 함수밖에서 접근이 가능하다. =>let을써서 해결가능

ㄴfor문은 외부 함수 안에 작성된 내부 함수 클로저가 ‘비동기함수’인 경우 (setTimeout or setInterval같은 함수), for문이 먼저 실행되어 정확한 값을 얻지 못하는 경우가 있다. =>내부함수 (비동기함수인경우)를 즉시실행함수로 작성하면 정확한 값을 얻을수있다.

​

​

문서 객체 모델DOM(document object model)

ㄴ웹 페이지 내의 모든 콘텐츠를 객체로 나타내줌 (객체는 수정가능함)

ㄴdocument 객체는 페이지의 기본 ‘진입점’ 역할함

ㄴ표준 탐색 메서드. css에서 작성했던 방식 그대로 작성가능

document.querySelector('#title').style.fontSize = '24px';

ㄴ여러 노드를 탐색하나 하나의 노드만 반환. 유사배열로 반환

const links = document.querySelectorAll('a');

ㄴclass속성 노드 탐색. 유사배열 형태로 반환

document.getElementsByClassName('gnb')[0].style.border = '3px solid #000';

​

=>배열명.forEach(callback(), 인덱스 , 배열의값) 배열이 가지고있는 수 만큼 순회함

links.forEach(function (a){;

a.style.textDecoration = 'none';

a.style.color = 'red'; })

​

​

-부모 노드 탐색

ul.parentNode.style.border='3px solid #000';

​

-자식요소 노드 탐색

ul.firstElementChild.style.color='tomato'; //ul의 첫자식요소에게만 적용됨

ul.lastElementChild.style.color='orange’;//ul요소의 마지막 자식 요소에 적용

​

-자식노드 탐색, 대부분의 브라우저에서 html태그사이의 공백, 줄바꿈도 텍스트 노드로 취급

ul.firstChild.style.backgroundColor= '#f890ad'

console.log(ul.firstChild); //#text

console.log(ul.firstChild); //ul태그와 li태그 사이의 공백을 없애면 li로 인식한다.>결국 잘안쓴다는 이야기 ^&^

console.log(ul.firstElementChild); //li

​

-형제 요소 노드 탐색

ㄴ기존 객체 이전의 형제

lis[1].previousElementSibling.style.color='#000'; //나중에 작성된것이 우선순위가짐

ㄴ기준객체 이후의 형제

lis[1].nextElementSibling.style.color='#f89';

​

-태그의 속성값 불러오기

console.log(container.getAttribute('id'));

​

-속성과 값 설정 (태그에 속성 추가 )

container.setAttribute('data-style', 'teal');

​

-속성 존재 확인 > 있으면true, 없으면 false

console.log(container.hasAttribute('data-style')); //true

​

-속성 값 제거

lis[2].removeAttribute('class');

​

-.createElement('');요소를 인자로 전달해 생성만 해줌

const ul = document.createElement('ul');

​

-.append(엘리먼트); 노드 자식의 끝에 추가

document.body.append(ul); //body의 자식으로 추가

ul.setAttribute('id', 'gnb'); // 만든 ul에 li 추가하기

​

-appendChild(엘리먼트); 인자로 전달한 노드를 마지막 자식요소로 DOM tree에 추가

ul.appendChild(lis);

​

-.prepend(노드); 기준 노드 자식의 맨 앞에 추가

const h1 =document.createElement('h1');

document.body.prepend(h1); //바디자식요소 첫번째로 h1만들기

h1.textContent ='노드추가, 수정, 삭제'

​

-.before('문자열');기준 노드 형제 앞쪽에 추가

ul.before('.before'); //ul의 형제관계로 바로위에 글자 추가

​

.after('문자열'); 기준 노드 형제 뒤쪽에 추가

const p = document.createElement('p');

p.textContent = `p요소를 뒤에 추가`;

ul.after(p); //ul의 형제관계로 바로 아래에 p태그 생성

​

-.remove();노드 삭제. 매개변수X

ul.remove(); //ul생성했던거 없어짐

-모든 li를 삭제 하고 싶을때는 forEach활용하기

const li = document.querySelectorAll('li');

li.forEach(a => {

a.remove();

});

​

- 엘리먼트이름.insertAdjacentElement('위치',요소);

--beforebegin--

<ul>

--afterbegin--

'text'

--beforeend--

</ul>

--afterend--

​

Ex.)const H2 = document.querySelector('h2');

const container =document.querySelector('.container');

​

setTimeout(move, 2000); //2초뒤 함수 move가 실행됩니다.

function move (){

container.insertAdjacentElement('afterend', H2); //컨테이너가 끝나는 부분뒤에 h2가 이동합니다.

}

​

​

​