01. 변수 : 데이터 불러오기

변수 안에 저장된 데이터를 불러오는 방법입니다. let을 한 번 언급했다면 그 다음부터는 생략합니다.

{
    let x=100, y=200, z="javascrip
    
    console.log(x, y, z);
}
결과 확인하기
100
200
javascript
위 코드는 변수'x'에는 100, 변수'y'에는 200, 변수'z'에는 "javascript" 문자열이 할당되어 있는 상태 입니다.
 console.log() 함수를 사용하여 각각의 변수에 할당된값을 출력하고있습니다.

02. 상수 : 데이터 불러오기

상수안에 저장된 데이터를 불러오는 방법입니다. const를 한번 언급했다면 그다음부터는 생략합니다.

{
    const x=100, y=200, z="javascript";
                            
    console.log(x, y, z);
}
결과 확인하기
100
200
javascript
위 코드는 상수'x'에는 100, 상수'y'에는 200, 상수'z'에는 "javascript" 문자열이 할당되어 있는 상태 입니다.
 console.log() 함수를 사용하여 각각의 변수에 할당된값을 출력하고있습니다.

03. 배열 : 데이터 불러오기

배열안에 저장된 데이터를 불러오는 방법입니다. 배열 괄호 안의 첫 번째 칸은 arr[0]부터 시작합니다.

{
    const arr = [100, 200, "javascript"];
                                    
    console.log (arr[0], arr[1], arr[2]);
}
결과 확인하기
100
200
javascript
위 코드는 배열 arr에 100, 200, "javascript"가 할당 되어있는 상태입니다.
 console.log 함수를 사용하여 배열안에 각각에 할당된값을 출력하고 있습니다.

04. 배열 : 데이터 불러오기 : 2차 배열

2차배열의 기본 표현방법입니다.

{
    const arr = [100, 200, ["javascript","react"]];

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2][0]);
    console.log(arr[2][1]);
}
결과 확인하기
100
200
javascript
react
2차 배열이란 배열안에 배열이 있는것을 의미 합니다.
위 코드로 예를들면 arr이라는 배열을 생성합니다.
arr배열의 첫 번째 요소는 100, 두번째 요소는 200, 세번째 요소는 또 다른 배열 ["javascript","react"]입니다.
또다른 배열에 첫번째 요소는 "javascript" 두번째 요소는 "react" 입니다. 따라서 console.log(arr[0])은 100을 출력하고, console.log(arr[1])은 200을 출력합니다.
console.log(arr[2][0])은 "javascript"를 출력하고, console.log(arr[2][1])은 "react"를 출력합니다.

✍Tip

배열안에 문자열을 2개이상 표현할때 각각을 구분하는 방법은 각각의 요소마다 큰따음표("")를 붙히면됩니다.

05. 배열 : 데이터 불러오기 : 갯수 구하기

배열에서 데이터의 갯수를 구할때 length를 사용하면 된다.

{
    const arr = [100, 200, "javascript"];
                                            
    console.log(arr.length)
}
결과 확인하기
실행되었습니다(num == 90)
위 코드는 arr이라는 배열을 생성하여 배열안에 요소들이 할당되어있습니다.
데이터를 출력하는 것이 아닌, 배열안에 요소들의 갯수를 구할떄는 arr[0]같이 index를 입력하는것이아닌
length를 사용하면 해당배열안에 할당되어있는 데이터의 갯수가 출력이 됩니다.

✍length란?

length는 자바스크립트에서 배열(Array)이나 문자열(String)의 길이를 나타내는 속성입니다.
이 속성은 해당 배열 또는 문자열이 포함하고 있는 요소의 개수를 반환합니다.
배열은 위 코드를 참고하면 됩니다. 문자열같은경우는 예를들어,다음과 같은 무자열이 있다면
const str = "Hello, inchan!";
str문자열의 length 속성은 13이 됩니다. 이는 문자열이 "H" 부터 "!" 까지 13개의 문자를 포함하고 있기 때문입니다.

06. 배열 : 데이터 불러오기 : for()문

for문을 이용하여 데이터를 불러오는방법

