[자바스크립트]자바스크립트 -Today I'm Learned (1)"코딩의 기본"

- 오늘 학습한 내용.

hoisting (밑에서 top으로 끌어올리다)

Var 변수나 function에 해당되는 기능으로 

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

console.log(age)

분명 1번째 console.log에서 var 할당이 안되었음에도

이를 아래에서 선언하였기에 최상단에서 작동되게 끌어올려지는 것을 의미한다.

원래는 호출이 되지 않고 에러를 내어야 한다.

하지만, var는 에러 없이 정상 작동한다. 이를 해결하기 위해서 나온 

let이나 const에서는 없는 기능.

 

var의 경우

로컬스코프를 무시하는 게 가능하다.(이런 것을 방지하기 위해서 ES6에선 let이 나왔다.)

{
var age= 15;
}

console.log(age);

// 15

왜 이러한 것이 문제냐 하는 이유는 변수의 오염이다.

용량을 적게 먹게 구현하는 것도 좋지만, 협업시에 팀원이 모르고 이를 동일한 이름으로

다른 곳에서 호출 할수도 있는데, 이때 내가 설정하는 값이나 다른 직원이 설정하는 값이 호출되어 오류를 발생시킬 수 있기때문에 매우 중요하다.

즉, 변수 오염이 가능하다.

 

var는 갖다버리자. 이제는 let과 const만 쓰자!

 

js에서 흔히 쓰는 연산자

+ 더하기

- 빼기

/ 나누기

* 곱셈

% 나머지값

** 제곱

++  → "+1 or 계속 +1증가하겠다 라는 뜻도 된다."

 

 

preIncrement

아래 포스트 인크리먼트와 기능은 같다 하지만, 할당 순서가 다르다.

let counter = 2;
const preIncrement = ++counter;

console.log(`counter : ${counter}, preIncremet : ${preIncrement}`);

// 결과값은
// counter : 3, preIncremet : 3

즉, preIncrement에 할당되기전에 이미 counter에서 숫자의 변화가 있고,

즉 counter 값을 preIncrement에 할당되기전에 +1이되고, 그 후에 값이 할당된다.

그래서 둘다 3, 3이 할당된다.

 

반면에 아래 포스트 인크리먼트는 다르다.

postIncrement

let counter = 2;
const postIncrement = counter++;

console.log(`counter : ${counter}, postIncrement : ${postIncrement}`);

// 결과값
// counter : 3, postIncrement : 2

이러한 차이가 나오는 이유는 연산 순서가 다르다.

그 이유로는 conter의 값이 postIncrement에 이미 할당되고 나서 +1이 되기때문에

post에선 2로 할당되고, counter에선 3이 할당된다.

 

즉, ++ 위치에 따라 +1이 되는 값이 다른데, 이러한 이유로는 js에서 읽는 방식이 왼쪽에서 오른쪽으로 읽기때문이다.

1 + 5 *3 이렇게 표시되어있다면, 6*3이된다.

나의 생각과 컴퓨터 계산방식을 일치시키려면 1 + (5*3)으로 대괄호를 이용하여, 해당 값을 먼저 계산하겠다고,

표시해주자.

 

할당하는 연산자(Assignment Operators)

let x= 3;
let y= 2;
x += y; // x = x+y; 좌측의 공식이 우측의 공식을 축약화한 것이다.

x -= y;

x *= y;

x /= y;

 

논리적인 연산자.

or : ||(\\를 shift키를 누르면서 키를 누른다.)

and : &&

nullobject && nullobject.map 으로 사용한다. 축약되어서 사용되는데 아래에 있는 의미로 이해하자.

nullobject? nullobject : null 이라는 의미로 nullobject가 있다면 표시하고 없으면 표시하지 말라고 선언하는 것.

주로 서버에서 불러오는 값이 없어서 에러가 나오는 경우에 사용한다.

 

not : !을 붙인다.

console.log(!age)하면 false가 나온다. 즉 부정의 값을 표시할때 사용한다.

if(age === false)로 표현하는 방법도 있지만,

if(!age)로 표현하는 방법도 가능하다.

 

이퀄리티 연산자.

== 느슨한 동일 연산자.

string타입이나 number 타입을 신경쓰지 않고 형태 tostring(id) === number(id)도 동일하게 본다.

 

=== 엄격한 동일 연산자.

tostring(id) === number(id) false

문자열과 숫자의 타입까지 비교하면서 엄격하게 사용된다.

현업에선 주로 이것을 대부분 사용하니 이걸 사용하도록 하자.

 

 

object는 객체로 메모리 ref에 저장되는데, 메모리 주소값이 달라서 값은 같지만 다르다고 인식한다.

const age1 = { age : 15 };

const age2 = { age : 15 } ;

const age3 = age1;

console.log(age1 == age2);

console.log(age1 === age2);

console.log(age3 === age1);

const age1 = { age : 15 };
const age2 = { age : 15 } ;
const age3 = age1;
console.log(age1 == age2);
console.log(age1 === age2);
console.log(age3 === age1);

false
false
true

 

console.log(0 == false); //true
console.log(0 === false); // false 불리언 타입이 아니다.

console.log('' == false); // true
console.log('' === false); // false 불리언 타입이 아니다.

console.log(null == undefined); //true
console.log(null === undefined); // false 같은 타입이 아니다.

형태는 같아도 타입은 다르기에 false가 나온다.

 

if, else if, else 조건부 연산자

const name = 'diff'

if(name) {
// 만약 네임이 들어온다면, 출력 네임해라.
 return name

} else if (blue) {
// 만약 네임이 아니라 블루라면 출력 블루해라
 return blue

} else {
 // 블루도 아니면 문자열 error를 콘솔로그에 출력해라
 console.log('error');
}


// if는 맨 처음에 쓰고
// else if는 중간에 여러번 써도 된다.
// 마지막 조건에만 else를 쓰자.

3항 연산자

console.log(name === "diff"? 'yes' : 'no');

해석하자면 name의 값이 diff가 맞다면 yes를 출력하고 아니면 no를 출력하라는 뜻이다.

 

switch문

const browser = 'IE';
switch (browser) {
	case 'IE' :
    	console.log('IE')
        break;
    case 'Chrome' : 
   		console.log('Chromium')
        break;
    default : 
    	console.log('all')
        break;
}

 

반복문 for, while, do while

while 

let i= 3;
while (i > 0) {
    console.log(`while: ${i}`);
    i--;
}

// while: 3
// while: 2
// while: 1

 

do while

do {
    console.log(`do while: ${i}`);
    i--;
} while( i>0);

// do while: 0

현재의 코드값을 출력하고 싶다면 do while부터 사용하고,

조건문부터 작성하고 싶으면 while을 사용한다.

왜 이런 차이가 있나 생각하겠지만, while은 조건부터 적용하고 값을 적용하지만,

do while은 현재 값을 출력 후 조건을 적용하기에 이런 차이가 있다.

 

for 반복문 

// for문
for (let i=3; i>0; i--) {
 console.log(`for : ${i}`);
}

// for (초기값; 조건문; 증감분;) {
// 실행될 내용들 
// }

// 중첩 for문
for (let i=3; i>0; i--) {
 for (let j=3; j>0; j--){
 	console.log(`for : ${i}, j:${j}`);
 }
}

// 중첩은 가능하지만 성능에 좋지 못한 설정이므로 가급적 사용하지말자.