[JS 1강] <var, let, const 의 차이> <&&, || 연산자> <if, else 와 switch 문으로 조건문> <for문으로 반복문>

용어 정리:

• 함수 스코프
  • 함수 내에서 선언된 변수는 해당 함수 내에서만 접근할 수 있다는 규칙
• truthy / falsy
  • truthy : 조건문을 처리할 때 true 로 변환되는 값
  • falsy : 조건문을 처리할 때 false 로 변환되는 값
    • false, 0, “”, NaN, undefined, null
• 리터럴
  • 사람과 자바스크립트 엔진이 모두 이해할 수 있는 특정 데이터타입의 값에 대한 표기법
  • 컴퓨터가 봐도 사람이 봐도 어떤 타입인지 알수 있는 그런 값,,, 
    • number literal
    • string literal
    • boolean literal
    • null literal
    • undefined literal
• 표현식
  • 값으로 평가되는 자바스크립트 문장***(함수가 변수에 할당이된다--> 함수 표현식)
  • 변수에 할당할 수 있는 자바스크립트 문장
• 코딩 컨벤션
  • 코드를 읽는 사람과 작성하는 사람이 모두 쉽게 이해할 수 있도록 하는 일종의 약속

 

 

<추가적인 내용>

mkdir js-run-1 && cd js-run-1 && touch index.js
//디렉토리 만들고, && = 이어서... 파일 만들었음

 

• - nodemon : monitoring 변화를 감지하는 패키지 툴// 파일의 변경을 감지하고 자동으로 서버를 재시작해주는 기능을 제공.
• 변수 선언 시 const 를 먼저 사용하고, 값을 재할당해야한다면 let으로 바꾸는 습관 길들이기

 

1. 변수 (Variable)

변수는 데이터를 저장하고 참조할 수 있는 이름과 주소(어딘가)를 가진 저장소입니다.

JavaScript에서는 var, let, const 키워드를 사용하여 변수를 선언합니다.

변수를 선언한다! ⇒ 내가 이 저장소 쓸게~

할당한다! ⇒ 내가 이 저장소에 이거 담을게~

무적의 var (최대한 쓰지말기!)

• 함수 스코프를 가지며, 재선언과 재할당이 가능합니다.
  • 함수 내에 또다른 스코프 안에서 var 로 변수가 할당되어도, 함수 안에서는 그 스코프 밖에서도 사용되어질 수 있음.
• var x = 10; var x = 20; // 재선언 가능 x = 30; // 재할당 가능
• 선언과 초기화 (맨 처음 할당) 이 동시에 일어남 ← 처음 선언될 때 undefined 값을 자동으로 가짐: 그래서 referance error 나지 않음.
• var 선언의 문제점 2가지
  1. 재선언(중복 선언)이 가능하다. 
  2. // 팀원 A 작성 var goodPerson = "홍길동"; // ... 길어진 코드 1000줄 아래로 내려감 ... // ... // 팀원 B 작성.팀원 A가 작성했던 변수를 의도치 않게 재할당 😩 var goodPerson = "백동수";
  3. → 변수 재선언 시 이전에 선언해둔 변수에 담은 내용을 의도치 않게 훼손시킬 수 있습니다.
  4. 변수 선언 전에 변수 참조하는 코드를 허용 (호이스팅으로 인한 혼란 발생)
  5. console.log(a); // undefined a = 10; var a;

let

• 블록 스코프를 가지며, 재선언이 불가능하지만 재할당은 가능합니다.

const

• 블록 스코프를 가지며, 재선언과 재할당이 불가능합니다. 반드시 선언과 동시에 초기화해야 합니다.
• const 로 선언된걸 우리가 상수 (변하지 않는 값) 이라고 표현합니다.

const z = 10;
const z = 20; // SyntaxError: Identifier 'z' has already been declared
z = 20; // TypeError: Assignment to constant variable

 

2. 데이터타입 (Data Type)

기본 데이터 타입 (원시 타입)

• 1. 숫자 (Number): 정수와 소수를 모두 포함합니다.
• 다른 프로그래밍 언어와 다르게 자바스크립트는 대부분의 숫자는 Number 하나로 표현돼요.
• BigInt라고 범위가 큰 수를 선언할 때 사용하는 것이 있는데 잘 안쓰임.
• 변수 앞에 typeof 키워드를 쓰면 변수 안의 데이터 타입을 확인할 수 있습니다.

 

• 2. 문자열 (String): 텍스트 데이터를 포함합니다.

 

• 3. 불리언 (Boolean): true와 false 값을 가집니다.
  • 조건을 표현하는 자료구조입니다.

  let isActive = true;
  let isLoggedIn = false;
  

