TIL.11 Javascript _초급_1

//  변수 Variable 

// javascript 

// js 에서 변수는 var로 시작

// 변수 이름으로는 $, _ 를 제외한 특수문자는 사용 불가 및 숫자로 시작 불가능

// 4변수 = a; (x); // 변4수 = a; (O)

var a = 1;

alert(a);

// a 라는 그릇에 1이라는 값을 넣는것으로 이해하자 변수를 선언한다고 표현함

---

var first = 'coding';

alert(first + ' everbody')

first = '코딩'

alert(first + ' everbody')

// 처음 var로 변수를 선언했기 때문에 그다음부터는 var를 사용하지 않아도 상관없다.

---

var a = 'A', b = 'B';

// 위와 같이 var를 한번사용하여 여러개의 변수를 한번에 생성이 가능

---

var c = 1;

alert(c);

// 세미콜론(;) 이란 명령어가 끝났음을 컴퓨터에게 알려주는 역할을 한다.

// 사실 JS에서는 코드상에서 enter(줄바꿈)이 입력되면 명령어가 끝난것으로

// 인식하여 세미콜론이 없어도 코드는 동작하지만 ; 을 생활화하자

// 만약 상위 2줄으 코드를 한줄의 코드로 작성할경우 반드시 ; 을 써주어야한다

---

//  배열 array

 

// 연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입이다.

// 배열 == 데이터를 담는 그릇

// 변수는 기본적으로 하나의 데이터를 저장하기 위한 것이고

// 배열은 여러개의 데이터를 하나의 변수에 저장하귀 위한 것이라 할 수 있다.

---

var member = ['a', 'b', 'c'];

// 하나의 변수에 3개의 데이터가 저장되어 있으며 각각의 데이터는 원소(element)라고 한다.

 

alert(member[0]); // 'a'

alert(member[1]); // 'b'

alert(member[2]); // 'c'

 

// 자동으로 각 원소의 값을 부여하는데 

// 이러한 값을 한국어로 색인 // 영어로 인덱스 라 부른다.

---

// ## 기본적으로 fanction, 함수란

// 여러개의 입력값을 받을 수 있지만 출력값(return)은 하나만 반환해올수있다!!

// 이러한 상황에서 함수에 단점을 극복할 수 있는 수단 중 하나가 배열이다.

// 하나의 값을 출력하는것 같지만 그 하나의 값에는 여러개의 데이터가 들어 있을 수 있게된다.

// 연관되어 있는 정보를 한꺼번에 다룰 수 있게 도와주는 유익한 녀석이다.

---

// 객체 Object

 

// 객체는 배열과 비슷하게 변수에 여러개의 데이터를 저장한는 방식은 동일하지만

// 배열은 인덱스가 0 1 2 자동으로 주어지며,

// 객체는 데이터를 담아내는 그릇이라느 점에서는 동일하지만

// 데이터의 인덱스를 0 1 2 가 아닌 문자 또는 우리가 직접 원하는 데이터를 지정할 수 있다.

---

 배열과 객체의 눈에 보이는 차이점 

// 다른 언어에서는 맵 (map), 딕셔너리(Dictionary)라는 데이터 타입의 객체에 해당 한다.

---

// 라이브러리 vs 프레임워크 차이점!!

// 각 언어 별로 효율적인 라이브러리(Jquery(js 라이브러리), pandas(python 데이터 분석_ 라이브러리) 등등 잘 활용할 줄 알아야한다.

// 차이점!! 누가 누구를 컨틀로 하는가?!!

// 둘다 누군가가 쓴 코드들로 우리가 가져다 쓰는 것

// 사용자가 코드를 컨트롤 하는건지 vs 누군가의 규칙을 따라 코딩하는 건지

---

// 라이브러리 (ex jquery)

// 코딩을 하다가 "사용자"가 필요할떄 소환하고 "사용자가" 코딩을 해 나가는 것

---

// 프레임워크 (ex django 웹 프레임워크)

// 프레임워크를 부는게 아닌, 프레임워크가 "사용자"를 부르는 개념

// 사용자가 코딩을 해날수 없으며, 프레임워크의 정해진 규칙을 따라야함

// 규칙은 프레임워크가 정하고 사용자는 그걸 적극 수용해야한다.

