Java Script 손놓은지 1달. 핵심만 다시 복습하기

열심히 공부하겠다던 초심을 다시 잡고자 책을 다시 펼쳤지만 백.지.상.태.가 되버렸다.

망.했.다.아.

처음부터 다시 복습하는걸로...!

 

목차

1. 데이터 타입

   1-1. Java Script의 데이터 타입

   1-2. 데이터 타입 종류

 

2. 객체(Object)

   1-1. 객체(Object)란?

   1.2. 객체 선언 방법

   1.3. Array(배열) 알아가기

   1.4. Function(함수) 알아가기

3. 변수 선언 방법 & 범위(Scope)

 

---

 

🚀 데이터 타입(type) 이란❓

데이터 타입이란 변수를 선언할 때, 숫자나 문자 혹은 문자열 등을 변수에 저장하는 데이터 종류

즉, 프로그램에서 다룰 수 있는 값의 종류를 말합니다.

 

자세한 내용👇

📌 데이터 타입의 종류?

1. 정적 타입 언어(static typed language)

정적 타입 언어는  변수의 타입과 일치하는 데이터만 저장  이 가능합니다.

C언어를 예시로 들어보겠습니다.

 

👉 예시

 

#include <stdio.h>

int main(){
	
    int number = 3;  // int형 타입의 number에 3이 들어간다
    int str = "hello"; // int형 타입임으로 str에 hello가 들어갈 수 없다
    return 0;

}

 

여기 정수 타입 변수(int)를 가진 변수 number, str이 있습니다.

number의 경우 정수 타입임으로  정수형태인 3이 들어갑니다.

그러나 str의 경우, 정수가 아닌 문자열인 "hello"라는 정보가 입력되기 때문에 오류가 나타납니다.

 

int변수의 문자열을 넣자 오류가 나타났다.

즉, 변수의 타입과 일치하는 데이터만 저장할 수 있는 언어를 "정적 타입 언어(static typed language)"라고 합니다.

 

 

2. 동적 타입 언어(dynamic typed language)

동적 타입 언어는  변수의 타입 없이 모든 타입의 데이터를 저장  할 수 있습니다. 

자바스크립트는 변수에 타입이 없는 동적 타입 언어입니다. 

var을 통해 선언하며 어떤 타입의 데이터든 저장할 수 있습니다.

 

👉 예시

 

var num = 3;
console.log(num);   // num에 숫자 3이 저장된다.

var num = 'hello';
console.log(num);   // num은 var이라는 동적 타입임으로, 문자열 hello가 저장된다.

 

 

 

📌 JAVA SCRIPT의 데이터 타입?

Java Script는 "동적 데이터 타입" : 변수의 타입 없이 모든 타입의 데이터를 저장할 수 있는 타입

 

 

 

📌 데이터 타입의 종류

💥 원시 타입 (Primitive Type) : 값을 그대로 할당

▪️ Number

▪️ String

▪️ Boolean

▪️ Null

▪️ Undefuned

 

💥 객체 자료형 : 값이 저장된 주소값을 할당

▪️Object

     - Array

     - Function

 

 

 

 

🚀 Object (객체) 알아보기

Object(객체)?

다수의 property 혹은 method를 하나의 이름으로 묶어놓은 집합체를 객체(Object)라고 한다.

 

✍️선언 방법

객체 선언 : 중괄호 {}
객체 형태 : 이름(key):값(value)

프로퍼티 : 위 데이터의 한 쌍을 뜻한다.

👉 예시

var obj = {
    a : "hello",  //obj라는 객체에 a(key):hello(value)값을 저장
    b : 3,  //obj라는 객체에 b(key):3(value)값을 저장
}

 

 

📌 Array(배열)

Array(배열)?

순서가 있는 데이터 집합

 

✍️선언 방법

1. 리터럴 방식
e.g) var name = [요소1, 요소2, ...]

2. 배열 객체 사용
e.g) var name = new Array(요소1,요소2, ...)

 

✍️ 배열의 특징

✔️ 배열 요소 타입이 다를 수 있다.

✔️ 객체 타입

✔️ 할당 시 배열 길이보다 큰 인덱스 사용 가능 => 연속적이지 않아도 된다.

 

📌 Function(함수)

Function(함수)?

하나의 특별한 목적의 작업을 수행하는 독립적 블록

 

✍️ 들어가기 전, 중요한 개념 "호이스팅"

변수 호이스팅 : var을 통해 정의된 변수 선언문을 유효범위 최상단으로 끌어 올리는 행위 

 

