[자바스크립트 완벽 가이드] 1) 코어 자바스크립트

Yoojin Jeong·2021년 3월 4일
JavaScript개발언어자바스크립트자바스크립트 완벽 가이드
1

자바스크립트 언어 자체에 대해 설명한다.

1. 자바스크립트란

2. 어휘구조

자바스크립트는 html과 다르게 대소문자를 구분하는 언어이다.
예약어
식별자 종류 및 언제 쓰는지, 특징

3. 타입,값,변수

4. 표현식과 연산자

표현식 종류
-기본 표현식
-객체,배열의 초기화 표현식
-함수 정의 표현식
-프로퍼티 접근 표현식
1. 표현식.식별자 2.표현식[표현식]

1번 프로퍼티 접근 방법은 표현식에 식별자를 점(.)으로 연결한 표현식이다. 여기서 표현식은 객체를 말하고 식별자는 앞에서 지정한 객체에서 찾을 프로퍼티의 이름을 의미한다.
2번은 객체나 배열이 되는 첫번째 표현식 다음에 열린 대괄호와 두 번째 표현식 그리고 닫힌 대괄호를 사용하는 것이다. 여기서 두 번째 표현식은 객체의 특정 프로퍼티 이름이나 배열 내 원소의 인덱스 값이 될 수 있다.
만약 평가된 값이 null이거나 undefined이면 이들 값은 프로퍼티를 갖지 않기 때문에 표현식은 TypeError예외를 발생시킨다.
두 경우 모두 객체에 해당 프로퍼티가 존재하지 않으면, 프로퍼티 접근 표현식의 값은 undefined가 된다.

-호출 표현식

함수나 메서드를 호출하는 문법이고, 호출된 함수를 가리키는 함수 표현식으로 시작한다. 함수가 값을 반환하지 않는다면, 함수 표현식의 값은 undefined가 된다.

-객체 생성 표현식

새 객체를 생성하고, 생성자라 부르는 함수를 호출해 객체에 속한 프로퍼티들을 초기화한다. new Object()

-연산자
표현식 ++x는 x=x+1과 항상 같지 않음. ++연산자는 절대 문자열 결합 연산을 하지 않고, 항상 피연산자를 숫자로 바꾼 후에 값을 하나 증가시킨다.

-관계형 표현식

5. 문장

6. 객체

7. 배열

8. 함수

9. 클래스와 모듈

10. 정규 표현식을 사용한 패턴 매칭

1) 정규 표현식 객체

  • 자바스크립트의 기본 내장 객체 중 하나

  • 생성 방법
    var regExp1 = new RegExp('text');
    var regExp2 = /text/;

  • 정규 표현식 객체의 메소드

test() : 정규 표현식과 일치하는 문자열 존재 여부 반환
exec() : 정규 표현식과 일치하는 문자열 반환

2) 정규 표현식을 사용하는 String 객체의 메소드
match(regExp): 정규 표현식과 일치하는 부분 반환
replace(regExp, replacement): 정규 표현식과 일치하는 부분 변경
search(regExp): 정규 표현식과 일치하는 부분의 위치 반환
split(regExp): 정규 표현식을 기준으로 문자열을 잘라 배열 반환

3) 대체 문자

  • replace() 메소드 사용
  • 대체 문자 정규 표현식 기호

