TIL - 21.06.15 👨‍💻 JS

성훈·2021년 6월 15일

TIL js

TIL

목록 보기

2/59

TIL - 21.06.15

변수 (Variable)
자료형 (Data type)
함수 (Function)
조건문 (Condition)

1. 변수 (Variable)

변수는 어떠한 데이터를 한 값으로 선언하는 것으로 데이터를 저장하는 용도로 사용한다.

let sunghoon;
sunghoon = "developer";

상기 코드는 sunghoon 이라는 변수를 선언(Declaration)하고 선언한 변수(Assignment)에 developer라는 값을 할당(Assignment)한다는 뜻으로,


let sunghoon = "developer";

상기 코드와 같이 한줄로 작성 가능하다.

let 와 비슷한 키워드는 var 와 const가 있는데
var은 선언했던 변수를 다시 다른 값으로 선언 할 수 있지만, let과 const는 다시 선언 할 수 없으며(에러 발생),
let은 변수를 재지정 할 수 있지만, const는 처음 선언한 값을 변경할 수 없다.

자바스크립트를 공부하면서 가장 먼저 이해해야 할 것은 '=(equal)'이 '는'이 아니고 값을 부여하는 할당 연사자라는 것 이다.

상기 sunghoon = "developer";를 읽을때 성훈은 디벨로퍼로 읽기보단 성훈에 디벨로퍼를 할당으로 읽는 연습이 필요할 듯 싶다.

그리고 변수명을 적을때 뛰어쓰기를 쓰지 않으며 뛰어쓰기 다음 글자를 대문자로 적는다는 약속(camelCase)이 있다.
ex) let currentWriter = 1;

만약 변수를 선언하고 값을 할당하지 않으면, undefined 라는 값이 할당되며 이 값은 후술할 null과 다른 값이다.

2. 자료형 (Data type)

자료형엔 7가지가 있으며

String - 문자열 - '',"" 사이의 값

Number - 자바스크립트의 한계(-(2^53 − 1) 와 2^53 − 1사이의 값만 표현 가능)로 Number는 Bigint로 나뉘는데 숫자 뒤에 n\을 붙히면 Bigint로 인식되며 숫자 크기의 한계가 없어진다.

Boolean - 불리언(불린) - 참, 거짓의 값 - 반복문, 조건문 등에서 사용.

undefined - 지정되지 않음, 변수에 할당하지 않았을때 할당됨.

null - 지정되지 않음, 빈 값이라는 것은 undefined와 같지만, 값을 따로 할당해야하는 값이며, 주로 어떤 변수를 초기화하는 용도로 사용.

Symbol - HTML의 ID 비슷한 것.

Object - 객체, 여기에 함수도 포함된다.

여기서 (undefined === null) = false 이다.

3. 함수 (Function)

함수는 쉽게 말해 지시사항의 묶음이다.

함수의 구성은 크게 입력과 출력으로 나뉜다.
입력의 요소엔 매개변수(Parameter), 인자(Argument)가 있고,
출력의 요소엔 반환(Return)이 있다.


function funcName(매개변수1, 매개변수2){
    let sum = (매개변수1 + 매개변수2);
    //반환
    return sum
}
// 4, 5가 인자이다.
funcName(4,5) // 9

매개변수는 코드블럭 내에서 함수를 전개할때 사용하고
인자는 함수를 전개된 함수에 대입할 값이다.

만약 return을 사용하지 않으면 해당 함수는 어떤 인자를 넣더라도 undefined를 출력한다.

함수의 선언 방식으로는 세가지가 있는데

//함수 선언식
function plus(num1, num2){
    let sum = num1 + num2;
    return sum;
}
//함수 표현식
let plus = function(num1, num2){
    let sum = sum1 + num2;
    return sum;
}
// 화살표 함수
let plus = (num1, num2) => {
    let sum = sum1 + sum2;
    return sum;
}
//화살표 함수는 코드블록 내 수식이 하나일 때 중괄호와 리턴을 생략할 수 있다.
let plus = (num1, num2) => (num1 + num2);

