NEVER MELT ICE: FACTOR

(중급) 자바스크립트 독학 12일차 (생성자 함수)

녹지않는얼음 — Thu, 18 Jan 2024 20:13:08 +0900

리터럴 객체 (단일) 과 별개로

와플 틀마냥 인수에 따라 유사한 와플(객체)를 찍어내는 함수

형태

function 생성자함수명(호출인수1, 호출인수2, 호출인수3..){

this.인수명1 = 변수;

this.인수명2 = 변수; ...

}

let 변수 = new 생성자함수명(인수1, 인수2)

[동작 구조]

new 로 동작하는 순간

생성자함수 내에서

new로 받은 인수로 받은 값의 객체를 생성하고

생성된 객체를 return 함

[예시]

function User(name, age){

this.name = name;

this.age = age;

this.showAge(){

alert(`당신의 나이는 ${age}입니다`)

}

let user1 = new User('Mike', 33);

let user2 = new User('Name', 33);

user1.showAge(); // '당신의 나이는 33살입니다'

(중급) 자바스크립트 독학 11일차 (변수/선언, 호이스팅, TDZ) _ 복습필요

녹지않는얼음 — Mon, 15 Jan 2024 12:51:03 +0900

hoisting

스코프 어디에 있던 최상위에 있는 것처럼 동작

let
var
const

ex.
var name = 'mike';
console.log(name)

==

console.log(name)
var name = 'mike';

* Temporal Dead Zone
let, const도 hoisting으로 작동하나
TDZ의 영향을 받음. (할당 전에 사용 불가)
* TDZ는 코드를 예측 가능하게 하고, 잠재적인 버그를 대비

ex.
let age =30;
funmciton showAge(){
console.log(age);
}
------------------------------

let age =30;
function showAge(){
console.log(age);

let age = 20;

}

showAge(); // 불가

'let age = 20;' 가 Scope를 만들고 hoisting을 일으킴.

변수의 생성과정
선언 : var는 선언과 초기화를 동시에. (할당전 호출 시, undefined) // let은 선언과 초기화가 분리 (초기화는 실제 코드에 도달햇을때 동작) // const는 선언 초기화 할당 동시에
-> 초기화
-> 할당

var : 함수 스코프(function-scoped)
let, const : 블록 스코프(block-scoped)
* 블록 스코프: 모든 선언문은 코드 블록 내에서만 유효

[캡처]

if문 안에서 선언한 var 변수는
if문 바깥에서도 사용 가능

ex.

const age = 30;

if(age>19){
var txt = '성인';
}
console.log(txt);

* var는 전역함수/선언이기 때문에 코드 전체에 영향을 미칠 수 있으므로 사용을 권장하지 않음. (code의 무결성 훼손)

let/const로 선언하는 것을 권장함.

(기초) 자바스크립트 독학 10일차 _ array

녹지않는얼음 — Fri, 5 Jan 2024 12:28:25 +0900

[Array // 배열]

배열: 순서가 있는 리스트

1번에 철수
...
30번에 영수

ex. let students = ['철수', ... '영수'];

배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있음.

[Array Length]
배열의 길이
ex. students.length // 30

[Array Method]

push // 배열 "끝"에 요소를 추가해주는 거
ex. students.push('진식')

pop // 배열 "끝"에 요소 제거
ex. studnets.pop('진식')

unshift // 배열 "앞"에 요소 추가
ex. students.unshift('진식')

shift // 배열 "앞"에 요소 제거
ex. students.shift('진식')

* push/unshift는 여러 요소 추가

배열을 쓰는 이유는 반복을 위해서.

(기초) 자바스크립트 독학 9일차 _ object - method (this 관련)

녹지않는얼음 — Thu, 21 Dec 2023 12:38:45 +0900

Obejct - Method

const jinsik = {
  name: 'jinsik',
  age: 30,
  sing: function(){
    console.log('노래 개못핵')
  }
}

jinsik.sing() // '노래 개못핵'

// "sing" -> method : 프로퍼티 상에 정의된 함수
// 함수 안에 인수가 없을 경우, 펑션 생략 가능 [   sing: function(){ -> sing() ]

[객체와 Method의 관계]

let boy = {
  name : 'Jinsik 1',
  sayHello : function(){
  console.log(`Hello, I'm ${this.name}`)
}
}

let girl = {
  name : 'Jinsik 2',
  sayHello : function(){
  console.log(`Hello, I'm ${this.name}`)
}
}

boy.sayHello()

method "sayHello()" 상의 실행문 상의 "${this.name}" 상의 "this"는
method 앞에 점 앞에 있는 객체임 (boy)
그래서 boy.name을 불러오는 거고, jinsik 1이 불려져 옴.

* 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음, 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴

let boy = {
  name : 'Jinsik 1',
  sayHello : () => {
  console.log(`Hello, I'm ${this.name}`)
}
}

boy.sayHello()

//// Hellp, I'm Codepen
(this는 전역 객체로 되버림, this에 대해 선언된게 없기 때문)

[전역객체]
브라우저 환경 : window
Node js : global

let boy = {
  name : "jinsik",
  showName : function(){
   console.log(boy.name)
}
};

boy.showName() // jinsik

let ganjang = boy;
ganjang.name = "sunghwan"

ganjang.showName() // sunghwan

-----

let man = boy;
boy = null;

man.showName() // 에러

이럴땐 method의 시행문의 이름을 this로 바꾸면 됨
   console.log(boy.name) -> console.log(this.name)

method 상에서는 객체명을 직접 쓰는거보단 this로 쓰는게 나음

[Methid this 상호참조]

let boy = {
  name : 'Jinsik',
  sayThis: function() {
    console.log(this);
  }
}

boy.sayThis() ///// boy 객체 전체 프로퍼티를 보여줌

(이걸 화살표 함수로 바꿀 경우)

let boy = {
  name : 'Jinsik',
  sayThis: () => {
    console.log(this);
  }
}

boy.sayThis()

this는 윈도우의 전역객체의 프로퍼티를 말하기 때문에 log가 커지므로 전체를 표출할 수 없음.

** 객체의 method를 작성할 땐 화살표함수를 사용하지 말 것.

(기초) 자바스크립트 독학 8일차 _ Object // 복습 필요

녹지않는얼음 — Wed, 20 Dec 2023 12:55:58 +0900

[객체]

const 대상 = { // 키
key1 : value1,
key2 : value2,
}

* 마지막 쉼표는 없어도 되는데, 쉼표가 있는게 나중에 수정삭제할때 편함

[객체 key 추가]
- 점(.)을 사용 or
- 별괄호 사용(['key'])

[객체 key 삭제]
- delete 앞에

ex.
const jinsik = {
homekeeper : 'yes',
age = 99,
}

[객체 접근]
jinsik.homekeeper // yes

[객체 Key 추가]
jinsik.sing = 'suck'
jinsik.['sing'] = 'suck'

[객체 삭제]
delete jinsik.sing;

---

[객체 프로퍼티 / 객체 단축 ]
사전 정의(const)된 항목에 대하여
객체 안에서 정의할 때 추가로 안하고 그 항목에 대해서는 참조하는 것

ex.
const name = 'clark';
const age = 33;

const superman = {
  name,
  age,
  gener : 'male',
}

superman.name

[프로퍼티 존재 여부 확인]
in 사용

ex. 'birthDay' in superman; // false
    'age' in superman // true

--- ex ---
const jinsik = {
  name : 'jinsik',
  age : 30,
}

console.log(jinsik.name);
console.log(jinsik.['name'])

jinsik.sing = 'poor';
jinsik['job'] = 'homekeeper';

delete jinsik['sing']

console.log(jinsik)

function isAdult(user){
  if(!('age' in user) || // user에 age가 없거나
     user.age < 20){ // 20살 미만이거나
    return false;
  } else {
      return true;
    }
  }

const Mike = {
  name : "Mike",
  age : 30
}

const Jane = {
  name : "Jane",
}

  console.log(isAdult(Mike))
  console.log(isAdult(Jane))

// 객체 for ... in
for(key in Mike){  // key는 Object Mike가 갖고있는 Key 값
}
// 객체 for ... in

const Jinsik = {
  name: "Jinsik",
  age: 30,
};

for(key in Jinsik){
  console.log(key)
}

// [result]
// "name"
// "age"

for(key in Jinsik){
  console.log(Jinsik[key]) // Mike['name'] -> Mike['age']
}

// [result]
// "Jinsik"
// 30

for~ in 복습 필요

(기초) 자바스크립트 독학 7일차 _ 함수표현식/함수선언문/함수 화살표

녹지않는얼음 — Wed, 13 Dec 2023 12:52:21 +0900

함수선언문

fucntion ~
이름이 없는 함수를 만들고(funciton()),
그 이름없는 함수에 변수를 선언(let ~ = function())
--> 함수 표현식

함수선언문 vs 함수표현식
[다른점 : 호출타이밍]

함수 선언문은 전체영역에 대해 커버하지만,
함수 표현식 (let 이후)에 대해서는 순차적으로 실행되어 let이 선언하는 구역에 대해서만 실행

함수선언문은 어디서든 호출 가능

[함수선언문]
sayHello();
function sayHello(){
// 함수실행문}
-- 동작

** 인터프리터 언어(Interpreted Launguage)
위에서 아래로(위 → 아래)로 순차적으로 코드를 실행하는 언어
그러나 함수의 경우, 자바스크립트의 알고리즘으로 인하여 코드상 설정된 모든 함수에 대해 선제적으로 실행

*** 호이스팅(Hoisting)
함수는 실행할 수 있는 영역이 아니라, 전체 영역에 대해 커버

**** 대부분 상황에서는 함수 선언문이 편함.

[화살표 함수]
let add = function(num1, num2){
return add+1add2;
}
치환 → let add = (num1,num2) => {
return num1+num2;
};

실행문이 리턴문이며, 코드 본문이 한줄이므로 대괄호를 중괄호로 변경 가능
let add = (num1,num2) => (
num1+num2;
)
리턴문이 한줄일 경우, 괄호도 생략 가능
let add = (num1,num2) => num1 + num2;

실행문이 리턴문인데, 함수 인수가 하나일 경우, 인수 괄호 생략 가능
let sayHello = name => `Hello, ${name}`;

인수가 없거나, 리턴문에 여러줄의 코드가 있을 경우
괄호 생략 불가

(기초) 자바스크립트 독학 6일차 _ 함수(function) [복습 필요]

녹지않는얼음 — Tue, 12 Dec 2023 12:42:46 +0900

[함수] -> 함수를 정의해서, 뒤에 표출되는 걸 편리하게 관리

function 함수명(매개변수1, 매개변수2, ....){
// 실행문
}

전역변수/지역변수
어디서나/함수 안에서만 사용하는 변수 (바깥에선 참조 불가)

예시.
function sayHello(name){
const msg = `Hello, ${name};
alert(msg)
}

alert(msg) -> 사용 불가.

** let으로 선언한 건, 다시 let으로 선언 불가능하나, 전역/지역 변수간에 상이하게 선언 가능

예:
let msg = "welcome";

function sayHello(name){
let msg = `Hello. ${name}`;
console.log("함수 내부");
console.log(msg);
}

sayHello('Mike');

console.log("함수 밖");
console.log(msg);

*** 매개변수로 받은 값은, 복사된 후 함수의 지역변수가 됨.
전체서비스에서 공통으로 바라봐야되는 변수(전역변수)를 제외하고는, 가급적 지역변수를 사용할 것.

**** return.;을 함수 안에 넣을 경우 그 즉시 return 오른쪽에 있는 값을 반환하고 함수를 종료하므로,
함수를 종료하는 목적으로 사용하기도 함.

****** 함수는 한번에 한작업에 집중. 여러 목적이 필요할 경우, 함수를 새로 작성할 것.

(기초) 자바스크립트 독학 5일차 _ switch 문

녹지않는얼음 — Mon, 11 Dec 2023 23:20:08 +0900

switch 문 if, else로 대체 가능.
그러나, 간결하게 작성 가능.

switch(평가){
case A :
// A일때 코드
code B :
// B일 때 코드

=======> 치환

if(평가 == A){
// A일때 코드
} else if(평가 == B){
// B일때 코드
}

## switch 구문은 선택된 case 이후에 모두 실행. (case마다 break 필요)
## 동일한 결과 값에 대해서는 세미콜론(:) 이후로 중복 가능

(기초) 자바스크립트 독학 4일차 _ 반복문

녹지않는얼음 — Sun, 10 Dec 2023 17:37:15 +0900

반복문 종류

for

while

do .. while

반복문 행동제약

break

continue

for

[구조]

for(초기값; 실행조건; 시행변수;){for 동안 시행할 명령}

인수(3개)가 존재함.

while

[구조]

let 구문

while(실행조건){while 시행변수, 시행명령}

let을 구문을 설정한 후에 while의 실해옺건동안 변수 및 시행명령을 수행함

do .. while.

while과 똑같으나 while(실행조건이 뒤에 오기때문에 선행적으로 시행명령을 수행)

반복문 행동제약

break/continue

조건을 충족할 시 반복문을 중지함/다음 단계로 반복

[구조]

반복문 {

if(){

break(/continue);

}

** 주의

for(true) 구문은 조심히 사용할 것.

뒤의 행동제약 구문(break/continue)가 없을 경우, 영원히 반복됨

(기초) 자바스크립트 독학 3일차_ 연산자

녹지않는얼음 — Sat, 9 Dec 2023 23:31:15 +0900

자바스크립트 공부 3일차다.

연산자에 관해 학습함.

기본적으로 언어상에서 연산자는

대입연산자, 논리연산자 같은 게 있나봄.

연산법칙

+ - / * % 가 있고.

비교연산자

< > == !=

논리연산자

|| && !

같은 게 있나봄

나머진 이해가 가는데 이중 좀 헷갈릴만한 게

1. 복합(약식)대입연산자

2. 논리연산자 상의 우위조건 인듯함

코드를 깔끔하게 하기 위해 복합대입연산자를 쓰는거 같은데

왜 a += b가 a = a + b가 되는지 아직도 잘 이해가 안감.. 그냥 암기를 해야하는 거 같은데.

막상 저런 코드 레퍼런스가 들어오면 한눈에 안들어오고 헷갈릴 거 같음.

복합 논리연산자 코드 상에서

if(a = b && c = d || e = f ){ ... } 라는 코드가 있다면

AND 연산자를 먼저 생각하기 때문에, a가 b이며, c가 d인 경우 [이거나!] e가 f일 경우.. 가 되버린다.

따라서, a가 b가 아니어도, c가 d가 아니어도, e만 f일 경우 참을 뱉어냄.

이 경우 원하는 선행 조건이 있을 경우, 괄호를 쳐서 앞으로 빼는 것이 중요함. (코드의 연산, 효율화를 위해서도 중요함)