1차 세미나에서는 HTML, CSS, JavaScript의 기초에 대해 학습을 진행하였다.
이번 2차 세미나에서는 JS 연산 & 조건 연산자, 객체, DOM과 Event에 대해 알아보았다.

세미나를 들으면서 모호했던 개념을 실시간으로 정리하였다.

✨ JS 연산자

JavaScript의 연산자에는 할당, 비교, 산술, 비트, 논리, 문자열, 조건(삼항), 쉼표, 단항, 관계연산자가 존재한다.

위의 연산자들 중에서 산술 / 비교 / 논리 연산자를 예제를 통해 학습하였다.

산술 연산자

산술 연산자에서 주의해야 할 부분은 +,-연산자이다. 자바스크립트는 자료형을 자동 변환하여 연산하기 때문에 의도하지 않은 코드의 동작을 유발시킬 수 있다.

👇 예를 들면 라는 코드를 실행했을 때

console.log("1997"+26-1);	// 199725

결과 값은 1997 + 25 = 2022가 아닌 199725라는 숫자를 출력하게 된다.

이는 더하기 연산자가 문자열과 숫자를 더했을 때, 숫자를 문자열로 합쳐지지만, 빼기 연산자를 만났을 때는 다시 숫자로 변환하여 연산을 진행하기 때문이다.

• Math 객체에는 반올림, 올림, 내림, 난수등이 존재한다.

Math.floor(3.45);		// 3 내림
Math.ceil(3.45);		// 4 올림
Math.round(3.45);		// 3 반올림

• 증감 연산자 ++ / --

let a = 10;
const b = --a;
const c = a++;

console.log(a,b,c);		//10, 9, 9

증감 연산자를 사용할 때는 사용 순서를 생각하며 써야 함을 주의하자.

비교 연산자

비교 연산자에는 대소 비교와 동치 연산자가 존재한다.

• 동치 연산자
  • == != abstract equality
    얕은 비교 : 값이 같은지만 비교
  • === !== strict equality
    깊은 비교 : 값 + 타입까지 비교

👇 얕은 비교와 깊은 비교에 대한 예제 코드이다.

// 얕은 비교
console.log(1 =="1");			//true
console.log(null == undefined)	//true

// 깊은 비교
console.log(1 === "1");			// false
console.log(null === undefined)	// false

3개를 사용하는 것을 권장한다.

논리 연산자

&& || ! and or not을 순서대로 갖는다.

논리 연산자는 Boolean이 아니어도 가능하다.
👇 이에 대한 예제 코드이다.

const obj = true;
const str ='abc';

console.log(obj && str) 		// 'abc'
console.log(obj || str)			// 'abc'
console.log(!obj )				// false
console.log({})					// true;
console.log([])					// true;

console.log("")					// false;

위에서 알 수 있듯이
{ } [ ] 빈 객체와 문자열은 모두 true로 반환되고,
빈 문자열, null, 0, undefined, NaN은 모두 false을 반환한다.

따라서 앞에서부터 값을 읽으면서 판단한다고 생각하면 논리 연산자를 이해하기 편할 것 이다.

추가적으로 JavaScript의 형 변환에 대해 간략하게 알아보자.

• 형 변환

  • string -> number
    parseInt(str) : 8 / 10 / 16진수 선택이 가능하다.
    Number(str)
+str

  • string -> boolean
    Boolean(str)
!!str

✨ JS 조건문

• if / else if / else
• 삼항 연산자
  ?을 활용한 조건문이며 3개의 항이 필요하기에 삼항 연산자이다.
  👉 알고리즘 짤 때 많이 쓴다! + 할당시에도 가능하다.
• switch문
  👉 break 사용해야 의도치 않은 결과를 피할 수 있다.

✨ 함수

JavaScript에서의 함수는 특정한 작업을 수행하는 코드들을 묶어놓은 것을 말한다.
즉, 코드의 재사용과 명시적 작업을 위해 사용되는 개념이다.

함수는 Signature + Body의 결합으로 구성되어 있다.

❗️ 주의할 점은 함수에는 return문이 있어야 사용자가 의도한 동작으로 작동할 수 있으며, return문이 없다면 함수는 undefined가 반환된다.

함수를 정의하는 대표적인 방법은 함수 선언식, 함수 표현식, 화살표 함수이다.

함수 선언식

function 키워드를 사용하며 나타내고, 호이스팅이 발생하는 것이 특징이다.

