Tutorial/JavaScript

자바스크립트 기초 마스터

by @webs 2023. 08. 01.
01.

자바스크립트 배우기 : 데이터 저장하기

완성 화면 코드 보기

소개

안녕하세요! 웹스토리보이입니다. 이 강의는 자바스크립트 초급부터 고급까지 아우르는 자바스크립트 핵심 개념을 다루는 기본서 강의입니다. 일반적인 자바스크립트 강의와는 목표와 방식이 다릅니다. 여기에서는 자바스크립트를 어떻게 단순하게 이해하고, 현실적으로 활용할 수 있는지를 고려하여 만들어진 내용입니다.

자바스크립트를 배우면서 때로는 이해하기 어려운 부분이나 무엇을 해야 하는지 혼란스러운 부분이 있을 수 있습니다. 그런 어려움을 극복하고 불필요한 시간 낭비를 줄이기 위해 이 강의는 차별화된 접근 방식을 채택하였습니다. 또한, 개인적으로도 어려움을 겪었던 부분들을 고려하여 설명하였습니다.

이 강의의 주요 목표는 자바스크립트를 학습하면서, 이론 뿐만 아니라 실제로 어떻게 활용할 수 있는지를 강조하는 것입니다. 이를 위해 강의는 크게 네 가지 주요 영역으로 구성되었습니다. 데이터 저장, 데이터 불러오기, 데이터 실행, 그리고 데이터 제어입니다. 이렇게 체계적으로 기초를 다지고 나서 실제 상황에 유용하게 활용할 수 있는 실용적인 예제를 다룰 것입니다. 이를 통해 프로그래밍 실력을 크게 향상시킬 수 있는 기회를 가지게 될 것입니다. 이 강의를 통해 자바스크립트의 세계에 더욱 가깝게 다가갈 수 있길 바랍니다.

인덱스

데이터 저장

자바스크립트의 가장 핵심적인 부분은 데이터를 저장하고 이를 출력하는 방법입니다. 이것이 자바스크립트의 기초이자 핵심입니다. 사실 모든 프로그래밍 언어의 핵심도 비슷합니다. 자바스크립트는 데이터를 저장하는 방법이 다양하며, 이 중 하나의 중요한 개념은 변수입니다.

변수는 데이터를 담아두는 공간으로, 그 값을 나중에 사용하기 위해 저장합니다. 간단히 말해, 자바스크립트에서 변수는 정보를 담아둔 상자라고 볼 수 있습니다. 이러한 변수 개념은 프로그래밍의 기본이며, 데이터를 다루는 핵심 도구입니다.

데이터를 저장하고 활용하는 과정을 자세히 이해하는 것은 프로그래밍을 배우는데 필수적입니다. 자바스크립트에서 변수를 사용하여 데이터를 저장하는 방법을 이해하면, 이후에 조건문, 반복문, 함수 등을 통해 데이터를 더욱 효과적으로 다룰 수 있게 됩니다. 이것이 프로그래밍의 기초이며, 더 나아가서 웹 애플리케이션을 개발하거나 복잡한 프로그램을 작성할 때에도 핵심적인 역할을 하게 됩니다.

01. 변수 : 데이터 저장

변수는 데이터를 저장하는 저장소입니다. 

{
        let x = 100;            // 변수 x를 선언하고, 숫자 100을 할당합니다.            
        let y = 200;            // 변수 y를 선언하고, 숫자 200을 할당합니다.       
        let z = "javascript";   // 변수 z를 선언하고, 문자열 "javascript"을 할당합니다.

        console.log(x);     // 100 
        console.log(y);     // 200
        console.log(z);     // javascript  
}

변수에 할당된 값들이 출력됩니다.

  • console.log(x); → 변수에 할당된 숫자 100이 출력됩니다.
  • console.log(y); → 변수에 할당된 숫자 200이 출력됩니다.
  • console.log(z); → 변수에 할당된 문자 javascript가 출력됩니다.
02. 변수 : 데이터 저장 + 데이터 변경

변수는 데이터를 저장하고, 변경할 수 있습니다. 

{
        let x = 100;                // 변수 x를 선언하고, 숫자 100을 할당합니다.             
        let y = 200;                // 변수 y를 선언하고, 숫자 200을 할당합니다.        
        let z = "javascript";       // 변수 z를 선언하고, 문자열 "javascript"을 할당합니다.   

        x = 300;            // 변수 x의 값을 300으로 변경합니다.
        y = 400;            // 변수 y의 값을 400으로 변경합니다.
        z = "jquery";       // 변수 z의 값을 문자열 "jquery"로 변경합니다.

        console.log(x);     // 300
        console.log(y);     // 400
        console.log(z);     // jquery
}

