[TIL] JS: Intro

개발환경

1. 개발자도구

• Elements DOM과 CSS를 수정해 볼 수 있다. 수정한 내용이 저장되지는 않는다.
• Console
  REPL(Read Eval Print Loop: 입력 수행 출력 반복) 환경으로 사용할 수 있다.
• Source 자바스크립트 코드 디버깅
• Network 네트워크 요청정보와 퍼포먼스 확인
• Application 웹 스토리지, 세션, 쿠키 확인

2. Node.js

브라우저 이외의 환경에서 동작시킬 수 있는 환경. 모듈, 파일시스템, HTTP 등 빌트인 API를 제공한다.

3. 비주얼 스튜디오 코드

코드 자동완성, 문법오류감지, 디버깅, Git 연동 기능을 지원하는 코드 에디터
VS Code 다운로드 바로가기

기본문법

1. Declaring Variables 변수 선언하기

• Var: javascript ES6 이전 버전에서 사용된다. 중복 선언 시 이전 변수 값을 덮어쓴다.
• Let: 변수를 재지정 할 수 있다. 아무것도 지정되지 않은 경우 'undefined'으로 나타난다.

let count; 
console.log(count); // Prints: undefined
count = 10;
console.log(count); // Prints: 10

• Const: 변수를 상수 값으로 선언할 때 사용한다. (✔ 수정하지 않을 변수에 대해 const 사용하기!)

const numberOfColumns = 4;
numberOfColumns = 8;
// TypeError: Assignment to constant variable.

2. Operator 연산자

산술, 문자 연결, 비교, 할당, 논리, typeof

• 산술연산자: +=, -=,*=, /= 사칙연산 값을 반환한다. ++, -- 1을 더하거나 뺀 값을 반환한다.
• 비교연산자: <,>,<=,>=, === 일치 !== 불일치
• 논리연산자: && 그리고, || 또는 ! 부정

3. Template literal

변수와 string을 동시에 작성하는 방법.

$(변수)

let name = "Naeun";
console.log(`Hello, ${name}.`); 
// Prints: Hello, Naeun.
 
console.log(`Billy is ${6+8} years old.`) 
// Prints: Billy is 14 years old.

4. Loops 반복문

조건식의 평가 결과가 참인경우 코드 블럭을 실행하여 거짓일 때까지 반복한다.

• For Loop

for (let i=0, i<5; i++{
  console.log(i);
};

/* Result
0
1
2
3
4
*/

• While Loop

let i=0;
while (i<3){
  console.log(i);
  i++;
  
// Result: 0 1 2

💡 무한루프의 경우, 코드블럭 탈출조건을 if문에 부여하고 break문으로 탈출한다.

5. 조건문

• if...else
  논리적 참/거짓에 따라 실행할 코드블럭을 결정한다.

if(x>0){
// x>0이면 실행되는 코드블럭
} else if(x=0){
  // x=0이면 실행되는 코드블럭; 
} else{
  // x<0이면 실행되는 코드블럭; 
}

6. Array method 배열

1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.
zero-index를 사용하여 첫 번째 값이 [0], 마지막 값이 [-1]

let array=['cat','dog','bird']

• array.length() 배열의 길이 > 3
• array.slice(1, 2) > {'dog'}, array.slice(1) > {'dog', 'bird'}
• array.splice(1, 2, 'duck') > 값을 변경한다. {'cat', 'duck', 'bird'}
• array.shift() 배열의 첫번째 값을 덜어낸다. > {'dog', 'bird'}
• array.pop() 배열의 마지막 값를 덜어낸다. > {'cat', 'dog'}
• array.filter(length > 3) > {'bird'}
• array.push('duck', 'elephant') 배열의 끝에 값을 추가한다. > {'cat', 'dog', 'bird', 'duck', 'elephant'}

🧩 method 더 알아보기 !

7. Object 객체

키와 값으로 구성된 Property들의 집합. Property의 값이 함수일 경우 method라고 한다.

let obj={
  name: 'Song', // Property= key: value
  gender: 'female'
}

// property 추가하는 방법
obj.age = 20
console.log(obj) // { name: 'Song', gender: 'female', age: 20}

// property 삭제하는 방법
delete obj.gender
console.log(obj) // { name: 'Song', age: 20}

• Property 값 읽는 방법: 마침표, 대괄호

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10
};

console.log(person.first-name);    // NaN: undefined-undefined. "-"가 연산자로 인식된다.
console.log(person[first-name]);   // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'

console.log(person.gender);    // 'male'
console.log(person[gender]);   // ReferenceError: gender is not defined
console.log(person['gender']); // 'male'

console.log(person['1']); // 10
console.log(person[1]);   // 10 : person[1] -> person['1']
console.log(person.1);    // SyntaxError~

8. Data Type

1. Number 실수.
2. String 문자. '따옴표'를 사용하여 표현한다. 유사배열로 인덱스 접근이 가능하다.
3. Boolean 논리적 True, False(null, undefined, 0)를 나타낸다.
4. Undefined 선언은 되었지만 할당하지 않은 변수. 존재하지 않는 객체에 접근한 경우 반환된다.
5. Null 변수에 값이 없음을 명시한다.
6. Symbol
7. Object 데이터와 데이터의 동작을 포함한다.