2022.07.06 - javascript 비기너 복습 (1)

[ 3강~ 8강 요약 ]

- debugger  디버그 : 프로그램의 오류를 발견하고 그 원인을 밝히는 작업 과정 

브라우저의 개발자 도구 창이 열려있을때만 멈추게 된다. 

열려있지않으면 멈추지 않음 ( ES5 부터 지원 )

const name = "기묜";
  debugger;
console.log(name);

-> 디버그에서 무슨 조치를 취하지 않으면 콘솔은 실행되지 않음.

개발자모드에서 f11 은 다음 라인으로 이동되기때문에 그때서야 비로소 콘솔이 실행됨.

 

 

- while : 표현식의 평가 결과가 false가 될 때 까지 문장을 반복하여 실행한다. 반복이 종료되는 조건이 필요함

- do ~ while : while과 같지만 do문을 먼저 실행한다. 

let a = 0;
do {
  console.log("do:", a);
  a++
}while (a<3){
  console.log("while",a);
};

1. do문 실행

-> do: 0 출력

2. while문 평가 (a<3)

3. true일 경우 do 문의 블록을 다시 실행 

-> do: 1, do: 2  출력

4. 평가 결과가 false 이면 while문의 블록을 실행한다. 
5. a가 3이면 while문의 블록 실행 

-> while: 3

 

 

- for문 연습

let zzac = 0;
let hole = 0;
let tot = 0;

for(let a=1; a<=50; a++){
  a % 2 === 0 ? zzac +=a : hole +=a;
}
tot = zzac+hole;

console.log("짝 :"+zzac);
console.log("홀 :"+hole);
console.log("짝,홀 합계 :"+tot);


// 짝 : 650
// 홀 : 625
// 짝,홀 합계 : 1275

 

 

- try - catch 

try문에서 예외 발생을 인식

예외가 발생하면 catch 블록을 실행 

 

- finally

예외 발생과 관계없이 실행된다. 

 

- throw

명시적으로 예외를 발생시킨다.

예외를 던질 수 있으며 catch문이 실행된다. 

 

- strict 모드

형태 : "use strict"

strict 모드는 자바스크립트가 묵인했던 에러들의 에러 메시지를 발생시킵니다. 엄격하게 문법 검사를 하겠다.. 로 이해하면 된다.

좀 더 자세한 공부가 필요할 것 같다. (따로 포스팅)

https://beomy.tistory.com/13

[자바스크립트] 엄격 모드(strict mode)

- label 문

프로그램 내의 특정 영역을 식별할 수 있도록 해주는 식별자.

label 문을 사용하면 continue문과 break 문의 동작이 프로그램의 흐름을 특정 영역으로 이동시킬 수 있다. 

- label 문은 임의의 곳으로 이동하면 따라가야하기 때문에 코드 흐름이 엉킬 수 있으므로 사용하지 않는편이 좋다. 

 

 

- with문 

with 이후에 오는 구문을 위해 스코프 체인에 인자로 받은 obj를 추가한다. 

(function (){
  "use strick";
  
  with({age:29}){
    console.log(age);
  }
}());

블럭 괄호{}는 if 처럼 생략이 가능하고, with의 인자로 받는 object는 그 이후의 statement나 블럭 {} 안에 scope chain이 추가되어서 실행이 가능하다.

with로 인해 생겨나는 모호성 때문에 사용을 지양하고 있다. 

https://unikys.tistory.com/304

[Javascript] with 명령에 대하여

 

- Property 

어떠한 값을 나타낸다. (객체 내부의 속성)

이 값이 다른값과 연관되어 있을 때, property 라고 부른다. 

* 객체에 함수를 정의할 경우 -> 메소드(Method)

{ name:value } 형태. name에 프로퍼티 이름/키를 작성한다. 따옴표는 생략한다.

 

-  Object 프로퍼티 읽기

for~in :  처음부터 끝까지 읽는다.

for (변수 in 오브젝트) 문장;

for (표현식 in 오브젝트) 문장;

