왕초보도 이해할 수 있는 JS 기초 중의 기초

류예린·2022년 7월 28일

JavaScript WeCode data type js variable 위코드

▶ console.log

console.log는 JS의 가장 대표적인 디버깅 방법이다. JS가 출력(값을 화면에 노출)을 할 수 있게끔 도와준다. 단어 뜻대로 console에 log를 남긴다는 뜻이다.

console.log(출력대상);

string, number, boolean 등의 data type을 출력해볼 수 있다.

▶ variable 01 - 변수 선언과 할당

변수란 data를 담을 수 있는 대상을 말한다.

let myNumber = 100; -> let 변수명 = 값;

변수명과 함께 변수를 선언(declare)하고, 값을 할당한다. 위의 예시는 100(값)을 myNumber(변수)에 대입(assign)한 것이다. 할당은 곧 대입이다.

JS는 대게 선언과 할당이 동시에 이루어진다.

변수는 처음 선언된 경우 초기 값으로 undefined, 즉 정의되지 않은 값을 갖는다.

let a;
console.log(a) ---> return undefined

즉, 변수를 선언하는 것과 값을 대입하는 것은 별개이다. 선언된 변수가 특정한 값을 갖기 위해서는 대입연산자(=)를 사용해 값을 대입해주어야 한다.

💡 **const**는 상수, 값이 바뀔 수 없다. 이후 변수 변경 불가(재선언X, 재할당X).

let은 새로운 것을 생성할때 사용. 이후 변수 변경 가능(재선언X,재할당O).

var는 규칙이 없다(재선언O,재할당O).

const(constant)는 상수, 바뀌지 않는 값이라는 뜻이다. 사전적 의미는 ‘변함없는’. let은 값이 바뀔 수 있다.

let myName = "blackpink";
myName = "BLACKPINK";
console.log(myName);  // BLACKPINK

서두에 let myName = “blackpink”; 일 때, 코드 중 업데이트를 원할시 myName = “BLACKPINK”; 로 변경할 수 있다. 이때, let을 사용하지 않고 선언할 수 있다.

const로 variable를 선언했다면 값은 절대 변경, 업데이트될 수 없다. 하지만 let은 가능하다. 이처럼 let과 const만으로 우리는 코드의 규칙을 대충 읽어낼 수 있다. 특정 값의 이후 업데이트 유무를 알 수 있으니 코드를 읽는데 시간이 단축되는 셈이다. const와 let은 JS가 처음 만들어졌을땐 없었던 개념이다. 당시엔 var만이 존재. 항상 const, 가끔 let, NEVER NO var.

variable엔 띄어쓰기 사용할 수 없다. const my name(x)/const myName(o). 공백이 필요하다면 다음 문자를 대문자로 표기한다.

veryLongVariableName. → camelCase(낙타등모양)이라고 부른다.

파이썬은 대게 very_long_variable_name. → snakeCase. 파이썬에서 variable은 const와 같은 syntax(구문)를 필요로 하지 않는다.

▶ variable 02 - data type

기본타입(primitive type)

Number
String
Boolean
Undefined
Null

📌 number

참조타입(reference type)

Object
Array
Function

let number1 = 100;
let number2 = 50;
console.log(number1 * number2) = 5000;

console.log를 활용해 변수로 할당된 값을 연산할 수 있다. 더하기(+), 빼기(-), 곱하기(*), 나누기(/) 연산자를 사용한다.

✔ remainder

console.log(12 % 5); ---> 2
console.log(4 % 2); ---> 0
console.log(-4 % 2); ---> -0

연산자 %(remainder)는 나누기의 몫이 아닌 나머지 값을 도출한다.

📌 string

‘hello world’와 같이 우리가 사용하는 문자는 모두 ‘string’이다. 문자를 묶는 문장부호로는 ‘’(작은따옴표)와 “”(큰따옴표) 모두 사용할 수 있다.

let number1 = 100;
let nubmer2 = 200;
console.log("100 plus 200 equals to ", number1 + number2);
---> 100 plus 200 equals to 300

console.log는 구분자인 콤마를 이용해 string과 number 그리고 variable까지 모두 조합 사용할 수 있다. 또한 string은 공백(띄어쓰기)을 인식한다.

console.log(
	"2" + "2"
); ---> "22"

