[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()
배열의 길이 > 3array.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'}
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
- Number 실수.
- String 문자. '따옴표'를 사용하여 표현한다. 유사배열로 인덱스 접근이 가능하다.
- Boolean 논리적 True, False(null, undefined, 0)를 나타낸다.
- Undefined 선언은 되었지만 할당하지 않은 변수. 존재하지 않는 객체에 접근한 경우 반환된다.
- Null 변수에 값이 없음을 명시한다.
- Symbol
- Object 데이터와 데이터의 동작을 포함한다.
Author And Source
이 문제에 관하여([TIL] JS: Intro), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@songbetter/TIL-JS-dqi7y1c3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)