변수에 변경된 값들이 출력됩니다. 변수의 값을 변경하면, 프로그램의 상태를 동적으로 조작할 수 있습니다.

  • console.log(x); → 변수에 할당된 숫자 100이 300으로 변경되어 출력됩니다.
  • console.log(y); → 변수에 할당된 숫자 200이 400으로 변경되어 출력됩니다.
  • console.log(z); → 변수에 할당된 문자 javascript가 jquery로 변경되어 출력됩니다.
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가

변수는 데이터를 저장, 변경 및 추가를 할 수 있습니다. 

{
        let x = 100;                // 변수 x를 선언하고, 값 100을 할당합니다.          
        let y = 200;                // 변수 y를 선언하고, 값 200을 할당합니다.  
        let z = "javascript";       // 변수 z를 선언하고, 문자열 "javascript"을 할당합니다.

        x += 300;       // 변수 x의 값에 300을 추가합니다.       
        y += 400;       // 변수 y의 값에 400을 추가합니다.
        z += "jquery";  // 변수 z의 값에 문자열 "jquery"를 추가합니다.   

        console.log(x);     // 400   
        console.log(y);     // 600
        console.log(z);     // javascriptjquery
}

변수에 할당된 값이 숫자일 경우 연산이 되어 결과값이 나옵니다. 변수의 값이 문자일 경우에는 추가만 되어 출력됩니다.

  • console.log(x); → 변수 x에 할당된 100에 300을 더하여 400이 출력됩니다.
  • console.log(y); → 변수 y에 할당된 200에 400을 더하여 600이 출력됩니다.
  • console.log(z); → 변수 z에 할당된 javascript에 jquery을 추가하여 javascriptjquery이 출력됩니다.
연산자

자바스크립트에서는 여러 종류의 연산을 위해 다양한 연산자를 제공합니다. 기본적으로 이들은 크게 산술 연산자, 대입 연산자, 비교 연산자, 그리고 논리 연산자로 구분됩니다

  • 산술 연산자 (Arithmetic Operators) 산술 연산자는 수학적 계산을 수행하는 데 사용됩니다. 이에는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%), 증가(++), 감소(--) 등이 포함됩니다. 예를 들어, x + y는 x와 y의 합을 계산합니다.
  • 대입 연산자 (Assignment Operators) 대입 연산자는 값 또는 연산의 결과를 변수에 할당하는 데 사용됩니다. 기본 대입 연산자는 =입니다. 또한, 복합 대입 연산자가 있어, 연산과 대입을 동시에 수행할 수 있습니다. 예를 들어, x += y는 x = x + y와 같습니다.
  • 비교 연산자 (Comparison Operators) 비교 연산자는 두 값을 비교하고 그 결과로 불린값(true 또는 false)을 반환합니다. 이에는 동등(==), 부등(!=), 엄격한 동등(===), 엄격한 부등(!==), 크기 비교(>, <,>=, <=) 등이 포함됩니다. 예를 들어, x===y는 x와 y가 값과 타입이 모두 같을 때 true를 반환합니다.
  • 논리 연산자 (Logical Operators) 논리 연산자는 주어진 불린 조건들을 기반으로 논리적 연산을 수행합니다. AND(&&), OR(||), NOT(!) 연산자가 여기에 속합니다. 예를 들어, x && y는 x와 y 모두 true일 때 true를 반환합니다.
04. 상수 : 데이터 저장 + 데이터 변경(X)

상수는 데이터를 저장하는 저장소입니다. 데이터 변경은 할 수 없습니다. 

{
        const x = 100;              // 상수 x를 선언하고, 숫자 100을 할당합니다.           
        const y = 200;              // 상수 y를 선언하고, 숫자 200을 할당합니다.     
        const z = "javascript";     // 상수 z를 선언하고, 문자열 "javascript"을 할당합니다.

        // x = 300;        // 주석 표시가 없으면 에러가 발생합니다.
        // y = 400;        
        // z = "jquery";   

        console.log(x);     // 100
        console.log(y);     // 200
        console.log(z);     // javascript
}