숫자이지만 큰따옴표 안에 묶였으므로 결과값 또한 number data type이 아닌 string data type이다.

✅✅✅✅✅✅✅✅✅✅

console.log(
	2 + "2"
); ---> "22"

number data type과 string data type이 더해지면 string data type이 된다.

let name = "my name is wecode."
console.log(name.length); ---> 18

.length로 string의 길이를 구할 수 있다. 띄어쓰기와 문장부호 모두 카운트한다.

✅✅✅✅✅✅✅✅✅✅

console.log(
	"the length of coke is ",
	"coke".length
); ---> 4
console.log (
	"the length of coke is " +
	"coke".length
); ---> "4"

전자는 number data type인 4를, 후자는 string data type인 “4”를 가진다. 후자는 사칙연산자 더하기를 통해 string과 number가 더해진 결과 string으로 반환되기 때문이다.

📌 array

[10, 33, "hanwoo", true] ---> array

array(배열)엔 각기 다른 data가 담겨져 있다. number, string, boolean 모두 배열에 담길 수 있다. 대괄호’[]’로 묶인다.

📌 object

let myProfile = {
name: 'yenicall', 
age: 12, 
female: true
}
console.log(myProfile); ---> { name: 'yenicall', age: 31, female: true }

object(객체)는 여러가지 data가 들어가 있는 묶음이다. array는 데이터의 나열인 반면, object는 key와 value를 가진다. 위에서 key는 name이며 value는 yenicall이다. 중괄호’{}’로 묶는다.

📌 null & undefined

✅ null

변수에 null(값이 주여졌으나 “비어있음”)이 할당된다. 즉, 정의됨.

✅ undefined

변수는 선언했지만 값을 할당하지는 않음.

null은 ‘비어있다’. undefined는 ‘없다’. undefined, null, true, false 등은 모두 문자가 아닌 data type이다.

undefined는 선언은 됐지만 아직 value가 할당되지 않은 경우를 의미한다. null은 '빈 값(blank)'을 의미하는데 사용자가 준 value이다. 그래서 undefined와 다르게 JS는 자동적으로 null 이란 값을 줄 수 없다.

포괄적인 의미로 '값이 없다'는 점에서 null과 undefined가 비슷한 것 같지만 둘은 엄격하게는 같지 않다.

let name;            // undefined
let name = null;     // null

console.log(null == undefined);   // true
console.log(null === undefined);  // false

엄격일치연산(===)는 value뿐만 아니라 data type도 같아야 true가 나온다.

console.log(typeof null);       // object
console.log(typeof undefined);  // undefined

null의 data type이 object가 나온 이유는, '값이 없음(blank)'을 의미하는 '할당된' value이기 때문이다.

📌 boolean

let myAnswer = true;
let yourAnswer = false;
console.log(myAnswer); ---> true

boolean은 ‘true’ 혹은 ‘false’ 값을 가진다. true는 ‘1’과 ‘on’을, false는 ‘0’과 ‘off’를 포함한다.

console.log(false);
console.log("false");

전자는 boolean data type인 false, 후자는 string data type인 false이다.

console.log(1 + 1 === 2); ---> true
console.log(1 + 1 === 3); ---> false
console.log(blackpink === BLACKPINK); ---> false

세번째 예시와 같이 JS는 소문자와 대문자를 구분한다.

if (condition1) {
	statement1
} else if (condition2) {
	statement2 
} else {
 statement3
}

if, else if, else와 비교연산자를 활용해 다양한 condition(조건문)을 체크하고 statement(명령어)를 실행할 수 있다. 이 때 else if는 여러개를 생성 가능하다.

let name = "blackpink"; ---> blackpink in your area
let name = "BLACKPINK"; ---> please wirte in lowercase
let name = "aespa"; ---> I don't know you

if (name === "blackpink") {
	console.log("blackpink in your area");
} else if(name === "BLACKPINK") {
	console.log("please wirte in lowercase");
} else {
	console.log("I don't know you");
}

if, else if, else를 활용한 예시.

function isOkayToDrive(who) {
  // 함수의 인자가 SON -> NOPE
  // 함수의 인자가 DAD -> GOOD
  // 함수의 인자가 GRAND FATEHR -> BE CARFUL
  // who are you
}