{
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

    for(let i=0; i<9; i++){
        console.log(arr[i]);
    }
}
결과 확인하기
100
200
300
400
500
600
700
800
900
for문은 컴퓨터 프로그래밍에서 반복 작업을 수행하는데 사용되는 제어 구조입니다.
일반적으로 특정 횟수만큼 작업을 반복하거나 컬렉션(배열, 리스트 등)의 모든 항목을 반복 처리하는 데 사용됩니다.

for([초기식],[조건식],[증감식]){}

✍반복문이 필요한이유

반복문은 같은 계산을 여러번 하는 것을 한 번의 코딩으로 해결할 수 있게끔 해줍니다.
또한 코딩을 하는 사람이 여러번 반복되는 작업을 일일이 하나씩 작업을 하게된다면 실수가 일어날 수도 있기 때문에
한 번의 반복문 사용으로 실수를 없앨 수도 있다.

07. 배열: 데이터 불러오기 : 중첩 for()문

for문 안에 for문이 들어가있는 구조 
{
    for(let i=1; i<=10; i++){
        console.log("i : " + i);
        for(let j=1; j<=10; j++){
            console.log("j : " + j);
        }
    }
}
결과 확인하기
i : 1 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 2 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 3 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 4 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 5 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 6 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 7 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 8 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 9 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
i : 10 , j : 1 , j : 2 , j : 3 , j : 4 , j : 5 , j : 6 , j : 7 , j : 8 , j : 9 , j : 10
중첩반복문이란 지금껏 공부한 반복문 안에 새로운 반복문이 들어가있는것을 뜻합니다.
중첩 반복문의 가장 대표적인 예시는 구구단이다.

(LINK구구단코드바로가기)


✍for문안에 for문만 들어갈수있나?

아닙니다. 반복문안에는 어떠한 반복문이 중첩되더라도 상관이없습니다.
즉, for문 안에 for문도 들어갈 수 있고 while문이 들어갈 수도 있습니다.
반대로 while문안에 while문이 들어가도되고 for문이 들어가도 됩니다.
(횟수 제한은 없지만, 3중을 넘어가게되면 출력물에 속도 저하가 많이 생깁니다.)

08. 배열 : 데이터 불러오기 : foreach()

forEach를 사용해서 배열의 데이터를 불러오는 방법이다.

{
    const num = [100, 200, 300, 400, 500];

    num.forEach(function(element, index, array){
        document.write(element, "<br>");
        document.write(index, "<br>");
        document.write(array, "<br>");
    });
}
결과 확인하기
100
0
[100, 200, 300, 400, 500]
200
1
[100, 200, 300, 400, 500]
300
2
[100, 200, 300, 400, 500]
400
3
[100, 200, 300, 400, 500]
500
4
[100, 200, 300, 400, 500]
const num = [100, 200, 300, 400, 500] const = 변수선언자 num = array [100,200,300,400,500] = 요소 num.forEach(function(element, index ,array)) document.write(element); document.write(index); document.write(array), num 이라는 배열에 element-요소 index-인덱스 array-배열을 불러옵니다. 각각에 다른 이름으로 지정해도되지만 순서는 맞춰야함, 혹시 3가지다 필요없고 요소와 배열만 불러오고싶다면 (element, array) 이렇게사용하는게아닌 (element ,index ,array) 이렇게 다 써주되 document를 안적으면 됨

09. 배열 : 데이터 불러오기 : for of

배열에서 데이터의 갯수를 구할때 length를 사용하면 된다.

{
    const arr = [100, 200, 300, 400, 500];

    for(let i of arr){
        document.write(i);
    };
}
결과 확인하기
100
200
300
400
500
이 코드는 for...of 루프를 사용하여 배열 arr의 요소들을 반복문을 이용하여 출력하는 코드입니다.

다음은 코드 전체를 요약한 내용입니다.

arr 배열에 100, 200, 300, 400, 500의 값이 할당되어 있습니다.
for...of 루프를 사용하여 arr의 요소들을 반복문으로 처리합니다.
for...of 루프를 이용하여 현재 요소의 값을 i라는 변수에 할당합니다.
document.write()를 사용하여 변수 i의 값을 출력합니다.
for...of 루프는 배열의 요소들을 순차적으로 접근하면서 처리할 때 유용합니다. 반복문을 간단하게 작성할 수 있고, 코드 가독성도 좋습니다.

10. 배열 : 데이터 불러오기 : for in

