[CodeStates] Week 1-1 : JS와 가까워지기 (1)

Ben Lee·2022년 1월 5일
0

CodestatesReview

목록 보기
1/10
post-thumbnail

예전 학부 교수님께서 '아는만큼 보인다'라고 말씀해주신 기억이 난다.
51주의 코딩 부트캠프 과정은 모두 끝났지만 100% 내 것으로 만들고 이해하기 위해서 스스로 복습을하며 회고하고자 한다.

Lesson - 변수

변수는 상황에 따라 변할 수 있는 값! 으로 이해해야 한다.

선언

선언은 ES6 이전에는 var 등을 사용하였으나 이후로는 let const등을 주로 사용하고 있다.

let myName; // 다양한 myName 선언 방법
var myName;
const myName;

변수 선언의 차이점은 Closures와 변수의 유효 범위를 가리키는Lexcial Scoping에 관해 먼저 서술해야 하므로 추후 포스팅할 예정이다.

할당

할당 연산자, 비교 연산자, 산술 연산자 등은 정보처리기사 시리즈에서 더 자세하게 다룰 예정이다.
기본적으로 할당은 할당 연산자 중 하나인=를 사용한다. 

myName = 'Ben';

여기서 =는 "같다"라는 의미가 아니라 myName이라는 변수에 Ben이라는 값을 할당한다는 것이다.

Note: "같다"라는 비교 연산자는 ==(동등) 또는 ===(일치)를 사용한다.
두 비교 연산자의 차이점은 두 피연산자의 값만 같은지 혹은 타입까지 같은지를 비교한다.

만일 선언 후 할당하지 않았다면, 해당 변수를 표현할 때 정의되지 않았음을 나타낸다.

let myName;
myName // undefined

표현

표현은 다음의 특징을 가진다.

  • 선언된 변수는 표현식을 통해 다양한 방법으로 사용할 수 있다.
let width = 7;

width + 5; // 한 번 선언한 변수를 다시 사용할 때는 let을 사용하지 않는다.
width * 5;

let areaOfRec = width * 7;
// 결과물을 다시 새로운 변수에 담을 수 있다.

Note: 변수명에는 공백을 둘 수 없으므로, 보통 단어의 첫 글자를 대문자로 사용한다.
변수명을 정의하는 방법에는 camelCase,PascalCase,snake_case 등이 있다. 어떠한 방법을 사용해도 무방하나 혼용하지 말아야 한다.

  • 변수는 동일한 변수를 이용해 대입할 수 있습니다.
let sum = 1;
sum = sum + 2; // sum += 2;
sum = sum + 3; // sum += 3;

Note: 수학적으로는 성립하지 않지만, 할당 연산자 =는 "같다"라는 의미가 아니므로, 위 구문은 sum에 이미 할당된 sum+2의 값을 대입한 것이다.

Lesson - 타입

이미 알고있는 것처럼 변수에는 숫자, 문자 등 다양한 타입이 존재한다.

let count = 3 // 숫자
let myName = Ben // 문자열
let isAdult = true(or false) // Boolean
let fruits = ['banana', 'apple', 'pineapple'] // 배열
let student = { name: 'Ben', // 객체
                height: 184,
                isStudent: false
              };

이 외에도 많은 타입이 존재한다.

Note: undefined과 함수도 타입으로 간주한다.

Lesson - 함수

함수는 (컴퓨터에게 일을 시키기 위한) 지시사항을 담은 명세서라고 간주할 수 있다.
즉, 함수는 작은 기능의 단위라고 이해할 수 있다. 이는 추후 react에서 컴포넌트 단위로 코드를 짜는데 있어 중요한 개념으로 작용하게 된다.

Note: ES6 문법의 화살표 함수를 사용하여 함수를 선언하면 훨씬 간단해지지만 이는 추후 포스팅할 예정이며 여기서는 기본 문법으로 진행한다.

함수의 선언

  • 함수 선언식
function myFunc(input) {
  // input은 함수에서 사용할 입력값이며 매개변수(parameter)라고 부른다.
  ...
}
  • 함수 표현식
