JavaScript | 변수, 타입, 함수, 조건문

SURI·2021년 11월 9일

개발에 대한 A to Z

목록 보기

10/10

1. 변수

1.1 Achievement Goals

변수 intro

프로그래밍은 데이터 처리다.
변수 사용은 데이터를 편리하게 저장하고 사용하기 위함이다.
변수의 선언과 값의 할당을 설명하고 코드로 쓸 수 있다.
값으로 변환된 표현문이 변수에 할당되는 것을 이해한다.

변수 기초, 변수 실습

자바스크립트에서 변수의 선언과 값의 할당을 설명한다.
변수 선언과 값 할당 관련 정확한 용어를 이해한다.
=가 할당연산자임을 이해한다. e.g. num = num + 1은 같다는 의미가 아니라 할당한다는 의미다.

1.2 변수 Intro

프로그래밍을 통해 우리가 원하는 데이터 처리 방식을 컴퓨터에게 명령한다.
"구구단을 출력하라!"
구구단의 단을 일일이 바꿀 수도 있지만, 변수를 지정할 수 있다. 동일한 데이터가 등장하는 곳을 변수로 대체하고 저장한다. 변수를 통해 9번의 수고를 덜 수 있다.

의미

컴퓨터에는 데이터를 위한 보관함인 메모리가 있다. 메모리의 크기는 모두 동일하다. 변수는 각 보관함의 이름이다. 이름이 붙은 저장소라고 이해하면 된다. 이름표를 붙여서 데이터를 재사용할 수 있다.

사용법

보관함 확보(선언)

let age; // 선언하지 않고 할당을 하면 에러가 뜬다.
let name, age, address; // 이렇게 여러 개의 변수를 한 번에 선언하는 것도 가능하다.

보관함에 데이터 저장(할당)

age = 12; // 같다는 의미가 아니라 값을 대입/할당하는 것이다.

선언과 할당 동시에 가능

let age = 12;

Evaluation of Expression

코드의 한줄을 표현식expression이라고 한다. 표현식이 무엇을 의미하는지 알아내는 방법을 평가evaluation라고 한다.

let name = 'suri';
console.log('hello' + name); // 'hello suri'

1.3 변수 기초

일상에서 변수는 상황에 따라 변할 수 잆는 값을 의미한다.
프로그래밍 세계에서 변수는 이름(Label)이 붙은 값이다.
변수를 이용해 값을 다른 곳에서도 이용할 수 있다.

let pi = 3.141592;
let speedOfLight = 3000000000;

표현식은 변수와 특정한 값을 이용해서 연산을 하는 경우다.
- 하나의 값으로 표현되는 코드를 의미한다. 1+1은 2를 표현하는 표현식이다. 자바스크립트도 하나의 값으로 컴파일한다.
- 표현식은 변수로 구성되기도 한다.
- pi * 5 * 5
변수명
- 공백을 쓰지 못하고, 단어의 첫 글자를 대문자로 써 붙인다.
- 낙타의 등 모양처럼 생겼다고 해서 Camel Case라고 부른다.
변수는 동일한 변수를 이용해 대입 가능하다.
- 수학적으로는 말도 안 되지만 = 가 같다는 게 아니라, 할당한다는 의미이므로 가능한 연산이다.
- 한 번 선언한 변수는 다시 선언하지 않는다. 즉, let은 한 번만 사용한다.

let sum = 1;
sum = sum + 2;
sum = sum + 3;
sum = sum + 4;

변수를 선언하고 할당을 하지 않으면? 개발자 도구에서 확인을 해보니, undefined(정의되지 않았다)라고 뜬다. 이 자체로도 이미 값이다.

2. 타입

2.1 Achievement Goals

어떤 값(데이터)을 담는 저장소(메모리)의 이름을 변수라고 한다. 새로운 변수를 선언하고 값을 할당하는 법을 학습했다. 그 때, 변수에 숫자나 문자가 할당되는 것을 보았다. 변수에 담을 수 있는 데이터는 숫자나 문자처럼 특정한 형태를 가지고 있다. 이번 시간에는 그 형태, 타입에 대해 학습한다.

원시 자료형 vs 참조 자료형
원시 자료형 string, number, boolean, undefined의 의미를 이해한다.
타입은 서로 다른 속성과 메소드가 있다.
typeof으로 특정 값의 타입을 확인한다.
엄밀한 비교( === 과 !== )의 필요성을 이해한다.

2.2 타입 기초