& : 일치하는 문자열` : 일치하는 부분의 앞부분 문자열
$' : 일치하는 부분의 뒷부분 문자열
$1, $2, $3 : 그룹

  • 사용 예시
    'a'.replace(/a/, '+$&+'); // a -> +a+ 변환
    'abcde'.replace(/(a)(b)(c)/, '+$1=$2=$3+'); // abcde -> +a=b=c+de

4) 플래그 문자

  • 비교 범위 지정
    g : 전역 비교
    i : 대소문자 상관없이 비교
    m : 여러 줄의 검사를 수행 // 앵커 문자 사용
  • 생성 예시
    var regExp = /Expression/im;
    var regExp = new regExp('Expression', 'im');

5) 앵커 문자

  • 문자열의 앞과 뒤를 구분해주는 정규 표현식 기호
    ^abc : 맨 앞 문자가 abc
    abc$ : 맨 뒤 문자가 abc

  • 줄바꿈이 존재하는 문자열 비교시 m 플래그 문자가 지정되어있으면 각 줄당 앵커를 확인

  • 예시
    'Javascript\njQuery\nAjax'.replace(/^j/igm, '+$&+');

예시 결과
"+J+avascript
+j+Query
Ajax"

6) 메타 문자

  • 비교 범위를 표현
    . : 모든 글자
    [abc] : 괄호 안의 글자

[^abc] : 괄호 안의 글자 제외

[a-z] : 알파벳 a부터 z까지

[A-Z] : 알파벳 A부터 Z까지

[0-9] : 숫자 0부터 9까지

\d : 숫자
\w : 아무 단어(숫자 포함)
\s : 공백 문자(탭, 띄어쓰기, 개행)
\D : 숫자 아님
\W : 아무 단어 아님
\S : 공백 문자 아님

  • 예시

'Javascript jQuery Ajax'.replace(/[aj]/igm, '+$&'); -> "+J+av+ascript +jQuery +A+j+ax"

'910209-2001211'.replace(/\d\d\d\d\d\d-[1234]\d\d\d\d\d\d/, '+$&+'); -> "+910209-2001211+"

'910209-2001211999'.replace(/\d\d\d\d\d\d-[1234]\d\d\d\d\d\d/, '+$&+'); -> "+910209-2001211+999"

7) 수량 문자
a+ : a가 적어도 1개 이상
a* : a가 0개 또는 여러 개
a? : a가 0개 또는 1개
a{5} : a가 5개
a{2,5} : a가 2~5개
a{2,} : a가 2개 이상
a{,2} : a가 2개 이하

8) 선택 문자

  • (abc|def) : abc 또는 def 선택 // or

9) 정규 표현식 사용 예시

  • 소문자, 숫자 한정
    var regExp = /([0-9]|[a-z])/g;
    'java'.replace(regExp, '').length -> 0
    'Java'.replace(regExp, '').length -> 1
  • 한글 한정

var regExp = /([가-힣])/g;
'자바'.replace(regExp, '').length -> 0
'Java'.replace(regExp, '').length -> 4

  • 이메일 패턴 한정

var regExp = /\w+@\w+.\w+/;
'java@java.com'.replace(regExp, '').length -> 0
'자바'.replace(regExp, '').length -> 2

11. 자바스크립트 서브셋과 확장

자바스크립트의 서브셋은 대부분 보안을 목적으로 하고 있다. 보안 서브셋을 사용하여 작성되었다면 그 스크립트는 안전하게 실행될 수 있다.
자바스크립트 서브셋은 신뢰할 수 없는 코드를 안전하게 실행하기 위해 정의되었다.

var let const 차이


var의 스코프: 전역 범위나 함수/지역 범위
var 변수가 함수 밖에서 선언될 경우엔 전역 범위(모든 window에서 접근 가능)
var 변수가 함수 안에서 선언될 경우엔 함수 범위로서 해당 함수 안에서만 접근 가능

var a= "hello"
function newA(){
	var b ="hi";
}
console.log(b); //Uncaught ReferenceError: b is not defined

var는 재선언 및 재할당 가능
var는 호이스팅 가능

호이스팅이란 자바스크립트에서 변수나 함수의 정의 부분이 해당 범위의 최상위로 끌어올려지는 것을 의미함.

var의 문제점은 var 변수의 취약성

var a = "hello"
var condition = 2;
if(condition > 1){
	var a = "bye";
}
console.log(a); //"bye"

condition 조건이 참이므로 a는 bye로 재선언된다. a변수가 이미 정의되었다는 것을 몰랐다면 문제가 될 수 있다.a변수를 다른 부분에서 사용한다면 원치 않은 결과를 볼 수 있으며 버그 유발가능.

let
블록 범위({})를 갖는다. 

let condition = 2;
if(condition > 1){
	let a = "bye";
    console.log(a); //"bye"
}
console.log(a);//Uncaught ReferenceError : a is not defined

값의 재할당은 가능하나 재선언은 불가능(범위가 다른 경우에는 가능)

let을 사용하면 중복된 이름의 변수를 사용하더라도 범위가 다른 경우에는 명확하게 구분하여 사용할 수 있다.

var,let은 최상위로 호이스팅된다. 단, var는 undefined로 초기화된 것과는 달리 let초기화 되지 않는다. 그러므로 let 변수 선언 전에 해당 변수에 접근하면 Reference Error 가 발생한다.

const
const로 선언된 변수는 상수이다. let과 유사하게 동작함.
블록 범위({})를 갖는다
재선언 및 값 재할당이 불가능하다.
let처럼 최상위로 호이스팅되지만 초기화되지 않는다.
선언과 동시에 초기화 해줘야한다.

12. 서버 측 자바스크립트

profile
Yoojin Jeong
이전 포스트

[Javascript] 1)

다음 포스트

[JavaScript] 1) 코어 자바스크립트

0개의 댓글