01. 변수 : 데이터 불러오기
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
02. 상수 : 데이터 불러오기
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
03. 배열 : 데이터 불러오기
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
04. 배열 : 데이터 갯수 구하기
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
05. 배열 : 데이터 불러오기 : for()문
for문은 프로그래밍에서 반복 작업을 수행하기 위해 사용되는 제어 구조 중 하나입니다. for문은 주로 반복적으로 코드를 실행해야 할 때 사용되며, 특정 조건이 충족되는 동안 루프를 계속 실행합니다. for문은 초기화(initialization), 조건(condition), 반복 실행(expression)으로 구성됩니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let i=0; i< arr.length; i++ ){
console.log(arr[i]);
}
}
1. 배열 arr을 선언하고 초기화합니다. 이 배열에는 숫자 100부터 900까지의 값을 포함하고 있습니다.
2. for문을 시작합니다. 이 for문은 0부터 arr 배열의 길이(arr.length)까지 반복합니다. i는 반복 변수로 사용되며 초기값은 0으로 설정됩니다. i가 arr.length보다 작을 때까지 반복하며, 반복할 때마다 i를 1씩 증가시킵니다.
3. for문의 코드 블록을 정의합니다. 이 블록 내부의 코드는 반복 실행됩니다.
4. 배열 arr의 i번째 요소를 콘솔에 출력합니다. i는 반복문에서 각 반복마다 0부터 arr.length - 1까지 순차적으로 변화하며, 이를 통해 배열의 모든 요소를 하나씩 출력합니다.
결과 확인하기
06. 배열 : 데이터 불러오기 : forEach()
JavaScript의 배열 객체에 속한 메서드 중 하나로, 배열의 각 요소에 대해 반복 작업을 수행하는 유용한 함수입니다. forEach() 함수를 사용하면 반복문을 명시적으로 작성할 필요 없이 배열을 순회하며 각 요소에 대한 작업을 처리할 수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.forEach((el) => {
console.log(el);
});
}
1. 주어진 숫자로 배열을 초기화합니다.
2. forEach() 메서드를 호출하여 배열 arr의 각 요소에 대한 작업을 정의합니다. forEach() 메서드는 콜백 함수를 인수로 받습니다.
3. 화살표 함수 (el) => { ... }가 콜백 함수로 사용되었습니다. 이 콜백 함수는 배열의 각 요소(el)에 대해 실행됩니다.
4. 콜백 함수 내에서는 각 요소 el을 console.log()를 사용하여 콘솔에 출력합니다.
결과 확인하기
07. 배열 : 데이터 불러오기 : for of
JavaScript에서 배열을 순회하거나 반복하는데 사용되는 반복문의 한 종류입니다. for...of 루프를 사용하면 배열의 각 요소에 대해 반복적으로 작업을 수행할 수 있습니다. 이 반복문은 ES6(ECMAScript 2015)에서 도입되었으며, 배열을 순회할 때 더 간결하고 가독성 좋은 코드를 작성할 수 있게 해줍니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
console.log("4번째");
for(let el of arr){
console.log(el);
}
}
1. 콘솔에 "4번째"라는 문자열을 출력합니다. 이 부분은 코드 실행의 시작을 나타내는 메시지입니다.
2. for...of 루프를 사용하여 배열 arr의 각 요소를 반복하면서 해당 요소를 el 변수에 할당합니다.
3. for...of 루프 내에서 el 변수에 저장된 배열 요소를 콘솔에 출력합니다.
결과 확인하기
08. 배열 : 데이터 불러오기 : for in
JavaScript에서 객체의 속성(property)을 반복하거나 열거할 때 사용하는 반복문입니다. for...in 루프를 사용하면 객체의 속성을 순회하고 해당 속성에 대한 작업을 수행할 수 있습니다. 이 반복문은 객체의 속성을 열거하고 각 속성에 대해 반복 작업을 수행합니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
console.log("4번째");
for(let el in arr){
console.log(arr[el]);
}
}
1. 배열 arr을 선언하고 초기화합니다. 이 배열은 9개의 정수 값을 포함하며, 각 값은 100부터 900까지 100 단위로 증가합니다.
2. for 루프를 시작합니다. 이 루프는 배열 arr의 각 요소를 반복하는 목적으로 사용됩니다. 그러나 여기서 사용된 in 키워드는 배열 요소의 인덱스를 가져오지 않습니다.
3. - 현재의 루프 반복에서 배열 arr의 요소를 콘솔에 출력합니다. 그러나 el은 실제로 배열 요소의 값이 아닌 인덱스일 뿐입니다.
결과 확인하기
09. 배열 : 데이터 불러오기 : map()
JavaScript에서 배열을 변형하고 새로운 배열을 생성하는 데 사용되는 고차 함수(higher-order function) 중 하나입니다. map() 함수는 배열의 각 요소에 대해 지정된 함수를 호출하고, 각 요소에 대한 변환 결과를 새로운 배열로 반환합니다. 이 때, 원본 배열은 변경되지 않습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.map((el) => {
console.log(el);
});
}
1. map() 메서드를 호출하여 배열 arr의 각 요소에 대한 작업을 정의합니다. map() 메서드는 콜백 함수를 인수로 받습니다.
2. 화살표 함수 (el) => { ... }가 콜백 함수로 사용되었습니다. 이 콜백 함수는 배열의 각 요소(el)에 대해 실행됩니다.
3. 콜백 함수 내에서 각 요소 el을 console.log()를 사용하여 콘솔에 출력하려고 시도합니다.
결과 확인하기
10. 배열 : 데이터 불러오기 : filter()
JavaScript에서 배열을 필터링하고 새로운 배열을 생성하는 고차 함수(higher-order function) 중 하나입니다. filter() 함수는 주어진 조건을 만족하는 배열 요소만을 선택하여 새로운 배열로 반환합니다. 이때, 원본 배열은 변경되지 않습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.filter((el) => {
console.log(el);
});
}
1. filter() 메서드를 호출하여 배열 arr의 각 요소에 대한 작업을 정의합니다. filter() 메서드는 콜백 함수를 인수로 받습니다.
2. 화살표 함수 (el) => { ... }가 콜백 함수로 사용되었습니다. 이 콜백 함수는 배열의 각 요소(el)에 대해 실행됩니다.
3. 콜백 함수 내에서 각 요소 el을 console.log()를 사용하여 콘솔에 출력하려고 시도합니다.
결과 확인하기
11. 배열: 데이터 불러오기 : 배열 펼침 연산자
배열 펼침 연산자(또는 스프레드 연산자)는 JavaScript에서 배열을 펼쳐서 개별 요소로 분리하거나, 여러 배열을 병합할 때 사용되는 문법입니다. ... 기호를 사용하여 배열을 펼침 연산자로 사용할 수 있습니다.
{
const arr1 = [100, 200, 300];
const arr2 = [400, 500, 600];
const arr3 = [...arr1, ...arr2];
const arr4 = [...arr1, 700];
console.log(arr3);
console.log(arr4);
}
1. arr1, arr1 변수를 선언하고, [100, 200, 300], [400, 500, 600]이라는 배열을 초기화합니다.
2. 배열 펼침 연산자(...)를 사용하여 arr1과 arr2 배열의 모든 요소를 병합하여 arr3 변수에 저장합니다. 결과적으로 arr3는 [100, 200, 300, 400, 500, 600]이 됩니다.
3. 배열 펼침 연산자(...)를 사용하여 arr1 배열의 모든 요소를 복사하고, 추가적으로 700을 배열에 포함하여 arr4 변수에 저장합니다. 결과적으로 arr4는 [100, 200, 300, 700]이 됩니다.
4. arr3 배열을 콘솔에 출력합니다. 출력 결과는 [100, 200, 300, 400, 500, 600]가 됩니다.
5. arr4 배열을 콘솔에 출력합니다. 출력 결과는 [100, 200, 300, 700]가 됩니다.
결과 확인하기
12. 배열: 데이터 불러오기 : 배열 구조 분해 할당
배열 구조 분해 할당(Array Destructuring Assignment)은 JavaScript에서 배열에서 요소를 추출하여 변수에 할당하는 방법입니다. 이를 통해 배열에서 요소를 쉽게 추출하고 변수에 저장할 수 있습니다. 배열 구조 분해 할당은 ES6(ES2015)에서 도입되었으며 코드를 간결하고 가독성 있게 작성하는 데 도움이 됩니다.
{
const arr = [100, 200, 300];
const [a, b, c] = arr;
console.log(a);
console.log(b);
console.log(c);
}
1. 배열 arr을 선언하고 초기화합니다. 이 배열은 [100, 200, 300]이라는 세 개의 숫자 요소를 포함하고 있습니다.
2. 배열 구조 분해 할당을 사용하여 배열 arr의 요소를 각각 변수 a, b, c에 할당합니다. 할당은 배열의 순서대로 이루어집니다. 따라서 a에는 배열의 첫 번째 요소인 100이 할당되고, b에는 두 번째 요소인 200이 할당되고, c에는 세 번째 요소인 300이 할당됩니다.
결과 확인하기
13. 객체: 데이터 불러오기
자바스크립트(JavaScript)에서 객체 데이터를 불러오는 방법입니다.
{
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"]);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
14. 객체: 데이터 불러오기 : Object.keys()
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log("8번째");
console.log(Object.keys(obj));
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
15. 객체: 데이터 불러오기 : Object.values()
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log("9번째");
console.log(Object.values(obj));
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
16. 객체: 데이터 불러오기 : Object.entries()
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log("10번째");
console.log(Object.entries(obj));
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
17. 객체: 데이터 불러오기 : Object.assign()
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const obj1 = { a: 100, b:200, c: "javascript"};
const obj2 = { d: 300, e:400, f: "jquery"};
const obj3 = Object.assign(obj1, obj2);
console.log("11번째");
console.log(obj3);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
18. 객체: 데이터 불러오기 : hasOwnPropterty()
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const obj = {
a: 100,
b: 200,
c: "javaascript",
}
console.log("12번째");
console.log(obj.hasOwnProperty("a"));
console.log(obj.hasOwnProperty("b"));
console.log(obj.hasOwnProperty("c"));
console.log(obj.hasOwnProperty("d"));
console.log(obj.hasOwnProperty("100"));
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);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
19. 객체: 데이터 불러오기 : for in
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const obj = {
a: 100,
b: 200,
c: "javaascript",
}
console.log("13번째");
for(let el in obj){
console.log(el + ":" + obj[el]);
}
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
20. 객체: 데이터 불러오기 : 객체 펼침 연산자
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javaascript",
}
const obj2 = {
d: 100,
e: 200,
f: "javaascript",
}
const obj3 = {...obj1, ...obj2}
const obj4 = {...obj1, d: "jquery"}
const obj5 = {...obj1, d: 300}
console.log("14번째");
console.log(obj3);
console.log(obj4);
console.log(obj5);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.
결과 확인하기
21. 객체: 데이터 불러오기 : 객체 구조 분해 할당
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javaascript",
}
console.log("15번째");
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,
e: 200,
f: "javaascript",
}
console.log("15번째");
const { d, e, f, g = "jaqurey"} = obj2;
console.log(g)
const obj3 = {
x1: 100,
y1: {a1: 100, b1:200},
z1: "javascript"
}
const {x1, y1:{a1, b1}, z1 }= obj3;
console.log(x1);
console.log(a1);
console.log(b1);
console.log(z1);
}
var: 오래된 변수 선언 방식으로, 최근에는 잘 사용하지 않습니다.
var는 기존 함수에 재할당이 가능합니다.