• 4. null: 명시적으로 값이 없음을 나타냅니다. (의도적)

 

• 5. undefined: 변수가 초기화되지 않았음을 나타냅니다.

 

참조 타입

참조 타입의 데이터는 변수에 데이터가 직접 저장되는 것이 아니라, 별도의 메모리 공간에 원본 데이터를 저장해두고, 원본 데이터의 주소를 변수에 저장하는 특징이 있습니다.

• 1. 객체 (Object): 키-값 (Key-Value) 쌍의 집합입니다. {} ← 요렇게 표현하는걸 객체 리터럴 이라고 합니다.
• 키-값 한 쌍을 프로퍼티(property) 라고 부릅니다.
• 한가지 변수를 표현하는데에 여러가지 속성이 필요하다? ← 객체

 

• 2. 배열 (Array): 순서가 있는 값의 집합입니다.(index)
• 비슷한 속성의 값들이 여러개 필요할때 써요
• 여러 사람들 ← 복수형 나온다 = 배열
• 여러개를 잘 정리하려면? 값과 순서가 있어야겠죠? 모든 순서는 0번부터 시작합니다!

 

참조형 타입 비교

let obj1 = { name: "John" };
let obj2 = { name: "John" };
console.log(obj1 === obj2);

let obj3 = obj1;
console.log(obj1 === obj3);

 

객체가 따로 각각 선언이 되면 두 객체 안에 내용이 같을 지라도 별도에 다른 데이터 영역의 주소를 갖음. 그래서 obj1과 obj2처럼 각각 선언되면 각각 다른 데이터 영역의 주소값을 가리킴. 즉, 일치연산자를 사용해서 둘을 비교하면 "false"값이 나옴. 그러나 obj3 = obj1 처럼 복사를 하게되면, obj1도 obj3이 가리키는 데이터영역의 주소를 가리킴. 그래서 둘은 같은 주소를 참조함으로 일치연산자로 비교시 "true"가 나옴. 

 

3. 연산자 (Operator)

연산자는 변수나 값에 대해 연산을 수행하는 데 사용됩니다.

산술 연산자

• 덧셈 (+):
• let sum = 10 + 5; // 15
• 뺄셈 (-):
• let difference = 10 - 5; // 5
• 곱셈 (*):
• let product = 10 * 5; // 50
• 나눗셈 (/):
• let quotient = 10 / 5; // 2
• 나머지 (%):
• let remainder = 10 % 3; // 1

할당 연산자

• 기본 할당 (=):
• let x = 10;
• 복합 할당 연산자:
• x += 5; // x = x + 5 x -= 5; // x = x - 5 x *= 5; // x = x * 5 x /= 5; // x = x / 5 x %= 5; // x = x % 5

비교 연산자

 

비교 연산의 결과는 boolean 타입 (true 또는 false) 입니다.

 

• 동등 비교 (==)
• 이런거 쓰면 안됨
• console.log(10 == '10'); // true
• 일치 비교 (===)
• console.log(10 === '10'); // false
• 부등 비교 (!=)
• 이런거 쓰면 안됨
• console.log(10 != '10'); // false
• 불일치 비교 (!==)
• console.log(10 !== '10'); // true
• 크다 (>):
• console.log(10 > 5); // true
• 크거나 같다 (>=):
• console.log(10 >= 10); // true
• 작다 (<):
• console.log(5 < 10); // true
• 작거나 같다 (<=):
• console.log(5 <= 5); // true

 

<참고로.....>

• null 타입(typeOf) 찍으면 object 라고 나오지만, 공식적으로 인정하는 버그임.
• 부등호 연산 관련 type 신중하게 생각하기 (===일치연산자를 주로 사용하자 등호연산자보다(==)):
  • 부등호 연산자(>, <, >=, <=)는 값의 크기만 비교하며, 타입을 구별하지 않습니다

 

논리 연산자

<단락 평가(short-circuit evaluation)>

• AND (&&):&& 앞에 있는 값이 truthy 하면 && 뒤로 넘어가고, && 앞에 있는 값이 falsy 하면 그 상태로 값을 생성합니다.
• 즉, false가 보이면 그냥 그 false값 추출함. 둘다 true면 그 뒤 값 추출.(약간 왼쪽부터 falsy를 찾는 느낌)

console.log(true && false); //false 
console.log(true && true); // true 
console.log(0 && console.log("찍혔다!")); //0

 

- 0은 falsy니까 0 출력됨.

 

 

console.log(true && console.log("안녕") ); //안녕 undefined 
console.log(0 && console.log("찍혔다!")); //0

console.log(3 && true&& true && false); // false

- console.log부분도 undefined 타입이라서 falsy에 해당하고, 안녕과 undefined를 출력

