221118 TIL Javascript 기본

참고자료: https://teamsparta.notion.site/Javascript-e8f62d9dc08246f1a4f4a8c9b47a5293#c3ebf8c425384cb58448589818138305

01. Javascript 기초 문법 (1)

1. 변수 선언, 대입 연산자

• 변수선언 키워드: var, let, const
• 대입 연산자 키워드: =

2. 비교 연산자

• ===
• !==
• <,>
• >=,<=
• ==,!= : 사용하지 않는 것이 좋다.

3. 자료형

• Boolean : true, false
• String: '값' 또는 "값"으로 표시, 정해진 것은 없으나 통상적으로 '작은 따옴표'를 주로 쓴다.
• Number: 어떠한 따옴표나 콤마를 넣지 않고 숫자를 표현
• undefined
• null: 값이 비어 있는 것을 표현
• object:
  • { key1: value, key2: value } 의 형태로 표현, value에는 모든 자료형 값을 담을수 있다.
  • key에 접근하는 방법 두가지: 
    • obj.key
    • obj['key']
  • 만약 key에 여백(스페이스), 대쉬(-), 특수문자(*) 등의 변수명으로 허용되지 않는 문자열을 사용할 경우에는 반드시 obj['key']의 표현식을 사용해야 한다.
  • 객체구조 분해 할당
    ES6에서 새롭게 도입한 문법으로 객체나 배열을 변수로 분해할 수 있다.
    예시
    

const obj = { name: "이용우", age: 28, tech: "Node.js" };

const { name, age, tech, hair } = obj;
console.log(name); // 이용우
console.log(age); // 28
console.log(tech); // Node.js
console.log(hair); // undefined: obj에는 "hair" 프로퍼티가 존재하지 않습니다.

• Array (배열)
  • 배열의 value의 순서를 나타내는 index라는 개념이 존재하며, 최소 값은 0
• NaN: Not a Number의 줄임말로 숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환된다.
  
  • NaN의 판별: Number.isNaN()의 현재 값이 NaN이어야만 true로 반환
• Function(함수): 함수는 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용된다.
  • 함수의 사용법 3가지

// getMyName가 함수의 이름이 된다.
function getMyName() {
	return '함수가 반환할 값';
}