상수는 한 번 설정하면 프로그램 실행 중에 그 값이 변경되지 않는 변수를 의미합니다. 상수는 고정된 값을 가지며, 이 값은 프로그램 내에서 변경할 수 없습니다. 상수는 일반적으로 프로그램 전체에 걸쳐 변경되지 않는 값을 저장하는 데 사용됩니다.

  • console.log(x); → 상수에 할당된 숫자 100이 출력됩니다.
  • console.log(y); → 상수에 할당된 숫자 200이 출력됩니다.
  • console.log(z); → 상수에 할당된 문자 javascript가 출력됩니다.
let과 const는 언제 사용할까?

변수(let)와 상수(const)는 자바스크립트에서 데이터를 다루는 데 있어 필수적인 도구입니다. 적절히 사용함으로써 프로그램의 유연성과 안정성을 동시에 확보할 수 있습니다.

  • 변하지 않을 값에는 const를 사용합니다. 이는 의도치 않은 재할당을 방지하고, 코드의 안정성을 높여줍니다.
  • const를 기본적으로 사용하는 것이 좋은 습관입니다. 왜냐하면 대부분의 변수는 재할당되지 않아야 하며, 이는 코드의 예측 가능성과 읽기 쉬움을 향상시키기 때문입니다.
  • 변할 수 있는 값에는 let을 사용합니다. 이는 값의 변경 가능성을 명시적으로 표현하며, 코드의 가독성을 향상시킵니다.
  • var의 사용은 지양합니다. let 이전에 사용방법이며, 혼란스러운 동작을 일으킬 수 있습니다. 가능하다면 let과 const로 대체하는 것이 요즘 자바스크립트 스타일에 부합합니다.
05. 배열 : 데이터 저장(여러개) : 배열 선언

배열은 여러개의 데이터를 순차적으로 저장합니다. 배열을 선언하고 데이터를 저장하는 표현 방식입니다. 

{
        const arr = new Array();        // 배열 선언

        arr[0] = 100;           // 배열 첫 번째 원소에 값 100을 할당합니다.
        arr[1] = 200;           // 배열 두 번째 원소에 값 200을 할당합니다.
        arr[2] = "javascript";  // 배열 세 번째 원소에 문자열 "javascript"을 할당합니다.

        console.log(arr[0]);    // 100
        console.log(arr[1]);    // 200
        console.log(arr[2]);    // javascript
}

변수는 하나의 데이터를 저장할 수 있지만, 배열은 여러개의 데이터를 순차적으로 저장할 수 있습니다. 배열을 선언 할 때에는 new Array()를 작성합니다.

  • console.log(x); → 배열 첫번째 요소에 할당된 숫자 100이 출력됩니다.
  • console.log(y); → 배열 두번째 요소에 할당된 숫자 200이 출력됩니다.
  • console.log(z); → 배열 세번째 요소에 할당된 문자 javascript를 출력됩니다.
06. 배열 : 데이터 저장(여러개) : 배열 선언과 동시에 초깃값 설정

배열은 여러개의 데이터를 순차적으로 저장합니다. 배열 선언과 동시에 초깃값을 설정하는 표현 방식입니다. 

{
        const arr = new Array(100, 200, "javascript");  // 배열 선언과 동시에 초깃값 설정

        console.log(arr[0]);    // 100
        console.log(arr[1]);    // 200
        console.log(arr[2]);    // javascript
}

배열 arr은 초기값으로 100, 200, "javascript"을 가지고 있으며, 각 원소에 접근하여 해당 값을 출력합니다. 이렇게 생성자를 사용하여 배열을 생성하면 한 줄로 여러 개의 값을 설정할 수 있습니다.

  • console.log(x); → 배열 첫번째 요소에 할당된 숫자 100이 출력됩니다.
  • console.log(y); → 배열 두번째 요소에 할당된 숫자 200이 출력됩니다.
  • console.log(z); → 배열 세번째 요소에 할당된 문자 javascript를 출력됩니다.
07. 배열 : 데이터 저장(여러개) : 리터럴 방식으로 배열 선언

배열은 여러개의 데이터를 순차적으로 저장합니다. 리터럴 방식으로 배열을 선업합니다. 

{
        const arr = [ ];            // arr라는 이름의 빈 배열을 생성합니다.

        arr[0] = 100;               // 배열 첫 번째 원소에 값 100을 할당합니다.
        arr[1] = 200;               // 배열 두 번째 원소에 값 200을 할당합니다.
        arr[2] = "javascript";      // 배열 세 번째 원소에 문자열 "javascript"을 할당합니다.

        console.log(arr[0]);        // 100
        console.log(arr[1]);        // 200
        console.log(arr[2]);        // javascript
}

