javascript-1: 자바스크립트 기초

2022-10-18 3 분 소요

자바스크립트 기초

1. 변수

변수는 항상 “ “로 감싸있어야함
변수는 문자와 숫자, $와 _만 사용
첫글자는 숫가자 될 수 없다
예약어는 사용할 수 없다
가급적 상수는 대문자로 기입
변수명은 읽기 쉽고 이해할 수있게 선언

2. var

동일한 변수명 사용 가능
변수 선언 가능
ES6이전에는 var을 썼지만, let이 나온 이후로 잘 쓰이지 않음

3. let

ES6에서 추가됨
변할 수 있는 값임(mutable) / 재할당 가능
동일한 변수명 사용 X

4. Const

한번 할당 하면 값이 절대 바뀌지 않음(Immutable) / 재할당 불가능
동일한 변수명 사용 X
security
reduce human mistake

5. Variable types

primitive, single item : number, string, bollean, null, underfiend, symbol

(더이상 작은 단위로 나뉠수 없는 한가지 아이템)
object, box, box container

(single 아이템들을 한번에 묶어서 박스단위로 관리할 수있게 해주는것)

6. 함수 선언 및 호출

doSomething: 함수의 이름으로서, 가급적 동사형으로 작성
함수선언에서 ( )는 전달받을 함수의 값 / 매개변수
함수호출에서 ( )는 함수에 전달하는 값 / 인자

7. block scope

스코프

{ }로 변수에 대한 내용을 감싸면 밖에서는 그변수를 불러올 수 없음.
{ }밖에 쓴 변수는 글로벌스콮이라고 함. 이 글로벌스콮은 어디에서나 사용 할 수 있음.
var는 block scope도 무시함..
var는 선언하기도 전에 변수 입력가능..
let ,const의 경우 함수, if, for문 등에서 벗어나면 사용할 수없음
함수 스코프는 함수단위로 생성됨.
블록스코프는 블록단위

8. hoisting

호이스팅

어디에 선언했냐에 상관없이 항상 제일 위로 선언을 끌어 올려주는것을 말함.

(move declaration from bottom to top)

9. 문자형(string)

문자형은 “ “, ‘ ‘, ` `, 로 감싸줄 수 있음

const name1 = "Mike"
const name2 = 'Mike'
const name3 = `Mike`

const greeting ='hello' + 'brendan'
console.log(greeting);

10. template literals / template string

` ` 을 쓰고 ${변수}를 하면 변수의 값이 나옴

const name = "Mike"
const message3 = `My name is ${name}`;
console.log(message3)

const message4= `나는 ${30+1}살 입니다.`;
console.log(message4)

11. 불린형(boolean)

false: 0, - 0, null, undefined, NaN, ‘ ‘

true: any other value, [ ], ‘asdasd’

const name = "Mike";
const age = 30;
  
console.log(name == 'Mike')
console.log(age > 40)

  const canRead=true; 
  
  const test = 3<1;// false
  
  console.log(`value: ${canRead}, type: ${typeofcanRead}`);
  
  console.log(`value: ${test}, type: ${typeoftest}`);

11-1. null과 undefined

null 은 존재하지 않은 값

let user = null;

*유저는 존재하지 않는다는 뜻

let nothing = null;
  
console.log(`value: ${nothing}, type: ${typeofnothing}`);

undefined는 할당되지 않는 값
```
let age;
conole.log(age)
```
* 변수를 선언하고 아무것도 할당하지 않으면 발생함
```
let x;
  
console.log(`value: ${x}, type: ${typeof x}`);
```

11-2 typeof 연산자

변수의 자료유형을 알아낼수 있음

const name = "Mike";
  
console.log(typeof 3);
console.log(typeof name)
console.log(typeof "xxx")
console.log(typeof null)
console.log(typeof undefined)

* null은 object로 나왔는데 이것은 객체형을 의미함. null 은 객체가 아님.

12. symbol

create unique identifiers for objects

우선순위를 주고 싶을 때, 고유한 식별자가 필요할 때 사용

const symbol1=Symbol('id');
const symbol2=Symbol('id');
   
console.log(symbol1 === symbol2);

* 같은 ‘id’로 할당 했지만 symbol로 인해 같지 않음

for을 이용해서 같게 할 수는 있음

const Symbol1 = Symbol.for('id');
const Symbol2 = Symbol.for('id');
  
console.log(Symbol1 === Symbol2);

Symbol1의 value를 알고 싶으려면 .description을 이용해서 Symbol을 string으로 바꿔줘야함

const Symbol1 = Symbol.for('id');
  
console.log(`value: ${Symbol1.description}, type: ${typeof Symbol1}`);

13. 숫자형(number)

const age= 30; 
const PI = 3.14;

console.log(1 + 2); //  +더하기
console.log(10 - 3); // -빼기
console.log(3 * 2); // /나누기
console.log(6 % 4); // % 나누고 나머지 값

* 거듭제곱은 : ** (곱하기 2개)

* 우선순위 : 곱하기, 나누기 → 더하기, 빼기 순

* const x = 1/0;

console.log(x)

→ infinity

13. 형 변환(Type conversion)

String( ) → 문자형으로 변환
Number( ) → 숫자형으로 변환
Boolean( ) → 불린형으로 변환

* prompt는 기본적으로 문자형임.

Boolean의 경우 false = 숫자0, 빈문자열”, null, underfined, NaN / 그외 true
Number(null) = 0 / Number(undefined) = NaN
Number(0) = false / Number(‘0’) 문자형 = true
Number(‘’) = false / Number(‘ ‘) = true

14. Dynamic typing: dynamically typed language

C언어나 자바는 어떤 타입인지를 결정해서 타입을 같이 선언하는 stopped language.
JS는 선언할때 타입을 선언하지 않고 런타임, 프로그램이 동작할때 입력값에 따라 타입이 변경됨
빠르게 프로토 타입 할때 유연하게 쓸수있음. BUT, 큰 프로젝트에는 .. 곤란

Twitter Facebook LinkedIn