[드림코딩]자바스크립트 기초 정리 ① operator, if, for loop

 

처음 자바스크립트 독학하면서 알게 된 유튜버 드림코딩 엘리님의 강의.

기초까진 괜찮았다가 함수들이 점점 나오면서 이해가 아예 되지 않아서 멘붕의 연속이었다

그래서 같은 강의를 거의 5번 넘게 돌려보고, 그래도 이해가 안 되는 부분은 책을 읽어가며 이해했다.

 

내 머리가 좋지 않다는 건 알고 있었지만 이렇게까지 심각했나? 싶을 정도였는데, 

강의 밑의 댓글들을 보니 동지들이 많았다 ^^..

절대 혼자만 헤매고 있는 게 아니니 자바스크립트에서 너무 좌절하지 않도록!

 

프런트엔드의 경우 HTML, CSS는 비교적 쉽게 접근이 가능하여 (이 둘은 프로그래밍 언어가 아니다.)

프런트엔드를 만만하게 볼 수 있지만 자바스크립트를 맞닥뜨리는 순간, 이 분야에 쉽게 얻을 수 있는 건

없다고 느낄 것이다.. 나는 정말 뼈저리게 느꼈다

그리고 CSS는 양이 너무 방대해서 새로운 속성을 자주 만나고 파도 파도 계속 나온다

 

아무튼 잡담은 여기서 끝내고

오늘은 유튜버 드림 코딩 엘리님의 자바스크립트 기초강의를 정리해보겠다.

 

 

 

 

String concatenation(순차)

 

연결된 문자를 작성하거나 문자에 계산식을 함께 넣을 때 'my' + 'cat'이라고 + 기호를 이용하여 묶어줘도 가능하지만

