[code-states][we-win] 6일차 - 주말 독학, type, variable, object, array & object method practice, etc

주말엔 집 나와서 밖에서 공부도 하면서 살자구요

 

​

오늘의 목표(였던 것)

​

- variable, variable declaration, variable type 에 대해서 알아보기 (✔️)

- undefined 자료형은 별도로 존재하는가? (✔️)

- new 라는 생성자(?) 에 대해서 알아보기 (✔️ )

​

- dot notation, bracket notation 에 대해 좀 더 알아보기 (✔️)

- 각각의 장점과 단점 위주로 정리하기 (✔️)

​

---

​

variable, variable declaration, data type 에 대해서 다시 알아보기

​

​

variable & data type

​

정의 : 값에 이름을 붙인 것

종류 : Boolean, Null, Undefined, Number, String, Symbol, Object

Symbol (https://developer.mozilla.org/ko/docs/Glossary/Symbol)

ECMAScript 6 에 추가된 자료형

익명의 객체 속성을 만들 수 있음

충돌 위험이 없는 유일한 객체의 property key 를 만드는 데 사용됨

아직 내가 배우거나 사용할 type 은 아니기에 알아만 놓자

​

Undefined 라는 data type 은 엄연히 별도로 존재함

let udf = undefined;
//undefined 의 약자


typeof udf;
//undefined

 

존재하지 않는다는 안내 메시지가 아닌, 존재하지 않는 것에 대한 엄연한 분류된 자료형이 나옴 

​

* undefined는 원시값으로, 선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당됩니다. - MDN 에서의 설명

​

​

---

​

declaration

​

var, let, const 가 있다

그 중에서 var 는 일련의 문제들로 인해 더 이상 잘 쓰이지 않는다

var : global variation 으로 선언되어 버리고, 멋대로 hoisting 이 걸림

let : block range 를 감안하여, 구문 혹은 표현식 내에서만 유효함

​

예제 code

(출처 : https://www.daleseo.com/js-var-issues/)

 

var n = 1;

function test() {

console.log(n);

var n = 2;

console.log(n);

}

test();

겉보기에는 문제가 없어 보이는 code 이지만​

이 변수를 var 로 선언한 해당 경우, hoisting 이 발생한다

​

그래서 해당 code 는 사실상 이렇게 받아들여진다

​

var n = 1;

function test() {

var n; // hosting

console.log(n);

n = 2;

console.log(n);

}

test();

​

n 이라는 variation 이 없이 바로 선언이 되었기 때문에

function scope 내에서 일단은 최상단에 n 이라는 변수를 선언해주고 나서 시작한단 이야기

그렇기에 위에 n = 1 이라고 선언해 주어도

결과값은 다음과 같이 이상하게 나온다

​

undefined
//첫 번째 console.log 출력

2
//두 번째 console.log 출력

​

즉, ‘분명 변수를 상단에서 미리 선언을 해 줬는데, 왜 undefined 라고 나오는거야!’ 하는​

그런 비 직관적인 code 가 나올 수 있다는 것이다

그래서 해당 상황을 방지하기 위해, declaration 방식으로 let 과 const 를 사용한다

​

let k = 1;

function test() {
  console.log(k);
}

test();
//1

이런 경우 1이 출력된다​

​

그러나 재 선언을 하려고 하면?

​

let k = 1;

function test() {

console.log(k);
  let k = 2;
  console.log(k);
}

test();

​​

 

Uncaught ReferenceError: Cannot access 'k' before initialization

at test (<anonymous>:3:15)

at <anonymous>:7:1

애초에 k 라는 variable 을 initialize 하기 전에 접근할 수 없다며 오류가 뜬다​

​

우리는 이를 통해 let 으로 declare 한 variable 은 같은 block-scope 내에서만 적용되며, 해당 scope 안에서는 재선언이 되지 않기에, var 보다 고려할 변수가 조금 더 적어지고 좀 더 명료한 code 를 build 할 수 있다는 사실을 알 수 있다

​

let letVariable = 1;
console.log(letVariable);

let letVariable = 2;
console.log(letVariable);

// Uncaught SyntaxError: Identifier 'letVariable' has already been declared

예제 코드인데, 상기한 것처럼 같은 block 안에서 re-declaration 하는 해당 과정을 아얘 용납치 않는다​

​

 

var varVariable = 1;
console.log(varVariable);

var varVariable = 2;
console.log(varVariable);

//1
//2

var 의 경우는 상대적으로 널널하게 받아준다​

그러나 이것은 변수에 접근하는 요소가 많아질 경우 엄격하지 않아 문제가 발생하기 쉽다

​

그렇기에 let 을 쓰는 것이다 !

 

---

​

그렇다면 const 는 무엇일까?

​

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

​

const 는 더욱 엄격하다. constant 의 약어로서 const 를 인용하였고, 기본적으론 상수를 선언할 수 있게 해 주는 변수이다.

다시 말 해, const 는 바뀌지 않는 변수이다

​

예시가 조금 길어서 다음 페이지로 넘어간다.

 

const MY_FAV = 7;
//const 를 통해 MY_FAV variable 을 선언하고, 해당 변수에 7을 대입

console.log(MY_FAV);
//7
//7이 정상적으로 잘 대입됨

const MY_FAV = 20;
//VM1217:1 Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
//const 를 통한 재선언은 용납하지 않음

let MY_FAV = 7;
//VM1270:1 Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
//물론 let 을 통한 재선언도 용납하지 않음


console.log(MY_FAV);
//7
//여전히 7이라는 variable data 를 잘 지켜주고 있음

if (MY_FAV === 7) {
  let MY_FAV = 20;
  console.log('my favorite number is ' + MY_FAV);
  var MY_FAV = 20;
}

//VM1575:6 Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
//사실 조건문은 잘 돌고 있음, 일단 if 안에 들어간 MY_FAV 는 7이라는 값이 바뀌지 않은 채로 들어갔기에 조건문에 true 를 제출해주면서 통과가 되었음. 
//그러나, if block scope 내부에 var 로 재선언 한것이 hoisting 이 걸려 if 조건문의 최상단에 선언됨
//그래서, 해당 code 는 console.log 까지 가지 못 하고 already declared error 를 뱉으며 실행이 더 이상 되지 않음


console.log(MY_FAV);
//7
//당연히 이런 과정을 겪었음에도 불구하고 MY_FAV 의 변수는 그대로 7이라는 값을 유지함

if (MY_FAV === 7) {
  let MY_FAV = 20;
  console.log('my favorite number is ' + MY_FAV);
}

//my favorite number is 20
//이 경우는 hoisting 도 없고, let 으로 선언한 MY_FAV 는 해당 조건문 안에서만 돌아서 console 에 block 안에서 20이란 값을 정상적으로 출력해 줌

 

 

---

​new operator

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new

new operator

new 는 object type 과 관련된 operator 이다

문서는 한 번 정도 훑어봤지만 아직 배운 부분이 아니라 그렇게 와닿진 않는다

수업진도에 맞춰서 공부를 하든, 따로 공부를 하든간에

객체를 조금 더 공부하고 제대로 알아보도록 하자

---

dot notation vs bracket notation - pros and cons

​

​	dot notation	square bracket notation
how to use?	Object.key (and then return value)	Object[key] (and then return value)
pros	명확하고 쉬운 표기	dynamic variable 에 대응가능
cons	dynamic variable 에 대응불가	dot 보다는 약간 복잡함

​

대략 이 정도다

특이한 점은 없었다

 

그리고 나같은 경우는 웬만해선 그냥 square bracket 을 사용하려고 한다

그 이유는, 딱히 비-직관적이지도 않고 이를 체화 함으로써 얻을 수 있는 장점들이 더 많다고 생각하기 때문이다

 

 

---

어느 새 밤이 되어버렸습니다

 

눈치가 빠른( + 관심있게 블로그를 읽어주신...) 분들은

'오늘 주말치고 공부 너무 안했는데?' 라고 하실 수 있습니다

​

결론은

​

맞습니다

​

부정할 수가 없음

---

​

변명이라면 변명입니다! 흥!

 

​

사실 개념 정리에 그렇게 많은 시간을 쏟았다기보다는

주중에 해결하지 못 했던 문제들을 풀어보거나, 혹은 다시 풀어보는 데 시간을 꽤 할애하였습니다

​

이번 문제에서 확실히 많이 연습하게 된 건 array 와 object 의 method

내일은 이제 이걸 날 잡고 깔끔하게 정리해서 올려보려고 합니다

​

원래대로라면

​

    1. 정리를 한다

    2. 문제를 푼다

​

인데요

​

그러지 못했네요... 네...

반성하도록 하겠습니다!

​

5일차 개발일지, 끝!