상기 세값은 생긴 건 달라도 함수가 담고 있는 수식 자체는 동일하다.
선언식과 다른 두 방식과 가장 큰 차이는 선언식은 호이스팅 실행의 유무이다.

자바스크립트는 코드를 실행할 때 처음부터 끝까지 읽은 다음 메모리에 저장한 다음에 출력되는데, 이 과정에서 변수와 함수 선언은 어느 위치에 있던지 가장 먼저 이루어진다고 생각하면 편하다.

function wannaBeInFuture(name){
    let futureJob = name + ' wanna be a developer.';
    return futureJob;
}
console.log(wannaBeInFuture('Sunghoon')); // Sunghoon wanna be a developer.


// 함수 선언이 함수 호출 뒤에 있지만 정상적으로 출력된다.
console.log(wannaBeInFuture('Sunghoon')); // Sunghoon wanna be a developer.

function wannaBeInFuture(name){
    let futureJob = name + ' wanna be a developer.';
    return futureJob;
    }

호이스팅 때문에 console.log의 위치와 관계없이 출력은 동일하다.

만약 후술했던 함수 자리에 선언식이 아니라 표현식 함수가 왔었다면?

console.log(wannaBeInFuture('Sunghoon')); // Uncaught ReferenceError: wannaBeInFuture is not defined

let wannaBeInFuture = function(name){
    let futureJob = name + ' wanna be a developer.';
    return futureJob;
}

에러가 발생한다.

그러니 호이스팅의 특성을 생각해서 코드가 꼬일 수 있으니 함수선언은 되도록 상단에, 호출은 함수식 하단에 적는 편이 좋다.

4. 조건문 (Condition)

조건문을 알기위해선 연산자를 우선 알아야 하는데,
그중 비교 연산자라는 것이 있다.
연산자가 제법 많기 때문에 <(<=), >(>=), ===, !== 기본적으로 이 네가지는 머리에 심어두고 나머지는 MDN을 드나들며 눈에 익히는 편이 좋을 듯 하다.

이 연산자들을 알아야하는 이유는 연산자들로 불리언타입의 값을 뽑아낼 수 있기 때문인데


let age = 19; //
// age 값이 19이기에 age < 19는 거짓이므로 else를 실행한다.
if(age<19){
console.log('안녕!')
} else {
console.log('안녕하세요!')
}

간단한 예이지만 이처럼 값에 따라 결과물이 다르게 출력되도록 할 수 있다.

if(조건1){ 조건 1이 참일 때 실행.
} else if(조건2) { 조건1이 거짓이고 조건2가 참일 때 실행.
} else if(조건3) { 조건1, 2가 거짓이고 조건 3이 참일 때 실행.
} else { 조건1, 2, 3 모두 거짓일 때 실행.
}

비교연산자의 경우 NaN(Not a Number)와 비교할 경우 항상 false를 반환한다.

연산자의 종류엔 논리 연산자도 있는데,
&&, ||, ! 등이 바로 그것이다.
논리 연산자는 다른 포스트에 내용을 조금 더 추가했으니 그 쪽을 보자.

&&는 AND 연산자로 연산자 양 쪽의 값이 전부 참이어야 참을 출력하는 연산자이다.
ex) isFruit && isSweet -> 과일임과 동시에 달아야 참.

||는 OR 연산자로 연산자 양 쪽의 값중 하나만 참이어도 참을 출력하는 연산자이다.
ex) isFruit || isVegetable -> 과일이거나 채소면 참.

!는 NOT 연산자로 전술한 두 연산자와 함께 쓰는 연산자인데, 두 연산자 양 쪽의 값 앞에 붙어 부정의 의미를 포함시킨다.
ex1) isFruit && !isSweet -> 과일이면서 달지 않아야 참.
ex2) isFruit || !isVegetable -> 과일이거나 채소가 아니어야 참. ~~참외는? 참외롭다~~