위와 같은 주석 처리를 pseudo code 라 한다. 가짜 코드라는 뜻으로, 컴퓨터 언어가 아닌 사람의 언어로 간략히 서술한 것을 뜻한다.

function isOkayToDrive(who) {
  if (who === "son") {
    return "Nope!";
  } else if (who === "dad") {
    return "Good!";
  } else if (who === "grand father") {
    return "Be careful!";
  } else {
    return "Who are you?";
  }
}
console.log(isOkayToDrive("dad")); ---> Good!
console.log(isOkayToDrive("blackpink")); ---> Who are you?

function의 parameter를 활용해 if문을 만들 수 있다. console.log로 argument를 삽입해 값을 확인한다.

✔ boolean - 비교연산자

💡 ex) 0 == false → true | 0 === flase → false

= → value를 할당한다. 좌항과 우항이 ‘같다’는 뜻이다.

=== → check의 개념이다. 좌항과 우항의 ‘동일 여부’를 묻는다.

!== → ~가 아니라면. 즉, ‘같지 않음(값이 아님)’을 확인한다.

, < → 보다 작다, 보다 크다.

= , <= → 보다 작거나 같다, 보다 크거나 같다.

✔ boolean - 논리연산자

💡 if((a && b) || (c && d)) {} 와 같이 condition을 만들 수 있다. c와 d부터 확인되며(JS는 작은 괄호부터 시작해 큰 괄호로 넘어가기 때문), 두 conditional 중 한 가지만 true일 때에도 결국 or(||)에 따라 true가 반환된다. conditional은 내가 원하는 만큼 엮을 수 있다.

expr1 && expr2 → and operator(연산자). 첫번째 조건과 두번째 조건 모두 true여야 true를 반환. 둘 중 하나가 false면 false가 된다.

expr1 || expr2 → or operator(연산자). 둘 중 한가지만이 true일 때에도 true를 반환한다.

!expr → NOT operator(연산자).

💡 ex) false, 0, -0, on, “ “, null, undefined, NaN(not a number) 등. 모두 falsy이며 이 외의 값들은 모두 truthy로 봐도 무방.

let a = 0 // falsy
let b = 100 // truthy
if (a) {
	console.log("i am falsy");
} else if (b) {
	console.log("i am truthy");
}
---> "i am truthy"

truthy → 참은 아니지만 참 같은 값. boolean data type이 true는 아니지만 true처럼 취급된다.

falsy → 거짓은 아니지만 거짓 같은 값. boolean data type이 false는 아니지만 false처럼 취급된다.

✔ Increment and Decrement

function increment(){
  let myVar = 83;
  myVar++
  return myVar;
} ---> 82

‘++’ 연산자를 사용하여 변수의 값을 1 증가시킬 수 있다.

function decrement(){
  let num1 = 11;
  let num2 = 44;
  num1++
  num2--
  if(num1 === 12 && num2 === 43) {
    return "Pass";
  } else {
    return "Try again";
  }
}  ---> Pass

‘--’ 연산자를 사용하여 변수의 값을 1 감소시킬 수 있다.

▶ function 01 - 함수 정의와 호출

input을 받아 내부적 기능을 수행한 뒤 결과물로 output을 도출하는 것이 function(함수)의 정의이다. 과일을 input, 식칼을 function, 잘라진 과일 조각을 output에 비유할 수 있다. 하지만 input과 output이 function의 필수 조건은 아니다.

function myFunction () {
	console.log("hello world");
}
myFunction();

위와 같은 방식으로 funciton을 1️⃣정의(=선언)하고 2️⃣호출(=실행)한다.

▶ function 02 - return이 있는 함수

반환과 return은 동일한 뜻이다.

function sayHello () {
	let favFood = "hanwoo";
	return "I love " + favFood;
}

output이 return되지만 화면으로 출력되진 않는다. 하지만 return된 값은 존재하는 상태이다. 화면에 출력되지만 않은 것.

console.log(sayHello()); ---> I love hanwoo
console.log(sayHello); ---> undefined

console.log를 통해 return된 값을 확인할 수 있다. 함수로 도출된 값을 나타내기 위해 소괄호를 포함해야 한다. 소괄호가 없다면 앞서 선언한 function을 가리키지 않으므로 undefined(값이 없음).