빈 배열 arr을 생성하고 각각의 인덱스에 해당하는 원소에 값을 할당한 후, 해당 값을 출력합니다. 리터럴 방식은 new Array를 선언하지 않고, [ ]를 사용하여, 데이터에 접근합니다.

  • console.log(x); → 배열 첫번째 요소에 할당된 숫자 100이 출력됩니다.
  • console.log(y); → 배열 두번째 요소에 할당된 숫자 200이 출력됩니다.
  • console.log(z); → 배열 세번째 요소에 할당된 문자 javascript를 출력됩니다.
리터럴(literal)이란?

"리터럴(literal)"이란 프로그래밍에서 데이터 값을 소스 코드 안에 직접적으로 표현한 것을 의미합니다. 리터럴은 변수에 저장되거나, 함수에 인자로 전달될 수 있는 고정된 데이터를 나타냅니다. 다시 말해, 프로그램이 실행될 때 변수에 할당되거나 다른 표현식의 일부로 사용될 수 있는 구체적인 값을 직접적으로 기술하는 방법입니다.

  • 숫자 리터럴: 10, 3.14, -500 등 숫자 값을 직접 표현합니다.
  • 문자열 리터럴: 'Hello, world!', "JavaScript" 등 따옴표(' 또는 ")로 둘러싸인 텍스트를 표현합니다.
  • 논리 리터럴: true, false 값을 나타냅니다.
  • 배열 리터럴: [1, 2, 3], ['a', 'b', 'c'] 처럼 대괄호([]) 안에 요소들을 나열하여 배열을 직접 표현합니다.
  • 객체 리터럴: {name: 'Alice', age: 30} 처럼 중괄호({}) 안에 키-값 쌍을 나열하여 객체를 직접 표현합니다.
  • 함수 리터럴: function() {}이나 화살표 함수 표현식(() => {})을 사용하여 함수를 직접적으로 표현합니다.
08. 배열 : 데이터 저장(여러개) : 리터럴 방식으로 배열 선언과 동시에 초깃값 설정

배열은 여러개의 데이터를 순차적으로 저장합니다. 리터럴 방식으로 배열 선언과 동시에 초깃값을 설정합니다. 

{
        const arr = [100, 200, "javascript"];       // 배열 선언과 동시에 초기값을 설정

        console.log(arr[0]);    // 100
        console.log(arr[1]);    // 200
        console.log(arr[2]);    // javascript
}

배열 선언과 동시에 초깃값을 설정하고 출력합니다. 배열은 여러 값을 순서대로 저장하는 자료구조이며, 인덱스를 사용하여 원소에 접근할 수 있습니다.

  • console.log(arr[0]); → 배열 첫번째 요소에 할당된 숫자 100이 출력됩니다.
  • console.log(arr[1]); → 배열 두번째 요소에 할당된 숫자 200이 출력됩니다.
  • console.log(arr[2]); → 배열 세번째 요소에 할당된 문자 javascript를 출력됩니다.
09. 배열 : 데이터 저장(여러개) : 메서드를 이용한 데이터 저장

배열은 여러개의 데이터를 순차적으로 저장합니다. push() 메서드를 이용하여, 추가적으로 데이터를 저장 할 수 있습니다. 

{
        const arr = [];             // 빈 배열을 선언하고 초기화합니다.

        arr.push(100);              // 배열 마지막 요소에 숫자 100을 추가합니다.
        arr.push(200);              // 배열 마지막 요소에 숫자 200을 추가합니다.
        arr.push("javascript");     // 배열 마지막 요소에 문자열 "javascript"을 추가합니다.
        
        console.log(arr[0]);        // 100
        console.log(arr[1]);        // 200
        console.log(arr[2]);        // javascript
}

배열 메서드를 통해 데이터를 추가할 수 있습니다.

  • console.log(arr[0]); → 배열 첫번째 요소에 할당된 숫자 100이 출력됩니다.
  • console.log(arr[1]); → 배열 두번째 요소에 할당된 숫자 200이 출력됩니다.
  • console.log(arr[2]); → 배열 세번째 요소에 할당된 문자 javascript를 출력됩니다.
자바스크립트의 배열과 관련된 메서드는 다양하고, 각기 다른 용도로 사용됩니다. 여기 몇 가지 주요 메서드를 소개합니다
  • pop() 메서드는 배열 마지막 요소를 제거하고, 제거한 요소를 반환합니다.
  • push() 메서드는 배열 끝에 요소를 추가하고, 배열의 새로운 길이값을 반환합니다.
  • shift() 메서드는 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다.
  • unshift() 메서드는 배열 앞에 요소를 추가하고, 배열의 새로운 길이 값을 반환합니다.
10. 배열 : 데이터 저장(여러개) : 다차원 배열

배열은 여러 개의 데이터를 순차적으로 저장합니다. 다차원 배열은 배열의 요소로 또 다른 배열을 포함하는 유형입니다. 

{
        const obj = [                   // 배열 선언
            100,                        // 첫 번째 요소에는 숫자 100을 할당함
            [200, 300],                 // 두 번째 요소에는 배열 [200, 300]을 할당함
            ["javascript", "jquery"]    // 세 번째 요소에는 배열 ["javascript", "jquery"]을 할당함
        ];

        console.log(obj[0]);        // 100
        console.log(obj[1][0]);     // 200
        console.log(obj[1][1]);     // 300
        console.log(obj[2][0]);     // javascript
        console.log(obj[2][1]);     // jquery
}

배열 안에 배열을 넣어서 다차원 배열을 만들 수 있습니다. 이를 통해 데이터를 구조화하고, 복잡한 데이터 관계를 표현할 수 있습니다. 다차원 배열을 사용함으로써, 개발자는 효율적인 데이터 저장 및 접근 방식을 구현할 수 있습니다.

  • console.log(obj[0]); → 배열 첫번째 요소에 할당된 숫자 100이 출력됩니다.
  • console.log(obj[1][0]); → 배열 두번째 요소에 배열 첫 번째 요소 숫자 200이 출력됩니다.
  • console.log(obj[1][1]); → 배열 두번째 요소에 배열 두 번째 요소 숫자 300이 출력됩니다.
  • console.log(obj[2][0]); → 배열 세번째 요소에 배열 첫 번째 요소 문자 javascript이 출력됩니다.
  • console.log(obj[2][1]); → 배열 세번째 요소에 배열 두 번째 요소 문자 jquery이 출력됩니다.
11. 객체 : 데이터 저장(키와값) : 객체 선언 후 배열 방식으로 데이터 입력

객체는 여러 개의 데이터를 키와 값으로 저장합니다. 객체 선언 후 배열 방식으로 데이터를 저장하는 유형입니다. 

{
        const obj = new Object();   // 객체 선언

        obj[0] = 100;           // 배열 방식으로 첫 번째 요소에 숫자 100을 할당합니다.
        obj[1] = 200;           // 배열 방식으로 두 번째 요소에 숫자 200을 할당합니다.
        obj[2] = "javascript";  // 배열 방식으로 세 번째 요소에 문자 javascript를 할당합니다.

        console.log(obj[0]);    // 100
        console.log(obj[1]);    // 200
        console.log(obj[2]);    // javascript
}

객체도 변수 및 배열과 같이 데이터를 저장하는 저장소 역할을 합니다. 다만 객체는 변수 및 배열과 다르게 객체는 키(key)와 값(value)으로 데이터를 저장할 수 있습니다.

  • console.log(obj[0]); → 객체 첫번째 요소에 할당된 숫자 100이 출력됩니다.
  • console.log(obj[1]); → 객체 두번째 요소에 할당된 숫자 200이 출력됩니다.
  • console.log(obj[2]); → 객체 세번째 요소에 할당된 문자 javascript이 출력됩니다.
객체(Object)란?

객체(Object)는 프로그래밍에서 데이터와 해당 데이터에 적용되는 동작(메서드)을 그룹화한 것으로, 데이터와 기능을 하나의 단위로 묶어 표현하는 자료구조입니다. 객체는 다양한 유형의 데이터와 그에 관련된 동작을 한 곳에 모아서 표현함으로써 프로그램을 조직화하고 구조화하는 데 도움을 줍니다.

객체는 여러 속성과 메서드를 하나의 단위로 묶어서 사용하므로, 코드의 가독성과 재사용성을 높이는 데 도움이 됩니다. 자바스크립트를 포함한 다양한 프로그래밍 언어에서 객체 지향 프로그래밍(Object-Oriented Programming, OOP)의 핵심 개념 중 하나입니다. 객체는 현실 세계의 실체를 모델링하고 프로그램 내에서 효율적으로 다룰 수 있게 도와주는 중요한 도구입니다.

  • 속성 (Property): 객체의 속성은 데이터 값을 나타냅니다. 속성은 이름(키)과 값으로 구성되며, 이름은 일반적으로 문자열로 표현됩니다. 속성은 다양한 유형의 데이터를 포함할 수 있습니다. 예를 들어, 객체가 사람을 나타낼 경우 이름, 나이, 주소 등이 해당 객체의 속성이 될 수 있습니다.
  • 메서드 (Method): 객체의 메서드는 객체가 수행할 수 있는 동작을 정의합니다. 메서드는 함수의 형태를 가지며, 해당 객체와 관련된 작업을 수행합니다. 예를 들어, 객체가 자동차를 나타낸다면 주행, 멈춤, 가속 등의 동작을 메서드로 정의할 수 있습니다.
12. 객체 : 데이터 저장(키와값) : 객체 선언 후 객체 방식으로 데이터 입력

객체는 여러 개의 데이터를 키와 값으로 저장합니다. 객체 선언 후 객체 방식으로 데이터를 저장하는 유형입니다. 

{
        const obj = new Object();   // 객체 선언

        obj.a = 100;            // 'a' 속성에 숫자 100을 할당함
        obj.b = 200;            // 'b' 속성에 숫자 200을 할당함
        obj.c = "javascript";   // 'c' 속성에 문자 "javascript"를 할당함

        console.log(obj.a);     // 100
        console.log(obj.b);     // 200
        console.log(obj.c);     // javascript
}

이 코드는 객체 지향 프로그래밍의 기본적인 개념인 객체의 생성, 속성 할당 및 데이터 접근 방법을 보여줍니다. JavaScript에서는 이러한 방식으로 데이터를 구조화하고 관리하는 데 객체를 자주 사용합니다.

  • console.log(obj.a); → 'a' 속성에 할당된 숫자 100이 출력됩니다.
  • console.log(obj.b); → 'b' 속성에 할당된 숫자 200이 출력됩니다.
  • console.log(obj.c); → 'c' 속성에 할당된 문자 javascript이 출력됩니다.
13. 객체 : 데이터 저장(키와값) : 리터럴 방식으로 객체 선언

객체는 여러 개의 데이터를 키와 값으로 저장합니다. 리터럴 방식으로 객체를 선언하는 유형입니다. 

{
        const obj = {};         // 빈 객체 생성

        obj.a = 100;            // 'a' 속성에 숫자 100을 할당함
        obj.b = 200;            // 'b' 속성에 숫자 200을 할당함
        obj.c = "javascript";   // 'c' 속성에 문자 "javascript"를 할당함

        console.log(obj.a);     // 100
        console.log(obj.b);     // 200
        console.log(obj.c);     // javascript
}

빈 객체 obj를 생성하고 각 속성에 값을 할당한 후, 해당 값을 출력하는 예제입니다. 객체의 속성은 동적으로 추가하거나 변경할 수 있으며, 점 표기법을 사용하여 속성에 접근하고 값을 할당할 수 있습니다.

  • console.log(obj.a); → 'a' 속성에 할당된 숫자 100이 출력됩니다.
  • console.log(obj.b); → 'b' 속성에 할당된 숫자 200이 출력됩니다.
  • console.log(obj.c); → 'c' 속성에 할당된 문자 javascript이 출력됩니다.
14. 객체 : 데이터 저장(키와값) : 리터럴 방식으로 객체 선언과 동시에 초깃값을 설정

객체는 여러 개의 데이터를 키와 값으로 저장합니다. 리터털 방식으로 객체 선언과 동시에 초깃값을 설정하는 유형입니다. 

{
        const obj = {               // 객체 선언
                a: 100,             // 'a' 속성에 숫자 100을 할당함
                b: 200,             // 'b' 속성에 숫자 200을 할당함
                c: "javascript"     // 'c' 속성에 문자 "javascript"를 할당함
        };

        console.log(obj.a);     // 100
        console.log(obj.b);     // 200
        console.log(obj.c);     // javascript
}

초기값을 가진 객체 obj의 각 속성에 접근하여 해당 값을 출력합니다. 객체는 중괄호 내에 속성과 값을 나열하여 생성할 수 있으며, 속성에는 문자열이나 숫자를 사용할 수 있습니다.

  • console.log(obj.a); → 'a' 속성에 할당된 숫자 100이 출력됩니다.
  • console.log(obj.b); → 'b' 속성에 할당된 숫자 200이 출력됩니다.
  • console.log(obj.c); → 'c' 속성에 할당된 문자 javascript이 출력됩니다.
15. 객체 : 데이터 저장(키와값) : 배열안에 객체가 있는 방식

객체는 여러 개의 데이터를 키와 값으로 저장합니다. 배열 안에 객체를 저장하는 유형입니다. 

{
        const obj = [           // 배열 내 객체 생성 및 초기화
                { a: 100, b: 200, c: "javascript" },
                { a: 300, b: 400, c: "jquery" }
        ];

        console.log(obj[0].a);      // 100
        console.log(obj[0].b);      // 200
        console.log(obj[0].c);      // javascript
        console.log(obj[1].a);      // 300
        console.log(obj[1].b);      // 400
        console.log(obj[1].c);      // jquery
}

배열 안에 객체를 저장하고, 배열의 각 객체 요소의 속성을 접근하여 출력하는 예제입니다. 이 예제는 배열과 객체를 결합하여 사용하는 방법을 보여주며, 이러한 방식은 다양한 프로그래밍 시나리오에서 데이터를 효과적으로 조직하고 접근할 수 있게 해줍니다. 이 구조는 웹 개발에서 JSON 형식과 유사하게 널리 사용되며, API 응답을 처리하거나 복잡한 데이터를 관리할 때 특히 유용합니다.

  • console.log(obj[0].a); → 배열 첫 번째 요소에 'a' 속성에 할당된 숫자 100이 출력됩니다.
  • console.log(obj[0].b); → 배열 첫 번째 요소에 'b' 속성에 할당된 숫자 200이 출력됩니다.
  • console.log(obj[0].c); → 배열 첫 번째 요소에 'c' 속성에 할당된 문자 javascript가 출력됩니다.
  • console.log(obj[1].a); → 배열 두 번째 요소에 'a' 속성에 할당된 숫자 300이 출력됩니다.
  • console.log(obj[1].b); → 배열 두 번째 요소에 'b' 속성에 할당된 숫자 400이 출력됩니다.
  • console.log(obj[1].c); → 배열 두 번째 요소에 'c' 속성에 할당된 문자 jquery가 출력됩니다.
16. 객체 : 데이터 저장(키와값) : 객체안에 배열이 있는 방식

객체는 여러 개의 데이터를 키와 값으로 저장합니다. 객체 안에 배열을 저장하는 유형입니다. 

{
        const obj = {       // 객체 생성 및 배열 초기화
                a: 100,
                b: [200, 300],
                c: ["javascript", "jquery"]
        }

        console.log(obj.a);        // 100
        console.log(obj.b[0]);     // 200 
        console.log(obj.b[1]);     // 300
        console.log(obj.c[0]);     // javascript
        console.log(obj.c[1]);     // jquery
}

이 예제는 객체와 배열을 결합하여 사용하는 방법을 보여주며, 복잡한 데이터 구조를 효율적으로 조직하고 접근할 수 있도록 합니다. 객체의 속성에는 점 표기법을 사용하여 접근할 수 있으며, 배열 내의 원소에도 인덱스를 사용하여 접근할 수 있습니다. 이러한 방식은 데이터 모델링, 설정 관리, API 응답 처리 등 다양한 프로그래밍 상황에서 유용하게 사용될 수 있습니다.

  • console.log(obj.a); → 'a' 속성에 할당된 숫자 100이 출력됩니다.
  • console.log(obj.b[0]); → 'b' 속성에 할당된 첫 번째 배열 요소 숫자 200이 출력됩니다.
  • console.log(obj.b[1]); → 'b' 속성에 할당된 두 번째 배열 요소 숫자 300이 출력됩니다.
  • console.log(obj.c[0]); → 'c' 속성에 할당된 첫 번째 배열 요소 문자 "javascript"가 출력됩니다.
  • console.log(obj.c[1]); → 'c' 속성에 할당된 두 번째 배열 요소 문자 "jquery"가 출력됩니다.
17. 객체 : 데이터 저장(키와값) : 객체안에 객체가 있는 방식

객체는 여러 개의 데이터를 키와 값으로 저장합니다. 객체 안에 객체를 저장하는 유형입니다. 

{
        const obj = {       // 객체 생성 및 중첩 객체 초기화
                a: 100,
                b: {x: 200, y: 300},
                c: {x: "javascript", y: "jquery"}
        }

        console.log(obj.a);         // 100    
        console.log(obj.b.x);       // 200    
        console.log(obj.b.y);       // 300    
        console.log(obj.c.x);       // javascript
        console.log(obj.c.y);       // jquery
}

이 예제는 중첩된 객체 속성에 접근하여 해당 값을 출력하는 예제입니다. 객체 내에 다른 객체를 중첩하여 속성을 구성할 수 있으며, 중첩된 객체의 속성에도 마찬가지로 점 표기법을 사용하여 접근할 수 있습니다.

  • console.log(obj.a); → 'a' 속성에 할당된 숫자 100이 출력됩니다.
  • console.log(obj.b.x); → 중첩된 객체 'b' 속성 내에 할당된 'x' 숫자 200이 출력됩니다.
  • console.log(obj.b.y); → 중첩된 객체 'b' 속성 내에 할당된 'y' 숫자 300이 출력됩니다.
  • console.log(obj.c.x); → 중첩된 객체 'c' 속성 내에 할당된 'x' 문자 javascript가 출력됩니다.
  • console.log(obj.c.y); → 중첩된 객체 'c' 속성 내에 할당된 'y' 문자 jquery가 출력됩니다.
18. 객체 : 데이터 저장(키와값) : 객체안에 함수가 있는 방식

객체는 여러 개의 데이터를 키와 값으로 저장합니다. 객체 안에 함수를 저장하는 유형입니다. 

{
        const obj = {                   // 객체 생성 및 속성 초기화
                a: 100,                 // 숫자 데이터 초기화 설정
                b: [ 200, 300 ],        // 배열 데이터 초기화 설정
                c: { x: 400, y: 500 },  // 객체 데이터 초기화 설정
                d: "javascript",        // 문자열 데이터 초기화 설정
                e: function(){          // 함수 설정 : 함수를 객체의 속성으로 정의
                        console.log("javascript가 실행되었습니다.");
                },
                f: function(){          // 함수 설정 : 함수에서 객체 내 다른 속성을 참조
                        console.log(obj.d + "가 실행되었습니다.");
                },
                g: function(){          // 함수 설정 : 'this' 키워드를 사용하여 같은 객체 내 속성 참조
                        console.log(this.d + "가 실행되었습니다.");
                }
        }

        console.log(obj.a);     // 100
        console.log(obj.b[0]);  // 200
        console.log(obj.b[1]);  // 300
        console.log(obj.c.x);   // 400
        console.log(obj.c.y);   // 500
        console.log(obj.d);     // javascript
        obj.e();                // javascript가 실행되었습니다.
        obj.f();                // javascript가 실행되었습니다.
        obj.g();                // javascript가 실행되었습니다.
}

객체를 활용하여 다양한 데이터 타입과 함수를 포함하는 복합 객체를 생성하는 방법을 보여주는 예제입니다. 객체 obj는 숫자, 배열, 다른 객체, 문자열, 그리고 여러 함수를 속성으로 포함하고 있습니다. 함수 실행시 객체 내 다른 속성을 참고하는 방법, 'this' 키워드를 사용하여 참고하는 방법을 보여주고 있습니다.

  • console.log(obj.a); → 'a' 속성에 할당된 숫자 100이 출력됩니다.
  • console.log(obj.b[0]); → 'b' 속성에 할당된 첫 번째 배열 요소 숫자 200이 출력됩니다.
  • console.log(obj.b[1]); → 'b' 속성에 할당된 두 번째 배열 요소 숫자 300이 출력됩니다.
  • console.log(obj.c.x); → 중첩된 객체 'c' 속성 내에 할당된 'x' 숫자 400이 출력됩니다.
  • console.log(obj.c.y); → 중첩된 객체 'c' 속성 내에 할당된 'y' 문자 500이 출력됩니다.
  • console.log(obj.d); → 'd' 속성에 할당된 문자 "javascript"가 출력됩니다.
  • obj.e(); → 함수가 실행되고 "javascript가 실행되었습니다"를 출력합니다.
  • obj.f(); → 함수가 실행되고 "javascript가 실행되었습니다"를 출력합니다.
  • obj.g(); → 함수가 실행되고 "javascript가 실행되었습니다"를 출력합니다.