자바스크립트의 모든 값은 타입을 가진다. 컴퓨터는 문맥을 모르니 일일이 구분해줘야 한다.
타입에 따른 올바른 문법이 있다.
- string과 string을 더하면 결합이 되고, number와 number를 더하면 덧셈이 된다. 하지만 string과 number를 더하면 number과 string 처리 된다.
숫자(number)
- 나중에 빅인트라고 아주 큰 정수를 배우긴 하지만 우선은 소수, 정수 구분 없이 숫자로 취급해준다.
문자열(string)
- 문자열에서만 따옴표를 쓴다.
불리언(boolean)
- 그 값으로 true/false 두 가지만 나온다.
자료형
- 타입이 서로 섞인 compound 타입이다.
- 순서가 있는 집합인 배열이 있다.
- 폼에서 자주 보는 형태인객체가 있다.

// 배열
let fruits = [
'banana',
'apple',
'pineapple',
 ];

// 객체
let person = {
  name : 'suri',
  age : '31',
  isStudent : true
};

undefined도 타입이고, 함수도 타입이다.

타입을 강제로 형 변환하기

Number()
- Number('hello')은 NaN을 리턴한다.
- boolean 타입을 넣으면 숫자로 바꿔주는 부분은 재밌었다.
String()

3. 함수

3.1 Achievement Goals

하나의 작은 기능 함수에 대해서 배워본다. 함수는 입력에 따라 걸맞는 작업(논리적인 일련의 작업)을 하는 하나의 단위다. 복잡한 문제를 해결하기 위해서는 작고 간단한 문제부터 해결해 나간다.

프로그래밍 언어의 문법이 중요한 게 아니고, 순차적인/논리적인/체계적인 사고를 하는 게 중요하다. 바로 Computational Thinking 이게 더 중요하다. 소프트웨어는 금방 변하고 사라진다. 문제 해결 능력, 적응 능력이 필요하다. (링크 정리)

함수 Intro

함수는 작은 기능의 단위이다.
함수 선언을 keyword, name, parameter, body가 필요하다.
함수 선언과 호출의 작동원리를 이해한다.
함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설명한다.
함수의 리턴값이 변수에 할당되어 담기는 과정을 설명한다.

함수 기초, 함수 실습

함수의 호출과 리턴을 이해하고, 코드로 작성할 수 있다.
함수 그 자체(func)와, 함수의 호출(func())를 구분한다.
매개변수(parameter)와 전달인자(argument)를 설명할 수 있다.
기능인 같은 함수를 선언식, 표현식, 화살표 함수로 작성할 수 있다.

3.2 함수 intro

변수에 배웠던 구구단의 예를 다시 떠올려보자. 9줄의 콘솔 로그 복붙하는 피곤함이 여전히 남아있었다. 코드 묶음과 변수를 저장하고 있는 상상의 기계를 떠올려보자.

기계를 구성하는 부품은 keyword(function), name(mulTablePrinter), parameter(num), body(코드 묶음)으로 치환해볼 수 있었다.

의미

코드의 묶음이다.
기능의 단위라고 볼 수 있다.
입력과 출력이 있다.
return 호출 후에는 반드시 돌아온다.

사용법

버튼 제작(선언)

함수는 특별한 공간에 보관된다.

function cal(param1, param2) {
console.log(param1 + param2);
return param1 * 10
}

버튼 사용(호출)

cal(10, 20);

Evaluation of expressions

let result = cal(10, 20);

함수가 호출되면 특별 보관함에 저장된 함수가 조회된다.
매개변수는 인자의 값으로 치환된다.
body 안에 코드가 순차적으로 실행된다.
함수가 리턴하면 호출된 장소로 돌아간다. (함수 호출 코드는 return 값으로 바뀌게 된다.)

=> 함수가 호출되면 body안에 있는 코드가 실행되고 결과값을 리턴한다.

3.3 함수 기초

어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록이다.(지시사항들의 묶음)
입력값이 있고 항상 출력값을 반환한다.
return 문을 사용하지 않으면 undefined를 반환한다.
반복적으로 실행되는 일이 필요한 경우에 함수로 만들 수 있다.

함수 선언하는 3가지 방법

// 선언식
function getRectangleArea (width, height) {
 let rectangleArea = width * height;
 return rectanleArea
};

// 표현식
let getRectangleArea = function (width, height) {
    let rectangleArea = width * height;
    return rectanleArea
  // 변수를 선언하고 함수를 할당했다.
  
}

// 화살표함수
let getRectangleArea = (width, height) => {
    let rectangleArea = width * height;
    return rectanleArea
}

// 화살표함수(2)
let getRectangleArea = (width, height) => width * height;

화살표 함수는 함수 내부의 코드가 한 줄일 경우에는 return과 중괄호를 생략할 수 있다. 소괄호는 그대로 사용가능하다.
함수 내의 표현식이 2줄 이상인 경우 return과 중괄호를 명시적으로 쓰는 것이 좋다.

