2장 - 자바스크립트 기본(2)

if 와 '?'를 사용한 조건 처리 ❤️

문서를 다시 읽어봐도
조건문이라는 친구를 알아보는 과정이라고 소개해야 할 것  것 같지만, 조건을 평가하는데 아래 내용을 쓰면 된다고 훅 치고 들어온다.

즉, if 문과 ? 연산자를 사용하면 된다고 말하고 있다.

조건문은 🐈 만약 (조건이❓이러이러) 하다면, (다음과 같이 반짝반짝🌟) 하게 행동 하라... 라고 하는 개발의 꽃이다.

 

조건문을 잘 만든 예시 *'ㅁ '* (???)

 

 

'if'문

설명에서 if(조건식) 문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true 이면 코드 블록이 실행된다.
- 라고 if 라는 조건 문법을 사용해, 괄호안의 조건식을 평가해서 결과가 참한녀석이면, 코드를 실행하는구나! 하고 이해하면 되는 간단한 친구다. (뭐가 다른데?)

if (year === 2021) {
  alert( "백색소의해라고합니다! 한우맛있쩡" );
}

 

실행 부분은 짥게 줄여서 중괄호를 안쓰고 한줄로 쓰기도하는데, 가능하면 가독성을 위해서 한줄이라도 묶어주자.🥺

 

year === 2021

이라고 표현한 부분이 조건식인가? 조건과 조건문 조건식은 다른가? 이라는 부분을 헷갈릴 수 있는데, 이렇게 보고 본문을 읽어보자.

조건문 (if 조건 문...법...)	조건식(표현식)	평가 된 값
if(year === 2021) { ...뭔가 할 일... }	year === 2021	true

조건문에 조건식을 넣으면 참/거짓을 평가해서 동작한다고 설명하려 한 것 같다고 느꼈다 🤔

구글 검색해보면 사람들이 조건문이랑 조건식이랑 섞어쓰는것 같으니까 이것도 헷갈릴 수 있을지도 모르겠고...

 

조건식(표현식)이라 써 두었는데, 표현식으로 confirm() 정도는 쓸 수 있지만 가능하면 이렇게 즉시즉시 받아서는 가독성이 떨어지니 안하는편이 좋다고 생각되었다.

 

 

'else'절

언어의 문법이니까 절이 나온다.

기본적으로 상단의 조건식과 반대되는 조건인 false 경우 실행된다.

if (year === 2021) {
  alert( '백색소의해라고합니다! 한우맛있쩡' );
} else {
  alert( '돼지가 맛있는 연도 입니다.' );
}

 

조건부 연산자 '?'

 

물음표가 나왔다. 조건부 연산자, 혹은 혼자 쓸 수 없고 3개의 항이 필요하다해서 삼항연산자로 불려진다.

let 결과를담을변수 = 조건식이나조건 ? 참일경우실행할내용 : 거짓인경우실행할내용;
// 물론 위 코드는 돌리면 동작이 안된다.

한글로 써 본 예제이다.

상당히 많은 코드에서 이 조건부 연산자로 처리하는 경우가 제법 있으니 눈에 익혀두자.

 

다중'?' 는 가급적 가독성을 위해서 안쓰는게 좋고, 부적절한 '?' 부분도 봐 두면 좋다.

 

논리연산자

자주 쓰는 쓸만한 친구인 논리연산자가 나왔다.

세가지 종류가 있다고 소개 중.

 

|| (OR)

오아 연산자는 보통 엔터키위에 쉬프트키를 눌러 입력한다. 버티컬바 라고 불리던가 그랬다. 두개를 쓰자.

if같은 조건문에서 쓰면 평가후 바로 참한 내용에 대해서 사용하고,

"✨전통적인프로그래밍에서✨"
불린값을 조작하는데 쓰이고, 둘중 하나라도 참이면 참(true)을 반환한다.

 

두번째의 아주 큰 특징으로 

첫번째 트루씌(참한녀석)를 찾는 오아연산자 '||'

왼쪽부터 체크를 시작해서 첫번째 참한 값이 나오면 즉시 평가 된, 참 결과 평가에 따라 동작의 오리지널 타입 결과 값을 반환한다.

* 즉, 조건문에서 사용할때랑, 표현식으로 일반적으로 할당연산자(=)와 섞어서 쓸때랑 다르단걸 말한다.

 

나머지 변수 표현식으로 구성된 목록이나 단락평가는 응용법이니 알아두면된다.