let iSaid = sayHello();
console.log(iSaid); ---> I love hanwoo

return한 값을 variable에 할당할 수 있다.

즉 return은 function의 output을 반환하는 결과물인 반면, console.log는 단순히 화면에 출력하는 기능만을 수행하는 것이다.

▶ function 03 - input이 있는 함수

function sayHello (name) {
	console.log("hello " + name);
}
sayHello('blackpink');      // hello blackpink

위에서 name은 parameter(매개변수, 인자)이며 input이 된다. 함수를 정의한 뒤 sayHello()의 소괄호 안에 argument(인수)를 입력하면, paramter에 argument가 대입되어 console.log가 실행된다.

function sayHello (name) {
	console.log("hello " + name);
}
let hi = sayHello('blackpink');
console.log(hi); ---> hello blackpink

variable 안에 function을 담아 활용한다.

function addNumber (left, right) {
	let result = left + right;
	return result;
}
let number = addNumber(2, 8);
console.log(number); ---> 10

두 개의 parameter에 number data type argument를 대입하여 계산한다. parameter에 지정된 자리를 지켜주어야 한다.

함수 내부에서 정의된 variable은 함수 외부에서 사용될 수 없다.

✅변수가 필요한 이유와 선언하는 방법

JavaScript를 포함한 모든 언어에서 variable은 값을 저장하거나 유지하는 역할을 한다.

console.log(5 + 2);
console.log(5 * 2);
.
.

위와 같은 간단한 계산 코드를 수십가지 사용한다고 가정했을 때, variable을 사용하면 매번 숫자를 수정할 필요가 없어진다.

const left = 5;
const right = 10;
console.log(left + right);    // 15
console.log(left * right);    // 50
console.log(left / right);    // 0.5

const로 variable을 정의하여 수정의 과정을 단축할 수 있다.

✅함수가 필요한 이유

function은 지속 반복 사용할 수 있는 코드 조각의 개념이다. 만약 함수를 사용하지 않는다면, 사용자에게 10회의 “Hello my name is blackpink”를 보여줄 때 10회의 코드를 작성해야 한다.

console.log("Hello my name is blackpink");
console.log("Hello my name is aespa");
console.log("Hello my name is itzy");
.
.
.

게다가 각 10회에서 매번 다른 이름을 사용해야 한다면, 위의 예시와 같이 우리는 코드를 10회 수정해야 한다. 여기서 function은 이 모든 반복의 과정을 획기적으로 단축시켜 준다. function은 어떤 코드를 캡슐화하여 여러 차례 실행할 수 있게 해주기 때문이다.

function sayHello(myName, age) {
    console.log("Hello my name is " + myName + " and I'm " + age + " years old");
}
sayHello("blackpink", 21);    // "Hello my name is blackpink and I'm 21 years old"

function sayHello(myName, age) {
    console.log("Hello my name is " + myName + " and I'm " + age + " years old");
}
sayHello("aespa", 20);    // "Hello my name is aespa and I'm 20 years old"

이젠 sayHello()를 실행하는 것만으로 “Hello my name is myName”을 실행하며, 이름을 10회 수정할 필요 없이 sayHello에 argument를 주어 각기 다른 myName을 가질 수 있다. 더하여 function에 parameter를 추가하는 것만으로도 추가적인 정보를 입력할 수 있게 된다.

즉 function은 무의미하게 반복되어야만 하는 코드를 하나의 캡슐로 담을 수 있으며, 최종적으로는 길어진 코드를 단축시켜 준다.

✅조건문이 필요한 이유

conditional은 true인지 false인지를 알려주기 때문에 매우 중요하다. 우리는 뭔가를 확인해야 할 때 대부분 if문을 사용하게 된다.

쉽게 예를 들어 특정 사이트를 이용할때, 사용자가 로그인하였다면(conditional, true) 로그인화면으로 이동(statement)하는 것이 그 예이다. 모두 if문으로 구현할 수 있다.

아래의 예시로 살펴볼 수 있다.