const sports = {
  swim : "수영",
  soccer : "축구"
};
for(let item in sports){
  console.log(item);
  console.log(sports[item]);
}
// swim
// 수영
// soccer
// 축구

-> 프로퍼티 이름이 item에 설정되고, sports[item] 대괄호 사용으로 프로퍼티 값을 구한다.

 

- 빌트인 (Built-in) : 값 타입, 연산자, 오브젝트를 사전에 만들어 놓은 것이다. 

자바스트립트와   DOM이 한 번에 처리할 수 있도록 빌트인(맞춤)된 값 타입, 연산자, 객체로 생각할 수 있다.

사전 처리를 하지 않고 즉시 사용할 수 있다.

- 빌트인 값 타입 : Undefined, Null, Boolean, Number, String, Object 

- 빌트인 연산자 (opeartor) : +,-,*,/,%,++,--,new 등

 

- 빌트인 오브젝트 종류

- Number 오브젝트 : 123과 같은 숫자, 상수, 지수

- String 오브젝트 : "abc"와 같은 문자열, 분리, 연결 가능

- Boolean 오브젝트 : true, false

- Object 오브젝트 : {key:value} 형태, 프로퍼티를 처리하기 위한 오브젝트 

- Array 오브젝트 : [1,2,"A","가나다"] 형태

-  Function 오브젝트 : function abc(){} 형태

- Math 오브젝트 :  abs(), round() 등의 수학 계산 

-  Date 오브젝트 : 연월일, 시분초 (*현재,미래시간 설정 및 계산 가능)

- Json 오브젝트 : [{"name":"value"}]형태 , 서버와 데이터 송수신에 사용 

- RegExp 오브젝트 : ^, $와 같은 정규 표현식

- Global 오브젝트 : 소스파일 전체에서 하나만 존재한다. 모든 코드에서 공유, 접근이 가능하다. 전역객체라고도 한다.

 

 

[ Number 오브젝트 ]

- new 연산자 : 오브젝트로 인스턴스를 생성하여 반환한다. 

인스턴스 : 비슷한 성질을 가진 여러개의 객체를 만들기 위해, 일종의 설계도라고 할 수 있는 생성자 함수(Constructor)를 만들어 찍어내듯 사용하는데 이렇게 생성된 객체를 인스턴스라 부른다.

객체지향언어에서 흔히 사용되는 클래스(Class)가 자바스크립트에서는 프로토타입(prototype)이며 생성자 함수가 사용된다.

클래스나 프로토타입을 사용하여 만들어 낸 것이 인스턴스라고 볼 수 있다..!!

- new 연산자는 원본을 복사하는 개념이다. 

 

- 프리미티브 값 (Primitive Value) :  언어에 있어 가장 낮은 단계의 값

const book = "책";

=> "책"은 더 이상 분해, 전개가 불가함 이러한 값을 프리미티브 값이라 한다. 
- 프리미티브 타입 

Number, String, Boolean : 인스턴스 생성 가능 

Null, Undefined : 인스턴스 생성 불가 

Object 는 프리미티브 값을 제공하지 않음

 

- toString() : data 를 String 타입으로 변환한다. 기본값(10진수)

const value = 20;
console.log(20 === value.toString());
console.log(value.toString(16));

// false
// 14 => 20을 16진수로 변환하면 값은 14

 

[String 오브젝트]

 문자처리를 위한 함수와 프로퍼티가 포함되어 있으며, 함수를 호출하여 문자 처리를 하게된다. 

- 프로퍼티 리스트 

 

- trim : 문자열 앞 뒤의 공백 삭제 (메소드 체인)

const value = "  abcd  ";
console.log(value.length);

console.log(value.trim().length);

// 8
// 4

엔진 내부에서 인스턴스값을 . 과 . 으로 계속해서 연결하는 것을 메소드체인 이라고 한다. 

 

- concat() : 파라미터 값을 작성 순서로 연결하여 문자열로 반환

- subString() : 파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환, 두번째 파라미터를 작성하지 않으면 반환 대상의 끝까지 반환