함수의 호출

변수에 함수가 담겨 있으면 () 괄호를 붙여서 함수를 호출할 수 있다. 입력값을 설정할 수도 있다.

let result = speakUp('hello world');

여기에서 result에는 위 함수의 리턴값만 담길 것이다.(실험결과)
함수를 선언할 때 선언하는 변수가 매개변수이고, 전달인자는 함수를 호출할 때 매개변수에 할당되는 값이다.

함수의 리턴

함수가 호출되고 나면, 함수의 body 코드가 실행되고 결과값을 리턴한다. 리턴값을 주지 않으면, undefined를 리턴한다.

4. 코드 학습법

4.1 Achivement Goals

구글링

자바스크립트와 소프트웨어 개발에 대해 궁금한 것을 찾아본다.
에러를 해결한다.

크롬 개발자 도구

Chrome developer console의 기본적인 사용법을 이해한다.
Chrome developer console에서 JavaScript의 입력/출력을 확인한다.
문법 에러를 최소화한다.
에러를 발견한다.
debugger 키워드로 코드를 단계적으로 실행해볼 수 있다.

4.2 모르는 것을 검색하는 법

문제가 구체화 되면 mdn 키워드로 검색해보아라. mdn은 가장 신뢰할 수 있는 레퍼런스를 제공한다.
mdn을 읽어봐도 모르겠다면?
- 자연어 문장으로 검색하라.
- 단, 영어로 javascript라는 키워드와 함께 사용한다.
  e.g. how to [conver to string] in javascript
검색으로 더 나은 키워드를 찾아 재검색해본다.
에러 발생 시, 에러 메세지 자체를 바로 구글링해본다. Stack Overflow 같은 QnA 사이트에 이미 좋은 답변이 있다. 체크된 답변은 신뢰할 만한 답변이다.

4.3 크롬 개발자 도구 사용법

마우스 오른쪽 버튼을 눌러서 검사를 사용할 수 있는 게 구글 크롬의 가장 큰 장점이다. 단축키 F12를 사용할 수도 있다.
console 탭에서 자바스크립트 코드를 테스트 할 수 있다. (계산, 함수선언과 호출 등을 해볼 수 있었다.)
blank new tab 구글 익스텐션을 사용하면 아무 영향을 끼치지 않고 console 탭을 사용할 수 있다.

5. 조건문

5.1 Achievement Goals

조건문 기초, 퀴즈, 실습

truthy와 falsy가 조건문에서 작동하는 방식을 이해한다.
비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해한다.
if 와 else if , else를 이해하고 활용한다.
논리연산자를 (&&, ||, ! ...)을 통해 조건을 간결하게 작성한다.

조건문 문제로 에러 메세지 알아보기

코플릿 에러 메세지를 읽고, 작성한 코드를 수정한다.

조건문 문제로 배우는 알고리즘

코플릿 조건문 13번 문제를 풀어보면서, 체계적으로 문제를 해결해본다.
복잡한 조건문을 활용하여, 실생활 문제를 해결하기 위한 알고리즘을 구현해본다.

5.2 조건문 기초

let isAdult = true;
let isStudent = false;

Boolean 타입을 이해한다.
조건문은 조건을 판별하는 기준을 만드는 것이다.
반드시 비교연산자가 필요하다.
- > < >= <=``!==``===
- == != 연산자는 사용하면 안된다. 타입을 엄격하게 비교하지 않기 때문이다. JS Comparison Table에서 수많은 예외상황들이 나타난다.
- 비교의 결과는 boolean 타입(T/F)이 나온다.

if (조건1) {
} else if (조건2){
} else{
}
// 조건문 형식

조건에는 boolean 타입을 위한 표현식이 들어간다.
두 가지 조건을 한 번에 적용하고 싶은 경우 논리 연산자를 사용한다.

isStudent && isFemale; // 학생이고 여성일 때 (AND 연산자)
isStudent || isFemale; // 학생이거나 여성일 때 (OR 연산자)
!isStudent && isFemale; // 학생이 아니면서 여성일 때 (NOT 연산자)	

!undefined 
// true (undefined는 falsy한 값, false로 취급되는 값이다)
!'hello' 
//  false (hello는 문자열이고 전부 truthy한 값, true로 취급되는 값이다)

6가지의 falsy 값을 기억해라. if문에서 false로 변환되어, if 구문이 실행되지 않는다.
- if (false)
- if (null)
- if (undefined)
- if (NaN)
- if ('')
- if (0)

5.3 에러 메세지