자세한 내용👇

🚀  함수 선언과 표현식의 차이 : 호이스팅

호이스팅은 var을 통해 정의된 변수 선언문을 유효 범위 최상단으로 끌어올리는 행위를 뜻합니다.

예시를 통해 알아볼까요❓

 

✍️ 변수 호이스팅의 예시

var a = 10;
console.log(a);
console.log(b);  // b가 선언되기 전에 출력하기. 오류가 나지 않는다.
var b = 30;

위 코드를 보면 순서가 잘못됨을 알 수 있습니다.

변수 b가 선언되기 전에 출력이 일어났기 때문입니다. 그렇다면 이 코드를 실행한다면 오류가 발생할까요?

 

출력 화면

오류가 나타나지 않고 30대신 undefined가 출력됨

여기서 호이스팅의 개념이 등장합니다.

호이스팅은 이전 내용처럼 var을 통해 정의된 변수 선언문을 유효 범위 최상단으로 끌어올리는 행위를 뜻합니다.
그렇기에 위 코드가 사실 아래와 같이 동작합니다.

var a = 10;
var b; // 호이스팅에 의해 var 변수인 b가 상단에 위치한다.
console.log(a);
console.log(b);  // b가 선언되기 전에 출력하기. 오류가 나지 않는다.
var b = 30;

따라서 b를 출력해도 오류가 아닌 undefined를 가집니다.

 

✍️ 함수 호이스팅

함수 호이스팅도 변수 호이스팅과 유사합니다. 

함수 표현식처럼 선언된 변수 선언문이 존재한다면 유효범위 최상단으로 올라갑니다.

예시를 통해 알아보겠습니다.

console.log(jlight());
console.log(glight());


// 함수 선언문을 통한 생성
function jlight(){
	console.log("hello");
}

// 함수 표현식을 통한 생성
var glight = function(){
	console.log("hi");
}

 

출력 화면

함수 선언문으로 출력이 되지만 표현식에서 오류가 나타난다.

함수 선언문을 통한 생성은 유효 범위의 최상단으로 올라갑니다.

따라서 위 함수를 최상단으로 이동하기 때문에 정상적인 출력이 가능합니다.

그러나 함수 표현식을 통한 생성은 변수 호이스팅으로 인해 변수 값만 올라가기 때문에 "undefined"형태로 남게됩니다.

 

즉 위 동작을 순서대로 본다면 다음과 같습니다.

// 함수 선언문 전체가 최상단으로 이동된다.
function jlight(){
	console.log("hello");
}

var glight; // 함수 표현식을 통한 선언은 변수 호이스팅으로 코드가 다음과 같이 바뀐다. "undefined"


console.log(jlight());
console.log(glight());

// 함수 표현식은 함수 전체가 올라가지 않는다.
var glight = function(){
	console.log("hi");
}

 

 

✍️ 선언 방법

선언 방법 1.  "함수 선언식"

함수 리터럴 형식과 같으며 호이스팅에 영향을 받음

// 함수 선언문 생성
function funcName(parameters){

}

funcName(parameters) // 함수 선언문 실행

 

선언 방법 2.  "함수 표현식"

함수 표현식은 호이스팅에 영향을 받지 않으며 함수를 변수에 할당합니다. 
여기서 표현식이란, 자바스크립트에서  값을 반환  하는 식 또는 코드를 말합니다. 

 

✍️ 함수 표현식 생성과 실행

// 함수 표현식 생성
function funcName = function(parameters){

}

funcName(parameters) // 함수 표현식 실행

 

✍️ 화살표 함수를 통한 함수 표현식 생성과 실행

// 함수 표현식 생성 with 화살표 함수
function funcName = (parameters) => {

}

funcName(parameters) // 함수 표현식 실행

 

✍️ 자바스크립트의 함수는  "일급 객체"  이다.

일급 객체 조건?

1. 변수나 데이터 구조안에 담을 수 있다.

2. 다른 함수의 파라미터로 전달할 수 있다.

3. Return값으로 사용 가능하다.

4. 할당에 사용한 이름과 관계없이 고유한 구별이 가능하다.

5. 동적으로 프로퍼티 할당이 가능하다.

 

 

 

 

🚀 변수 선언 방법 & 범위 (Scope)

📌 변수 선언 방법

 

📌 변수 범위

Global Scope (전역 스코프)

전역에 선언 되어 어느곳에서든 접근 가능

 

Local Scope (지역 스코프)

1. Block Scope : 중괄호 {} 에서만 유효

2. Function Scope : 함수 내에서만 유효