- && 연산자가 많아도 왼쪽부턴 falsy 값이 나올때까지 읽고, falsy에 해당값을 출력함.

 

 

• OR (||): 앞에 있는 값이 falsy 하면 다음으로 넘어가고, 앞에 있는 값이 truthy 하면 그 상태로 값을 생성합니다.
  • and와 반대로 truthy를 찾는 느낌...

console.log(true || false); // true 
console.log(false || false); // false 
console.log([] || console.log("찍혔다!")); // []

 

 

<다시 falsy 값 정리>

 

• false: 불리언 값 false
• 0: 숫자 0 (양수/음수의 0 포함, -0)
• '' 또는 "": 빈 문자열
• null: 값이 없음을 의미
• undefined: 값이 정의되지 않음을 의미
• NaN: 숫자가 아님을 의미하는 값

 

 

 

• NOT (!):논리부정 연산자(!)는 항상 boolean 타입을 반환합니다.

  console.log(!true); // false
  console.log(!false); // true
  console.log(!10); // false
  

  잠깐!
  • truthy / falsy 를 식별할 수 있는 가장 확실한 방법
  • 데이터나 변수 앞에 !! 을 붙여서 true 나오면 truthy, false 나오면 falsy 한 데이터입니다.
  • console.log(!!0)
    - 이런 식으로 truthy falsy 알 수 있음...
  • 특수문자 읽는법기호 이름 (영문) 이름 (한글)

    `	GRAVE (그레이브)	물결표시 아래 따옴표, 백틱
    ~	Tilde (틸드)	물결표시
    !	Exclamation Point (엑스클러메이션 포인트)	느낌표
    @	At Sign /Commercial At (앳 사인/커머셜 앳)	골뱅이
    #	Crosshatch/Sharp (크로스해치/샵)	샵, 우물 정
    $	Dollar Sign (달러사인)	달러
    %	Percent Sign (퍼센트사인)	퍼센트
    ^	Circumflex/caret (서컴플렉스/캐럿)	꺽쇠, 웃는 눈
    &	Ampersand (앰퍼샌드)	앤드 마크
    *	Asterisk (애스터리스크)	별표, 별사탕
    -	Minus Sign/Hyphen/Dash (마이너스사인/하이픈/대시)	빼기, 마이너스
    _	Underscore/Underline (언더스코어/언더라인)	밑줄
    =	Equal Sign (이퀄 사인)	등호/이퀄/같다
    +	Plus Sign (플러스 사인)	더하기/플러스
    "	Quotation Mark (쿼테이션 마크)	큰 따옴표
    '	Apostrophe (어퍼스트로피)	작은 따옴표
    ,	Comma (콤마)	쉼표, 콤마
    .	Period /Full Stop (피리어드/풀스탑)	점/마침표
    ?	question Mark (퀘스천 마크)	물음표
    /	Slash/Virgule (슬래시/버귤)	슬러쉬
    ＼	Back Slash (백슬래시)	역슬러쉬/백슬러쉬
    \	Won sign (원사인)	원/원화
    |	Vertical Bar (버티컬 바)	버티컬바, or 연산자
    :	Colon (콜론)	콜론, 땡땡
    ;	Semicolon (세미콜론)	세미콜론
    (	Left Parenthesis (레프트 퍼렌써시스)	소괄호
    )	Right Parenthesis (라이트 퍼렌써시스)	소괄호
    {	Left Brace (레프트 브레이스)	중괄호
    }	Right Brace (라이트 브레이스)	중괄호
    [	Left Bracket (레프트 브래킷)	대괄호
    ]	Right Bracket (라이트 브래킷)	대괄호
    <	Less Than Sign/Left Angle Bracket (레스댄 사인/레프트 앵글브래킷)	작다
    >	Greater Than Sign/Right Angle Bracket (그레이터댄 사인/라이트 앵글 브래킷)	크다

4. 함수 (Function)

함수는 특정 작업을 반복적으로 수행해야할 때 사용하기 좋은 코드 블록.

함수 또한 참조형 타입을 가집니다.

함수 선언식 (Function Declaration)

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

함수 표현식 (Function Expression) : 함수도 변수에 할당될 수 있음. (참조형)

const subtract = function(a, b) {
  return a - b;
};
console.log(subtract(5, 3)); // 2

화살표 함수 (Arrow Function) ← 얘도 함수 표현식

const multiply = (a, b) => {
  return a * b;
};
console.log(multiply(2, 3)); // 6

// 매개변수가 하나일 경우 괄호 생략 가능
const square = x => x * x;
console.log(square(4)); // 16

즉시 실행 함수 (Immediately Invoked Function Expression, IIFE): 함수 선언하자마자 바로 실행하고 싶을때 ...

(function() {
  console.log('IIFE 실행!');
})();

함수에서 가장 중요한것 ← 함수의 시그니처 라고도 함

1. 함수 이름
2. 매개변수
3. 반환값

function add(a, b) {
  return a + b;
}
// 함수이름: add
// 매개변수: a, b
// 반환값: a + b

5. 조건문 (Conditional Statement)

if 문

let age = 18;
if (age >= 18) {
  console.log('성인입니다.');
}

if-else 문

let age = 16;
if (age >= 18) {
  console.log('성인입니다.');
} else {
  console.log('미성년자입니다.');
}

if-else if-else 문

let score = 85;
if (score >= 90) {
  console.log('A 학점');
} else if (score >= 80) {
  console.log('B 학점');
} else {
  console.log('C 학점 이하 🥲');
}

switch 문

특정 변수의 경우의 수가 정해져 있을 때 유용합니다.

let fruit = 'apple';
switch (fruit) {
  case 'apple':
    console.log('사과입니다.');
    break;
  case 'banana':
    console.log('바나나입니다.');
    break;
  default:
    console.log('알 수 없는 과일입니다.');
}

삼항연산자

조건에 따라 다른 값을 반환하는 표현식입니다.

let isLoggedIn = true;
let welcomeMessage = isLoggedIn ? "환영합니다!" : "로그인이 필요합니다.";

console.log(welcomeMessage); // 출력: 환영합니다!

 

6. 반복문 (Loop)

while도 있지만 for가 주로 많이 쓰임.

 

for 는 3개를 쓸거에요.

1. 어떤 값부터 시작할래?
2. 어떤 값이면 멈출래?
3. 다음번에 이 값을 어떻게 할래?

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

• for 문안에서 유용한 반복문 제어 키워드 continue , break

 

7. 코딩 컨벤션 (이름 짓는 방법)

• 코드 컨벤션
  • camelCase
    • 거의 대부분의 변수 함수 선언에 사용됩니다.
  • const thisIsVariable = true; const goToHome = () => { return; }
  • kebab-case
    • 페이지, pathname, 폴더명, css className 에 사용됩니다.
  • pages ㄴ todo-list ㄴTodoList.tsx ㄴ todo-detail ㄴTodoDetail.tsx class-name, .item-id <div class="item-id">
  • snake_case
    • 소문자 표현은 잘쓰이지 않지만, 대문자 표현은 상수 표현 할때 많이 사용합니다.
  • const default_snake_case = '파이썬에서 많이 쓰임 js는 잘 안씀' // 요건 js 에서 많이 씀 const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000; setTimeout(blastOff, MILLISECONDS_PER_DAY);
  • PascalCase
    • 컴포넌트, page 파일 명에 많이 사용합니다.
  • TodoList.tsx Detail.tsx
  • 왜 코드컨벤션이 중요할까요?
    • 팀원 모두 같은 코드를 작성할 수 있게 됩니다.
      • 팀의 코드를 한 사람이 짠 코드처럼 느껴지게 하는데에 목적이 있습니다.
    • 사람에 의존적이지 않고 규칙에 의존적인 코드를 짜게 되고 모르는 부분의 코드도 빠르게 파악할 수 있게합니다.
    • 코드, 컨벤션만 보고 어떤 의도의 코드인지 파악하기 쉽게 됩니다.
    이런 이점들 때문에 협업하기 전에 여러 Convention 들을 정하고 시작하는 것입니다.
• 기본적인 변수 / 함수 선언법
  • 변수는 명사(noun) first
  • // bad var goToHome = 1; // good let variable = 1; let phoneNumber = '010-1234-5678'
  • 꼭 명확한 의미를 담아서 작성하기 / 길더라도 (약속되지 않은) 줄임말은 쓰지 않기
  • //bad let a = 1; let b = 86400; const gmName = "kim"; const gf = undefined; //good const itemId = 1; const ONE_DAY_SECONDS = 86400; const grandMotherName = "kim"; let girlFriend = undefined;
  • boolean 은 is, has, thisIs, -ing
  • //bad const good = true; const girlFriend = true; //good const isGood = true; const thisIsGood = true; const hasGirlFriend = false; //mz 채신 유행 const loading = true; if(isGood)
  • 함수는 동사(verb) first
  • //bad const home = () => {} const eventHandler = () => {} //good const goToHome = () => {} const handleEvent = () => {}
  • 복수에는 복수 표현 사용하기 todoItems, todoList
  • //bad var todo = [1,2,3,4]; //good const todos = [1,2,3,4]; const todoList = [1,2,3,4];