[ 기본 연산자와 값 ]
X = 1 + 2 => 이항 연산자
X는 피연산자(값)
+는 연산자이자 덧셈 연산자
=(equal)은 할당 연산자로 오른쪽에 값을 왼쪽에 할당하는 연산자
1. 이항 연산자 : 피연산자가 2개인 연산자
산술 연산자, 문자열 결합 연산자, 비교 연산자, 논리 연산자, 대입 연산자 등이 있음
2. 단항 연산자 : 피연산자가 단 하나뿐인 연산자
부호 연산자(+, -), 증감 연산자(++, –), 논리 부정 연산자(!)가 있음
연산자 : 산술 연산자 , 복합할당 연산자 , 할당 연산자
1. 산술 연산자 : + , - , * , / , % , **
2. 복합할당 연산자 : += , -= , *= , /= , %= , **=
3. 할당 연산자 : =
- 예제
x = 2*5; //10
y = 10%3; //1
z = 2**3; //8
console.log(x,y,z); // 10,1,8
x = 1;
x*=2; // x = x*2; // 2
x**=2; // x = x**2; // 4
x%=3; // x = x%3; // 1
[ 연산자 ]
연산자에는 산술, 할당 연산자를 제외하고도 비교, 증감, 논리, 부정 연산자가 있음
1. 비교 연산자 : == , === , < , > , <= , >=
2. 증감 연산자 : ++ , -- , ++X , X++
3. 논리 연산자 : || (OR) , && (AND)
4. 부정 연산자 : !
- 예제
console.log(0 == '0'); // true
console.log(0 === '0'); // false
console.log(0 == false); // true
console.log(0 === flase); // false
x = 1;
y = 2;
console.log(x > y); // false
console.log(y++); // 해당 코드가 실행되고 1이 증가함으로 2
console.log(y); // 3
console.log(++y); // 4
console.log(y); // 4
console.log(x > 0 && x < 3); // true and true이므로 true
console.log(x > 1 || x < 1); // false or false이므로 false
console.log(!(x > y)); // !false // true
[ 변수와 상수 ]
- 변수란? :
영어로는 Variable이라고 함
하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 공간을 식별하기 위해 붙인 이름
프로그램 언어에서 값을 저장하고 참조(값의 위치)하는 상징적인 이름
이름을 통해 데이터를 사용 할 수 있음 (재활용 = 재활당)
- 상수란? :
변화하지 않는 값 선언할 땐 const 사용
const 선언한 변수를 상수라고 함
상수는 재할당 할 수 없어서 중복시 에러가 발생
1. let : 변수 생성 키워드
2. const : 상수 생성 키워드
3. var : 변수 생성 키워드, 레거시 키워드(과거에 많이 사용함)
- 예제
const X_CONSTANT = 1; // 상수는 대부분 대문자와 언더바로 구성, 파일 처음에(상단에) 기재
let y = 2;
y = X_CONSTANT+y; // 1+2
console.log(y); // 3
X_CONSTANT = X_CONSTANT +1; // error가 뜸
[ 자료형 ]
자료형? :
변수에 할당될 수 있는 값을 종류(type). 변수를 생성할 때 자료형이 결정됨
자바스크립트는 변수의 타입이 들어가는 값의 종류에 따라 동적으로 바뀌는 동적 타입 언어
const x = 15; => number
let y = true; => boolean
y = "hi"; => string
1. 숫자형 : 숫자를 담는 변수, 자바스크립트에는 특수성을 띄는 숫자들이 있음
Infinity : 무한을 의미, 숫자를 0으로 나누었을 때를 나타내는 값 (자바스크립트의 특수성)
-infinity
NaN : Not a Number, 숫자가 아니라는 것을 의미
2. BigInt형 : 숫자이긴 하지만, 2^53-1보다 크거나 -(2^53-1) 보다 작은 정수를 표현하기 위해 사용
2의 53승을 넘으면 숫자 뒤에 n을 붙여서 표현
3. 문자형 : 문자를 일컷는 자료형 , " " , ' ' , ` `으로 표현 가능
` `은 문자에 들어갈 변수가 동적으로 변경될 때 사용
4. 불린형 : 참, 거짓을 가지는 자료형
5. null, undefined : 둘의 차이점은 명확함
null : 변수 안에 값이 없는 상태를 명시적으로 나타내고 싶어서 넣어준 값 (객체형 자료형)
undefined : 변수 안에 값이 할당된 적 없어서 정의만 된 상태
ex) let a; a에는 아무 값이 할당되기 전이므로 undefined
a의 값이 비어져 있다는 것을 표현하기 위하여 null을 넣어주면 a = null이 됨
- 예제
const a =1; // number
const b = 10111n; // BigInt
const name = "유승민"; // string
const c = `hello, world. ${name}`; // string
const d = true; // boolean
let e; // undefined
const f = null; // object
const g = {}; // object인 객체형
const h = finction(){ // function -> 함수 객체형
};
console.log(
typeof a, // number
typeof b, // BigInt
typeof c, // string
typeof d, // boolean
typeof e, // undefined
typeof f, // object
typeof g, // object
typeof h, // function
)
[ 형 변환 ]
- 형 변환? :
변수의 당길 수 있는 값의 type을 변경하는 것
묵시적 형 변환과 명시적 형 변환 모두 문자, 숫자, 불린으로 형 변환이 가능
1. 묵시적 형 변환 : 언어 자체에서 제공, 자바스크립트가 자동으로 해줌
- 문자형으로의 묵시적 형 변환은 주로 출력할 때 발생
ex) console.log() 함수는 문자를 출력함으로 전달된 변수의 값을 문자로 바꾸어 출력 => console.log(3);
- 숫자형으로의 묵시적 형 변환은 산술 , 증감, 복합 할당 연산자를 사용할 때 발생
ex) +"32" , 32라는 문자값 앞에 증감연산자인 +를 붙이면 숫자 32가 됨
연산자 자체가 숫자형을 피연산자로 하는 연산자인 경우 숫자로 변환해 줌
- 불린형으로의 묵시적 형 변환은 부정 연산자나 물리 연산자처럼 불린값을 피연산자로 받는 연산자를 사용할 때 발생
ex) !0 , 숫자 0 앞에 부정 연산자를 붙이면 0이 불린형으로 변환되어 false값이 되고 false의 부정형인 true가 반환
2. 명시적 형 변환 : 개발자가 형 변환을 명시
- 문자형으로 형 변환 : String(value)
- 숫자형으로 형 변환 : Number(value)
- 불린형으로 형 변환 : Boolean(value)
String, Number, Boolean 함수를 호출하여 변환할 수 있음
이러한 방식 말고도 String을 Int형으로 변환해주는 parseInt, 객체의 값을 문자로 출력해주는 toString을
사용할 수 있음
- 예제
let original = 1;
console.log(type original); // number
console.log(typeof +"0"); // number
console.log(typeof !original); // 숫자형이지만 앞에 !가 있어 boolean으로 나옴
console.log(+"0", !original); // 앞에 +가 붙어 0이 되고, 1은 true가 됐다가 부정 연산자가 붙어 false가 됨
console.log(typeof String(original)); // string
console.log(typeof Boolean(original)); // boolean
console.log(typeof Number(original)); // number
[ 조건문 ]
조건문? :
특정 조건에 의해 분기되는 상황을 구현할 때 사용
1. if문 : if (조건1) { 조건1이 참일 때 (1) }
else if (조건2){ 조건1이 거짓 / 조건2가 참일 때 (2) }
else { 조건 1, 2가 모두 거짓일 때 (3) }
2. 삼항 연산자 : 세 개의 항으로 이루어져 있음
조건항, 조건이 참일 때 실행할 1번 구간, 조건이 거짓일 때 실행할 2번 구간
조건?
// 조건이 참일 때 (1)
.
.
// 조건이 거짓일 때 (2)
3. switch : 소괄호에 넣는 값이 여러 케이스들 중에 특정 케이스에 속할 때 무엇을 실행할지 나타냄
중괄호 내부에 나올 수 있는 값의 종류를 case와 함께 기재하고 해당 케이스일 때 실행할 스크립트를
: 뒤에 작성
switch (값) {
case 케이스1 : // 값이 케이스 1일 때
break;
default: // 앞선 케이스들에 하나도 해당되지 않을 때
}
- 예제
const age = 21;
const sex = 'female';
if (age >= 19) {
console.log("19세 이상입니다.")
} else {
console.log("19세 미만입니다.")
}
console.log(age >= 19 ? "19세 이상입니다." : "19세 미만입니다.");
switch (sex) {
case 'female':
console.log("여성입니다.");
break;
case 'male':
console.log("남성입니다.");
break;
default:
console.log("여성도 남성도 아닙니다.");
}
[ 반복문 ]
반복문? :
반복되는 코드를 가질 때 사용
1. for문 : for (초기; 조건; 실행) {
//반복되는 코드
}
for (let a = 1; a < 10; a++) {
회원번호 a에게 포인트 제공
}
2. while문 : for문과 while문은 비슷하게 사용할 수 있는데, while문이 좀 더 언어의 흐름과 비슷해서 이해하기 쉬움
소괄호에 들어가는 조건이 만족되는 동안 중괄호에 있는 코드를 실행
while문이 실행되기 전에 초기문을 작성해주면 됨
초기
while(조건){
// 반복되는 코드
실행
}
let a = 1;
while (a<10) {
회원번호 a에게 포인트 제공
a++
}
3. do-while문 : while문인데 최소 한 번은 실행되는 while문
한 번의 코드가 실행된 후에 조건을 검사하기 때문에 조건이 맞지 않아도 한 번은 코드를 실행
a가 0보다 작다는 조건에 처음부터 위배됨
초기
do {
// 반복되는 코드
실행
} while (조건)
let a = 1;
do {
회원번호 a에게 포인트 제공
a++
} while (a < 0);
- 예제
for (let day = 1; day < 5; day++) {
console.log(`${day}일 지났음`);
}
let day2 = 5;
while (day2) {
console.log(`day2 D-${day2}`);
day2--;
}
let day3 = 0;
do{
console.log(`day3 D-${day3}`);
day3--;
} while (day3 > 0);
for (let day4 = 5; day4; day4--) {
if (day4 === 3) continue;
if (day4 === 1) break;
console.log(`day4 D-${day4}`);
}
[ 함수 ]
함수란? :
비슷한 코드가 반복해서 사용될 때 반복해서 사용될 코드를 불러와서 사용할 수 있게 묶어둔 것
함수에는 입력과 출력이 있으며, 입력에 대한 코드를 실행한 후에 출력을 내보내는 식으로 동작함
함수 실행 시에는 함수이름();
변수는 스코프에 따라 지역변수, 전역변수로 나뉨
입력 x(인자) -> func(매개변수 사용) -> 출력 y
=> y = func(x)
1. 함수 선언식 : 특정 코드보다 나중에 선언이 되어 있더라도 코드 실행 전에 정의가 됨
자바스크립트 언어가 선언된 함수들을 모은 다음 함수를 정의한 후에 함수를 실행하기 때문
function 함수이름 (매개변수 = 기본값) {
// 코드
}
2. 함수 표현식 : 함수 객체를 특정 변수에 할당
변수의 이름으로 함수를 호출할 수 있음
특정 변수로 받는 것이기 때문에 표현식이 정의된 시점 이후부터 해당 함수에 접근 가능
const 함수이름 = function(매개변수) {
// 코드
}
3. 화살표 함수 : 함수 표현식의 일부. 함수 표현식을 조금 더 간단하게 나타내기 위해서 만든 문법
함수 표현식에서 function이라는 키워드를 없애고 소괄호와 중괄호 사이에 화살표만 넣어주면 됨
함수 표현식과 같이 변수에 함수 객체를 할당받기 때문에 선언 후에 코드에서 접근 가능
기본 함수 표현식과 화살표 함수 차이점이 있음. 바로 this의 유무
const 함수이름 = (매개변수) => {
// 코드
}
- 예제
let a = 2;
// 넘겨받은 value를 숫자형으로 변환
// 0보다 작은 수, 숫자로 변환할 수 없는 값 -> 0을 return
const makeNumber = function(value) {
if (value < 0;) return 0;
let a = 1; // 전역변수를 지역변수가 가림
console.log('지역변수 a' , a); // 지역변수 a , 1
const newValue = Number(value);
return isNaN(newValue)? 0 : newValue;
};
console.log(makeNumber(0)); // 0
console.log(makeNumber(undefined)); // 0
console.log(makeNumber(null)); // null은 Number로 반환하면 0이 나옴, newValue
console.log(makeNumber('23')); // 23
console.log('전역변수 a' , a); // 전역변수 a , 2
cosole.log(value, newValue); // error 지역변수를 밖으로 끌고 나올 수 없음
funcA();
// funcB(); // Error
// funcC(); // Error
function funcA () { // 미리 생성
console.log('function B');
}
const funcB = function(){ // 코드 실행 시 생성
console.log('function A');
}
const funcC = () => { // 코드 실행 시 생성
console.log('function A');
}
funcB(); // function A
[ 객체 기본 ]
객체란? :
사정적인 정의로 실제 존재하는 것
일상생활에서 볼 수 있는 사람, 물건 등 하나하나의 요소들이 모두 객체
객체는 특징을 가지고 있고 특정 행동을 할 수 있음
다른 프로그래밍 언어에서는 class라는 개념으로 객체를 생성하는 게 일반적
자바스크립트에도 해당 기능이 있긴 하지만 주로 쉽게 객체형 변수를 정의하는 것으로 객체를 표현
1. 객체 생성 : {} 중괄호나 객체 생성자로 생성
const obj = {};
const obj = new Object();
2. 객체 구조
사람 = {
key : value
}
3. 객체 접근
점 표기법 : obj.key
대괄호 표기법 : obj[key]
사람.성별
사람.말하다()
[ 객체 응용1 ]
- 객체 관련 함수
1. 객체 내부의 property를 삭제할 때 : delete
delete.obj.name;
2. 객체 내부에 특정 key를 가진 property가 있는지 없는지 확인할 때 : property1 in obj
3. 객체의 property를 반복해서 받을 때 : for (변수 in obj) { // 변수를 이용한 코드 }
4. 옵셔널 체이닝 : 옵셔널 체이닝이란 null, undefined를 만나면 바로 반환하고 그 뒤에 있는 표기법을 무시
obj?.property?.subProperty
obj가 null이나 undefined인지 체크하고 맞다면 바로 리턴, 아니라면 obj.property로 접근.
obj.property가 null이나 undefined인지 체크하고 맞다면 리턴, 아니라면 subProperty로 접근
5. 구조 분해 할당 : 구조 분해 할당이란 obj이라는 객체에서 하나의 property를 빼오고 싶다할 때 사용
const { property } = obj;
- 예제
const obj = {
a: 1,
b: {
c: 2,
d: 3,
}
};
const obj2 = Object.assign({}, obj);
// 빈 객체에 obj 객체를 복사
obj2.b.c = 0;
console.log(obj); // obj2를 변경했는데 obj 자체가 0으로 바뀌어있음
// * assign을 썼는데도 왜 obj[b][c]의 값이 변했을까?
// 이 안에 있는 b property도 객체라는 것임. 이 property가 가지고 있는 값도 이 객체의 주소값임.
// 따라서 해당 객체 전체를 값으로 복사해가도 안에 있는 property 자체의 값은 주소로 되어 있기 때문에
// 이 property는 주소값으로 할당되어 있음. 결국 obj의 b와 obj2의 b는 같은 b를 가리키고 있는것
// obj2.b.c = 0으로 변경하면 obj.b.c의 value값도 0으로 변경됨
const deepCopy = (origin) => {
const result = {}; // key : b, origin[key] : {c : 2, d : 3}
for (let key in origin) {
// key : a, origin[key] : 1
if (origin[key] != null && typeof origin[key] === "object") {
result[key] = deepCopy(origin[key]);
} else {
result[key] = origin[key];
}
}
return result;
}
const obj3 = deepCopy(obj);
//obj3는 deepCopy를 이용하여 복사했기 때문에 obj와 완전 독립적임
//obj3의 어떤 속성을 변경한다고 해서 obj의 속성이 변경되지는 않음
obj3.b.c = -1;
console.log(obj);
console.log(obj3);
--------------------------------------------------------------------------------
const person = {
name: "아무개", // 프로퍼티
something: "",
talk: (sentence) => {
// 메서드
console.log(sentence);
},
};
person.talk(`제 이름은 ${person.name}입니다.`); // 점표기법으로 접근
person.name = "우희은";
person.talk(`제 이름은 ${person.name}입니다.`);
console.log("something" in person); // 프로퍼티 존재 유무 확인
person.something = undefined;
console.log(person); // 프로퍼티가 삭제되진 않음
delete person.something; // 프로퍼티 삭제
for (let key in person) {
// 반복
console.log(key);
}
// console.log(person.address.city); // TypeError: Cannot read properties of undefined Error
console.log(person.address?.city); // undefined -> 옵셔널 체이닝
// 옵셔널 체이닝(?.)이란 null, undefined를 만나면 바로 반환하고 그 뒤에 있는 표기법을 무시
const { address } = person;
// 구조 분해 할당이란 person이라는 객체에서 하나의 property를 빼오고 싶다할 때 사용
console.log("address", address);
- 객체 참조
1. 객체 참조란? :
객체는 다른 숫자형, 문자형, 불린형 변수와 다르게 주소 값으로 표현됨
이전에 변수는 상자로 표현된다고 말했었음. 상자에 변수의 이름이 붙어있는 형식.
객체는 여러 변수를 property로 포함하고 있는 개념이므로 상자를 묶어주는 서랍이라고 생각.
일반적으로 숫자, 문자, 불린형 변수에서는 변수 A를 변수 B에 그대로 할당한다고 했을 때,
let B = A라는 코드를 작성했을 때, A라는 상자를 똑같이 하나 더 만들고 그 이름을 B로 짓는 식으로 동작.
하지만 객체 서랍을 두고 객체 서랍 A를 서랍 B에 그대로 할당한다고 하면이 서랍을 똑같이 하나 더 만드는 것이
아니라 같은 서랍을 다른 이름으로 가리키기만 하는 것
즉, 객체는 실제 값이 아닌 해당 값이 위치한 주소로 표현이 되고 변수로 객체로 받는다면 해당 변수는 실제 값이 아닌
주소를 담고 있음
2. object.assign(빈 객체, 복사 대상 객체) : 객체를 값으로 복사하고 싶을 때 사용
객체를 값 그대로 복사하여 값을 할당해줌. 즉, 서랍을 하나 더 만들어서 해당 변수에 할당시켜 주는것.
but, 해당 함수를 통해서 객체 복사를 하면 객체 내부의 property의 객체는 복사되지 않고 주소값으로 가지고 있게 됨
즉, 복사된 객체의 객체형 property값을 변경하게 되면 원본 객체의 해당 property값도 변하게 되는 것
=> 이러한 복사를 얇은 복사를 했다고 하여 shallow copy라고 부름
- 예제
const person = {
name: '아무개', // 프로퍼티
something: '',
talk: (sentence) => { // 메서드
console.log(sentence);
},
obj: {
changed: false,
}
};
const person2 = person;
// person이라는 객체의 이름을 person2로 변경해준 것
person2.name = '이유정';
person.talk(`제 이름은 ${person.name}입니다.`); // person도 변경됨
const person3 = Object.assign({}, person); // 값 복사
person3.name = '오유진';
person.talk(`제 이름은 ${person.name}입니다.`); // person 변경 안됨
person3.obj.changed = true;
console.log(person.obj.changed); // 내부의 obj 프로퍼티는 주소 참조 중
const person = {
name: '아무개', // 프로퍼티
something: '',
talk: (sentence) => { // 메서드
console.log(sentence);
},
obj: {
changed: false,
}
// 이 안에 있는 obj property도 객체라는 것임. 이 property가 가지고 있는 값도 이 객체의 주소값임.
// 따라서 해당 객체 전체를 값으로 복사해가도 안에 있는 property 자체의 값은 주소로 되어 있기 때문에
// 이 property는 주소값으로 할당되어 있음. 결국 person의 obj와 person3의 obj는 같은 obj를 가리키고 있는것
// person3.obj.changed = true로 변경하면 person.obj.changed의 value값도 변경됨
};
const person2 = person;
person2.name = '이유정';
person.talk(`제 이름은 ${person.name}입니다.`); // person도 변경됨
const person3 = Object.assign({}, person); // 값 복사
person3.name = '오유진';
person.talk(`제 이름은 ${person.name}입니다.`); // person 변경 안됨
person3.obj.changed = true;
console.log(person.obj.changed); // 내부의 obj 프로퍼티는 주소 참조 중
// person.obj.changed 역시 true로 바뀌어 있음
[ 객체응용2 ]
assign을 이용하여 객체를 복사하면 객체 내부의 property의 객체는 복사되지 않고 주소값으로 가지고 있게 됨
즉, 복사된 객체의 객체형 property값을 변경하게 되면 원본 객체의 해당 property값도 변하게 되는 것
=> 이러한 복사를 얇은 복사를 했다고 하여 shallow copy라고 부름
Shallow copy(얇은 복사) <-> Deep copy(깊은 복사)
1. deep copy : 직접 구현하거나 시중에 나와있는 library 함수를 이용할 수 있음
deep copy는 객체 내부의 객체 property까지 값으로 다시 생성해서 복사하게 해줌
2. this란? :
객체의 메서드 실행 시, this는 메서드를 호출한 객체
this는 최상위 코드에서는 전역객체를 받고, 함수 내부에서는 함수를 호출한 객체가 됨
const obj = {
value = 1,
func : () => {
console.log(this.value);
}
}
화살표 함수는 함수 내부에 this가 생성되지 않음
따라서, 상위의 this를 참조하게 됨
obj.fuc();
=> function 메서드 내부에서 this는 이 메서드를 호출한 객체인 obj 자체가 됨 (답은 1)
- new 연산자를 붙여서 생성자 함수를 호출하는 것은
새로운 this를 생성해서 전달된 매개변수를 this에 할당하고 this를 반환해달라는 의미
function Obj(value) { // this = {}; this.value = value; // this라는 객체를 생성한 다음에 매개변수로 넘어온 값을 할당 this.func = function(){ // 기본적으로 있어야 할 메서드도 객체에 넣음 console.log(this.value); } // return this; // 그 후 this 객체를 다시 반환함}
const obj = new Object(1);
// 이렇게 new 연산자가 함수 앞에 붙으면 모든 함수에서 this 객체를 생성하고 this 객체를 반환하는 식으로 동작
obj.func();
[ 정리 ]
* 화살표 함수 *
this는 obj.func()처럼 메소드가 실행될 때 메서드를 실행한 객체 자체를 받음
func()라는 메서드 안에서의 this는 이 메서드를 호출한 obj라는 객체가 됨
* 함수 표현식 기본 *
new 키워드를 붙여서 생성자 함수를 호출하면 눈에 보이지 않는 this가 생성되었다가 반환됨
new 키워드를 이용해서 obj를 생성했을 때 fun()을 호출하면 this에 fun()를 호출한 obj라는 객체가 들어가게 되면서 동작
- 예제
library 함수를 사용하지 않고 직접 구현하는 식으로 함수를 만들어서 실습해보기
const obj = {
property1 : '1',
property2 : {
subProperty1 : '2-1',
subProperty2 : '2-2',
}
};
const obj2 = Object.assign({}, obj); //Shallow copy
obj2.property2.subProperty1 = 'new 2-1';
console.log(obj);
const deepCopy = (origin) => {
const result = {};
// const result = {
// property1 : '1',
//};
// +
// const result = {
// subProperty1 : '2-1',
// subProperty2 : '2-2',
//};
for (let i in origin) {
if(origin[i] != null && typeof origin[i] === 'object') {
result[i] = deepCopy(origin[i]);
} else {
result[i] = origin[i];
}
}
return result;
};
const obj3 = deepCopy(obj);
obj3.property2.subProperty1 = 'obj3 2-1';
console.log(obj, obj3);
// 전체적인 흐름은 그냥 값이 나오면 그대로 복사하고 객체의 값이 나오면 객체를 한 번 더 들어가서
// 객체의 안에 있는 property들을 값으로 복사한 다음에 하나의 객체를 더 만들어서 복사한 값을 할당
// deepCopy를 해서 내부에 있는 객체 자체도 값 복사가 되어서 obj3에 있는 property2를 갱신한다고 해서
// obj에 있는 property2가 갱신되지 않음. 고로 obj.property2.subProperty1 = 그대로 'new 2-1'이
// 나올것
const products = {
date: new Date("2022-07-16T00:00:00"),
names: ["가지", "오이", "파프리카", "당근"],
buyAll: function () {
// this -> products
const buy = (name) => {
// 화살표 함수
// this X(this가 없으면 바로 위에 this(products)를 참조)
console.log(this);
console.log(`${this.date.toLocaleString()}에 ${name}을 구매합니다.`);
};
const buy2 = function (name) {
// 함수 표현식 기본
// this -> {}
// this를 새로 만들어 아무것도 들어있지 않아 안에서 this가 따로 정의되기 때문에
// 위에 buyAll에서의 this를 가져올 수 없는 것
// console.log(this);
console.log(`${this.date.toLocaleString()}에 ${name}을 구매합니다.`);
}.bind(this);
// buyAll에서 있는 this(function)를 bind 함수를 써서 buy2 내부의 this로 주입해주겠다는 뜻
this.names.forEach((name) => {
buy(name); // no Error -> this가 원래 없음 -> 상위 this인 products 할당
buy2(name); // Error -> 호출한 객체가 없음 -> this에 전역 객체 할당
});
},
};
products.buyAll();
[ 배열 ]
배열이란? :
프로퍼티의 key가 숫자이며 프로퍼티 간의 순서를 가지는 객체
순차적으로 저장되는 데이터들의 모음
1. 배열 생성 : [ ] 대괄호나 배열 생성자로 생성
const array = [];
const array = new Array(length);
2. 배열 접근
array[index] -> index는 0부터 시작
const array = [1,2,3];
array[0] = 1
array[1] = 2
array[2] = 3
=
{ 0 : 1 , 1 : 2, 2 : 3 }
const array = new Array(2);
// 생성자의 배열의 길이를 넘기는 식으로 배열을 생성
// 처음 배열의 값이 할당되어 있지 않으므로 각 요소의 값은 undefined
3. 배열 관련 함수
- array.pop() : 배열의 가장 뒤에서 요소를 빼내는 함수, 배열 객체에 내장되어 있는 메서드 property
- array.push(value) : 배열의 가장 마지막에 요소를 추가하는 함수
- array.shift() : 배열의 첫 번째 index 값을 빼내는 함수
push와 pop으로는 스텍이라는 자료 구조를 만들 수 있고 push와 shift로는 큐라는 자료 구조를 만들 수 있음
스택은 접시를 쌓아둔 거라고 생각하면 됨(접시를 순서대로 1,2,3,4로 쌓았다면 가져갈 때는 4,3,2,1순)
큐는 먼저 넣은 요소를 먼저 빼냄(1,2,3,4 순으로 세워지고 빠져나올 때는 1,2,3,4 순으로 빠져나감)
4. 배열의 특성
- array.length : 배열의 property 중 하나로, 길이를 확인할 수 있음. 값을 읽는 것 뿐만 아니라 할당할 수도 있음
만약 현재 배열의 길이보다 더 작은 수로 array.length를 할당해버린다면 요소를 삭제하는 기능으로도 사용 가능
- 참조를 통한 복사 (주소 복사) : 배열 또한 특수 개체이므로 객체와 같이 변수를 복사할 때 주소로 복사됨.
따라서 복사한 변수의 요소를 바꾸면 원본이 변경될 수 있음(deep Copy를 통하여 해결 가능)
- for (변수 of array) { } : 배열의 요소를 순차적으로 모두 조회하기 위해서는 for - of문을 사용할 수 있음
- array.forEach((변수) => { }) : 배열 객체의 내장 메서드를 이용해서 배열 요소값을 순차적으로 조회할 수도 있음
forEach는 배열의 요소를 매개변수로 받는 함수가 들어가게 됨
- array.map((변수) => { return }) : map이라는 메서드도 순차적으로 조회하는 것은 마찬가지. 순차적으로 조회하면서
빈 가로 내부에서 반환된 값들을 모아서 다시 배열로 만든 후에 반환을 함
-구조 분해 할당 : 배열 내부의 요소를 추출해낼 수 있는 방법 중 하나
- const [ value1, value2 ] = array;
- 예제
const colors = ['red', 'blue', 'green', 'pink', 'mint'];
const lastColor = colors.pop(); // 뒤에서
console.log(`${lastColor} popped`); // mint
colors.push('purple'); // 뒤에 넣기
console.log(colors); // [ 'red', 'blue', 'green', 'pink', 'purple' ]
const firstColor = colors.shift(); // 앞에서
console.log(`${firstColor} shift`); // red
console.log(colors); // [ 'blue', 'green', 'pink', 'purple' ]
colors.length = 2; // length 조절로 요소 삭제도 가능
console.log(colors); // [ 'blue', 'green' ]
for(let color of colors) { // for-of로 배열 요소 순차적 조회 가능
console.log(color);
}
colors.forEach((color) => { // forEach는 따로 반환하는 값이 없음
// 매개변수로 받는 함수가 들어가게 됨
console.log(color);
})
const newColors = colors.map((color) => `new ${color}`); // map은 내부 함수에서 반환하는 값을 모아서 배열을 다시 만든 후 반환해줌
console.log(newColors); // [ 'new blue', 'new green' ]
const [, newGreen] = newColors; // 구조분해할당 -> 2번째 변수만 받고 싶을 때
console.log(newGreen); // 'new green'
[ 모듈 ]
모듈이란? :
우리가 구현해야 할 코드가 한없이 길어져 코드를 찾기 힘들다는 단점이 있어 코드를 분리시키려고 함
특정 기준을 통하여 여러 파일로 하나의 어플리케이션을 분리할 때, 각각의 파일들을 모듈이라고 부름
1. 모듈 내보내기 : 파일에서 자원을 내보내는 것
export const func = () => { };
export const a = 1;
2. 모듈 가져오기 : 이렇게 내보내진 변수를 다른 파일에서 가져와서 사용하는 것
Import fileObj from '.file.js';
// Import 변수 from '파일 경로'로 이뤄져 있음
// Import 시에 변수 이름을 이렇게 하나로 지정해주게 되면 해당 파일에서 내보내지는 변수들이
// key가 변수 이름이고 value가 변수값인 변수 객체 property가 되어서 해당 변수 이름을 가진 객체 변수에 들어가게 됨
fileObj.func();
// Import이 기재한 객체 변수를 통해서 접근하고 싶은 변수에 접근하면 됨
// 위에서 func와 a 변수를 내보낸 file.js 파일을 가져온다고 가정하면,
// fileObj라는 객체변수의 이름으로 그냥 가져온 다음 해당 변수 안에 있는 func()에 접근하여 사용하면 됨
Import { func, a } from './file.js';
// 구조 분해 할당으로 내보내지는 변수들을 각각 받아올 수도 있음
func();
각자의 scope를 가지기 때문에 a 파일에 정의된 변수의 이름을 b 파일에 정의해도 전혀 충돌이 나지 않음
3. 모듈 시스템 :
내보내지 않은 변수는 외부로 노출되지 않아 자원 보호가 가능함
- CommonJS : 아직도 많이 남아있는 문법이기도 하고 서버에 사용하는 자바스크립트에서는 CommonJS를 많이 사용하기
때문에 비슷한 문법이라고 봐주면 됨
- const func = require('./file.js');
-ES Modules : 현재 자바스크립트에서 지원하는 모듈 시스템
- Import func from './file.js'
- 예제
// js_basic_01_11_1.mjs
export const bark = () => {
console.log('Bow-wow');
};
// bark라는 함수를 실행하기 위해서는 여기서 export문으로 내보내줘야 함
// export 변수로 해당 파일에서 내보내줌
// js_basic_01_11.mjs
import { bark } from "./js_basic_01_11_1.mjs";
bark();
// 받아와서 사용할 곳에서는 import라는 키워드를 사용
// import 변수 이름으로 받아와도 되지만 구조 분해 할당으로 bark만 받아옴
// from 뒤에는 어디에서 받아왔는지
// .js로 하면 아래와 같은 에러
// 이 파일을 모듈 시스템에 사용한다고 말해주기 위해서는 확장자를 .mjs로 변경
// Cannot use import statement outside a module
// To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
[ 디버깅 ]
- 디버깅이란? :
컴퓨터 프로그램 개발 단계 중 발생한 시스템의 논리적 오류나 버그를 찾아내고 수정하는 작업 과정 (bug fix)
console.log()를 이용하여 에러나 에러랑 관련있을 것으로 판단되는 특정 변수를 출력해보거나,
찍혀 있는 에러를 확인
console.log('started!');
const a = 1;
debugger;
//자바스크립트 엔진이 해석하다가 해당 키워드를 만나면 디버깅이 필요하다고 해석하여
//실행을 멈추는 곳
console.log('end!');
[ DOM 다루기 ]
- window 객체 : DOM에 접근할 수 있는 진입점 객체, 브라우저 기능을 이용할 수 있는 진입점 객체,
자바스크립트 코드의 전역 객체 (ex: window.document.body)
- document 객체 : document 자체도 전역 객체이기 때문에 document 자체로도 접근이 가능함 (ex: document.body)
window {
document: ...,
location: ...,
history: ...,
navigator: ...,
Object: ...,
}
document {
documentElement: <html> tag 노드,
body: <body> tag 노드,
head: <head> tag 노드,
}
- document가 제공하는 함수들(자주 사용하는 것들)
1. 특정 요소 찾기
document.getElmentByID('아이디')
// 요소가 가지는 아이디 속성을 매게변수로 넘기면 해당 요소를 찾아줌
document.querySelector('css')
// css를 매게변수로 넘겨서 해당 css에 맞는 요소를 찾는 메소드
document.getElementByClassName('class')
// class 네임을 넘겨서 요소들을 찾아주며 배열의 형태로 요소들이 반환
document.getElementsByTagName('tag')
// tag 이름으로 요소들을 찾아주며 배열의 형태로 요소들이 반환
2. 인접 노드 접근
Node.children : 자식들
Node.firstElementChild, Node.lastElementChild : 첫 번째, 마지막 자식
Node.previouseElementSibling, nextElementSibling : 이전 형제, 이후 형제
Node.parentElement : 부모
3. 요소 만들기
document.createElement(tag)
// 특정 DOM을 만드는 함수
// html 태그를 인자로 넘기면 해당 태그의 DOM이 생성
Node.appendChild(Node)
// DOM의 특정 요소의 자식으로 DOM을 붙여주는 함수
// 부모 노드의 마지막의 매게변수로 주어진 자식 요소를 넣어줌
Node.insertBefore
(newNode, refNode)
// 특정 위치에 자식 요소를 넣고 싶을 때 쓰면 됨
// newNode : 들어갈 노드를 의미 , refNode : newNode가 삽입될 위치 , refNode의 이전 위치에 newNode가 들어감
// 만약 refNode가 null이라면 자식 노드의 가장 마지막에 삽입되므로 appendChild와 같음
4. 요소 노드의 주요 프로퍼티
Node {
id : 'test',
tagName: 'div',
innerHTML : '테스트용',
style : 스타일 객체,
}
=>
<div id='test'>
테스트용
</div>
5. DOM 변경하기
Node.innerHTML = '테스트용 수정';
Node.style.color = 'red';
Node.hidden = true;
const testInput = document.getElementById('test-input');
testInput.value = "자동으로 입력";
- 예제
html
<!DOCTYPE html>
<html>
<head>
<title>페이지 title</title>
</head>
<body>
<!-- 특정 요소 찾기 -->
<div id='target'>타겟</div>
<div id='target2' class='target-class'>타겟2</div>
<div class='target-class'>타겟3</div>
<a href='./index.html'>링크</a>
<!-- 인접 노드 접근 -->
<header>
<a href='./index.html'>로고</a>
<ul id='navigation-menu'>
<li>상점</li>
<li>커뮤니티</li>
<li>마이페이지</li>
</ul>
<button>로그인</button>
<button>회원가입</button>
</header>
<!-- DOM 변경하기 -->
<div id="test">
테스트용
</div>
<input id="test-input" type='text' />
<script src='./main.js'></script>
</body>
</html>
특정 요소 찾기
const target = document.getElementById('target');
const target2 = document.querySelector('#target2');
const targetClassList = document.getElementsByClassName('target-class');
const linkList = document.getElementsByTagName('a');
인접 노드 접근
const navigationMenu = document.getElementById('navigation-menu');
console.log(navigationMenu.children);
for (menu of navigationMenu.children) { // 배열이 아니고 유사배열인 컬렉션이라 forEach는 못 씀
console.log(d.innerHTML);
}
console.log(navigationMenu.firstElementChild);
console.log(navigationMenu.lastElementChild);
console.log(navigationMenu.previousElementSibling);
console.log(navigationMenu.nextElementSibling);
console.log(navigationMenu.parentElement);
요소 만들기
const dom = document.createElement('div');
document.body.appendChild(dom);
const dom2 = document.createElement('div');
dom2.innerHTML = '마무리';
document.body.insertBefore(dom2, dom);
DOM 변경하기
const testDiv = document.getElementById('test');
testDiv.innerHTML = '테스트용 수정';
testDiv.style.color = 'red';
testDiv.hidden = true;
[ 브라우저 객체 ]
- document 객체 외에 브라우저 기능을 이용할 수 있는 진입점 객체들
Navigator {
language : 선호하는 언어,
maxTouchPoints : 동시 터치 지점 수,
userAgent : 브라우저 정보,
platform : 운영체제 정보
}
브라우저와 운영체제에 대한 정보를 담고 있음
Location {
gref : 현재 URL,
pathname : URL 경로.
reload : 새로고침 함수
}
location.href = "이동할 URL"
현재 URL의 정보를 읽고 변경할 수 있는 객체
Hisory {
back : 뒤로 가기 수행,
forward : 앞으로 가기 수행,
}
브라우저의 사이트 방문 기록을 가지고 있는 객체
- 브라우저 환경에서는 window 객체를 통해 사용자와 상호작용할 수 있는 기능도 사용 가능
window {
alert : 경고 메시지 출력 함수,
confirm : 확인 메시지 출력 함수,
prompt : 입력 메시지 출력 함수,
setTimeout : n초 후에 함수를 실행하는 타이머 함수,
setInterval : n초 마다 함수를 실행하는 타이머 함수
}
- 예제
navigator.language;
navigator.maxTouchPoints;
// PC는 터치할 수 있는 기기가 아니기 때문에 0으로 나옴
navigator.userAgent;
// 현재 접속하고 있는 브라우저의 정보
navigator.platform;
// 현재 접속하고 있는 운영체제의 정보
location.href;
location.href = "https://ohou.se"
// 현재 접속하고 있는 사이트의 url 정보
// 직접 글을 쓸 수도 있어서 url을 입력하고 href에 할당한다면 해당 사이트로 이동
location.pathname;
// 도메인 뒤에 붙는 path(/)
// https://ohou.se/projects?writer=pro 에서 /projects
// 물음표 뒤에 따라오는 것들은 query라고 함. ?writer=pro
location.search;
// 물음표 뒤에 따라오는 query에 접근하고 싶을 때
location.reload();
// 새로고침을 하고 싶을 때
history.back();
// 뒤로 가기로 방금 전에 있던 페이지로 이동
history.forward();
// 앞으로 가기
alert("해당 페이지에 접근이 불가합니다");
if (confirm("정말로 삭제하시겠습니까?")) {
console.log('삭제됨');
} else {
console.log('삭제 취소');
}
const name = prompt("이름이 무엇인가요?");
name
// 입력한 이름이 뜨게 됨
const name2 = prompt("이름이 무엇인가요?");
name
// 취소 버튼을 클릭시 null이 뜨게 됨
let timerID = setTimeout(() => {
console.log('3 seconds end');
},3000);
clearTimeout(timerID);
let timerID = setInterval(() => {
console.log('every 3 seconds');
},3000);
clearTimeout(timerID);
[ 이벤트 ]
- 이벤트란? :
활동이 발생했다는 신호로 함수(핸들러)를 연결시켜 활동 발생 시 동작하게 (트리거되게) 함
대표적인 DOM 이벤트
click : 요소를 마우스 왼쪽 버튼으로 눌렀을 때 발생
chage : 내부 값이 바뀌었을 때 발생
mouseover : 마우스 커서가 요소 위로 들어왔을 때 발생
mouseout : 마우스 커서가 요소 밖으로 나갔을 때 발생
focus : 요소에 포커스 했을 때 발생
Blur : 요소가 포커스를 잃었을 대 발생
keydown : 키보드를 눌렀을 때 발생
keyup : 키보드를 뗐을 때 발생
drag : 요소가 드래그 되었을 때 발생
...
<div onclick = "함수이름"/>
Node.onclick = (event) => {};
// onclick은 이벤트 핸들러
// 이벤트 핸들러 방법은 총 두 가지.
// 1. HTML 태그에 설정 : 사실상 간단한 방법이지만 HTML과 자바스크립트 코드가 섞여 있기 때문에
// 나중에 유지보수가 힘듦. 그리고 태그 하나에 하나의 이벤트 처리만 등록할 수 있어 HTML 문서 하나에
// 여러 개의 자바스크립트 파일이 import 되고 동일한 이벤트 핸들러명을 가진 코드가 있다면 제대로
// 동작하지 않을 수 있음. 기본적으로 HTML과 자바스크립트는 분리하는게 맞음.
// 2. DOM 요소 객체의 이벤트 처리기 프로퍼티에 설정 : 이 방법을 사용하면 HTML과 자바스크립트를
// 분리할 수 있지만 위와 마찬가지로 특정 DOM 요소 객체에 하나의 이벤트 핸들러만 등록시키는 단점이 있음
// let sideNav = document.getElementByID("sideNav");
// let btn = document.getElementByID("btn");
// btn.onclick = showSideNav();
// function showSideNav() {
// sideNav.style.display = "block";
// }
Node.addEventListener(
event,
handler,
);
// 이벤트 리스너
// 1. addEventListener 메소드 사용 : 여러 개의 이벤트 리스너를 등록시킬 수 있음
이벤트 버블링 :
자바스크립트의 이벤트는 돔에서 최하위 요소의 이벤트가 발생했다면 계속 부모 요소를 타고 올라오면서
핸들러를 실행하는 특성이 있음
div
ㄴ span
ㄴ button (click!)
div.onclick = (event) => {
// event.target은 button
// div의 event target은 핸들러에서 가장 안쪽 노드를 나타내야 하므로 button
// event.currntTarget은 div
}
span.onclick = (event) => {
// event.target은 button
// span의 event target은 핸들러에서 가장 안쪽 노드를 나타내야 하므로 button
// event.currntTarget은 span
}
button.onclick = (event) => {
// event.target은 button
// button의 event target은 핸들러에서 가장 안쪽 노드를 나타내야 하므로 button
// event.currntTarget은 button
event.stopPropagation();
// button에서 부묘 요소로 올라가지 않도록 버블링 중지
}
- 예제
html
<!DOCTYPE html>
<html>
<head>
<title>페이지 title</title>
</head>
<body>
<!-- 버블링 -->
<!-- <div id='button-wrapper'>
<div id='button-subWrapper'>
<button id='count-up-button'>+1</button>
</div>
</div> -->
<button id='count-up-button'>+1</button>
<span>0</span>
<input type='text' />
<input type='text' />
<div id='result'></div>
<span>test</span>
<script src='./main.js'></script>
</body>
</html>
const [ count, test ] = document.getElementsByTagName('span');
// span tag를 찾아 요소들을 배열로 반환하여 변수로 할당
const countUpButton = document.getElementById('count-up-button');
// #count-up-button을 찾아 변수 countUpButton에 할당
countUpButton.onclick = (event) => {
// countUpButton 클릭시 event가 실행됨
console.log(event);
// 실행되는 event 객체의 정보를 보여줌
if (isNaN(Number(count.innerHTML))) return;
// 만약 count 변수 안에 있는 게 숫자가 아니라면 리턴
count.innerHTML = Number(count.innerHTML)+1;
// 숫자가 맞다면 이벤트 실행시 +1
};
count.onmouseover = () => {
// count에 마우스를 올릴시 이벤트 실행
count.style.backgroundColor = 'gray';
count.style.color = 'white';
}
count.onmouseout = () => {
// count에서 마우스를 치울시 이벤트 실행
count.style.backgroundColor = 'transparent';
count.style.color = 'black';
}
const input = document.getElementsByTagName('input')[0];
input.onfocus = () => {
input.value = '자동 입력';
};
const input2 = document.getElementsByTagName('input')[1];
const result = document.getElementById('result');
input2.onchange = (event) => {
// 두 번째 input을 할당한 변수 input2의 값이 바뀔 때
// #result를 할당한 변수 result의 값도 input2의 값으로 변함
result.innerHTML = event.target.value;
// event.target => 이벤트가 발생한 DOM
// event.target.value
}
new Array(10).fill(0).forEach((_, index) => {
// 길이가 10이지만 아무것도 들어있지 않은 생성자 함수(new Array)
// 배열의 forEach문을 사용하여 배열에 담겨있는 요소를 가져올 수 있음
test.addEventListener('click', () => {
console.log(`test clicked ${index+1}`);
// 10번 반복문이 돌면서 index는 0부터 9까지 증가
})
});
'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있음
생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없음. 다만 생성자 함수는 아래 두 관례를 따름
함수 이름의 첫 글자는 대문자로 시작. 반드시 'new' 연산자를 붙여 실행
- Array 생성자 함수 :
length 값을 인수로 전달받아 해당 길이의 배열을 생성
length의 값과 상관없이 빈 배열을 생성하며, 전달된 length 프로퍼티 값이 0이라면 빈 배열과 동일함
인수를 2개 이상 전달하면 Array.of 메소드와 동일하게 동작. 즉, 인수들을 요소로 갖는 배열을 생성
- forEach :
배열의 내장함수
주로 Callback 함수 형태로 사용 ( => )
실행 도중에 멈출 수 없음 (break 구문을 사용 못함)
[ 에러 핸들링 ]
- 에러 핸들링이란? :
에러 발생 시 실제로 유저에게 에러처럼 보이지 않도록 코드 상에서 처리하는 기술
대표적인 DOM 이벤트
try {
실행하려는 코드
} catch(error) {
// 에러의 정보를 담고 있는 에러 객체가 매게변수로 들어오므로 에러 정보를 이용해서
// 에러마다 다른 처리를 구현할 수도 있음
// 에러 객체가 필요 없을 때는 소괄호를 생략하고 사용해도 됨
에러 발생 시 실행할 코드
} finally {
언제나 실행할 코드
}
Error {
name : 에러 이름,
message : 에러의 상세 내용,
stack : 호출 스택,
}
커스텀 에러 생성
// 원래는 에러가 아니었는데 특정 맥락에서는 에러가 되는 경우 에러를 발생시키고 싶다면
// 코드에서 직접 에러를 만들어서 발생시킬 수 있음
new Error('에러 메시지');
- 예제
const obj = {
}
let result = '';
try {
result = obj.property.a; //any;
} catch (error) {
result = '모름'; // 기본값 설정
console.dir(error);
} finally {
console.log(`result = ${result}`); // 에러가 안 남
}
try {
throw new Error('이건 커스텀 에러입니다.');
} catch (error) {
console.dir(error);
}
[ 비동기 ]
비동기란? :
동기의 반의어로, 동시에 발생하지 않음을 뜻함.
A 작업이 끝나면 B 작업이 실행되고, B 작업이 끝나면 C 작업이 실행되는 것. 모든 일이 순차적으로 일어남.
비동기를 실행해야 하는 이유는, A 작업을 통하여 얻게된 데이터 a를 이용하여 B에서 작업을 할 수 있음
동기 : 아직 작업 A가 진행 중이므로 데이터 a가 존재하지 않음(에러)
비동기 : 작업 A 진행 후에 나오는 데이터 a를
[ 자료 다루기 ]
자료 다루기 - 1)
- Object.keys() 메소드 :
주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환
const object1 = {
a : 'somestring',
b : 42,
c : false
};
console.log(Object.keys(object1));
// ['a' , 'b' , 'c']
- Object.values() 메소드 :
전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴.
const objects = {
a : 'somestring',
b : 42,
c : false
};
console.log(Object.values(object1));
// ['somestring' , 42 , false]
- Object.entries() 메소드 :
[key, value] 쌍의 배열을 반환.
Object.entries()에 의해 반환된 배열(array)의 순서는 객체가 정의된 방법과 관련이 없음.
배열 순서가 쓸 곳이 있다면 다음과 같이 정렬을 먼저 하는 것이 좋음
Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));
const object1 = {
a : 'somestring',
b : 42,
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key} : ${value}`);
}
// "a : somestring"
// "b : 42"
- 예제
const data = {
squadName: 'Super hero squad',
homeTown: 'Metro City',
formed: 2016,
secretBase: 'Super tower',
active: true,
members: [
{
name: 'Molecule Man',
age: 29,
secretIdentity: 'Dan Jukes',
powers: [
'Radiation resistance',
'Turning tiny',
'Radiation blast',
],
},
{
name: 'Madame Uppercut',
age: 39,
secretIdentity: 'Jane Wilson',
powers: [
'Million tonne punch',
'Damage resistance',
'Superhuman reflexes',
],
},
{
name: 'Eternal Flame',
age: 1000000,
secretIdentity: 'Unknown',
powers: [
'Immortality',
'Heat Immunity',
'Inferno',
'Teleportation',
'Interdimensional travel',
],
},
],
};
const keys = Object.keys(data);
const values = Object.values(data);
const entries = Object.entries(data);
console.log(keys);
// ['squadName', 'homeTown', 'formed', ...]
console.log(values);
// ['Super hero squad' , 'Metro City' , 2016 , 'Super tower' , ...]
console.log(entries);
// [ ['squadName' , 'Super hero squad'], ['homeTown', 'Metro City'], .... ]
자료 다루기 - 2)
- 배열 - 요소 추가와 제거
const arr = ['one', 'two', 'three'];
const copyArr = arr;
copyArr.push(1);
copyArr.pop(2);
copyArr.shift(0);
copyArr.unshift(-0);
copyArr.splice(0, 0, 'four');
console.log(arr);
console.log(copyArr);
// [ 'four', -0, 'two', 'three' ]
'(심층)자바스크립트' 카테고리의 다른 글
타강의 3) 자바스크립트 (0) | 2022.11.28 |
---|---|
타강의 2) 자바스크립트 (0) | 2022.11.26 |
짧게 짧게 알게 된 것 정리 1 (0) | 2022.11.25 |
자바스크립트 문법 02 (0) | 2022.11.08 |
자바스크립트 문법 01 (1) | 2022.11.08 |
github : https://github.com/dnjfht
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!