a값이 없는경우 b값을 세팅하고 c값도 없는경우 기본값으로 "테스트값" 이렇게 할 때 쓰기도 했었..(아래 복선으로 남겨두자)

 

&& (AND)

두개의 앰퍼샌드를 연달아 쓰면 AND 연산자를 만들 수 있다고 하네. 쉬프트+7

 

다시나온✨"전통적인프로그래밍"✨에서 모두 '참'인 경우 참(true)을, 그외엔 거짓(false)를 반환한다. 라고 설명 중.
조건을 모두 만족해야하니, 엄격하다.

 

두번째 아주 큰 특징으로

 

첫번째의 펄씌(거짓된친구들)를 찾는 AND 연산자 '&&'

이라고 설명하고있다.

위에 나온 오아연산자의 두번째 큰 특징과 반대되는 조건이다.

거짓된친구들 falsy 라는 의미를 가진 친구들을 한번 생각해보자.

false, null, 0, undefined 이런 친구들이 나오면 먼저 반환한다.

 

 

힘든경우다

가끔 정말 이런코드를 쓰는 사람들도 있으니, 코드리뷰에서 이렇게 쓰지않으면 좋을 것 같아요. 라고 해주자.
취향이니까.. 생각이 있어 썼겠지. 강제는 하지말고 크게 싸우지는 말자. 회사나 팀의 코드 규약룰이 있으면 지켜달라고 하자.

 

! (NOT)

참/거짓으로 평가한 후 뒤집어주는 연산자이다.

 

헷갈리면 지금은 그냥 넘어가는것이 좋다.

 

두번쓰면 불린형으로 변환할 수 있다고 설명하는 예시까지 사용해봤다.

아, 모든 논리 연산자 우선순위 중 높다는것도 꼭 알아두자.

 

 

'null'병합연산자

사실 이거 정리할 때 까지 있었어? 라고 생각할 정도였다. 최근에 추가되어 폴리필이 필요하다고.

삼항연산자의 고급버전으로 생각하면 좋으며, 비어있고 선언된 변수는 걸러주는 좋은 연산자구나.🥺

위에서 복선을 회수해서, 요즘은 이 연산자를 사용하면 짧고 간결하게 선언이나 아무것도 없다면 기본 값을 정해줄 수 있고

선언된게 있다면 그 값을 먼저 반환하는 동작을 한다.

 

우선순위는 저 - 밑에 있어서 (5) 나- 중에 동작한다. 괄호로 잘 묶어서 먼저 평가되도록 쓰는걸 권장한다.

 

 

 

while 과 for 반복문

한바퀴 돌고 한바퀴 또 도는 이터레이션이라고 부르는 뺑뺑이를 도와주는 반복문의 시간이 왔다. 🔥

(루프문, loop문 이렇게 부르기도 했던거같아.)

 

'while' 반복문

문법을 소개하는데, if에서 조건식에 대해 잘 했을테니 쉽게 할 수 있을거다.

조건식을 평가해서 참인경우 본문을 실행해주는 구조다.

* 한줄짜리 예시가 있는데, 가능하면 쓰지말자.

 

'do ... while' 반복문

조건식 평가를 뒤로 미루었다. 즉, 일단 일을 딱 한번 저질러놓고 아래에서 한번 더 할지 말지 고민을 해보는 구조다.

😂정말 잘 안씀.

 

'for' 반복문

많이 쓰임. 구조가 조금 독특해보여서 첨언을...

for (처음실행되는구문.인데ㅡ보통은여기에초기값을넣기도한다; 평가식; 증가식) {
  // ... 반복문 본문 ...
}

 

(세미콜론;두개;들어가있다)

세미콜론이 두개 들어가있다. 순서대로 보통은 초기식, 평가식, 증가식 이렇게 부르기도 하는데

반복을 위해서 초기값 설정은 외부에서도 할 수 있다. 이 경우 비워두기도한다.

for ( ; i < 10; i++) 이렇게 될 수 있다는것. 정도까지. 그리고 초기식에 인라인 변수선언, 그리고 앞에서 쉼표연산자로 인라인 변수선언을 여러번 할 수 있단것도 기억해내면 될듯.

 

반복문 탈출

반복을 하다가 종료를 해야하는 경우 사용하는 break 키워드가 있다.

그냥 바로 써버리면 반복문이 바로 종료되니, 반복문 안에 조건문을 넣고 잘 가꾸어 이를 통해 실행하도록 한다.💬

 

다음 반복으로 넘어가기

