[오픈미션] Javascript 공부

리액트 자신있게 들어가려고 했다..

하지만 난 HTML, CSS만 가능한 사람…

것도 기본 문법이랑 늬양스 정도만 아는…

 

그래서 급 드래프트로 자바스크립트 공부 먼저 했다.

근데 리액트 강의를 켰더니 자바스크립트를 알아야 한다고 한다..

(이런 사실도 몰랐던 엄청난 코린이….)

---

변수와 스코프

const

• 상수
• 선언 + 초기와 + 할당이 한번에 이루어짐
• 재할당 불가

let

• 변하는 값
• 한 번 선언된 변수를 다시 선언하면 에러
• 블록 스코프

var

• 한 번 선언된 변수를 다시 선언 할 수 있음 (재선언 가능)
• 선언하기 전에 사용 가능 (호이스팅)
• 하지만 할당은 할당된 위치 이후부터 가능
• 그전에 사용하면 undefined
• 함수 스코프

 

호이스팅

스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동 (할당 X)

 

변수의 생성과정

1. 선언 단계
2. 초기화 단계
3. 할당 단계

var

1. 선언 및 초기화 단계
2. 할당 단계

let

1. 선언 단계
2. 초기화 단계
3. 할당 단계

const

1. 선언 + 초기화 + 할당

var : 함수 스코프

let, const : 블록 스코프

결론

• 이왕이면 var 말고 let, const 써서 예측 가능한 코드를 짜는게 좋다!!

---

브라우저 기본 함수

alert() → 단순 알림 느낌

prompt() → 사용자에게 값을 입력 받을 때 (문자열 반환)

• 인수 2개 가능
  • 두번째는 기본값

confirm() - 확인/취소가 있는데 각각 true/false 반환

단점

1. 스크립트를 강제로 일시 정지함
2. 스타일링 불가능

---

형변환

String() → 문자형으로 변환 (대문자로 시작해야 함)

Number() → 숫자형으로 변환

Boolean() → 불린형으로 변환

프롬프트 입력 시 입력 값은 문자열이 됨

false

• 숫자 0
• 빈 문자열
• null
• undefined
• NaN

주의사항

Number(null) → 0

Number(undefined) →NaN

Boolean(0) → false

Boolean(’0’) → true

Boolean(’’) → false

Boolean(’ ‘) → true

---

기본 연산자

• 거듭제곱: **
• 일치 비교:
  • === 타입 + 값 모두 비교
  • == 자동 형변환 → 1 == "1" → true

---

조건문

• if / else if / else
• switch
• (case마다 break 필요)

---

반복문

for

for (let i = 0; i < 10; i++) {}

while

while (i < 10) { i++; }

do … while

한 번은 무조건 실행

break / continue

반복 제어

---

함수

function sayHello(name) {
	console.log(`Hello, ${name}`);
}

함수 선언문

sayHello();  // 호이스팅 가능

function sayHello() {
	console.log('Hello');
}

• 어디서든 호출 가능
• 인터프리터 방식이지만 코드를 실행하기 전 선언된 함수를 모아 먼저 실행해둠
• = 호이스팅 방식

함수 표현식

let sayHello = funtion() {
	console.log('Hello');
}
sayHello();

• 코드에 도달하면 생성

화살표 함수

const add = (a, b) => a + b;

화살표 함수의 특징

• 자신만의 this 없음 → 외부 this를 가져옴

---

객체 Object

method: 객체 프로퍼티로 할당 된 함수

const superman = {
	name:'clark',
	age:33,
	fly:function(){  // funcion 키워드 생략 가능 :이것도 같이 생략 가능
		console.log('날아갑니다')
	}
}

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음

화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴

---

배열

let student = [’철수’, ‘영희’, … , ‘영수’];

• 배열은 문자뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있음
• length : 배열의 길이
• push : 배열 끝에 추가
• pop : 배열 끝 요소 제거
• unshift : 배열 앞에 추가
• shift : 배열 앞에 제거

반복문

• for
• for … of

let days = ['월', '화', '수'];