let myFunc = function(input) {
  let res = input + 5;
  return res;
  // return은 함수 바깥으로 결과를 가져올 수 있다.
  // 만일 아무것도 리턴하지 않는다면 함수 호출의 결과는 undefined가 됨.
}

Note: 종종 매개변수(parameter)와 전달인자(argument)는 적당히 섞어서 쓰이기도 하는데, 이 경우 문맥에 따라 의미를 달리해서 해석되기도 한다.
하지만 엄밀히 말해서 매개변수는 함수의 정의부분에 나열되어 있는 변수들을 의미하며, 전달인자는 함수를 호출할때 전달되는 실제 값을 의미한다.
이같은 의미를 명확히 하기 위해 매개변수는 변수(variable)로, 전달인자는 값(value)으로 보는 것이 일반적이다.
출처: https://wayhome25.github.io/etc/2017/12/31/parameter-argument/

함수의 호출

위에서 선언된 myFunc라는 함수를 호출하는 방법은 크게 두 가지로 구분되어 사용된다.

myFunc // 함수 그 자체가 호출된다. function(input){...}
myFunc() // 함수의 결과(return값)가 호출된다.

Lesson - 조건문

비교 연산자

조건문을 이해하기 위해서는 비교 연산자를 먼저 알아야 한다.
비교의 결과는 항상 Boolean, 즉 true 혹은 false다.

Note: 앞서 언급했던 것처럼, == 혹은 !==는 타입까지 비교하지 않기 때문에 조건문에서 사용하지 않음을 원칙으로 한다.

조건문 표현

조건문은 다음과 같이 쓸 수 있다.
조건에는 Boolean으로 결과가 나오는 비교구문을 사용한다.
이 때, 조건1.1과 같이 조건문을 중첩하여 사용할 수 있다.

if(조건1) {
  ...// 조건1이 성립하는 경우
  if(조건1.1) {
    ...// 조건1이 성립하고, 조건1.1이 성립하는 경우
  }
} else if(조건2) {
  ... // 조건1이 성립하지 않고 조건2가 성립하는 경우
} else {
  ... // 모든 조건이 성립하지 않는 경우
}

논리 연산자(Logical Operator)

만일, 두 가지 조건이 한 번에 적용되는 경우 논리 연산자(Logical Operator)를 사용한다.

true && true // true
true && false // false
false && false // false

true || true // true
true || false // true
false || false // false

!false / true
!(3>2) // false

isStudent && isFemale; // 학생이면서 여성일 경우
isStudent || isFemale; // 학생이거나, 여성일 경우
!isStudent && isFemale; // 학생이 아니면서 여성일 경우

또한 논리 연산자는 다음과 같은 특징을 갖는다.
1. 논리 연산자 중 OR 연산자는 truthy한 값을 만나면, 그 값을 출력한다.

undefined || 10 // 10
5 || 10 // 5 

undefined || false // false
//만일, 둘 다 falsy할 경우, 뒤에 있는 값을 출력한다.

2. 논리 연산자 중 AND 연산자는 falsy한 값을 만나면, 그 값을 출력한다. 

undefined && 10 // undefined
5 && false // false

5 && 10 // 10
//만일, 둘 다 truthy할 경우, 뒤에 있는 값을 출력한다.

Note: 반드시 기억해야 할 6가지 falsy 값!

  • false
  • null
  • undefiend
  • 0
  • NaN
  • ' '

알고리즘

추후 알고리즘에 대해 자세하게 다룰 예정이지만 알고리은 조건문으로부터 시작되므로 여기서 간단하게 짚고 넘어가려 한다.

알고리즘?

우리는 당면한 어떤 문제를 해결하기 위해서 "개발"을 한다고 한다. 이 때 문제를 어떻게 해결할지에 대한 고민을 알고리즘이라고 한다. 함수는 이러한 문제를 해결하기 위한 고민을 논리적으로 풀어내는 하나의 작업 단위이다.

수도코드?