break 하기는 그렇고, 다음 식은 전부 실행하는건 낭비일 것 같은 경우, continue 를 사용해서 코드의 뺑뺑이 시작점을 위로 돌려준다.🧡

 

break/continue와 레이블

중첩반복문을 사용하는 경우 사용할 수 있다.

가끔 사용하는데, 이게뭔지 찾아보는 사람이 있었으니 기억해두자.

(그게나였다. 이게 무슨문법이야 처음본다? 하고 잊어버려서 찾은적이있었다.)

반복문 앞에 콜론으로 붙여주고있다.

 

Switch문

조건문 반복분에 이어 스위치문이라는 큰 문법이 나왔다. 강력하게 타입체크등을 가지고 엄격한 조건판별을 하기 때문에 구체적으로 다룬다고 느껴졌다.

 

문법

디폴트는 필수가 아니지만 break는 써주세요 제발... 안쓰면 안쓰는 이유를 적어두면 협업시 의도 해석에 도움이 된다.

생각보다 쉽다. 케이스에 써 있는 예시☣️를 보면 타입까지 체크하기 때문에 prompt 같은걸로 입력받으면 string이니까 주의해서 case에 케이스를 입력(?) 정의(!) 해주는 것 말고 실수하지않으면 된다.

케이스에 표현식을 넣는건.. 되는거긴한데 가능하면 밖에서 정리하고 넣어주자.

 

여러 개의 "case"문 묶기

문법은 아니고 break를 사용하지 않고 쓰는 편법인듯.

 

자료형의 중요성

위에서 자료형까지 일치 시키게 된다고 예시☣️를 한번 언급했다.

 

함수

자바스크립트의 꽃 함수다. 💮꽃이 너무많다. 뒤에 객체도 꽃인데...프로톹ㅌ

일단 이미 자연스럽게 각종 브라우저에 들어있는 내장 함수를 사용해 본적이 있으니 익숙하다.

 

직접 만들어서 써 보자.

 

함수 선언

 

약간 선서! 같은 느낌으로 대중들에게 이 함수를 쓰겠다고 선언하노라. 하는 방식이다.

function showMessage() {
  alert( '안녕하세요!' );
}

예시 샘플은 간단하게 잘 되어있다. 복붙했다.

function 이라는 함수 선언 키워드, showMessage 라고 선언한 함수이름, 매개변수를 넣을 공간( ), { 본문내용 } 

 

선언은 했는데 사용은 해본적이 없다.

showMessage();

이렇게 사용한다.

 

지역변수/외부변수

도튜먼트 내용으로 특별한 무리는 없는 것 같다.

전역변수라고 변수밖에 선언된 외부 변수 중 하나인데, 글로벌로 선언한 변수의 관리를 잘 해야한다는 점 정도 기억해두자.

 

매개변수

변수긴 변수인데, 함수안에서 전달받는 매개변수(파라메터 parameter)라고 하는 변수이다. 

function useParaPara(catName, insamal) {
  alert( catName + ' - ' + insamal ); // 좌측에 고양이이름 - 인사말을이어두었다.
}
useParaPara('나비', '야옹아안녕?');

매개 변수를 넘겨봤다

예제에서 매개변수를 넘겨주는걸 봤다. 본문을 마음껏 수정해서 변경할 수 있다.

 

기본값

매개변수의 기본값을 설정해 줄 수 있는 부분도 참고해두자. 아무것도 않들어오는 경우, 코드가 오류날 수 있으니 이런 경우를 막아준다.

 

매개변수 기본값을 설정할 수 있는 또 다른 방법

오래된코드 등 보통은 저렇게 많이 구현을 해 둔다.

 

반환값

함수는 반환값이라는것을 결과물로 생성한다.🌺 파라메터로 받은 내용을 연산하고 그 결과를 내어준다.

반환값에따라 변수 이름도 잘 지어주면 좋다.

return 키워드를 사용해서 반환 할 변수를 지정해주자.

return을 안하거나 변수를 지정안하면 undifined 인 것을 알아둘ㄱ것

 

함수이름짓기

언제나 이름짓는게 젤 힘들어..

규칙예시를 잘 해뒀는데, 해당 룰을 기반으로 만들고, 언제나 부득이한 경우가 생기면 주석을 활용하자.

함수는 동작 하나만 담당해야하는데, 어쩔 수 없는 경우 두개가 될 수 있다. 왜 그렇게 되었는지 꼭 써두자.

 

함수==주석