배열에서 데이터의 갯수를 구할때 length를 사용하면 된다.

{
    const arr = [100, 200, 300, 400, 500];

    for(let i in arr){
        document.write(i);
    };
}
결과 확인하기
0
1
2
3
4
이 코드는 for...in 루프를 사용하여 배열 arr의 인덱스를 출력하거나 요소의 값을 출력하는 코드입니다.

다음은 코드 전체를 요약한 내용입니다.

arr 배열에 100, 200, 300, 400, 500의 값이 할당되어 있습니다.
for...in 루프를 사용하여 arr의 인덱스 값을 반복문으로 처리합니다.
document.write()를 사용하여 현재 인덱스 값을 출력합니다.
for...in 루프를 사용하여 배열의 값을 출력할 때는 arr[i]와 같이 배열 인덱스를 사용하여 요소의 값을 출력합니다.
for...in 루프는 객체의 속성을 순회할 때 사용합니다.
배열도 객체이므로 for...in 루프를 사용할 수 있지만, 배열의 요소들을 순서대로 접근하고자 한다면 for...of 루프를 사용하는 것이 더 적합합니다.

11. 배열 : 데이터 불러오기 : map()

배열에서 데이터의 갯수를 구할때 length를 사용하면 된다.

{
    const arr = [100, 200, 300, 400, 500];

    num.map(function(el, i, a){
        document.write(el);
        document.write(i);
        document.write(a);
    });
}
결과 확인하기
100
200
300
400
500
위 코드는 num 배열의 모든 값을 forEach 메소드를 사용하여 출력하는 코드입니다.

아래 코드는 forEach와 map의 차이점을 보여주기 위해 num 배열의 모든 값을 출력하면서
각각의 값, 인덱스, 배열 자체를 콘솔에 출력하는 코드입니다.
forEach와 map의 차이점은 반환값에 있습니다. forEach는 반환값이 없으며, 해당 배열의 각 요소에 대해 콜백 함수를 실행합니다.
반면 map은 배열의 각 요소에 대해 콜백 함수를 실행한 결과를 새로운 배열로 반환합니다.
따라서, map을 사용하면 결과적으로 새로운 배열을 반환받을 수 있습니다.

12. 배열: 데이터 불러오기 : 배열 펼침연산자(spread operator)

펼침 연산자는 자바스크립트에서 배열, 객체,문자열 등의 요소를 펼쳐서 개별오소로 분리하는 연산자입니다.

{
    let arr1 = [100, 200, 300, 400, 500];
    let arr2 = [600, 700];

    console.log(arr1);
    console.log(...arr1);                // ... 은 반복문(for문)이 포함되어 있어 값이 출력됩니다.
    console.log(...arr1, ...arr2);
}
결과 확인하기
[ 100, 200, 300, 400, 500 ]
100 200 300 400 500
100 200 300 400 500 600 700
주어진 코드는 배열에 대한 기본적인 개념과 펼침 연산자(spread operator)에 대한 사용 방법을 보여주고 있습니다. 간단히 설명하자면:
배열 선언 및 출력: let arr1 = [100, 200, 300, 400, 500];으로 배열을 선언하고
console.log(arr1);을 통해 전체 배열을 출력할 수 있습니다.
배열 요소 펼침: ...arr1을 사용하여 배열의 요소를 펼칠 수 있습니다. console.log(...arr1);을 통해
[100, 200, 300, 400, 500]이 아닌 100 200 300 400 500과 같이 요소만 출력됩니다.
배열 합치기: ... 연산자를 사용하여 두 배열을 합칠 수 있습니다. console.log(...arr1,...arr2)를 사용하면
[100, 200, 300, 400, 500, 600, 700]과 같이 두 배열의 요소가 합쳐진 결과를 출력합니다.
펼침 연산자는 배열뿐만 아니라 객체 등에서도 사용할 수 있으며,
해당 객체의 요소를 전개하여 다른 변수나 함수에 전달할 수 있습니다.

13. 배열: 데이터 불러오기 : 배열 구조분해할당 (destructuring assignment)

배열 구조 분해 할당은 배열의 요소를 개별 변수에 할당하는 방법입니다. 이를 통해 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.

