JavaScript 복습하기 -1

JavaScript란?

웹페이지를 좀더 풍부하게 구성해주는 언어로 작고 빠르기 때문에 동적인 요소를 제작할때 많이 사용된다. 자바를 기반으로 두고 있는 언어가 맞지만 자바는 사용법과 내용이 다른 언어다.

 

 

---

 

 기초 문법 

 

 

Alert, Prompt, Confirm

: 팝업창의 형태를 가진 태그다. alert는 가장 많이쓰이는 기본적인 형태의 팝업창으로 사용자에게 중요한 내용을 전달하거나 경고를 보낼때 사용되는 함수다. prompt는 사용자에게 입력값을 받을 수 있는 창을 띄워주는 함수로 받은값을 String로 리턴하며, 만약 받은값이 없을 경우는 Null값을리턴한다.confirm은 사용자가  예(Ture) / 아니오(False) 선택할 수 있는 팝업창을 띄워주는 함수다. 해당 선택값을 받아 리턴한다.

 

 

Commenting(주석)

: 페이지에 작성은 하나 사용자에게 보여지지 않는 요소이다. 보통 개발자가 코드를 확인할때, 남에게 보여줄때, 어떤값을 잠깐 가려놓고 싶을때 사용한다.

 

 

Variables(변수)

: 변수란 데이터를 담아놓는 장소, 또는 그릇으로 변하는 무언가를 의미한다. 변수의 이름을 선언할때 명명규칙이 존재한다. 

 

1. 시작문자는 영문자, "_", $ 중 하나로 시작해야 한다.

2. 영문자의 대소문자는 구분된다.

3. 예약어는 사용할 수 없다.

 

위 세가지 규칙을 지켜 이름을 선언해야하며, 해당 규칙에서 어긋났을 경우 변수는 선언되지 않고 에러가 발생한다.

 

변수의 이름을 선언할때의 방식도 3가지 존재한다.

 

1. CamelCase(카멜기법) : 낙타의 등처럼 울퉁불퉁한 기법이며, 소문자로 시작해 연결단어의 첫글자가 대문자다.

2. Snake_case(언더스코프기법): 변수에는 - 는 적용되지 않는다. 변수명 사이에 _ 를 추가한 기법이다.

3. PascalCase(파스칼기법): 단어의 첫문자를 대문자로 표기하는 기법이다.

 

※ 변수 또는 함수명을 선언할때는 카멜기법을, 클래스명을 지정할때는 파스칼기법을 자주 사용한다.

 

변수 선언방식도 여러가지 존재한다. 선언방식은 let, const, var이 존재하며, let은 변수값을 수정 가능하지만 const는 변수값 수정이 불가능하다. 한번 선언 후 절대로 바뀌지 않을 변수명만 const로 선언해야한다. let과 var은 비슷한 느낌이지만 var은 변수의 번복오류때문에 사용하지 않는다. let은 블록스코프에 막히는 스코프영역이 확실한 선언문이지만 var은 오직 함수에서만 스코프가 형성된다. if 또는 for문 등에서는 스코프가 지정되지 않기 때문에 전역변수처럼 사용된다. 이렇게 선언될경우 변수선언할때 중복의 오류가 발생할 수 있어 var은 사용하지 않는 것이다.

 

※ 선언문을 선언하지않고 변수를 선언하면 어떻게 될까? 변수는 선언된다. 그러나 그 변수는 윈도우(window)의 객체로 선언되게 된다. 그 이유는 윈도우의 생략에 있는데 사실 문서내의 모든 요소앞에는 window가 선언되어 있다. 하지만 기본적으로 생략을 시켜놓기 때문에 그런 오류가 발생하는 것이다. 나중에 코드가 길어지면 문제가 발생할 수 있으니 꼭 선언문을 작성해야한다.

 

 

 

Math expressions

: 교육과정 중 제대로 이해하지 못했던 부분만 정리하고 넘어가려한다.

 

위 코드를 보면 결과값으 둘다 2가 나와야한다고 생각했었는데 실제는 그렇지 않았다. 해당 내용을 하나씩 풀어서 설명하면 이해가 빠르다.

1. newNum 변수에 num변수를 할당해서 newNum에 1이 할당 되었고,

2. 그 후 num++; 가 실행되어 변수 num이 2가 되었다.

 

그렇다면 newNum을 2로 출력하려면 어떻게 해아할까?  let newNum = ++num; 로 선언이 가능하다.  내용은 아래방법을 보면 이해할 수 있다.

 

 

Array(배열)

: 다수의 데이터를 저장하고 처리하는데 유용한 요소로 효율적으로 코드를 짤 수 있다. 배열에 값을 넣는 방법은 아래와 같다.

출처 : 코딩팩토리

자바스크립트에서 배열은 정말 중요한 요소 중 하나인데 이 배열을 다루는데 사용되는 함수들이 있다.

 

1. push : 배열의 끝에 원하는 값을 추가해주는 함수.

2. unshift는 array의 맨 앞부분에 값을 추가하는 함수.

3. pop : 배열의 마지막 주소에 있는 값을 제거해주는 함수.

4. shift : 배열의 첫번째 주소에 있는 값을 제거하여 리턴하는 함수.