컴퓨터에게 작업을 지시하기 위해서는 인간에게는 너무나도 당연한 과정이지만, 기계가 이해할 수 있도록 하나하나 쪼개서 논리적으로 풀어내야 한다. 컴퓨터는 이렇게 해야만 비로소 우리 사람이 만족할 만큼의 서비스를 제공하는 소프트웨어를 실행할 수 있다. 이러한 과정을 하나하나 수도코드(pseudocode)를 작성한다 라고 한다. 수도코드는 프로그램의 절차 하나하나를 우리가 실제로 사용하는 일반적인 언어(자연어)로 작성하는 방법을 말하는데, 이는 실제 컴퓨터가 이해할 수 있는 언어가 아니므로, 실행할 수 있는 코드는 아니지만, 코딩하기 전에 어떻게 프로그램이 작동하는지 흐름을 파악하여 원하는 기능을 빠짐없이 담아 정확하게 프로그래밍할 수 있도록 도움을 주는 행위라고 볼 수 있다.

다음의 예를 통해 수도코드와 실제 코드작성이 어떻게 이루어지는지 확인해보자.

문제
점수를 입력받아 점수에 해당하는 등급을 리턴해야 한다.
(100 - 90) --> 'A'
(89 - 80) --> 'B'
(79 - 70) --> 'C'
(69 - 60) --> 'D'
만약 점수의 1의 자리가 0~2 사이라면 등급과 함께 '-'를 반환한다.
만약 점수의 1의 자리가 8~9 사이라면 등급과 함께 '+'를 반환한다.

풀이
이 문제는 크게 두개로 분리할 수 있다.

  • 10의 자리로 Grade Letter를 구분한다.
  • 1의 자리로 기호(+, -)를 구분한다.

pseudocode
score가 100이면 즉시 A+가 최종 결과가 된다.
score에서 10의 자리를 얻어낸다.
score에서 1의 자리를 얻어낸다.
10의 자리가 6이면, Grade Letter는 D 이다.
10의 자리가 7이면, Grade Letter는 C 이다.
10의 자리가 8이면, Grade Letter는 B 이다.
10의 자리가 9이면, Grade Letter는 A 이다.
1의 자리가 0~2 이면, (Grade Letter 뒤에 붙는) 기호는 -이다.
1의 자리가 3~7 이면, (Grade Letter 뒤에 붙는) 기호는 빈 문자열이다.
1의 자리가 8~9 이면, (Grade Letter 뒤에 붙는) 기호는 +이다.
최종 결과는 Grade Letter와 기호를 문자열을 조합한다.
최종 결과를 리턴한다.

code

function convertScoreToGradeWithPlusAndMinus(score) {
  // score가 100이면 즉시 A+가 최종 결과가 된다.
  if(score === 100) {
    return 'A+';
  }

  // score에서 10의 자리를 얻어낸다.
  let tensDigit = Math.floor(score / 10);

  // score에서 1의 자리를 얻어낸다.
  let unitsDigit = score % 10;

  let gradeLetter;

  if(tensDigit === 6) {
    // 10의 자리가 6이면, Grade Letter는 D 이다.
    gradeLetter = 'D';
  }
  else if(tensDigit === 7) {
    // 10의 자리가 7이면, Grade Letter는 C 이다.
    gradeLetter = 'C';
  }
  else if(tensDigit === 8) { 
    // 10의 자리가 8이면, Grade Letter는 B 이다.
    gradeLetter = 'B';
  }
  else if(tensDigit === 9) { 
    // 10의 자리가 9이면, Grade Letter는 A 이다.
    gradeLetter = 'A';
  }
  
  let sign = ''; // (Grade Letter 뒤에 붙는) 기호는 기본적으로 빈 문자열이다.

  if(unitsDigit >= 0 && unitsDigit <= 2) {
    // 1의 자리가 0~2 이면, 기호는 `-`이다.
    sign = '-'; 
  }
  else if(unitsDigit >= 8 && unitsDigit <= 9) {
    // 1의 자리가 8~9 이면, 기호는 `+`이다.
    sign = '+'; 
  }

  // 최종 결과는 Grade Letter와 기호를 문자열을 조합한다.
  // 최종 결과를 리턴한다.
  return gradeLetter + sign;
}

이 때, pseudocode는 주석으로 변경될 수 있다.

profile
Ben Lee
개발자가 되고픈 엔지니어
다음 포스트

[CodeStates] Week 1-1 : JS와 가까워지기 (2)

0개의 댓글