👇 예제 코드이다.

// 함수 호출
helloWeb();
// 함수 선언
function helloWeb(){
  return 'Hi, Web!';
}

helloWeb이라는 함수를 호출 이후에 진행하였지만, 함수 선언식으로 작성되었기 때문에 호이스팅이 일어나 정상적으로 작동한다.

함수 표현식

선언식과 마찬가지로 function 키워드를 사용하며, let , var로 표현한 함수에 따라 호이스팅의 차이를 나타내는 것이 특징이다.

👇 예제 코드이다.

// 함수 호출
helloWeb();
// var 함수 표현식
var helloWeb = function(){		// Undefined
  return 'Hi, Web!';
}

// 함수 호출
helloWeb();						// TDZ 
// let 함수 표현식
let helloWeb = function(){		// ReferenceError
  return 'Hi, Web!';
}

var로 표현된 함수를 호출하면 undefined의 에러를 발생시키지만, let으로 표현된 함수를 호출하면 reference에러를 발생시킨다.

이는 let은 var와 다르게 호이스팅은 되지만 실제 선언 위치에 도달하기 전까지 접근이 불가능하다는 특성을 지니고 있기 때문이다.

즉, 런타임 이전에 평가되는 것이 아니다!!

• TDZ : Temporal Dead Zone
  호이스팅이 된 지점에 도달하기 직전까지는 변수에 접근할 수 없다는 것을 말한다.

화살표 함수

=>를 사용해서 나타낸다.
간결하고 쓰기 편하며, this 바인딩의 문제를 해결해준다.

👇 예제 코드이다.

const arrow = (param) => {
  return param;
}
const arrow2 = param => {
  return param;
}
const arrow3 = param => param;

이 때, 중괄호를 열었을 경우 반드시 return문을 작성해주어야 한다.

일급함수

고차 함수( 함수를 인자로 받거나 함수를 반환하는 함수) 라고도 불리며, 함수를 값으로 취급하는 것을 말한다.

함수가 함수를 반환하는 것도 가능하고, 함수를 변수에 할당하는 것도 가능하고, 함수를 인자로 전달하는 것도 가능하다.
👇 예제 코드이다.

// 함수를 인자로 사용
function 쿠폰사용(price){
  return price * 0.3;
}
function 포인트사용(price){
  return price - 7000;
}

function 구매(할인, price){
  return 할인(price);
}

const 결제금액1 = 구매(쿠폰사용, 15000);
const 결제금액2 = 구매(포인트사용, 30000);

// 함수를 반환하는 함수
function 쿠폰사용 (price, rate){
  return price * rate;
}

function 쿠폰생성(rate){
  return function(price){
    return 쿠폰사용(price, rate);
  }
}
// 모듈화 가능하다
const 가입쿠폰 = 쿠폰생성(0.8);
const 생일쿠폰 = 쿠폰생성(0.6);

const 신규회원_결제금액 = 가입쿠폰(70000);
const 생일회원_결제금액 = 생일쿠폰(21000);

🤔 쓰는 이유는 무엇일까?

위의 과정을 추상화라고 말한다. 즉, 함수형 프로그래밍인 것이며 선언적인 프로그래밍을 가능하게 한다.

✨ 객체

key랑 value 쌍으로 이루어진 정보 덩어리를 말한다

• property
  key(이름) - value(값)의 쌍을 일컫는 말이며, ,로 구분할 수 있다.
• key & value
  각각 property의 이름과 값을 정의한다.
  • key : property의 이름이다.
  • value : 어떤 것이든 넣을 수 있다.
    • 메서드
      value안에 들어간 함수를 말한다.

✨배열

데이터를 보관하는 선형 자료구조이며 배열은 객체이다.

요소 접근은 [ ]로 가능하며, 배열 내장 메서드가 존재한다.

const fruits = [ "apple", "banana", "orange" ];
console.log(fruits[0]);		// apple
console.log(fruits[1]);		// banana
console.log(fruits[2]);		// orange

배열 내장메서드에는 다양하니 참고하길 바란다.

배열의 요소를 순회하기 위해서 우리는 반복을 사용한다.

• for ... of value 값만 추출한다.

• for ... in key 값만 추출한다. 때문에 배열 순회에는 적합하지 않으며, 객체를 순회하는 것이 맞다.

• forEach 배열을 순회하며 각 요소에 대해 콜백함수를 실행하고, return문이 없다