{
    let a, b, c;

    [a, b, c] = [100, 200, "javascript"];

    console.log(a);
    console.log(b);
    console.log(c);
}
결과 확인하기
100
200
javascript
변수 선언: let a, b, c; 구문에서 a, b, c 변수를 모두 선언합니다.
구조 분해 할당: [a, b, c] = [100, 200, "javascript"]; 구문에서 [100, 200, "javascript"] 배열의 요소를 a, b, c 변수에 각각 할당합니다.
이때 할당되는 순서는 배열의 요소 순서와 일치해야 합니다.
변수 출력: console.log(a) 구문에서 a 변수를 출력합니다.
이후 console.log(b)와 console.log(c) 구문에서 b와 c 변수를 각각 출력합니다.

14. 객체 : 데이터 불러오기 : 기본

객체의 데이터를 불러오는 기본문법입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    };

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);
}
결과 확인하기
100
200
javascript
객체 생성: const obj = { a: 100, b: 200, c: "javascript" } 구문에서 obj 객체를 생성합니다.
이때 a, b, c는 obj 객체의 속성(property)으로, 각각 100, 200, "javascript" 값이 할당됩니다.
속성 값 출력: console.log(obj.a) 구문에서 obj 객체의 a 속성 값을 출력합니다.
이후 console.log(obj.b)와 console.log(obj.c) 구문에서 obj 객체의 b, c 속성 값을 각각 출력합니다.

15. 객체 : 데이터 불러오기 : object

객체의 데이터를 불러오는 방법중 object를 이용하여 불러오는 방법입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    };

    console.log(Object.keys(obj));          // 키 불러오는 방법
    console.log(Object.values(obj));        // 값 불러오는 방법
    console.log(Object.entries(obj));       // 키, 값 불러오는 방법
}
결과 확인하기
100
200
javascript
객체의 키(key) 배열 추출: Object.keys(obj) 구문에서 obj 객체의 속성 키(key) 배열을 추출하여 출력합니다. 객체의 값(value) 배열 추출: Object.values(obj) 구문에서 obj 객체의 속성 값(value) 배열을 추출하여 출력합니다. 객체의 키-값(key-value) 쌍 배열 추출: Object.entries(obj) 구문에서 obj 객체의 속성 키(key)와 값(value)을 [key, value] 형태로 묶어서 배열로 추출하여 출력합니다.

16.객체 테이터 불러오기 : 변수(spread operator)

변수에 저장시켜서 객체를 불러오는 방법,

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    };

    const name1 = obj.a;
    const name2 = obj.b;
    const name3 = obj.c;

    console.log(name1);
    console.log(name2);
    console.log(name3);
}
결과 확인하기
100
200
javascript
obj 객체를 생성하고, a, b, c 속성(property)을 정의합니다.
const name1= obj.a; 구문에서 obj 객체의 a 속성 값을 name1 변수에 할당합니다.
const name2= obj.b; 구문에서 obj 객체의 b 속성 값을 name2 변수에 할당합니다.
const name3= obj.c; 구문에서 obj 객체의 c 속성 값을 name3 변수에 할당합니다.
각 변수에 할당된 값(name1, name2, name3)을 출력합니다.

17. 객체 : 데이터 불러오기 : for in

객체를 for in문을 사용하여 불러오는 방법입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    };

    for(let key in obj){
        console.log(key);           // 키 불러오는 방법
        console.log(obj[key]);      // 값 불러오는 방법
    }
}
결과 확인하기
a
100
b
200
c
javascript
위 코드는 obj라는 객체를 정의하고, for...in 루프를 사용하여 객체의 속성을 순회하고 있습니다.
for...in 루프는 객체의 속성 이름(key)을 변수로 받아 해당 속성 이름에 대응하는 값을 obj[key]와 같이 접근하여 출력하고 있습니다.
따라서 위 코드는 객체의 속성을 for...in 루프를 이용하여 출력하는 코드입니다.

18. 객체 : 데이터 불러오기 : map()펼침연산자(spread operator)

펼침 연산자는 자바스크립트에서 배열, 객체,문자열 등의 요소를 펼쳐서 개별오소로 분리하는 연산자입니다.