for(let day of days) {
	console.log(day);
}

for … in 이 아님 이건 배열에서는 비추

---

생성자 함수

• 보통 첫글자는 대문자로
• new 연산자를 사용하여 호출

function User(name, age) {
	this.name = name;
	this.age = age;
	this.sayName = function() {
		console.log(this.name);
	}
}

let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);

user1.sayName(); // 'Mike'

---

computed property

const key = "age";
const user = {
  name: "Mike",
  [key]: 30
};

---

Object 메소드

• assign() : 객체 복사

const newUser = Object.assign({}, user);

{} + { name : 'Mike', age : 30 } =

-----------

Object.assign({ gender:'male' }, user);

위처럼 초기값 주면
gender : 'male',
name : 'Mike',
age : 30,

이렇게 됨
초기값에 들어간 키가 같다면 뒤에 user에꺼를 덮어씀

------------------

const user = {
	name : 'Mike'
}
const info1 = {
	age : 30,
}
const info2 = {
	gender : 'male',
}

Object.assign(user, info1, info2)
이렇게 하면 user에 info1과 info2 합치는 것

{} 초기값 , user 가 초기값에 들어감

그래서 새로운 객체에 복사되는 것

• Object.keys() : 키 배열 반환

const user = {
	name : 'Mike',
	age : 30,
	gender : 'mail',
}

Object.keys(user);
// ["name", "age", "gender"]

• Object.values() : 값 배열 반환

const user = {
	name : 'Mike',
	age : 30,
	gender : 'male',
}

Object.values(user);
// ["Mike", 30, "male"]

• Object.entries() : 키/값 배열 반환

const user = {
	name : 'Mike',
	age : 30,
	gender : 'male',
}

Object.entries(user); 

//
[
	["name", "Mike"],
	["age", 30],
	["gender", "male"]
]

• Object.fromEntries() : 키/값 배열을 객체로

const arr = 
[
	["name" "Mike"],
	["age", 30],
	["gender", "male"]
];

Object.fromEntries(arr);

//
{
	name: 'Mike',
	age : 30,
	gender : 'mail',
}

---

Symbol

• 유일성 보장

const a = Symbol(); // new 붙이지 않음

const b = Symbol();

const c = Symbol(’id’); // 이렇게 설명 추가 가능

console.log(a) // Symbol() 출력

a === b // false

const id = Symbol('id');
const user = {
	name : 'Mike',
	age : 30,
	[id] : 'myid'
}

user 
// {name: "Mike", age: 30, Symbol(id): "myid"}
user[id] // "myid"

// 하지만 Object 메소드 사용시 키가 심볼형인 애들은 건너뜀
Object.keys(user); // ["name", "age"]
Object.values(user); // ["Mike", 30]
Object.entries(user); // [Array(2), Array(2)]

// 숨겨진 심볼 키를 보고 싶다면
Object.getOwnPropertySymbols(user); // [Symbol(id)]
Reflect.ownKeys(user); // ["name", "age", Symbol(id)]

Symbol.for() : 전역 심볼

• 하나의 심볼만 보장 받을 수 있음
• 없으면 만들고, 있으면 가져오기 때문
• Symbol 함수는 매번 다른 Symbol 값을 생성하지만,
• Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

id1 === id2 // true

// 이름을 얻고 싶다면
Symbol.keyFor(id1) // "id"

// 만약 전역 심볼이 아닌데 이름을 알고 싶다면
const id = Symbol('id 입니다');
id.description; // "id 입니다"

// 다른 개발자가 만들어 놓은 객체
const user = {
	name: "Mike",
	age: 30,
};

// 내가 작업
// user.showName = function() {}; // 이렇게 하면 아래 사용자가 보는 메세지가 이상해짐
const showName = Symbol("show name");
user[showName] = function () {
	console.log(this.name);
};

user[showName](); // Mike

// 사용자가 접속하면 보는 메세지
for (let key in user) {
	const.log(`His ${key} is ${user[key]}.`);
}

// His name is Mike.
// His age is 30.