[2주차 TIL] 자바스크립트 기본 문법

1. 자바스크립트의 기본 문법

1-1. 자바스크립트에서 선택자

• 태그 선택자
  • 태그는 같은 이름으로 여러 개를 생성 할 수 있습니다.
  • 태그명을 넣을때는 ('div') 이런식으로 넣어주면 됩니다.

document.getElementsByTagName(태그명)[순서];

• 클래스 선택자
  • 태그 선택자와 마찬가지로 같은 이름으로 여러 개를 생성할 수 있습니다.
  • 클래스명을 넣을 때는 ('logo') 이런 식으로 넣어주면 됩니다.

document.getElementsByClassName(클래스명)[순서];

• 아이디 선택자
  • 아이디는 특성상 같은 아이디명을 사용하지 않는 것이 규칙입니다.
  • 그래서 다른 것과 다르게 getElements 복수형이 아닌 getElement를 써줍니다.

document.getElementById(아이디명);

---

2. 변수 선언과 데이터 타입

2-1. 변수 (Variable)란?

• 변수는 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용합니다. 담겨진 값은 다른 값으로 바꿀 수 있습니다.
• 변수는 컴퓨터의 메모리에 존재하는 공간입니다.

2-2. 변수의 선언

• JavaScript 변수를 선언하는 방법에는 var, let, const가 있습니다.
• ES6 이전에는 변수를 선언하는 키워드가 var 뿐이였지만 ES6에서 let과 const가 생겼습니다.

var a; // 한개씩 선언
let b;
var a, i; // 동시에 선언
var sum = 0; // 선언과 초기화
let i = 0, sum = 10, message = "Hello"; // 동시에 선언과 초기화

2-3. var, let, const의 차이점

1. var은 함수 스코프이고 let과 const는 블록 스코프입니다.
2. var은 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만, let과 const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하게 되면 에러가 발생합니다.
3. var과 let은 변수 선언 시 초기 값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 합니다.
4. var과 let은 값을 다시 할당할 수 있지만 const는 한번 할당한 값은 변경할 수 없습니다.

스코프(scope)란?
스코프는 변수를 사용할 수 있는 유효 범위입니다. JS에는 2개의 스코프가 있습니다. 이는 전역(Globla)변수와 지역(Local)변수 입니다. 유효범위 개념을 잘 알고 있으면 변수와 매개변수의 접근성과 생존기간을 제어할 수 있습니다. 전역 변수는 모든 곳에서 다 쓸 수 있지만 지역 변수는 { } 안에서만 쓰이고 밖에서는 사용할 수 없습니다. 

2-4. 변수 선언 식별자

식별자는 변수를 선언할 때 고유한 이름입니다. 아래의 규칙을 지키며 식별자를 지정해야 합니다.

• 이름에는 문자, 숫자, 밑줄 및 달러 기호가 포함될 수 있습니다.
• 이름은 문자로 시작합니다.
• 이름은 $ 및 _로 시작할 수도 있습니다.
• 이름은 대소문자를 구분합니다.
• 예약어는 이름으로 사용할 수 없습니다.

2-5. 변수의 데이터 타입

• 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 의미합니다.
• 코드에서 사용되는 모든 데이터는 메모리에 저장하고 참조할 수 있어야 합니다.
• 변수의 데이터 타입 종류
  • 기본 타입 : boolean, null, undefined, number, string, symbol
  • 객체 타입 : object, array, function

---

3. 함수 정의와 호출

3-1. 함수 (function)란?

• 함수는 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여주고 유지보수에 용이하고 가독성이 좋습니다.
• 함수는 프로그램을 구성하는 주요 구성요소입니다.

3-2. 함수 선언문

• 앞에 function을 써주고 용도에 맞는 함수명을 지어주고 매개변수는 필요시 선택입니다. 
• JS의 매개변수는 따로 앞에 데이터 타입을 적어주지 않아도 됩니다.
• return은 반환할 값이 있으면 적어두고 반환할 값이 없으면 안 적어도 된다. 
• 그냥 return; 을 하면 함수를 즉시 종료합니다.

function 함수명 (함수 안에서 사용할 매개변수) {
  함수 내용
  return 반환값
}

3-3. 함수 표현식

• JS는 함수를 특별한 종류의 값으로 취급합니다. 
• 앞에 변수 선언 키워드를 서주고 함수명을 쓰고 뒤에 function ()을 해주고 나머지는 선언문과 동일합니다.

let 함수명 = function() {
  함수 내용
  return 반환값;
}

함수 선언문과 함수 표현식의 차이
- 함수 선언문 : 어디서든 호출할 수 있습니다. 예로 함수를 선언한 위에다가 써도 동작을 합니다.
- 함수 표현식 : 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성하고 함수 선언문은 스크립트를 실행하기 전 준비 단계에서 전역에 선언된 함수 선언문을 찾습니다.

3-4. 함수 호출

let fnc = (a,b) => a+b; // 라는 함수가 있을 때,
fnc(); // 함수 호출이 됩니다. 그리고 호출할 때 소괄호 안에 인자가 있는데 
       // 인자에 뭘 넣게 되면 매개변수로 전달 됩니다.
console.log(fnc(1,2)); // 3

---

4. 객체와 배열의 사용 방법

4-1. 객체(Object)란?

• 객체는 현실의 사물을 프로그래밍에 반영한 것입니다. 

var zero = {
  firstName : 'Zero',
  lastName : 'Cho'
};

4-2. 속성(Property)

• zero 객체에는 firstName : 'Zero' 와 lastName : 'Cho' 이렇게 두 개의 속성이 있는 것입니다.
• 즉, 속성끼리는 쉼표로 구분해줍니다.

4-3. 키(Key)와 값(Value)

• 속성에서 firstName과 lastName은 객체의 키이고 'Zero'와 'Cho'는 값입니다.
• 즉, 속성은 키 : 값 관계로 이루어져 있습니다.
• 키는 문자열만 가능합니다. 그리고 속성명은 따옴표가 없어도 가능합니다. 단, 띄어쓰기가 있을 경우는 따옴표로 반드시 감싸주어야 합니다.

4-4. 배열(Array)이란?

• 배열은 [ ]로 감싸서 나타내고, 안에는 무엇이든지 다 들어갈 수 있습니다.
• 배열 안에 들어가는 것들은 요소라고 부르고 이는 쉼표로 구분합니다.
• 배열은 객체와는 달리 키가 없습니다. 즉, 값들만 순서대로 나열되어 있는 상태입니다.

var zero = ['Zero' , 'Cho'];

---

5. 자주 사용하는 내장 함수

1. join() : 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. 원본 배열은 바꾸지 않습니다.
2. split() : string을 array로 만들어주는 메서드입니다. 원본 string은 변화시키지 않습니다.
3. reverse() : 순서가 뒤집힌 배열을 반환해주는 배열 메서드입니다. 원본 배열을 변환합니다.
4. find() : 콜백함수의 조건을 충족하는 첫번째로 찾아진 요소를 리턴하는 메소드입니다. 배열의 모든 요소를 순차적으로 돌면서 콜백함수를 호출하다가 콜백함수에 true를 리턴하는 요소를 찾으면 곧바로 리턴
5. filter() : 콜백함수의 조건을 충족하는 요소들만 모아서 새로운 배열로 리턴해주는 메소드입니다. 원본 배열을 변경하지 않습니다.