01. 데이터 불러오기
변수를 사용하여 데이터를 저장하고 출력합니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x ,y ,z);
}
let x = 100, y = 200, z = "javascript": 변수를 정의하고 할당하는 부분입니다.
console.log(x ,y z)는 변수에 할당 된 값을 콘솔에 출력하는 부분입니다.
결과 확인하기
02.상수 : 데이터 불러오기
변수를 사용하여 데이터를 저장하고 출력합니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
const x = 100, y = 200, z = "javascript": 상수를 정의하고 할당하는 부분입니다.
console.log(x ,y z)는 변수에 할당 된 값을 콘솔에 출력하는 부분입니다.
결과 확인하기
03.배열 : 데이터 불러오기
배열을 사용하여 데이터를 저장하고 각 요소에 접근하여 값을 출력하는 자바스크립트 예제입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
const arr = [100, 200, "javascript"]는 배열을 정의하고 데이터를 할당하는 부분입니다.
console.log(arr[0], arr[1], arr[2]) 코드는 배열 요소에 접근하여 값을 콘솔에 출력하는 부분입니다.
결과 확인하기
04. 배열 : 데이터 불러오기 + 갯수
arr숫자 100과 200, 문자열 "javascript"라는 세 가지 요소로 호출되는 배열을 생성합니다.
명령문을 사용하면 console.log(arr.length)배열의 길이, 즉 포함된 요소의 수를 출력합니다.
{
const arr = [100,200,"javascript"];
console.log(arr.length);
}
이 경우 배열에는 arr세 개의 요소가 포함되어 있으므로 길이는 3입니다. 따라서 출력은 다음과 console.log(arr.length)같습니다..
결과 확인하기
05. 배열 : 데이터 불러오기: for()문
for()문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행합니다. 즉 조건식이 거짓으로 평가될 때까지 반복합니다.
for 반복문은 주로 반복 횟수가 정해진 경우에 사용됩니다. 반복을 몇 번 수행해야 하는지 알 때 유용합니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for (let i = 0; i < 9; i++) {
console.log(arr[i])
};
}
for(let i = 0; i<9; i++) : for(변수 선언문; 조건식; 증감식)
console.log(arr[i]) : 조건식이 참일 경우 반복 실행될 문.
결과 확인하기
200
300
400
500
600
700
800
900
06. 배열 : 데이터 불러오기: forEach()
배열 요소를 반복하려는 경우 forEach() 방법이 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.forEach(function(element){
console.log(element);
});
arr.forEach(function(element, index){
console.log(index);
});
arr.forEach(function(element, index, array){
console.log(array);
});
//약식 표현(화살표 함수 사용)
arr.forEach((el) => {
console.log(el);
});
arr.forEach(el => {
console.log(el);
});
arr.forEach(el => console.log(el));
}
1.forEach() 메서드를 사용하여 배열 arr의 각 요소를 반복하고, 각 요소를 element라는 매개변수로 받아서 콘솔에 출력합니다.
2.forEach() 메서드를 사용하여 배열 요소를 반복 arr하고 인덱스를 기록합니다.
3.forEach() 메서드를 사용하여 요소, 인덱스, 그리고 배열 자체에 접근할 수 있습니다. 이 코드에서는 배열 자체인 array를 출력합니다.
4.arr.forEach((element) => { ... }): 화살표 함수를 사용하여 forEach() 메서드를 호출합니다.
5.arr.forEach(element => { ... }): 화살표 함수를 사용하여 코드를 더 간결하게 표현합니다.
6.arr.forEach(el => console.log(el)): 변수 이름을 el로 줄여서 표현할 수도 있습니다.
결과 확인하기
200
300
400
500
600
700
800
900
0
1
2
3
4
5
6
7
8
07. 배열 : 데이터 불러오기: 데이터 불러오기 : for of
배열 요소를 반복하려는 경우 for of 방법이 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(const element of arr){
console.log(element);
}
}
for (const 요소 of 배열) 형식입니다.
for of 루프를 사용하여 배열 arr의 각 요소를 반복합니다.
이 루프는 배열의 요소를 하나씩 가져오며, 반복할 때마다 현재 요소를 element라는 변수에 저장합니다.
console.log(element);를 사용하여 현재 요소인 element를 콘솔에 출력합니다.
이 코드는 루프를 통해 배열의 모든 요소를 하나씩 출력합니다.
결과 확인하기
200
300
400
500
600
700
800
900
08. 데이터 불러오기 : for in
for...in는 객체의 열거 가능한 속성을 반복하는 데 사용됩니다만 배열에서도 사용할수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(const element in arr){
console.log(element);
}
for(const element in arr){
console.log(arr[element]);
}
}
for (const 인덱스 in 배열[인덱스]) 형식입니다.
결과 확인하기
1
2
3
4
5
6
7
8
100
200
300
400
500
600
700
800
900
09. 데이터 불러오기 : map()
map() 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고 그 결과를 새로운 배열로 반환합니다.
{
const arr = [100, 200, "javascript"];
arr.map(function(el, index, array){
console.log("09 : " + el + " : " + index + " : " + array);
});
const arrNum = arr.map((el) => {
return el;
});
console.log("09 : " + arrNum);
}
map() 메서드를 사용하면 주어진 함수를 배열의 모든 요소에 적용하고 그 결과를 모은 새 배열을 얻을 수 있습니다.
결과 확인하기
09 : 200 : 1 : 100,200,javascript
09 : javascript : 2 : 100,200,javascript
09 : 100,200,javascript
10. 배열 : 데이터 불러오기: filter()
filter() 메서드는 주어진 함수의 조건을 만족하는 배열 요소만을 포함하는 새로운 배열을 생성합니다.
{
const arr = [100, 200, "javascript"];
arr.filter(function(el, index, array){
console.log("10 : " + el + " : " + index + " : " + array);
});
const arrNum = arr.filter((el) => {
return el > 150;
});
const arrNum2 = arr.filter(el => {
return el > 150;
});
const arrNum3 = arr.filter(el => el > 150);
console.log(arrNum3); //[200]
}
filter() 메서드를 사용하면 주어진 조건을 만족하는 요소만을 포함하는 배열을 생성할 수 있습니다. 이를 활용하여 배열을 필터링하고 원하는 조건에 맞는 요소만을 선택할 수 있습니다.
결과 확인하기
10 : 200 : 1 : 100,200,javascript
10 : javascript : 2 : 100,200,javascript
200
11. 배열 : 데이터 불러오기 : 배열 펼침 연산자
배열 펼침 연산자는 JavaScript에서 배열 내의 요소를 다른 배열에 펼쳐 넣을 때 사용됩니다. 이 연산자는 배열을 복사하거나 합치는 데 유용하며, 데이터를 불러오거나 복사하는 데에도 사용할 수 있습니다.
{
// 배열 펼침 연산
const arr1 = [100, 200, 300];
const arr2 = [400, 500, 600];
console.log(arr1);
console.log(...arr1);
console.log(arr1 + arr2);
console.log(...arr1, ...arr2);
console.log(...arr1, 400);
console.log(...arr1.slice(0,2));
함수 호출시 인수 전달
function addNum(a, b, c){
return a + b + c
};
const num = [100, 200, 300];
const sum = addNum(...num);
console.log(sum)
}
배열을 복사하거나 새로운 배열을 만들 때 사용되며, 함수의 인수로 배열을 전달할 때도 유용하게 활용됩니다.
slice 메서드를 사용하여 배열의 일부를 선택하고, 선택한 부분을 펼침 연산자를 통해 출력할 수 있습니다.
slice 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용합니다. 첫번째 인자로 시작 인덱스(index), 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환합니다.
addNum(...num); 펼침연산자로 값만 갖고 오기 때문에 값이 나오지만 addNum(num)를 사용 했을 경우 오류가 뜹니다.
위에 예시처럼 arr1+arr2인 경우에는 arr1의 값과 arr2의 값이 연결할 때 띄어쓰기를 하지 않고 출력합니다.
결과 확인하기
100,200,300
100,200,300400,500,600
100200300400500600
100200300400
100,200
600
12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당
데이터를 불러오는 데 filter() 메서드를 사용하는 것은 해당 배열에서 조건에 맞는 요소만을 추출할 때 유용합니다. filter() 메서드는 새로운 배열을 반환하며, 주어진 함수에 의해 참인 요소만을 포함합니다.
{
const arr = [100, 200, 320, 400, 500, 600, 700, 800, 900];
arr.filter(function(el){
console.log(el);
});
arr.filter(function(element, index){
console.log(index);
});
arr.filter(function(el, index, arr){
console.log(arr);
});
}
배열의 각 요소를 개별 변수로 추출하거나, 일부 요소를 건너뛰거나, 나머지 요소를 하나의 변수로 묶을 수 있습니다.
연산자를 사용하여 나머지 요소를 하나의 배열로 저장할 수 있습니다.
결과 확인하기
200
300
100
200
300
100
200
300,400,500
300, 400, 500
13.객체 : 데이터 불러오기
객체에서 데이터를 불러오는 방법은 해당 객체의 속성을 사용하여 데이터에 접근하는 것입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
console.log(obj["a"]);
console.log(obj["b"]);
console.log(obj["c"]);
}
console.log(obj.a);a: 이 줄은 점 표기법을 사용하여 객체 의 속성 값에 액세스하고 기록합니다.
console.log(obj.b);b: 이 줄은 점 표기법을 사용하여 객체 의 속성 값에 액세스하고 기록합니다.
console.log(obj.c);c: 이 줄은 점 표기법을 사용하여 객체 의 속성 값에 액세스하고 기록합니다.
console.log(obj["a"]);a: 이 줄은 대괄호 표기법을 사용하여 개체 의 속성 값에 액세스하고 기록합니다. 대괄호 표기법을 사용하면 속성 이름을 나타내는 문자열을 사용하여 객체 속성에 액세스할 수 있습니다.
console.log(obj["b"]);b: 이 줄은 대괄호 표기법을 사용하여 개체 의 속성 값에 액세스하고 기록합니다.
console.log(obj["c"]);c: 이 줄은 대괄호 표기법을 사용하여 개체 의 속성 값에 액세스하고 기록합니다.
점 표기법과 대괄호 표기법은 모두 JavaScript에서 객체 속성에 액세스하는 유효한 방법입니다. 특정 사용 사례에 더 편리한 것을 선택하거나 프로젝트의 코딩 규칙을 따를 수 있습니다.
결과 확인하기
200
javascript
100
200
javascript
14.객체 : 데이터 불러오기 Object.keys()
JavaScript에서 객체의 속성(프로퍼티) 중에서 키(key)들을 배열로 반환하는 메서드입니다. 이를 사용하면 객체의 키를 빠르게 불러와서 처리할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
};
console.log(Object.keys(obj));
}
Object.keys(obj)메서드는 객체의 키(속성 이름)가 포함된 배열을 반환합니다. obj의 세 가지 속성이 있습니다. 따라서 결과를 기록하면 다음 속성 이름이 포함된 배열을 얻게 됩니다.abcObject.keys(obj)
결과 확인하기
15.객체 : 데이터 불러오기 Object.values()
Object.values() 메서드는 객체의 속성 값들을 배열로 반환합니다. 이 메서드를 사용하면 객체의 속성 값을 빠르게 불러올 수 있습니다.
{
cconst obj = {
a: 100,
b: 200,
c: "javascript",
};
console.log(Object.values(obj)); //
}
Object.values(obj)메소드는 객체를 반환합니다.
결과 확인하기
16.객체 : 데이터 불러오기 Object.entries()
자바스크립트의 타입중 객체는 배열처럼 하나가 아닌 여러 개의 값을 키, 밸류 형태로 가지고 있습니다. 만약 객체가 가진 모든 키와 값을 확인하길 원하는 경우라면 entries()를 사용하면 편리합니다. entries()는 객체가 가지고 있는 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환하여 주기 때문에 어떤 프로퍼티와 값으로 이루어졌는지 한 눈에 확인할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
};
console.log(Object.entries(obj));
}
가지고 있는 값들이 모두 key, value 형태의 배열로 변환되어 출력됩니다.
결과 확인하기
17.객체 : 데이터 불러오기 Object.assign()
Object.assign을 이용해서 객체를 합치는 것이 가능하다. 또한 합칠 때는 2개의 객체가 같은 프로퍼티를 가지고 있다면 그 값을 덮어쓰기 해주며, 객체의 복제에서도 사용될 수 있습니다.
{
const obj1 = { a:100, b: 200, c: "javascript" };
const obj2 = { d:300, e: 400, f: "jquery" };
const obj3 = Object.assign(obj1, obj2);
console.log(obj3);
}
const obj3 = Object.assign(obj1, obj2);을 통해서 obj1과 obj2를 합치는게 가능하다.
결과 확인하기
18.객체 : 데이터 불러오기 : hasOwnProperty()
hasOwnProperty()는 자바스크립트에서 사용되는 메서드로, 객체가 특정한 이름을 가진 속성을 가지고 있는지를 확인하는데 사용됩니다. 있으면 true, 없으면 false.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(obj.hasOwnProperty("a"));
console.log(obj.hasOwnProperty("b"));
console.log(obj.hasOwnProperty("c"));
console.log(obj.hasOwnProperty("d"));
console.log(obj.hasOwnProperty("javascript"));
}
// in 연산자
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
hasOwnProperty 메서드: obj.hasOwnProperty("a"): 객체 obj가 a라는 속성을 가지고 있는지 확인하고 결과를 출력합니다.
true는 해당 속성이 객체에 존재함을 나타냅니다.
false는 해당 속성이 객체에 존재하지 않음을 나타냅니다.
결과 확인하기
true
true
false
false
true
true
true
false
19.객체 : 데이터 불러오기 : for in()
for...in 반복문을 사용하여 객체 obj의 모든 속성과 각 속성의 값을 출력하는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
for(let el in obj ){
console.log((el + " : " + obj[el]));
}
}
const obj = { a: 100, b: 200, c: "javascript" }: obj라는 객체를 생성하고 세 개의 속성(a, b, c)을 초기화합니다.
for...in 루프를 사용하여 obj 객체의 속성을 반복합니다. for (let el in obj)은 obj 객체의 속성을 하나씩 순회하는 반복문입니다.
반복문 내부에서 console.log(el + " : " + obj[el]);를 사용하여 현재 순회 중인 속성 이름(el)과 해당 속성의 값을 출력합니다.
이것은 객체의 속성 이름과 값을 콘솔에 출력합니다.
결과 확인하기
b : 200
c : javascript
20.객체 : 데이터 불러오기 : 객체 펼침 연산자()
for...in 루프를 사용하여 객체의 속성을 반복적으로 가져올 수 있습니다. for...in 루프는 객체의 열거 가능한 속성을 반복하면서 해당 속성의 이름 또는 키를 가져옵니다
{
const obj1 = {
a: 100,
b: 200,
c: "javascript",
}
const obj2 = {
a: 300,
b: 400,
c: "jquery",
}
const obj3 = { ... obj1, ...obj2 }
const obj4 = { ... obj1, d: "jaquery" }
const obj5 = { ... obj1, b: 300 }
console.log(obj1); // {a: 100, b: 200, c: 'javascript'}
console.log(obj2); // {a: 300, b: 400, c: 'jquery'}
console.log(obj3); // {a: 300, b: 400, c: 'jquery'}
console.log(obj4); // {a: 100, b: 200, c: 'javascript', d: 'jaquery'}
console.log(obj5); // {a: 100, b: 300, c: 'javascript'}
}
1.obj의 세 가지 속성으로 명명된 개체가 있으며 각각 해당 값이 있습니다.
2. 루프 는 객체 for...in의 키(속성 이름)를 반복하는 데 사용됩니다 obj. 각 반복에서 변수는 el현재 속성 이름(키)을 보유합니다.
3. 루프 내에서 obj[el]현재 속성 name 과 연결된 값에 액세스하는 데 사용됩니다 el. 그런 다음 속성 이름, 콜론과 공백( : ), 값을 단일 문자열로 연결합니다.
4. 결과적으로 for...in루프는 개체의 모든 속성을 반복 obj하고 각 속성에 대해 형식으로 문자열을 기록합니다 "property : value".
결과 확인하기
{a: 300, b: 400, c: 'jquery'}
{a: 300, b: 400, c: 'jquery'}
{a: 100, b: 200, c: 'javascript', d: 'jaquery'}
{a: 100, b: 300, c: 'javascript'}
21.객체 : 데이터 불러오기 : 객체 구조 분해 할당()
객체 구조 분해 할당은 JavaScript에서 객체의 속성 값을 추출하여 변수에 할당하는 방법입니다. 이를 통해 객체의 특정 속성을 쉽게 변수로 가져와서 사용할 수 있습니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javascript",
}
const { a, b, c} = obj1;
console.log(a);
console.log(b);
console.log(c);
const { a: x, b: y, c: z } = obj1; // (많이씀) 키 값을 이렇게 바꿀 수 있음
console.log(x);
console.log(y);
console.log(z);
const obj2 = {
d: 100,
f: 200,
f: "javascript"
}
const {d, e, f, g = "jquery"} = obj2;
console.log(g); //jquery
const obj3 = {
x1: 200,
y1: {a1: 300, b1: 400},
z1: "javascript"
}
const { x1, y1: {a1, b1}, z1} = obj3
console.log(x1);
console.log(a1);
console.log(b1);
console.log(z1);
}
1. 다음의 속성을 파괴합니다 obj1: const { a, b, c} = obj1;
2. 구조화되지 않은 속성 이름 바꾸기: const { a: x, b: y, c: z } = obj1;
결과 확인하기
200
javascript
100
200
javascript
jquery
200
300
javascript