코플릿에서 에러 메세지를 잘 해석하는 습관은 버그를 빠르게 해결하는 좋은 방법이다.
문제가 되는 부분을 추적하는 과정을 디버그라고 하고, 그 행위를 디버깅이라고 부른다.

요구사항을 먼저 읽어본다.
테스트 케이스를 확인한다. 자바스크립트로 작성된 테스트 코드의 통과 여부가 코플릿 문제의 통과 기준이다.
통과되지 않은 이유를 확인한다.

5.4 알고리즘

문제해결을 위해 필요한 일련의 절차나 방법을 정해진 형태로 표현한 것을 알고리즘이라고 한다.
문제를 해결하기 위해 논리적인 해결방법을 담은 코드를 작성하는 게 개발이다.
컴퓨터는 백지상태이기 때문에 아주 작은 단위로 입력해야, 우리가 의도한 서비스를 제공한다.(샌드위치 영상)
프로그램의 절차 하나를 우리가 사용하는 자연어(일반적인 언어)로 작성하는 법을 수도코드라고 한다.
점수를 입력 받아서 등급을 나누고 +/-를 붙이는 함수를 작성하는 예시
- 수도코드를 먼저 작성하고, 코드로 옮겼다.
- 등급을 받는 부분과 사인을 받는 부분을 독립적인 함수로 만드는 답도 있었다. 무엇이 더 나은가는 보편성으로 결정할 수 있다. 모든 문제를 반드시 작게 나눌 필요는 없으니까.

6. 코플릿

인자의 조건을 보면 내가 생각해야 하는 경우의 수의 범위가 나온다. 덧붙여 주의사항과 입출력 예시도 살핀다.

경우의 수가 크게 두 가지 기준으로 나뉘는 경우, 굳이 else를 쓰지 않고 return 해주는 방식

조건문을 쓸 때 순서가 중요하다. 교집합을 가장 먼저 써줘야 한다. (k7)

경우의 수를 모두 생각해봐도, 어떤 패턴을 찾지 못하는 경우 하드코딩을 해준다.

if를 중첩해서 사용해서 동시에 여러 개의 조건을 적용할 수도 있다.

사실 논리 연산자를 이용하면 더 편한 일이긴 할텐데, 그게 안 된다면!

k12, 13에서 조건문을 쓸 때, 어떤 조건을 가장 먼저 써줄 것인가.

비교 연산자는 이항연산자(2개 대상에 대해서만 연산을 수행한다.)
grade라는 변수를 지정해준 부분
비교 연산자를 적게 쓰려다가 오히려 놓친 부분이 있었다.
- 무효 스코어에 대한 조건을 가장 먼저 써줬다면 적용이 되었을 것이다.

sign이라는 변수를 선언하고 그 안에 어떤 값도 할당되지 않은 조건들. 빈 문자열을 넣어줬어야 했다. (k13)

논리연산자는 삼항 연산도 가능하다. (k14)

거듭제곱을 구하는 3가지 방법

Boolean 객체의 생성자 함수를 이용한다.(k17)

원래는 기억하라고 했던 6가지 falsy한 값을 직접 하드코딩하려고 했으나 테스트 결과 실패했다.
Boolean(anything)

12, 13(X), 16

=====문자열=====

빈 배열과 마찬가지로 빈 문자열의 길이를 구하면 0을 리턴한다.

''.length === 0 // true

변수 초기화 값을 잘 설정 해주면 조건을 줄일 수 있다. (k6, k9)

word1과 word2를 비교하고 word3를 비교한다.
가정을 하고 초기화를 해줬기 때문에, 줄이고 가는 조건들이 있다.

substring과 slice 메서드 (k10, 11)

substring은 slice와 달리 start와 end가 순서가 바뀌어도 알아서 바꿔서 잘 작동한다.

Number()와 parseInt의 차이 (k14)

자바스크립트에서 문자열 간 비교 연산은 사전식(lexical) 비교이다. ('123' > '2' => false) 이 부분 재밌다. 형변환이 왜 필요한지 알게 해준다.
Number()와 parseInt() 모두 문자열을 숫자로 바꿔주는 것은 동일하지만, parseInt는 문자열 속에 숫자가 아닌 다른 문자가 섞여 있어도 숫자로 시작한다는 전제하에 형변환을 해준다.

절대값을 반환해주는 Math.abs() 사용해보기 (k16)

사칙연산에서 우선순위 놓친 부분이 있었다. (k17)

period / 60 * 24 이 부분에서 나는 60 * 24를 먼저 해주기를 바랐는데 소괄호가 없으니 나누기부터 했을 것이다. 이 부분을 놓쳤다!

6, 9, 17

SURI

Every step to become a better version of me 🚶‍♂️ 블로그 이사중