export const postLogin = async (req, res) => {
  const { username, password } = req.body;
  const pageTitle = "Login";
  const user = await User.findOne({ username });
  if (!user) {
    return res.status(400).render("login", {
      pageTitle,
      errorMessage: "An account with this username does not exists.",
    });
  }

사용자가 로그에 없는 username으로 로그인을 시도했을 때(conditional=!user)
400 bad request를 return하여 browser에게 오류가 있음을 알려주고(statement1),
login 페이지를 다시 render하며(statement1),
사용자에게 errorMessage를 출력해 회원정보가 없음을 알려준다(statement1).

✅number와 string의 method 각각 3개와 사용 방법

NUMBER 1️⃣2️⃣3️⃣

1️⃣ parseInt()

string을 numbuer로 변환한다. 아래의 예시와 같이 사용자가 “14”를 입력하면 string인 “14”가 되는데, 이때 parseInt는 string ”14”를 number 14로 변환한다. 또한 사용자가 단순 문자열(abcd)을 입력했을시 NaN를 출력하기 때문에 더욱 유용하다.

const age = prompt("How old are you?");
console.log(typeof age);
console.log(age, parseInt(age));
					🔽🔽🔽🔽🔽🔽
const age = parseInt(prompt("How old are you?"));

2️⃣ isNaN()

argument의 boolean을 return한다. isNaN(); → false 면, not a number가 아니란 뜻(숫자라는 뜻)이다. ****prompt에 숫자 입력시 console.log에 Thank you를 출력한다.

const age = parseInt(prompt("How old are you?"));
if(isNaN(age)){
	console.log("please write a number");
} else {
	console.log("Thank you")
}

💡 **isNaN = true(즉, string)** | **isNaN = false(즉, number)**

3️⃣ Number.isInteger()

값의 정수 여부를 판단하여 정수라면 true, 정수가 아니라면 false를 반환한다.

Number.isInteger(0);         // true
Number.isInteger(1);         // true
Number.isInteger(-100000);   // true
Number.isInteger(99999999999999999999999); // true

Number.isInteger(0.1);       // false
Number.isInteger(NaN);       // false
Number.isInteger('10');      // false
Number.isInteger([1]);       // false

STRING 1️⃣2️⃣3️⃣

1️⃣ String.prototype.charAt()

number에 해당하는 위치의 text를 반환한다. 아래 예시와 같이 범위를 벗어난 수는 빈 문자열이 반환된다.

const idol = "blackpink";
console.log(idol.charAt(0));  // "b"
console.log(idol.charAt(1));  // "l"
console.log(idol.charAt(2));  // "a"
console.log(idol.charAt(3));  // "c"
console.log(idol.charAt(4));  // "k"
console.log(idol.charAt(9)); // ""

2️⃣ String.prototype.toLowerCase() | String.prototype.toUpperCase()

text를 모두 소문자 혹은 대문자로 변환해준다.

const idol = "blackpink"
idol.toUpperCase();  // "BLACKPINK"
const idol = "AESPA"
idol.toLowerCase();  // "aespa"

3️⃣ String.prototype.repeat(count)

argument로 지정된 숫자만큼 text를 반복한다.

"blackpink".repeat(0)  // '' // 공백으로 반환
"blackpink".repeat(1)  // 'blackpink'
"blackpink".repeat(3)  // 'blackpinkblackpinkblackpink'
"blackpink".repeat(3.7) // 'blackpinkblackpinkblackpink' // 3으로 취급된다

류예린

helloworld

이전 포스트

Nodejs 이용 기초적인 simple API Server 구현

다음 포스트

왕초보도 이해할 수 있는 JS 기초 중의 기초

▶ console.log

▶ variable 01 - 변수 선언과 할당

▶ variable 02 - data type

📌 number

✔ remainder

📌 string

📌 array

📌 object

📌 null & undefined

📌 boolean

✔ boolean - 비교연산자

✔ boolean - 논리연산자

✔ Increment and Decrement

▶ function 01 - 함수 정의와 호출

▶ function 02 - return이 있는 함수

▶ function 03 - input이 있는 함수

✅변수가 필요한 이유와 선언하는 방법

✅함수가 필요한 이유

✅조건문이 필요한 이유

✅number와 string의 method 각각 3개와 사용 방법

NUMBER 1️⃣2️⃣3️⃣

STRING 1️⃣2️⃣3️⃣

Nodejs 이용 기초적인 simple API Server 구현

왕초보도 이해할 수 있는 JS 기초 중의 기초

0개의 댓글