{
    const obj = [
        {a: 100, b: 200, c: "javascript"}
    ];

    obj.map(function(el){
        console.log(el.a);
        console.log(el.b);
        console.log(el.c);
    });
}
결과 확인하기
100
200
javascript
위 코드는 객체들이 저장된 배열 obj를 선언하고 있습니다.
obj.map 메서드를 이용해 obj 배열의 각 요소(객체)에 대해 함수를 실행하고 있습니다.
map 메서드는 배열의 각 요소에 대해 콜백 함수를 호출하며, 이 콜백 함수는 현재 요소의 값을 인수로 받아 처리합니다.
map 메서드는 새로운 배열을 반환하며, 이 배열은 각 요소에 대해 콜백 함수의 처리 결과를 포함합니다.
따라서 위 코드에서는 obj 배열의 각 요소(객체)에 대해 함수를 실행하며, 해당 객체의 a, b, c 속성 값을 출력하고 있습니다.

19. 객체 : 데이터 불러오기 : hasOwnProperty() //데이터가 있는지없는지 알려주는것

펼침 연산자는 자바스크립트에서 배열, 객체,문자열 등의 요소를 펼쳐서 개별오소로 분리하는 연산자입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    };

    console.log(obj.hasOwnProperty("a"));       // true
    console.log(obj.hasOwnProperty("b"));       // true
    console.log(obj.hasOwnProperty("c"));       // true
    console.log(obj.hasOwnProperty("d"));       // false      
}
결과 확인하기
true
true
true
false
위 코드는 JavaScript에서 객체의 속성(property)에 대한 존재 여부를 확인하는 방법을 보여줍니다. obj.hasOwnProperty(prop)는 obj 객체가 prop 속성을 직접적으로 갖고 있는지 여부를 반환하는 메서드입니다.
따라서 obj.hasOwnProperty("a")는 obj 객체가 a 속성을 갖고 있는지 확인하고 결과값인 true를 반환합니다.
"prop" in obj는 obj 객체에 prop 속성이 존재하는지를 확인하는 연산자입니다.
따라서 "a" in obj는 obj 객체에 a 속성이 존재하는지 확인하고 결과값인 true를 반환합니다.
이 두 방법은 비슷하지만, hasOwnProperty는 객체 자신의 속성만을 확인하고, in 연산자는 객체의 상속된 속성까지 확인합니다.
일반적으로 hasOwnProperty를 사용하는 것이 더 안전합니다.
< id="sample20" class="sample">

20. 객체 : 데이터 불러오기 : 객체 펼침연산자

객체 펼침연산자를 이용하여 데이터 불러오기 

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    const spread = {...obj};

    console.log(spread.a);
    console.log(spread.b);
    console.log(spread.c);
}
결과 확인하기
100
200
javascript
100
200
javascript
react
100
200
javascript
react
첫번째 블록은 객체(obj)를 스프레드 연산자(...)를 이용해 새로운 객체(spread)로 복사하여, spread 객체의 속성(a, b, c)을 출력한 것입니다.
두번째 블록은 첫번째 블록과 비슷하게 객체(obj)를 스프레드 연산자를 이용해 새로운 객체(spread)로 복사하고, d 속성을 추가하여, spread 객체의 속성(a, b, c, d)을 출력한 것입니다.
세번째 블록은 두 개의 객체(obj1, obj2)를 스프레드 연산자를 이용해 결합하여, 새로운 객체(spread)로 만들고, spread 객체의 속성(a, b, c, d)을 출력한 것입니다.

21. 객체 : 데이터 불러오기 : 객체 구조분해할당

객체 구조분해할당을 이용하여 데이터를 불러오는 방법입니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }

    const {a, b, c} = obj;

    console.log(a);
    console.log(b);
    console.log(c);
}
결과 확인하기
100
200
javascript
100
200
javascript
첫 번째 코드 블록에서는 객체 구조 분해 할당을 사용하여 객체의 속성 값을 변수에 할당하고 출력합니다.
obj 객체에서 a, b, c 속성 값을 가져온 후 각각 a, b, c 변수에 할당하고 이를 console.log()를 사용하여 출력합니다.
두 번째 코드 블록에서는 객체 구조 분해 할당을 사용하여 객체의 속성 값을 변수에 할당하고, 이 변수를 새로운 변수 이름으로 설정합니다.
obj 객체에서 a, b, c 속성 값을 가져온 후 각각 name1, name2, name3 변수에 할당하고 이를 console.log()를 사용하여 출력합니다.
TOP