5. length : 배열의 길이를 반환해주는 함수.

6. concat : 두개의 배열을 합쳐주는 기능을 하는 함수.

7. join : 배열값 사이에 원하는 문자를 삽입하는 함수.

8. sort : 배열을 정렬하는 함수.

8. reverse : 배열을 역순으로 재배치하는 함수.

9. slice : 배열의 일부분을 반환하는 함수.

10. splice : 배열값을 추가하거나 제거하여 리턴하는 함수.

 

 

데이터 타입과 typeof 연산자

: typeof 연산자는 지정된 값의 데이터 타입을 알 수 있는 연산자이다. 데이터타입은 boolean(참/거짓), String(문자), Number(문자), Object(객체), null(빈객체), undefined(자료형정해지지않음) 등이 존재한다.

 

 

※ undefined와 null?

 

undefiend : 이름 그대로 정해지지 않은 상태다. 변수는 존재하나 어떤 값도 할당되지 않아 자료형태가 정해지지않은 상태.null : 이미 빈공간(null)으로 자료형이 정해진 상태. 변수는 존재하나 이미 null로 지정되어 있어 빈객체로 데이터 타입을 확인하면 object가 나온다.

 

 

indexOf와 slice

: slice는 지정 위치만큼 잘라내는 함수로 slice(잘릴 시작위치, 잘릴 끝위치)로 선언합니다. indexOf는 원하는 문자열을 찾거나 배열의 값을 찾는 함수다. 두개의 함수를 응용하면 특정부분을 텍스트에서 자동으로 잘라내는것이 가능하다.

 

 

Object(객체)

: JavaScript는 객체기반 스크립트언어이며, 그만큼 객체는 JavaScript에서 아주 중요한 개념이다. 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 요소로 Key / Value Pair를 저장할 수 있는 구조이다.

 

위 그림은 객체의 기본적인 선언방법이다. 객체는 여러가지 특징을 가진 요소로 해당 특징을 이해하고 객체를 사용하도록 노력하자.

 

1. 객체는 변수이다. 그러나 객체에는 많은 값이 포함될 수 있다.

2. 변수는 예약어의 이름을 가질 수 없지만 객체는 따로 구애받지 않는다. 또한 중괄호 표기를 이용하여 만들 수 있다.

3. 각 각의 key/value에 대한 정보를 나열할 수 있다.

4. Key는 문자열 또는 기호여야 한다. Value는 모든 유형이 될 수 있다.

5. 객체는 한 쌍의 [key/value] 뒤에 쉼표를 이용하여 그 뒤에 오는 [key/value]와 구분해주어야 한다. 

 

JavaScript에서 원시값(어떤 특성도 값도 없는 데이터)을 제외하면 전부 객체(object)요소이다. 

 

※ 객체가 아닌 유형 : String, number, boolean, null, undefined

 

 

Scope(스코프)

: 자바스크트립의 스코프는 어떤 변수들에 접근할 수 있는지를 의미한다. 스코프에는 크게 전역스코프와 지역스코프가 존재한다.

 

변수가 함수나 중괄호 바깥에 선언되어 있을때 그 변수는 전역스코프로 지정된다. 전역스코프로 지정된 변수는 코드내에서 어느곳에서도 사용할 수 있다(함수포함) . 그러나 전역스코프로 선언을 할 수 있어도 선언은 하지않는것이 좋다. 왜냐하면 변수이름이 동일한 코드가 발생했을경우 충돌오류가 일어나기 때문이다. const나 let을 사용하여 선언했다면, 이름에 충돌이 발생할 때마다 에러가 발생하며, var를 이용하여 변수를 선언했다면, 두 번째 변수가 첫 번째 변수를 덮어쓰게 됩니다. 이러면 디버깅이 어려워지기 때문에 절대 추천하지 않는다.

 

반대로 특정부분에서만 사용이 가능한 변수가 있다. 그런 변수가 바로 지역스코프이다.  JavaScript에서는 두가지 지역스코프가 존재하는데 블록 스코프(block scope)와 함수 스코프(function scope)다.블록스코프는 중괄호안에 존재하는 변수로 중괄호안에서만 사용이 가능하다.함수스코프는 함수안에 선언된 변수로 함수내부에서만 사용이 가능하다.

 

 

Class(클래스)

: 연관있는 변수와 함수를 하나로 묶을 때 사용하는 문법이다. 클래스는 객체 단위로 코드를 그룹화 할 수 있으며 코드를 재사용하기 위해서 사용된다. 클래스에서 중요한 요소에 대해서 복습하려한다.

 

Instance(인스턴스)

: 클래스가 설계 도면이라면 인스턴스는 설계에 따른 실체가 담겨 지는 곳, 클래스(생성자 함수)는 설계도, 인스턴스는 실체이다.

 

인스턴스 사용법

 

Object(객체)

: 인스턴스와 객체는 서로 같으면서도 다른 이름으로 불린다. 평소 사용하는 방법인, 클래스에서 제공하는 프로퍼티와 메서드를 사용한 경우를 객체라고하며 new 연산자를 이용하여 클래스의 실체를 생성할 때 사용할때만 인스턴스라고 말한다.

 

 

참고 및 출처문서 : https://webclub.tistory.com/136