getMyName(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
// Print: '함수가 반환할 값'

//이처럼 변수에 할당이 가능
const variable = function() {
	return '함수가 반환할 값';
}

variable(); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
// Print: '함수가 반환할 값'

// Argument(인수 또는 인자)를 입력 받아 사용가능
function getMyName(myName) {
	return myName;
}

getMyName('인자를 넣습니다.'); // 위처럼 정의된 함수는 이렇게 사용할 수 있습니다.
// Print: '인자를 넣습니다.'

4. 불리언 연산자

• Falsy 값: 빈문자열 ' ', 숫자 0, 불리언 false, null, undefined, NaN가 해당
• Truthy 값: Falsy 값을 제외한 모든 값이 true 로 평가된다.
• 항상 Truthy로 판단되는 자료형: Array, Object
• 다른 자료형을 가진 값에 강제로 불리언 연산을 적용하려면 Boolean 함수를 사용할 수 있다.

Boolean(true)
// Print: true

Boolean(false)
// Print: false

Boolean(10)
// Print: true

Boolean('')
// Print: false

Boolean(0)
// Print: false

Boolean(-1)
// Print: true

Boolean(null)
// Print: false

Boolean(undefined)
// Print: false

Boolean()
// Print: false

5. 조건문

• 조건에 들어가는 값은 항상 불리언 연산이 적용된다. => 아래서 설명
• 조건문 사용예시 3가지

if (condition1) // 명령문1 => true 이면 실행
else // 명령문2 => false 이면 실행

//이것을 boolean 연산이 작용된다 한다.

if (condition1) {
  // 명령문1
} else {
  // 명령문2
}

if (condition1) {
  // 명령문1
} else if (condition2) {
  // 명령문2
} else if (condition3) {
  // 명령문3
} else {
  // 명령문4
}

//이처럼 여러가지 조건을 연달아 두는 것을 chaining이라 한다.

6. 논리 연산자

• && (AND 연산자)
• || (OR 연산자)
• ! (NOT 연산자)
• 구문설탕 (Syntax sugar): 읽는 사람 또는 작성하는 사람이 편하게 디자인 된 문법
  • AND 연산자 응용 구문
    const result = condition1 && condition2 && 'Value';
    AND 연산자(&&)를 사용할 때 모든 값이 Truthy할 경우 맨 뒤에 있는 값('value')이 result 변수에 할당된다
  • OR 연산자 응용 구문
    const condition1 = false const condition2 = null const condition3 = "이용우"
    const name = condition1 || condition2 || condition3 || '강승현';
    OR 연산자(||)를 사용할 때, 가장 먼저 오는 Truthy한 값('이용우')이 name변수에 할당

7. 반복문

• for 문
  기본 형태
  for (초기화구문; 조건문; 증감문)
  
  • 초기화 구문: for 구문 안에서만 사용될 변수를 선언
  • 조건문: truthy한 경우에 반복 실행
  • 증감문: 구문이 끝나는 경우 증감문에 선언된 구문이 실행
  • 실행 순서
    - 초기화 구문 → (조건문 실행 → 명령문 실행 → 증감문 실행)
    - 괄호로 묶인 부분은 조건문의 결과가 Falsy할 때 까지 무한 반복

for (let i = 0; i < 3; i = i + 1)
	console.log(i);

// Print: 0
// 1
// 2

• 다른 반복문 제어 방법
  • break 문: 조건에 상관 없이 반복문을 중단
  • continue 문: 조건에 상관 없이 해당 명령문을 중단하고 바로 다음 단계인 증감문부터 실행
• for...of 문
  • 배열을 하나씩 반복해주는 문법
  • Array, Map과 같은 반복 가능한(Iterable) 객체의 value(요소)를 하나씩 반복할 수 있게 해준다. (Object는 반복 가능한 객체에 해당하지 않음)

const persons = ['강승현', '홍길동', '김아무개'];

for (const person of persons) {
  console.log(person);
}

// Print: '강승현'
// '홍길동'
// '김아무개'

• for...in 문
  • for...of 문과 유사하게 객체의 요소를 반복해주지만, 선언한 변수에 값이 직접 들어가지 않고 요소의 key를 전달

const persons = ['강승현', '홍길동', '김아무개'];

for (const person in persons) {
	console.log(person);
}

// Print: 0
// 1
// 2

• 객체(Object) 타입이 반복문을 사용하기 위한 방법?

8. 연습문제

• 변수 선언시 값을 할당하지 않으면 어떤 값인가요? 
  A: undefined
• 선언되지 않은 변수를 참조하면 어떻게 되나요?
  A: undefined -> ReferenceError
• 배열이 기본으로 제공해주는 함수들이 있습니다. 이 중 원하는 데이터를 필터링 해주는 함수는 뭘까요?
  A: filter()

02. Javascript 기초 문법 (2)

1. 함수

인터페이스

function 함수이름(parameter1, parameter2, parameter3) {
  // 명령문
}

함수이름(argument1, argument2, argument3); // 명령문에 있는 내용을 실행한다.

연습문제

• 요구사항: persons 변수로 입력받은 값의 사람들에게 맥주 주문을 받습니다. 성인(19세 이상)인 경우에만 맥주 주문을 받아 맥주를 제공할 수 있도록 해주세요.
• 성인에게 주문을 받은 경우 "맥주 나왔습니다! [주문한 사람 이름]님" 처럼 출력합니다.
• 미성년자에게 주문을 받은 경우 "나이 더 먹고 오세요! [주문한 사람 이름]님" 처럼 출력합니다.

나의 풀이

function isAdult(person) {
  // 왜 이런 코드가 가능한지 모르겠다면 비교 연산자를 복습하세요! 기초 튼튼!
  return person.age >= 19;
}

function orderBeer(person) {
 // === true는 생략해주어도 된다.
  if (isAdult(person) === true) {
    console.log(`맥주 나왔습니다! ${person.name} 님`);
  } else {
    console.log(`나이 더 먹고 오세요! ${person.name} 님`);
  }
}

const persons = [
  { name: "이용우", age: 19 },
  { name: "김예지", age: 18 },
];

// for...of문이 어떻게 동작하는지 모르겠다면 반복문을 복습하세요!
for (const person of persons) {
  orderBeer(person);
}

// Print: 맥주 나왔습니다! 이용우님
// 나이 더 먹고 오세요! 김예지님

• javascript에서 함수 만드는 방법
  • 함수 선언식 /표현식 코드
    • 함수 선언식
      function sayHello () { return "hello, world!" }
    • 함수 표현식
      const sayHello = function(){ return "hello, world!" }
    • 작동 방식에서 차이는 없지만 함수 선언식은 호이스팅에 영향을 받고, 함수 표현식은 호이스팅에 영향을 받지 않습니다.
    • 호이스팅이란?
      인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
  • 화살표 함수 (Arrow function)
    • 직관적
    • 화살표 함수는 간결한 익명 함수와 암시적 반환(implicit return)을 가능하게 해주기 때문에, 앞으로 굉장히 많이 사용하게 될 것
    • Arrow function 방식 1
      const sayHello = () => { // < --- 함수 로직 --- > return "hello world!" }
    • Arrow function 방식 2 - 암시적 반환(implicit return)
      만약 함수가 반환하는 값을 한 줄로 표현할 수 있는 경우라면 return을 생략할 수 있다.
      const sayHello = () => "hello world!"
    • Arrow function 방식 - 익명 함수
      만약 간단한 함수를 일회성으로만 사용한다면 나중에 호출해 쓸 이름을 굳이 붙여놓을 이유가 없고 이럴 때 화살표 함수에 익명 함수를 사용할 수 있다.
      

// 예시 1 - 기본적인 함수 표현 방식
const sayHelloOnClick = () => {
	console.log('hello friend')
}
<App onClick={sayHelloOnClick} />

// ❗️ 예시 1 - 익명 함수
<App onClick={() => console.log('hello friend')} />


// 예시 2 - 기본적인 함수 표현 방식
const ReturnItem = (item) => {
	return <div>{item}</div>
}
{array.map(ReturnItem)}

// ❗️ 예시 2 - 익명 함수
{array.map((item)=> <div>{item}</div>))}

 

2. 객체와 배열 구조 분해 할당

• 구조분해 할당이란?
  객체나 배열을 구조분해하여 나타내는 것.
• 자주 사용하는 패턴이므로 숙지하는 것이 좋다.

3. 전개구문 (spreadorder)

• 기존에 있는 객체나 배열의 내용을 그대로 가져오거나 새로운 값을 덧붙여서 새로운 객체나 배열을 생성 하는것.
• 기존의 데이터 (객체나 배열)에는 전혀 영향을 주지 않고 복사해서 새로운 것을 만든다.
• 예시

const box = {size: "big", color: "red"};

const newBox = { ...box}; // {size: "big", color: "red"}
const newBlueBox = {...box, color: "blue" }; // {size: "big", color: "blue"}

 

4. ES6는 아니지만, 정말 자주 쓰이는 메소드

• map()
  배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환.

const array1= [1,4,9,16];

//map 사용 : 기존 요소에 2을 곱해서 새로운 배열로 반환
const map1 = array1.map(x=>x*2);

//함수가 적용된 결과로 새로운 배열을 반환합니다.
console.log(map1); //[2, 8, 18, 32]

• filter()
  주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

const fruits= ['사과', '귤', '배', '감', '바나나', '키위'];

//filter 사용 : 기존 요소에서 length가 2를 초과하는 요소만 우려서 새로운 배열로 반환
const result = fruits.filter(fruit => fruit.length > 2);

//함수가 적용된 결과로 새로운 배열을 반환합니다.
console.log(result); //['바나나']

 

5. 연습 문제

• 함수에서 return을 사용하지 않으면 무엇을 반환할까요?
  A: False
  정답: return 키워드가 없는 경우 함수는 아무런 동작을 하지 않습니다., undefined
• 다음 보기중 반복문 사용이 가장 적합한 사례는 무엇일까요?
  A: 1에서 100의 숫자중 짝수만 카운트할 때
  정답: 1에서 100의 숫자중 짝수만 카운트할 때
• 반복문을 이용하여 다음의 배열의 값을 하나씩 차례대로 출력해보세요.

나의 풀이

const examples = ["apple", "banana", "mango", "kiwi", "melon"];

for (const example of examples) {
  console.log(example);
}

정답지 풀이

for (let i = 0; i < example.length; i++) {
  console.log(example[i]);
}

/* output 
apple
banana
mango
kiwi
melon 
*/

 

 

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

• 느슨한 타입(loosely typed)의 동적(dynamic) 언어
  Javascript가 느슨한 타입의 동적 언어라는 의미는 변수가 어떤 특정한 타입과 연결되지 않는다는 면에서 느슨한 타입이라는 것이고 모든 타입의 값으로 할당 및 재할당이 가능하기 때문에 동적 언어라고 볼수 있는 것입니다.
• JavaScript 형변환: 숫자 자료형을 가진 값에 문자열로 변환이 가능하다 여기고 자동으로 형태가 변환되어 작동합니다. 버그를 일으키기 쉬우므로 피하는 것이 좋습니다.
• ==, === : 같은 기능을 하는 연산자이나, 버그를 유발하기 쉬우므로 == 보다는 ===를 사용하는 것이 좋습니다. !=와 !== 도 마찬가지이입니다.
• 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.
  느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점: 예상치 못한 타입이 할당되어 에러가 발생할 수 있으며 특히나 긴 코드에서는 에러가 난 지점을 찾아내기가 어려울 수 있습니다.
  보완할 수 있는 방법: JavaScript의 단점을 보완하여 정적 타입 체크와 강력한 문법을 추가한 TypeScript를 사용하여 보완 가능하다고 합니다.TypeScript란 자바스크립트에 타입을 부여한 정적 타입 언어이며, 정적 타입 언어는 런타임 이전에 타입이 올바른지에 대한 검사를 시행하고 래퍼런스 오류를 유발하는 코드가 존재한다면 정적 언어는 컴파일하는 과정에서 오류를 출력합니다.
• undefined와 null의 미세한 차이들을 비교해보세요.
  undefined는 변수가 선언되지 않은 것이고, null은 공백으로 선언된 것입니다.

JavaScript 객체와 불변성이란 ?

• 기본형 데이터와 참조형 데이터
  기본형 데이터: 숫자, 문자열, 불리언, null, undefined, symbol의 데이터 타입을 말하며, '할당이나 연산시 데이터가 복제'된다고 합니다.
  참조형 데이터: 객체, 배열, 함수, 날짜, 정규표현식, Map, WeakMap, Set, WeakSet 등을 말합니다.
  
• JavaScript 형변환
  숫자 자료형을 가진 값에 문자열로 변환이 가능하다 여기고 자동으로 형태가 변환되어 작동한다. 버그를 일으키기 쉬우므로 피하는 것이 좋습니다.
  
• 불변 객체를 만드는 방법
  불변 객체란? 변하지 않는 객체를 말합니다.
  만드는 방법: const 와 Object.freeze()를 사용합니다.
  Object.freeze() 란?객체를 동결하기 위한 메소드로써, let test = { name : 'kim' } Object.freeze(test);이와 같이 사용합니다.
• 얕은 복사와 깊은 복사
  얕은 복사:  아래 처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지고 둘은 같은 주소를 갖는다. 따라서 obj2의 요소를 수정하면 obj1의 요소도 같이 수정된다.
  

const obj1 = { a: 1, b: 2};
const obj2 = obj1;

console.log( obj1 === obj2 ); // true

      깊은 복사: 데이터 자체를 통째로 복사, 복사된 두 객체는 완전히 독립적인 메모리를 차지, 인스턴스가 완전히 독립적인 것.

 

호이스팅과 TDZ는 무엇일까 ?

• 스코프, 호이스팅, TDZ
  스코프: 자바스크립트가 코드를 불러올때 var, function과 같은 키워드로 선언된 코드들이 임시로 들어있는 개념적인 공간
  호이트팅: 선언되지 않은 변수가 있는 코드를 실행했을 때, 참조에러가 나야하지만 참조에러가 나지 않고 undefined가 출력된다. 이것은 후에 선언되는 변수가 최상단으로 끌어올려지는 현상이 있기때문인데, 이 현상을 Hoisting이라 합니다.
  TDZ: Temporal Dead Zone의 약자로써, let, function, const등의 키워드의 실행시 일시적으로 보호하는 개념적인 공간. var 키워드는 이 공간의 보호를 받지 않아 호이스팅이 일어납니다.
• 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
  함수 선언문은 호이스팅의 영향을 받고, 함수 표현식은 호이스팅의 영향을 받지 않습니다.
• 여러분이 많이 작성해온 let, const, var, function 이 어떤 원리로 실행되는지 알 수 있어요.
  네 알수 있어요.
• 실행 컨텍스트와 콜 스택
  Execution context(실행 컨텍스트) : 자바스크립트 코드가 실행되는 환경
  실행컨텍스트가 활성화되는 시점에 당ㅁ과 같은 현상이 발생한다.
  - 호이스팅이 발생한다(선언된 변수를 위로 끌어올린다)
  - 외부 환경 정보를 구성한다
  - this 값을 설정한다.
  call stack : 코드가 실행되면서 생성되는 Execution Context를 저장하는 자료구조
  
• 스코프 체인, 변수 은닉화
  스코프 체인: 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것. 자기 자신의 스코프(scope)를 제외한 자신과 가장 가까운 변수 객체의 모든 스코프를 말한다고 볼수있다. cosnole.dir()을 사용하면 개발자 도구로 확인이 가능하다.
  

        변수 은닉화: 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것, 이것이 왜 필요한지는 잘 모르겠다. 나중에 필요할 때가 되면 다시 알아봐야 겠다.