---

// React의 경우

// 라이브러리처럼 소환도 가능하고 프레임워크 처럼 규칙도 적용되기 도

// 개발자 들 사이에 라이브러리인지 프레임워크인지 의견이 분분하다.

// 굳이 나누는게 크게 의미는 없지만 어떻한 기준으로 불리는건지는 알아둬야 한다.

---

javascript에서 var, let, const를 이용해 변수를 선언하고 각각의 차이점

1. 먼저 var Vs let, const 

1.1 var 는 function-scoped  // let, const 는 block-scoped이다.

1.1.1 function-scoped와 block-scoped가 의미란

여기에서 호이스팅(Hoisting)이란 개념을 알아야 하는데

호이스팅이란

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

(즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.)

var 에서는 호이스팅이 적용되어 여러가지 문제점이 있었다고 한다.

보통은 함수와 변수를 가급적 상단에 선언하여 이러한 호이스팅으로 인한 스코프(범위) 꼬임 현상을 방지한다.

또한, 호이스팅으로 인해 var를 사용할 경우 협업시 변수의 값 및 정보확인에 혼란이 오고 쓸모없는 코드(ex : use strict)가 늘어난다.

그렇다면 왜 var 호이스팅을 이해해야 할까?

ECMAScript 2015 (ES2015) 이후

ECMAScript 2016 (ES2016) (자바스크립트 규격 버전) 부터 len, const가 새롭게 추가되었다.

업무시 언제든지 ES5로 트랜스컴파일(최신 버전을 이전에 나왔던 버전에도 적용하도록 도와주는것?)을 해야하기 떄문에

var가 어떻게 동작하는지 인지하고 있어야 한다.

 

즉, var function-scoped// lec, const의 block-scope 느

호이스팅이 일어나는지 여부에 따라 나뉜다.

 

1.2 var의 "변수 재선언 가능"

처음 JS가 나왔을때 var 하나만으로 변수를 선언하는 점에 있어 문제점이 굉장히 많았다.

그 후 이런 문제를 해결하고자 let, const이 추가되었다.

// 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않는다.

var a = 'test'

var a = 'test2'

// hoisting으로 인해 ReferenceError에러가 안난다.

c = 'test'

var c

즉, var == 변수 재선언 가능 // let, const == 변수 재선언 불가능

---

2. let VS const (변수 재선언 불가능)

2.1 가장 큰 차이점으로는 immutable 여부이다.

let ==> mutable

const ==> immutable 

즉, let은 변수에 재할당이 가능하며, const은 변수에 재할당이 불가능하다.

// let

let a = 'test'

let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared

a = 'test3' // 가능

// const

const b = 'test'

const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared

b = 'test3' // Uncaught TypeError:Assignment to constant variable.

2.2 let 

c = 'test' // ReferenceError: c is not defined

let c

위코드에서 Re..Error가 발생한 이유는 let은 값을 할당하기 전 변수가 선언 되어있어야 하는데, 그렇지 않기 때문에 error가 발생한 상황이다.

이건 const도 동일하게 적용되지만 재할당이 불가능하기에 좀 더 엄격하다.

2.3 const

// let은 선언하고 나중에 값을 할당이 가능 

let dd

dd = 'test'

// const 선언과 동시에 값을 할당 해야한다.

const aa // Missing initializer in const declaration

---

var, let, const의 차이점은 아래와 같이 정리가 가능하다.

1. var 는 function-scoped  // let, const 는 block-scoped이다.

2. var 변수 재선언 가능 // lec, cosnt은 변수 재선언 불가능

3. let 은 변수 재할당 가능 // const은 변수 재할당 불가능

---

결론

1. var 는 사용을 지양하자 (why? : 팀 규모 작업시 변수 이름 혼동과 특정 변수에 담긴 값을 정확히 알기 어려울 수 있다.)

2. 재할당이 필요한 변수는 let 으로 선언 // 재할당이 필요없는 변수는 const 으로 선언

즉, 모듈 불러오기와 같이 재할당이 필요없는 변수는 const // 이외 재할당이 필요한 변수는 let // var 사용 지양하자

---

 

출처 : 

ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

dokdogalmaegi.tistory.com/35

gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html