한줄로 요약하면 함수를 기능을 잘 나눠서 이쁘게 잘 만들면 주석과 같다는 의미이다.

 

 

함수 표현식🌺

앞에는 선언이라고 했고, 뒤에는 표현식이다. 개인적으로 표현식의 '표' 가 = 랑 느낌이 비슷해서 = 로 할당하고 구문의 끝을 알리는 ; 세미콜론이 있으면 표현식이구나 하고 외웠다.

let sayHiPyoHyun = function() {
  alert( "Hello" );
};

alert( sayHiPyoHyun ); // 함수 코드가 보임

 

선언문이랑 다른 특징은 끝에 세미콜론도 있고, 미리 선언해두지 않는다인데, 문서의 코드 보면서 진행해보면 알 수 있을것이다.

 

선언은 미리 선언이고 표현식은 다음과 같다.

내가 그의 이름을 불러주기 전에는 그는 다만 하나의 몸짓에 지나지 않았다. 내가 그의 이름을 불러주었을 때, 그는 나에게로 와서 꽃🌺이 되었다.
내가 그 함수를 불러주기 전에는 그건 다만 하나의 표현식에 지나지 않았다. 내가 그 함수명을 호출했었을 때, 그건 나에게로 와서 실행🌺 되었다.

표현은 해당 위치에 코드가 🌺닿아야 표현되어 불러주어야 온다. 😂 쓰고나니 오글거린다. 사람이 잠을안자고 정리하면 이렇다.

 

콜백함수

예문을 기반으로 공부하자. 교과서기반으로 따라가자.

매개변수 3개를 제시하고 있다.

첫번째 코드라인부터 보면 ask 애스크라는 질문을 받는 함수하나가 1-4줄에 있다. 

 

파라메터로 question을 받는데, 2번줄을 보면 한줄짜리 짧은 if문으로 조건식에 컨펌으로 질문을 받고있다.
뒤에 바로 yes 라고 파라메터로 받은 yes를 ()를 써서 호출(실행)하고 있다. yes()를 부른것이다.

이런 방식을 콜백방식(나중에 부름)이라고 부른다.

 

yes는 어디에있나? 

 

함수의 인자 순서는 실행할 때와 같으니
15번째 줄에 두번째 파라메타로 showOK 로 yes에 해당된다.

 

두번째 예제는 너무 짧게 썼는데.. 솔직히 이렇게 쓰면 가독성이 떨어진다.

 

함수표현식 vs 함수 선언문

차이에 대해 위에서 간단하게🌺 설명하긴했다. 이곳에서 좀 더 상세하게 다루고 있다.

1. 문법차이

선언문 - 코드 중간에 독자적인 구문... JS 코드 어딘가에 당당하게 쨘 하고 선언되어있다.

표현식 - 할당연산자 우측에 구문이 잘 표현되어 있음.

2. 생성차이

선언문 함수선언문이 정의되기 전에 호출이된다고 써두었는데, 호이스팅 개념이 없다면 일단 넘어가고 

간단하게는 선언문은 순서상관없이 어디서든 코드 저 밑에 선언을 해두어도 위에서 호출해서 쓸 수있다.

표현식은 할당되고, 그 부분에 닿아야 실행되기 때문에🌺

 

복잡한 개발에서는 표현식을 룰로 권장해서 개발하는 경우도 있다.

선언문을 여기저기 선언 후 호출하면 못찾기도 해서 그렇다.

 

 

화살표 함수 기본

그렇다는건 심화가 있다는거겠지?

정식 명칭은 화살표 함수 표현식🌺이다.

심플 문법부터 보자. 두번째줄은 실행안된다. 첫줄과 매칭을하려고 씀.

let func = (arg1, arg2, ...argN) => expression
선언 함수명 = (인자1, 매개2, 많은인자들) => 실행할표현식과반환을값을적는곳

큰 특징은

function 이라는 키워드를 써야하는 번거로운 부분, return 키워드 쓰는 부분이 사라졌단걸 주목하자.

 

let sayHi = () => alert("안녕하세요!");

줄이고 줄이는데 최적화 할 수 있기 때문에, 너무 간단하게 줄이는 경우도 있다.

선언문으로 쓸 수 없는게 지금 할당 한 우측을 보면서 선언문으로 바꿔 만들고자 하여도
이름이 없는 익명함수가 되어버리기 때문이다.

🌺화살표 🌺함수 🌺표현식이다.

 

여러줄인 경우 중괄호로 묶는것도 다른방식들과 같다만 알아두면 될 것 같다.