• map 콜백함수 실행하고, 그 반환 값으로 새로운 배열을 반환한다.

  콜백함수란 다른 함수의 매개변수로 전달한 함수를 말하고, 이는 전달받은 함수 내부에서 나중에 실행된다.
  즉, 전달과 호출은 다르다.

✨ ES6

• 템플릿 리터럴
  여러 줄을 한번에 작성할 수 있다.

const my = `Hello
My name is 
Seohee `;

• 구조분해 할당
  배열이나 객체를 해체하여 각각 변수에 담는 것을 말한다.

const person = {
  name : "seohee",
  age : 24,
  job : "dancer", 
  favorite : {
    food : ["삼겹살", "양식", "흐김쟈"],
    drink : "coffee"
  }
}
// 순서는 중요하지 않지만, 속성명은 같아야 한다.
const { name, age, job } = person;
// 변수명 바꾸는 것도 가능하다.
const { name : myName } = person;

• rest 문법
  나머지 값을 쓸어담는데 사용한다.

const { age, ...rest } = person;
console.log(rest);

👇 age를 제외한 나머지 속성들이 rest에 담긴 것을 확인할 수 있다.

• spread 연산자 rest와 비슷하지만 엄연히 다르다.

const newPerson ={
  ...person,
  job : "singer",
};
console.log(newPerson);

👇 직업이 변경이 된 상태로 새로운 객체가 생성되었다.

✨ DOM API

DOM

Document Object Model, HTML을 파싱해서 각 태그를 객체로 바꿔 구조화한 모델을 말하며 상호작용을 할 수 있도록 도와준다.

DOM API

자바스크립트로 하여금 웹 콘텐츠를 제어할 수 있도록 DOM을 조작하는 도구들이다.

핵심 객체로는 2가지가 존재한다.

• window 👉 브라우저 전체에 해당된다.
• document 👉 웹 페이지 전체에 해당된다.

✨ Event

DOM 안에서 발생하는 일을 말한다.

예를 들면, 어떤 걸 클릭하고, 마우스를 올렸고, 브라우저 창의 사이즈가 변경된 상황을 말한다.

존재하는 이유는 사용자와 상호작용하기 위한 것이다. 따라서 JavaScript는 Event를 기반으로 DOM을 동적으로 제어한다.

이벤트의 등록 방법 2가지

• EventListener
  특정 이벤트가 발생함을 감지하는 역할을 한다.

• EventHandler
  이벤트가 감지되었을 때, 무슨 동작을 할 지 정의한다.

만약 사용자가 어떤 버튼을 클릭했을 때, 배경색을 빨간색으로 바꿔준다. 라고 했을 때, 버튼을 클릭하는 것이 리스너이고, 빨간색으로 바꿔주는 것이 핸들러 이다.

👇 아래와 같은 방법으로 Listener 이벤트를 등록해주면 된다.

// 하나의 요소에 여러 개의 리스너를 부착할 수 있다.
document.addEventListener(이벤트 이름, 콜백함수);

// 하나의 요소에 하나만 가능하다.
document.onClick = function(e){ };

• 이벤트 버블링
  특정 요소에서 이벤트가 발생하면 상위 요소로 전파

• 이벤트 위임
  모든 요소에 리스너를 부착하지 않고, 상위 요소에서 제어한다

• target
  실제로 이벤트를 발생시킨 요소를 지칭한다.

• currentTarget
  이벤트를 감지한 요소를 지칭한다.

target과 currentTarget은 다를 수 있다.
즉, 이벤트 위임을 사용했다면 target과 currentTarget은 다를 것이다.

• stopPropagation
  이벤트가 상위 요소로 전파되는 것을 임의로 막아준다.

• preventDefault
  이벤트가 발생했을 때, 태그 자체적으로 정의되어있는 기본 동작을 막아준다.

예를 들면 form태그에서 submit event를 발생시키면 새로 고침을 하게 만드는 것이 있다.

💡 느낀점

기본적인 연산자에서 놓친 부분도 조금 있었고, event의 경우 세미나 당시에는 이해가 느린 부분도 존재하였다. 정리를 통해 완벽한 이해를 거쳤지만, 기본개념에 대한 정확한 정립을 위해 노력하기로 다짐했다.

📚 학습할 때, 참고한 자료 📚

• 표현식과 연산자
• 논리 연산자
• 5.33 Event
  이벤트