백틱(`)키를 이용하여 한 번에 묶어주는 게 가능하다.

그리고 일반 문자가 아닌 계산식 및 변수 등을 넣고 싶다면 ${} 안에 넣어주면 된다.

 

참고로 맥북 백틱키는 키보드 영문 설정에서 숫자 키보드 1의 바로 왼쪽 (₩~) 키를 눌러주면 된다.

 

 

 Numeric(숫자) operators

 

+, - , / 등 계산식을 해준다.

지금까지 Numeric operators 활용한 예시는 if문 활용하여 짝수만 반환할 때,

' 값 / 2 === 0 '으로 나누기(/)를 많이 활용했다.

반대로 홀수를 구하고 싶다면, ' 값/2 === 1 '

 

 

 

 

 

++, -- operators (증가 및 감소 연산자)

 

 

3번째 예시) Pre Increment

counter에 1을 더한 후, counter에 다시 값을 할당한 다음에 (counter가 3으로 증가)

preIncrement에 counter의 값(3)을 할당

 

4번째 예시) Post Increment

postIncrement의 경우, 변수 다음에 ++ 기호를 붙여서 먼저 counter라는 변수의 값을 postIncrement에 할당한 다음,

그 뒤에 counter값을 1 증가시킨다.

여기선 3번째 counter의 값을 가져와서 쓰기 때문에, 처음 postIncrement의 값은 (+가 되지 않은) 3이고,

그 이후에 counter+1을 해줘서 counter값은 4가 출력됨

 

즉,

++가 앞에 있으면 바로 업데이트되어서 값이 할당되고

++가 뒤에 있으면 할당을 먼저 해놓고 업데이트는 그 뒤에 일어난다.

 

 

 

Assignment operators

 

계산식을 간단하게 작성할 수 있는 방법으로,

x = x+y 를 x+=y로 줄여준다.

나머지도 이와 마찬가지로 적용하면 된다.

 

 

 

or 연산자

and 연산자

not 연산자

 

Logical operators

 

true, false에서 여러 가지 조건을 줄 때는

|| (or) , $$ (and) ,! (not)으로 사용이 가능하다

 

• or 연산자 (or)

value1 || value2 || check()로, 이 세 개의 값 중에 하나라도 true가 나오면 true가 반환된다.

여기서 중요한 점이 하나 있는데 만약 첫 번째 값이 바로 true가 나오면 뒤의 value2, check()는 실행시키지 않고

true를 반환하고 종료된다. (이미 하나라도 true가 나왔다는 조건을 충족했기 때문)

연산을 많이 하는 함수(위에서는 check())를 호출하거나 익스프레션 같은 건 마지막에 마지못해서 호출하는 게 가장 좋고, 간단한 value 같은 걸 앞으로 배치한다.

만약 true면 뒤의 헤비 한 함수 식을 실행시키지 않아도 되기 때문에 성능적으로 더 좋은 코드가 될 것이다

 

• and 연산자 (and) 

or연산자와는 다르게 세 값 모두 true가 나와야 true를 변환하고 만약 하나라도 false라면 false 변환

그래서 가장 앞자리인 value의 값이 false가 나오면 뒤에 값들은 보지 않고 바로 false를 배출한다

and 연산자는 간단하게 null 체크할 때도 많이 사용됨.

만약 null값이 false면 뒤에. something이 실행되지 않는다

 

• not 연산자 (not)

console.log(! value1);

위에서 value의 값은 true였으므로 여기선 not 연산자인! 을 붙여주어 값으로 false가 출력됨

 

 

 

 

 

ellie 1과 2는 각각 다른 레퍼런스가 저장되어있기 때문에 다르지만

ellie 3은 ellie 1이 가지고 있는 value를 ellie 3으로 할당했기 때문에 같은 레퍼런스를 참조하고 있다.

즉, ellie 1 안의 값이 변하면 ellie 3 안의 값도 같이 변한다.

 

 

 

 

conditional operators : if, else if, else

 

if는 조건식 '만약 ~이면' 뒤에 나오는 {} 안의 값을 실행시키고, 그 외에 다른 조건을 더 걸고 싶다면 else if를 사용한다.

그리고 앞에 조건에 아무것도 충족하지 않는다면 else를 사용하여

아무것도 충족하지 못했을 시 어떤 값을 출력할지 정한다.

 

 

 

 

Ternary operators :? (삼항 연산자)

 

앞에서 설명한 if, else if, else를 더 간단히 쓸 수 있는 조건식으로 삼항 연산자라고 부른다.

 

name의 값이 ellie인지 묻기 위해 뒤에? 를 넣고 맞다면 'yes'를 반환, 아니라면 : 뒤에 있는 'no'를 반환한다

참고로 ternary opeators 같은 경우는 간단한 식에만 사용하고 여러 개의 조건을 더 걸어야 한다면

위의 if, else if를 사용하거나 밑에서 설명할 switch를 사용하는 것이 좋다.

 

 

 

 

Switch operators

 

각 case에 맞는 값을 변환해준다

 

Chrome과 Firefox는 똑같은 값을 출력해주므로

case 'Chrome' :

case 'Firefox' :

console.log('I love you');라고 작성이 가능하고,

if에서 else if를 여러 번 반복해서 써야 한다면 switch 사용을 고려하도록!

+ 타입 스크립트에서 정해져 있는 타입을 검사하거나 자바스크립트에서 정해진 데이터를

처리할 때는 if문보다 switch 사용하는 것이 가독성이 좋아진다

 

 

 

1번

2번

 

두 가지의 경우를 보면

첫 번째의 결괏값은 false, 두 번째는 true가 나온다.

 

왜냐, c의 값은 현재 '1'로 문자의 값인데 switch(c)는 말 그대로 '1'이 된다.

그래서 첫 번째 d + 1의 결괏값은 문자'1'이 나온다. (문자+숫자 = 문자)

문자+숫자=문자가 되어서 3+'4'=34가 된다.

(근데 웃기게도 +가 아닌 다른 연산자 사용하면 숫자로 변환된다.

궁금하면 콘솔에 직접 찍어보기로!)

 

두 번째의 경우, switch(+c)라 이 경우 문자에 숫자를 붙여줘서 '1'에서 1로 변한다

이렇게 문자에서 숫자로 변환하려면 연산기호를 붙여주면 된다.

 

 

 

실제로 콘솔 창에 문자와 숫자, 연산자가 붙은 문자와 숫자를 계산해보니

결과가 저렇게 나왔다

 

 

 

Loops (반복문)

 

 

i에 3이라는 값을 주고 조건으로 i>0을 넣어주면 i가 false가 되기 전까지(0이 되기 전까지) 계속 값을 반환한다.

가장 밑에 결과를 출력하고 -1을 해줘서 3,2,1 이런 식으로 i에 들어가는 값이 변하다가

최종 true 값인 1까지만 출력하고 반복문을 멈춘다.

 

이는 조건문이 맞을 때만 블록을 실행하고 싶을 때 사용

 

 

 

Do while loops

 

위와는 다르게 블록{} 먼저 실행한 다음에 조건이 맞는지 안 맞는지를 검사한다

그래서 위에 i값이 0이 나왔음에도 불구하고 여기선 블록이 먼저 실행돼서 0을 출력하고 나서

i가 0인지 검사하고 이때 멈추게 된다.

 

따라서 블록 먼저 실행하고 싶다면 Do while을 사용하고,

조건문이 맞을 때만 블록을 실행하고 싶다면 While을 사용하자

 

 

 

 

for loops

 

for loops에서 begin은 딱 한 번만 실행이 되고 컨디션이 맞는지 안 맞는지 검사 후 맞으면 스텝 진행

컨디션이 맞지 않을 때까지 컨디션과 스텝만 계속 반복

기존에 존재하는 변수를 할당할 수 있고 또는 밑에처럼 for안에 let이라는 지역변수를 선언해서 let i = 원하는 초기값으로 작성하는 것도 가능하다.

 

 

 

다 정리하고 나니까 생각보다 양이 좀 많아 보이는데

무엇이든 기초를 단단하게 쌓고 시작하는 게 중요하므로!

한번 쭉 훑어보면 자바스크립트 기초 공부에 많은 도움이 될 것이다

 

 

p.s 유튜버 드림코딩 엘리님 채널에 자바스크립트, 프론트엔드 분야 외에도 정말 다양한 코딩관련팁을 볼 수 있어서 정말 추천!

 

 

Ref

https://www.youtube.com/watch?v=YBjufjBaxHo&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=4