JS #3-자바스크립트 기초 개념3

 

함수의 호이스팅 : 통째로 올라간다. 

일반 변수와는 다르게 함수는 통째로 호이스팅된다.

때문에 함수가 선언되기도 전에 호출할 수 있다.

 

---

 

자료형

1차적으로는, 개괄적으로 훑어볼 예정이다. 

자바스크립트의 변수는 자료형에 관계 없이 모든 데이터일 수 있다. 

따라서 변수는 어떤 순간엔 문자열 다른 순간엔 숫자가 될 수 있다. 

문자열 변수에 숫자를 넣는 것, 가능하다!

자료의 타입은 있지만 값의 타입은 언제든지 바꿀 수 있는 언어! "동적 타입" 언어라고 부른다.  (정적타입 = 타입스크립트)

자바스크립트엔 8가지 자료형이 있다. 

 

1. 숫자형

정수, 실수도 나눠져있지 않다. 

숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN(Not a Number)같은 특수 숫자 값이 포함됩니다. 

 

NaN이 출력되는경우

문자에 연산이 되는 경우는 '+' 연산자의 경우만 가능하다. 

문자형에 + 연산자가 오면 문자형이 되어버린다. 

 

 

 

 

2. 문자형

큰따옴표, 작은따옴표, 백틱 => 문자형을 표현할때 사용한다. 

 

*문자형 보관법 

문자열에 넣고 싶은 변수들을 백틱 안에 있는 ${}을 통해 표현하는 것이다. 

 

삼항식을 ${} 안에 넣어서 표현할 수도 있는데, 값을 뱉기 때문에 가능하다. 

값을 뱉지 않는 것은 올 수 없다. 

문(값을 안뱉음) vs 식(값을 뱉음)

 

-> 위와 동일한 예제를 작은따옴표를 통해 표현하려면 

작은따옴표로 이루어진 문장들 사이에 +변수+ 를 활용해서 표현한다. 

 

bigint

BigInt : 끝에 n이 붙으면 BigInt 자료형이 된다. 
범위: -(2의 53승 -1) ~ 2의 53승 -1 

 

4. 불린형

True / False 두개의 값만 갖을 수 있는 자료형이다. 

true: 긍정 false: 부정

 

 

4. null형

오로지 null 값만 포함하는 자료형 null이 존재한다. 

-> 값을 알 수 없거나 비어져있을 땐 null을 이용하자. 

 

5. undefined 

변수는 선언했지만, 값을 할당하지 않으면 해당 변수에 undefined 상태가 된다.

값이 할당되지 않은 상태의 변수 초기값을 위해 남겨두자

-> 직접 undefined를 할당하는 것 X

 

 

 

7. 객체

/* -------------------------------------------- */

/*                  Legacy var                  */

/* -------------------------------------------- */

// var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다.

// 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다.

var a = 10;

var a = 5;

console.log(a);

// var는 변수의 중복 선언을 허용합니다

// 선언하기 전 사용할 수 있는 var

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2)

typeof alert // "function"  (3)

-> typeof null은 typeoff로 체크되지 않는다. (object로 뜸)

 

 

8. 심볼

고유한 식별자를 만들 때 사용된다. 

typeof Symbol("id") // "symbol"

const unique = Symbol('uuid');

console.log(typeof unique);

 

---

객체에 대한 고찰

해당하는 문자형에 해당하는 능력만 쓸 수 있는데, 

Prototype을 통해 빌려쓸 수 있다. 

 

string literaal 방식 : js가 보다 편하게 편의상 데이터를 생성시키기 위해 만든 단축 문법임

string constructure(생성자) 방식

 

new String을 통해 생성된 '객체' str는

객체의 능력을 쓸 수 있다. 

str.toUpperCase() 와 같은 능력

 

 

 

 

 

정.리.하.면

 

 

문자형, 숫자형 등등은 모두 내장 객체인데 각각의 능력을  가지고 있다. 

콘솔에 찍어보면 

이렇게 능력을 확인할 수 있다. 

 

모든 데이터 형식들의 조상은 전부 '객체' 이다.

 

리터럴방식과 컨스트럭터 방식의 차이!

아래 컨스트럭터 방식은 생.성.자.함.수 로 생성한 객체이다. 

 

---

객체

객체는 key와 value로 이루어져 있으며

이 하나하나를 프로퍼티라고 부른다. 

user.name 형식으로 쓰면 해당 프로퍼티의 값에 접근을 할 수 있게 된다. 

 

없는 키값에 접근을 하게 되면 undefined!

const user = {

  name: 'tiger',

  age: 27,

};

 

 

 

배열

const arr = [1, 'a', { name: 'tiger' }, 4, () => {}];

형식이 서로 달라도 배열을 만들 수 있다. 

 

 

함수

 

function sum() { //선언부

  console.log(1 + 2);

}

sum(); //호출부

ㄴ함수를 호추하면 1+2의 결과인 같은 값만 출력되므로 효율적인 코드가 아니다. 

함수의 주요 기능은 재사용성에 있다. 

 

function sum(a, b) {

  console.log(a + b);

}

sum(1, 2); //호출부

위와 같이 인자를 전달받는 함수로 설계하면 재사용성이 높아지며, 효율이 좋은 코드가 된다. 

 

return 값이 없으면 undefine을 반환한다. 

 

---

붕어빵은 역시 슈붕이다. 

 

 

 

---

함수

 

const user = {

  name: 'tiger',

  age: 27,

  sayHi: function () {

    //normal method

    console.log('hello~');

  },

  sayHi2: () => {

    //arrow function method

    console.log('hello2~');

  },

  sayHi3() {

    // concise method

    console.log('hello3~');

  },

};

user.sayHi();

normal method -> 올드한 기법, 생성자를 내장하고 있다. 

arrow, concise method -> 생성자를 내장하지 않는다. 

concise method -> this를 갖는다. (유일!) 

 

  sayHi3() {

    // concise method

    console.log(this);

  },

};

user.sayHi3();

concise method -> this를 갖는다. (유일!)