소개했던 비교 연산자, 논리 연산자 말고도 산술 연산자, 문자열 연산자 등등 정말 많은데 전부 외우기 보다는 이 아름다운 사이트에 자주 방문하면서 눈에 익히는게 나을 듯 하다.

그런데 오늘 공부하면서 눈에 거슬렸던 연산자 몇 가지만 추가로 정리하자면,

%는 나머지 연산자이다. 산술 연산자 중 하나이며 나누고 남은 값을 출력한다.
ex) console.log(54 % 10) // 4

++는 증가 연산자이다. 역시 산술 연산자 중 하나이며, 결과적으로 값에 1을 더하는 역할을 한다.
값을 반환시킬때 숫자 앞에 ++가 오느냐 뒤에 오느냐에 따라서 출력이 달라지는데, 전위형(++i)일때는 1 더한 값을 바로 다음 코드부터 사용하고, 후위형(i++)일때는 반환되기 전까지는 기존 값으로 사용하다가 다시 돌아가서 코드타고 내려올때 1 더한 값으로 사용한다.

let i = 0;
while(i<10){
console.log(i);
i++;
}
// 이 경우 i가 0~9까지 출력하고 출력된 최종 i 값은 9이다.
// 증가 연산자로 10이 된 것은 맞지만, 후위형이므로 기존 값을 출력하고 현재 값은 코드 위로 올라가서 못 내려오기 때문.
let i = 0;
while(i<10){
console.log(i);
++i;
}
// 이 경우 i는 0~9까지 출력하고 콘솔 상의 최종 i 값은 10이다.
// 출력하는 단계가 해당 코드를 지난 다음 코드부터 i는 10이 되었기 때문.

상기 두개의 반복문에서 둘 다 i = 10 이다.

?는 삼항 연산자이다. 조건(삼항) 연산자 중 하나이며 조건 ? 값1 : 값2에서 조건이 참이면 값1를 값으로, 거짓이면 조건2를 값으로 가진다.
ex) let grade = (score >= 60) ? "pass" : "fail"; // 점수(score)가 60점 이상이면 pass를 등급의 값으로, 60점 미만이면 fail을 등급의 값으로 가진다.

표현식이 아닌 문법 구조(continue, break등)에는 삼항 연산자를 사용할 수 없다.
그렇기에 삼항 연산자를 if문 대신 사용하는 것을 지양하는게 좋다.

Truthy와 Falsy

Truthy는 참 같은 값, Falsy는 거짓 같은 값이다.
6가지 기억해야할 falsy 값이 있는데,

false, null, undefined, 0, NaN, ''(빈 String) 이 그것이다.

falsy의 반대 값은 true 값이며 truthy 의 반대 값도 false이다.

(!falsy === true) = true, (!truthy === false) = true

GOOD 😉

오늘 처음 페어링 했었는데, 첫 페어 분이 좋은 분이라 기분이 좋다.
오늘 배운 것은 다 복습했다! ~~내일 일어나면 까먹을 듯~~

BAD 😥

생활코딩.JS 끝내려고 했는데 함수파면 팔수록 뭐가 많이 나와서 객체는 넘보지도 못했다.
코플릿 문제에 비해 페어링 할당시간이 너무 길어서 빨리 끝내고 조금 잤다. ~~커피가 안 들어~~

TO DO 🔥

내일 아침 조건문 다시 한번 복습, 끝내고 문자열 공부하기.

Retrospect 🧐

다른 동기 분들은 시간이 많이 남았다고 하셨는데 나는 자료 찾고 여러개 본다고 시간이 좀 부족했다. ~~밥도 15분 덜 먹었어~~
코플릿하는데 어리버리까서 조금 머쓱했다.
함수에서 리턴해야하는데 엉뚱한 값을 자꾸 집어넣어서 페어님을 당황시켰다😇
내일은 어리버리까지말고 더 집중하고 더 열심히 공부하자.

블로깅하는데 대략 2시간 30분..
지금 배운게 별로 없는데도 이 정도면 심히 곤란해질듯 하다 🤔
복습하는건 좋지만 이런 방식의 블로깅이 맞는 방식일지 고민해봐야겠다.