Fiat Lux

length

자바스크립트에서 배열과 문자열 등과 같은 객체의 크기(문자열의 길이)를 나타내는 속성이다.

배열과 문자열 객체에 존재하는 프로퍼티로,  해당 객체의 요소의 수를 반환한다.

배열의 경우, length 프로퍼티는 배열의 인덱스 중 가장 큰 값을 1 증가시킨 값과 같다.

인덱스가 0부터 시작하기 때문이다.

문자열의 경우, length의 프로퍼티는 문자열의 길이(공백을 포함)를 반환하며, 함수에서는 함수가 가지고 있는 매개변수의 갯수를 나타낸다.

length 프로퍼티는 읽기 전용 속성이기 때문에 코드에서 명시적으로 값을 할당할 수 없다.

또한 배열의 length 값을 직접 변경하여 배열의 길이를 늘이거나 줄일 수도 없다.

형식

문자열.length 

ex) 

let str = "I want to go home".length;			//문자열.length

//17

charAt( )

자바스크립트의 문자열 객체에서 사용되는 charAt( ) 메서드는 주어진 index(인덱스)에 해당하는 위치에 있는 문자를 반환한다.

charAt( ) 메서드는 문자열 인덱스를 인수로 받는다.

인덱스는 0부터 시작하며, 문자열의 마지막 인덱스는 문자열의 길이에서 1을 뺀 값이다.

만약 인덱스가 문자열의 범위를 벗어날 경우 빈 문자열(" ")을 반환한다.

따라서, 인덱스 값이 음수이거나 문자열의 길이가 큰 경우 charAt() 메서드는 빈 문자열을 반환한다.

참고로 문자열 객체의 문자에 접근할 때 인덱스가 아닌 대괄호 [ ]를 사용하는 방법도 있다.

형식

문자열.charAt(위치)

ex)

let str = "I want to go home"

str.chatAt(3)				//a
console.log(str[3])			//a

indexOf( )

이 메서드는 문자열에서 특정 문자열의 첫 번째 인덱스를 반환한다.

만약 문자열 안에 해당 문자열이 없으면 -1을 반환한다.

소괄호 ( ) 안에 찾고자 하는 문자열과 매개변수를 작성할 수 있다.

숫자는 검색을 시작할 인덱스이며, 이 매개변수를 생략하면 문자열의 처음부터 검색을 시작한다.

음수 값을 입력하면 문자열의 끝에서부터 검색을 시작한다.

형식

indexOf(문자열) or    indexOf(문자열, 위치)

ex)

"javascript reference".lastIndexOf("javascript");

console.log("javascript reference".lastIndexOf("r"));                               //15
console.log("javascript reference".lastIndexOf("javascript",0));                    //0
console.log("javascript reference".lastIndexOf("javascript",1));                    //0

startsWith( )

문자열이 특정 문자열로 시작하는지 여부를 확인하는 자바스크립트 내장 메서드이다.

찾고자 하는 문자열의 이름을 메서드의 앞에 작성하고 소괄호 ( ) 안에는 찾고자 하는 문자열과 검색을 시작할 인덱스를 작성할 수 있다.

이 메서드는 대소문자를 구분한다.

인덱스값은 선택사항이며, 이 인덱스를 포함하여 문자열에서 검색을 시작한다.

이 인자가 생략될 경우 검색은 문자열의 처음부터 시작된다.

startsWith( ) 메서드는 결과값으로 불린(true, false)를 반환한다.

형식

문자열.startsWith( )

ex)

const str = "Hello, world!";
console.log(str.startsWith("Hello")); // true
console.log(str.startsWith("World")); // false
console.log(str.startsWith("world", 7)); // true

EndsWith( )

이 메서드는 문자열이 특정 문자열 또는 문자로 끝나는지 여부를 확인하는데 사용된다.

EndsWith( ) 메서드는 두 개의 매개변수를 받을 수 있다.

첫 번째 매개변수는 검색하려는 문자열 또는 문자이며, 두 번째 매개변수는 선택적으로 검색을 종료할 인덱스를 지정할 수 있다.

EndsWith( ) 메서드 역시 불린 값을 반환하며, 문자열이 지정된 문자열 또는 문자로 끝나면 true를, 그렇지 않으면 false를 반환한다.

형식

문자열.endsWith( )

or

문자열.endsWith(찾을 문자열, 길이)

ex)

const str = "Hello, world!";
console.log(str.endsWith("!")); // true
console.log(str.endsWith("world")); // false
console.log(str.endsWith("Hello", 5)); // true

includes( )

자바스크립트에 있는 내장 메서드이다.

문자열에서 특정 부분 문자열이 존재하는지를 확인하기 위하혀 사용된다.

이 메서드는 문자열에 대해 참과 거짓(불린/true, false) 값을 반환한다.

만약 문자열이 특정 부분 문자열을 포함하고 있으면 참(true)를 반환하고 그렇지 않으면 거짓(false)를 반환한다.

형식

문자열.includes(찾을 문자열)

ex)

const str = 'Hello, world!';
const substring = 'world';
const result = str.includes(substring);
console.log(result); // 출력 결과: true

trim( )

문자열 양 끝의 공백을 제거하는데 사용된다.

trim( ) 메서드는 공백이 제거된 새 문자열을 반환한다.

원본 문자열은 변경시키지 않는다.

trim( ) 메서드는 사용자가 입력한 폼 데이터의 공백 제거, 문자열 검색을 위해 문자열의 앞뒤 공백 제거, 문자열을 비교하기 전에 앞뒤 공백을 제거하여 정확한 비교 수행 등에 사용된다.

형식

문자열.trim( )

ex)

const str = "   Hello, World!   ";

const trimmedStr = str.trim(); // "Hello, World!"

trimStart( )

자바스크립트의 내장 메서드로써, 문자열의 시작 부분에서부터 공백을 제거한다.

주어진 문자열의 시작 부분에서 모든 공백을 제거한 새로운 문자열을 반환한다.

이때, 원본 문자열은 변경되지 않는다.

이 메서드는 ES2019(또는 ES10)에서 추가되었으며,  이전에는 trimLeft( ) 메서드로 불렸으나 ECMAScript 2021에서 이름이 변경되었다.

형식

문자열.trimStart

ex)

const greeting = '     Hello, world!     ';
console.log(greeting); // '     Hello, world!     '
console.log(greeting.trimStart()); // 'Hello, world!

trimEnd( )

문자열의 끝에서부터 공백 문자를 제거한 후, 새로운 문자열을 반환한다.

즉, 문자열 끝에 여러 개의 공백이 있을 경우 모든 공백을 제거하는 것이다.

이 메서드는 ES2019(ES10)에서 추가되었다.

이전에는 이와 같은 기능을 수행하기 위해 String.prototype.trimRight( ) 메서드를 사용하였으나 trimEnd( )로 이름이 변경되었다.

trimEnd( ) 메서드 또한 원본 문자열을 변경하지 않는다.

대신, 공백을 제거한 새로운 문자열을 반환한다.

문자열의 시작부분에서부터 모든 공백을 제거하는 trimStart( )메서드와 달리 문자열의 끝의 공백만을 제거한다.

형식

문자열.trimEnd( )

ex)

const str = "     Hello World!     ";
console.log(str.trimEnd()); // "     Hello World!"

toUpperCase( )

자바스크립트에서 문자열을 대문자로 변환하는 함수이다.

이 함수는 문자열 객체의 메서드로 사용되며, 원래 문자열을 수정하지 않고 대문자로 변환된 새로운 문자열을 반환한다.

대문자로 변환된 문자열을 만들어야 할 때 유용하며, 대소문자 구분을 하지 않는 문자열 검색과 비교에도 사용할 수 있다.

형식

문자열.toUpperCase( )

ex)

let str = "hello world";
let upperCaseStr = str.toUpperCase();

console.log(upperCaseStr); // 출력결과: "HELLO WORLD"

toLowCase( )

자바스크립트에서 문자열을 소문자로 변환하는 함수이다.

이 함수는 문자열 객체의 메서드로 사용되며, 원래 문자열을 수정하지 않고 소문자로 변환된 새로운 문자열을 반환한다.

소문자로 변환된 문자열을 만들어야 할 때 유용하며, toUpperCase( )처럼 대소문자 구분을 하지 않는 문자열 검색과 비교에서 사용될 수 있다.

형식

문자열.toLowCase( )

ex)

let str = "HELLO WORLD";
let lowerCaseStr = str.toLowerCase();

console.log(lowerCaseStr); // 출력결과: "hello world"

substring( )

문자열에서 지정된 위치에 있는 문자들의 부분 문자열(substring)을 반환한다.

이 메서드는 문자열 객체의 메서드로 사용된다.

substring( ) 메서드는 두 개의 매개변수를 가질 수 있다. (추출할 부분의 시작 위치와 끝 위치를 인수로 받는다.)

첫 번째 매개변수는 부분 문자열의 시작 인덱스이고, 두 번째 매개변수는 부분 문자열의 끝 인덱스이다.

두 번째 매개변수는 생략할 수 있으며, 생략한 경우 문자열의 끝부분까지 부분 문자열을 반환한다.

substr( ) 함수와 비슷하게 동작하지만, substr( ) 함수는 첫 번째 인수로 시작 위치와 두 번재 인수로 추출할 문자열의 길이를 받는 것에 반해, substring( ) 함수는 시작 위치와 끝 위치를 받는다.

형식

문자열. substring(시작 위치)

or

문자열.substring(시작 위치, 끝 위치)

ex)

let str = "hello world";
let subStr = str.substring(0, 5);

console.log(subStr); // 출력결과: "hello"

slice( )

문자열에서 일부분을 추출하여 새로운 문자열을 반환하는 함수이다.

이 함수는 문자열 객체의 메서드로 사용되며, 추출할 부분의 시작 위치와 끝 위치를 인수로 받는다.

slice( ) 함수는 첫 번째 인수로 시작 위치를, 두 번째 인수로 추출할 부분의 끝 위치를 지정한다.

첫 번째 인수는 필수적이며, 두 번째 인수는 선택적이다.

두 번째 인수를 생략하면 추출할 문자열은 첫 번째 인수로 지정된 위치부터 문자열의 끝까지를 추출하여 반환한다.

slice( ) 함수는 substring( ) 함수과 비슷하게 동작하지만, substring( ) 함수는 음수 값을 받지 않고, 시작 위치와 끝 위치를 자동으로 정렬한다.

그러나 slice( ) 함수는 음수 값을 받을 수 있으며, 시작 위치와 끝 위치를 지정한대로 추출한다.

형식

문자열.slice(시작 위치)

or

문자열.slice(시작 위치, 끝 위치)

ex)

let str = "hello world";
let subStr = str.slice(0, 5);

console.log(subStr); // 출력결과: "hello"

split( )

문자열을 지정한 구분자를 기준으로 분할하여 배열로 반환하는 함수이다.

이 함수는 문자열 객체의 메서드로 사용되며, 구분자는 인수로 전달된다.

구분자는 문자열, 정규식, 혹은 구분자를 지정하지 않을 수도 있다.

split( ) 함수는 주로 문자열을 파싱^[각주:1]하거나 특정 문자열을 기준으로 분할해야할 때 사용된다.

형식

문자열.split(구분자)

ex)

let str = "apple,banana,kiwi";
let arr = str.split(",");

console.log(arr); // 출력결과: ["apple", "banana", "kiwi"]

화살표 함수 - 익명 함수 + 매개변수 함수 + 리턴값 함수

const func = (str) => {
        return str;
    };
    document.write(func("실행되었습니다"))

func 함수는 하나의 매개변수 str을 받아들이고, 이 매개변수를 그대로 반환한다.

함수가 호출될 때, func("실행되었습니다")와 같이 문자열 "실행되었습니다"가 매개변수로 전달된다.

이 문자열은 함수 내부에서 str이라는 매개변수에 저장된다.

그리고 이 함수는 return 키워드를 사용하여 매개변수 str을 반환한다.

즉, 문자열 "실행되었습니다"가 반환된다.

document.write() 함수를 사용하여 반환된 문자열이 화면에 표시된다.

화살표 함수 - 익명 함수 + 매개변수 함수 + 리턴값 함수 (괄호가 생략된 형태)

 const func = str => {
    return str;
    }
    document.write(func("실행되었습니다"))

함수의 이름은 func이고, 매개변수는 str이다.

화살표 함수의 형태를 사용하여 함수를 정의한다.

return 키워드를 사용하여 str 매개변수를 반환한다.

이 함수는 문자열을 받아들이고 그 문자열을 그대로 반환하는 기본적인 함수이다.

마지막으로 document.write( ) 함수를 사용하여 반환된 문자열을 추ㅜㄹ력한다.

func("실행되었습니다") 라인에서 함수가 호출되며, 이때 매개변수로 문자열 "실행되었습니다"가 전달된다.

그리고 함수는 전달받은 문자열 "실행되었습니다"를 반환하고, 이 문자열이 document.write( )를 통해 출력된다.

화살표 함수 - 익명 함수 + 매개변수 함수 + 리턴값 함수 (괄호와 return이 생락된 형태)

const func = str => str;
    document.write(func("실행되었습니다"))

const func = str => str; 라인에서 함수의 이름은 func이고, 매개변수는 str 이다.

화살표 함수의 형태를 사용하여 함수를 정의한다.

함수의 본문은 return 키워드 없이 str 매개변수를 그대로 반환한다.

이 함수는 문자열을 받아들이고, 받아들인 문자열을 그대로 반환하는 기능을 가졌다.

func("실행되었습니다")를 호출하여 문자열 "실행되었습니다"를 전달한다.

이때, 함수 내부에서는 매개변수 str이 문자열 "실행되었습니다"로 설정되고, 이 문자열이 함수 내부의 표현식으로 평가된다.

그리고 평가된 문자열이 바로 함수의 반환 값이 된다.

마지막으로 document.write( ) 함수를 사용하여 반환된 문자열을 출력한다.

func("실행되었습니다") 라인에서 함수가 호출되며, 이때 매개변수로 문자열 "실행되었습니다"가 전달된다.

그리고 함수는 전달받은 문자열 "실행되었습니다"를 반환하고, 이 문자열이 document.write( )함수를 통해 출력한다.

함수 유형 - 함수와 매개변수를 이용한 형태

{
    function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
    }
    func("1", "함수", "실행");
    func("2", "자바스크립트", "실행");
    func("3", "리액트", "실행");
}
document.write("<br>",1,"<br>");

func 함수는 세 개의 매개변수 num, str1, str2를 가지고 있다.

이 함수는 document.write( ) 메서드를 사용하여 입력받은 세 개의 매개변수를 조합하여 문서에 출력한다.

먼저 "func" 라는 이름의 함수가 정의되어 있다.

이 함수는 세 개의 입력값 (num, str1, str2)을 받아서 document.write( ) 메서드를 사용하여 입력된 내용을 화면에 출력한다.

그리고 함수를 세 번 호출하면서, 각 호출마다 다른 입력값(num, str1, str2)를 전달한다.

함수를 호출하는 부분에서는 func( ) 함수에 첫 번째 인자로 1, 두 번째 인자로 "함수", 세 번째 인자로 "실행"을 전달하여 호출하고, 두 번째와 세 번 째 호출에서는 각각 "자바스크립트", "리액트"를 첫 번째 인자 대신 전달하여 호출한다.

함수 유형 - 함수와 변수를 이용한 형태

 function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
    }
    const youNum1 = 1;
    const youNum2 = 2;
    const youNum3 = 3;

    const youStr1 = "함수";
    const youStr2 = "자바스크립트";
    const youStr3 = "리액트";

    const youCom1 = "실행 ";

    func(youNum1, youStr1, youCom1);
    func(youNum2, youStr2, youCom1);
    func(youNum3, youStr3, youCom1);

func()는 num, str1, str2까지 총 세 개의 매개변수를 가지며, 각각 숫자와 문자열 속성을 가진다.

주어진 매개변수를 사용하여 문장을 생성하고 이 문장을 document.write를 사용하여 웹 페이지에 출력한다.

이 함수를 사용하기 위해 youNum1, youStr1 등이 상수로 선언되어 있으며, 각각 숫자와 문자열을 저장하는데 사용된다.

func()함수를 호출하여 출력할 문장을 생성한다.

각각의 호출은 num으로 숫자열을, str1로 첫번째 문자열을, str2로 두번째 문자열을 전달한다.

이렇게 전달된 매개변수들은 함수에 의해 문장으로 조합되어 출력된다.

함수 유형 - 함수와 배열을 이용한 형태 

function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
    }
    const num = [1, 2, 3];
    const info = ["함수", "자바스크립트", "리액트", "실행"];

    func(num[0], info[0], info[3]);
    func(num[1], info[1], info[3]);
    func(num[2], info[2], info[3]);

함수 func()는 세 개의 매개변수를 가지며, 문장을 생성하고 출력한다.

매개변수 num은 숫자, str1과 str2는 문자열 타입이다.

상수(const) num은 [1,2,3] 배열을 할당 받으며, 상수 info는 ["함수", "자바스크립트", "리액트","실행"] 배열을 할당받는다.

이 배열들은 각각 숫자와 문자열을 저장하는데 사용된다.

함수 func()를 호출할 때, 배열의 인덱스(키)를 사용하여 각가의 매개변수를 전달한다.

첫번째 호출에서는 num[0], info[0], info[3]을 전달하고,

두번째 호출에서는 num[1], info[1], info[3]을 전달한다. 같은 방식으로 인덱스만 바뀌어 세번째 호출도 수행된다.

함수 func()는 이러한 매개변수를 사용하여 문장을 생성하고, 문장은 document.write를 사용하여 출력된다.

출력된 문장은 "숫자. 문자열1 이 문자열2 가 되었습니다"의 형태를 갖는다.

함수 유형 - 함수와 객체를 이용한 형태

function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
    }
    const info = {
        num1: 1,
        name1: "함수",
        num2: 2,
        name2: "자바스크립트",
        num3: 3,
        name3: "리액트",
        word: "실행"
    }
    func(info.num1, info.name1, info.word);
    func(info.num2, info.name2, info.word);
    func(info.num3, info.name3, info.word);

상수(const)info는 객체 형태를 띄며 num1, num2, num3, name1, name2, name3, word까지 7개의 속성을 가진다.

이 속성들을 각각 숫자와 문자열을 저장하며, 이들은 함수 호출 시에 매개변수로 사용된다.

함수 func()를 호출할 때는, 객체 info의 속성에 접근하여 각각의 매개변수를 전달한다.

첫번째 호출에서는 info.num1, info.name1, info.word를 전달하고,

두번째 호출에서는 info.num2, info.name2, info.word를 전달한다. 같은 방식으로 세번째 호출도 실행된다.

객체를 불러오는 방식으로 .(온점)을 찍어 속성에 접근하여 매개변수를 전달할 수 있게 한다.

함수 유형 - 함수와 배열, 객체를 이용한 형태

function func(num, str1, str2) {
        document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "");
    }
    const info = [
        {
            num: 1,
            name: "함수",
        }, {
            num2: 2,
            name: "자바스크립트"
        }, {
            num3: 3,
            name: "리액트",
            word: "실행"
        }
    ]
    func(info[0].num, info[0].name, info[2].word);
    func(info[1].num2, info[1].name, info[2].word);
    func(info[2].num3, info[2].name, info[2].word);

상수(const)info는 배열 형태를 띄며, 배열 안에는 세 개의 객체가 저장되어 있다.

객체마다 숫자와 문자열을 저장하며, 세번째 객체는 word라는 속성도 추가로 갖는다.

함수 func를 호출할 때는, 배열 info의 각 객체에 접근하여 각각의 매개변수를 전달한다.

배열의 값에 접근하기 위해 [ ] 대괄호를 사용하고 객체의 값에 접근하기 위해 .(온점)을 사용한다.

배열 안에 객체가 있는 형태를 갖추고 있기 때문에 배열의 값에 접근하는 방법과 객체의 값에 접근하는 방법 두 가지 모두를 사용한다.

함수 유형 - 객체 안에 함수를 이용한 형태

const info = {
        num1: 1,
        name1: "함수",
        num2: 2,
        name2: "자바스크립트",
        num3: 3,
        name3: "리액트",
        word: "실행",
        result1: function(){
            document.write(info.num1 + ". " + info.name1 + "가 " + info.word + "되었습니다", "<br>");
        },
        result2: function(){
            document.write(info.num2 + ". " + info.name2 + "가 " + info.word + "되었습니다", "<br>");
        },
        result3: function(){
            document.write(info.num3 + ". " + info.name3 + "가 " + info.word + "되었습니다", "<br>");
        }
    }
    info.result1();
    info.result2();
    info.result3();

상수 info는 객체를 나타내며, 속성으로 숫자와 문자열을 저장한다.

또한 result1~3까지 속성으로 추가되어 있다.

이들 속성은 함수를 나타내며, 문장을 생성하고 출력한다.

각각의 속성들은 다음과 같은 역할이다.

num1, num2, num3:  각각 숫자 값을 가진다.

name1, name2, name3: 각각 문자열 값을 가진다.

word: 문자열 값을 가진다.

result1, result2, result3: 함수 값을 가진다. 각각의 함수는 document.write 메서드를 사용하여 입력된 속성 값을 조합하여 웹 페이지에 출력한다.

result1, result2, result3이 전부 객체의 속성이기 때문에 함수를 세 번 호출하기 위해  info 뒤에 온점을 찍어 객체 안에 저장되어 있는 result에 접근한다.

함수 유형 - 객체 생성자 함수

function Func (num, name, word) {
        this.num = num;                
        this.name = name;
        this.word = word;

        this. result = function () {
            document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다", "<br>");
    }
    }
    //인스턴스 생성
    const info1 = new Func(1,"함수","실행");             
    const info2 = new Func(2,"자바스크립트","실행");  
    const info3 = new Func(3,"리액트","실행"); 

    info1.result();
    info2.result();
    info3.result();

Func라는 생성자 함수를 정의하고, 해당 함수를 통해 객체를 생성하는 방식이다.

생성자 함수는 num, name, word 3개의 인자를 받아서 해당 인자를 프로퍼티로 가지는 객체를 생성한다.

this 키워드를 통해 생성된 객체의 프로퍼티를 저장한다.

result라는 메서드는 생성자 함수 Func를 통해 생성된 객체에 포함되는 함수로, 프로퍼티를 참조하여 결과값을 출력하는 역할을 한다.

생성자 함수는 일반 함수와 차이를 두기 위해 함수명의 첫 문자를 대문자로 표현한다.

생성자 함수로 생성된 객체의 속성 추가, 삭제, 변경은 다른 객체의 속성에 영향을 주지 않는다.

또한, 함수 안의 this는 함수를 통하여 생성되는 객체를 의미한다.

함수 유형 - 프로토타입 함수

 function Func(num, name, word) {
        this.num = num;
        this.name = name;
        this.word = word;
    }
    Func.prototype.result = function (){
        document.write(this.num + ". " + this.name + "가 " + this.word + "되었습니다", "");
    }
    const info1 = new Func(1,"함수","실행");             
    const info2 = new Func(2,"자바스크립트","실행");  
    const info3 = new Func(3,"리액트","실행");

    info1.result();
    info2.result();
    info3.result();

생성자 함수 Func를 정의하고 Func.prototype 객체에 result 메서드를 추가한 후, "new" 연산자를 사용하여 생성자 함수를 호출하여

객체 인스턴스를 생성하고, 생성된 인스턴스에서 result 메서드를 호출한다.

Func 생성자 함수는 num, name, word 3개의 인자를 받아서 객체의 프로퍼티로 할당한다.

Func.prototype.result 메서드는 생성된 객체 인스턴스에서 호출될 수 있도록 프로토타입 체인에 추가된다.

result 메서드는 this를 통해 함수 안에 생성된 데이터를 이용하여 문장을 만들고 이를 document.write를 이용하여 출력한다.

생성자 함수에서 정의한 속성을 그대로 상속받는다.

생성자 함수 내에 정의하지 않고도 생성된 객체에서 호출하여 사용할 수 있다.

변수 : 데이터 불러오기

:변수 안에 저장 된 데이터를 불러오는 방법.

let x = 100, y = 200, z = "javascript";

    console.log(x, y, z);

console.log나 document.write를 사용하여 선언한 변수를 불러올 수 있다.

변수는 ( ) 소괄호를 사용하여 불러온다.

상수 : 데이터 불러오기

:상수 안에 저장된 데이터를 불러오는 방법

let x = 100, y = 200, z = "javascript";

    console.log(x, y, z);

상수의 값은 변하지 않는다.

상수의 값을 재선언할 시, 오류 창이 뜨며 결과값이 출력되지 않는다.

배열 : 데이터 불러오기

:배열 안에 저장 된 데이터를 불러오는 방법 

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

    console.log(arr[0], arr[1], arr[2]);

출력문에 반드시 배열을 뜻하는 arr[ ]를 추가 시켜야 한다.

변수나 상수와 다르게 x, y, z 등의 문자를 키로 사용하지 않고 숫자(0, 1, 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]);

javascript와 react는 [2]번 키 안에 들어있는 2차 배열이다.

일반 배열처럼 arr[키]만 적어주게 되면 값이 아니라 배열 자체가 불러와지므로, arr[큰 배열의 키][작은 배열의 키]의 형식으로 출력문을 작성해 주어야 한다.

배열 : 데이터 불러오기 (갯수 구하기)

:배열 안에 들어있는 값의 갯수를 구하는 방법

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

    console.log(arr.length)

출력문 안에 arr[키] 대신 길이, 범위 등을 뜻하는 length를 넣어 배열이 얼마나 긴지, 즉 배열 안에 값이 몇 개가 들어있는지를 불러올 수 있다.

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

:for문을 사용하여 배열 안에 있는 여러 개의 데이터를 불러오는 방법.

1. {
    const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
            
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
    console.log(arr[3]);
    console.log(arr[4]);
    console.log(arr[5]);
    console.log(arr[6]);
    console.log(arr[7]);
    console.log(arr[8]);
}

2. 
{
    [for(let i = 0; i<9; i++) {
        console.log(arr[i]);
    }
}

for문을 통해 다수의 console.log 없이 배열에 저장된 많은 데이터를 불러올 수 있다.

for문을 사용하지 않으면 1번처럼 여러 개의 출력문을 일일히 작성해주어야 하지만, 반복문을 사용하면 여러 개의 출력문을 작성할 필요 없이 데이터를 불러올 수 있다.

for문은 i 값이 참이어야만 i가 증가하며, 증가한 식은 출력문을 통해 출력된다.

2번 식 같은 경우, 등호가 존재하지 않아 i값이 9가 되면 조건문이 거짓이 되어 식이 자동으로 종결된다.

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

:for문 안에 for문이 또 있는 구조로, 첫번째 for문이 1번 반복될 동안,  안에 있는 for문은 여러 번 반복된다.

 for(let i=1; i<=10; i++ ){
        console.log("i : " + i);
        for(let j=1; j<=10; j++){
            console.log("j : " + j);
        }
    }

for문을 중첩하여 사용하기 때문에 여러 개의 식을 반복할 수 있다.

먼저 오는 for문이 큰 단락이 되며, 두 번째로 오는 for문은 그 안의 내용이 된다.

이 식 같은 경우, 첫번째 for문 (i)가 1번 반복되는 동안, 두번째 for문(j)는 10번 반복된다.

중첩 for문은 for문 안의 변수를 서로 다른 것으로 선언해야 한다.

변수는 값이 변경될 수 있기 때문이다.

배열 : 데이터 불러오기 (forEach)

:배열 메소드(Method)^[각주:1] 중 하나로, 반복문을 사용하여 배열의 요소에 하나씩 접근하여 각 요소에 대해 주어진 함수를 호출한다.

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>");
    })

배열에서만 사용할 수 있다는 특징이 있다.

또한 값, 요소값, 인덱스값(키), 배열을 불러올 수 있다는 특징이 있다.

forEach문은 화살표 함수로 간단하게 표현할 수도 있으며, 배열의 요소를 가져와서 함수를 실행해야 할 때, 배열 안에 저장된 데이터가 많을 때 등의 상황에서 주로 사용한다.

forEach문 앞에 배열 이름을 붙여주어야 하며, 출력문에 arr[변수] 형식을 사용하지 않고 

출력하고 싶은 것이 요소인지, 배열인지, 키인지에 따라 출력문에 들어가는 구문이 달라진다.

배열 : 데이터 불러오기 (for of)

:반복 가능한 자료(배열, 객체 등)를 순회할 때 사용하는 반복문이다.

 const arr = [100, 200, 300, 400, 500];
            
    for(let i of arr) {                                 //타겟, 대상을 정해준 다음 그 값을 i라고 선언하는 것.
        document.write(i,",");
    }

arr 안에 배열 값이 있는 동안 계속 반복되는 반복문으로, (let 값 of  반복 가능한 자료)의 형식을 가지고 있다.

출력해야할 타겟, 대상을 정하여 변수 선언을 해주어야 하며, 출력문에는 변수 이름을 넣어주어야 한다.

for문과는 다르게 인덱스(index)나 조건식을 사용하지 않고, 객체의 값을 직접 가져와서 처리할 수 있다.

객체의 요소를 하나씩 순회하며 각 요소를 처리하는 용도로 사용된다.

배열 : 데이터 불러오기 (for in)

:객체의 속성을 순회할 때 사용되는 반복문.

객체의 속성을 하나씩 순회하며, 각 속성의 키(이름)을 가져올 수 있다.

const arr = [100, 200, 300, 400, 500]
    for (let i in arr) {                            //index, 즉 자리값이 출력됨.
        document.write(i); or document.write(arr[i]);
    }

객체의 속성을 하나씩 순회하며 각 속성을 처리하는 용도로 사용된다.

for in문은 배열이나 문자열과 같은 다른 자료형에서는 사용할 수 없다.

객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호 [ ]를 사용한다.

출력문 안에 arr[i]를 넣을 시, 값이 출력되나,i만 작성시 값이 출력되지 않고 키만 출력된다.

배열을 순회할 때는 for of를 사용하고 문자열을 순회할 때는 for of나 for문을 사용해야 한다.

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

: 배열 안의 데이터를 다시 배열로 만드는 메소드(method)이다.

const num = [100, 200, 300, 400, 500]
    num.map(function(el, i, a){
        document.write(el,"<br>")
        document.write(i,"<br>")
        document.write(a,"<br>")
    });

배열의 각 요소를 순회하며 콜백 함수를 실행하고 그 결과를 모아서 새로운 배열을 만든다.

기존 배열을 변경하지 않고 새로운 배열을 만들 수 있다.

배열 요소를 순회하며 어떤 계산을 수행하거나 요소를 다른 형태로 변환할 수 있다.

문자열의 배열에서 각 문자열의 길이를 구하거나 객체·배열에서 특정 속성값을 추출하여 새로운 배열을 만들 때 주로 사용된다.

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

:배열에 포함된 항목을 목록으로 바꾸어 주는 연산자

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

     console.log(arr1);
     console.log(...arr1,);
     console.log(...arr1, ...arr2);

펼침연산자: spread operator

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

대괄호 안에서 배열의 요소를 중괄호 안에서 객체의 속성을 문자열에서는 문자열을 개별 문자로 분리할 수 있다.

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

:배열의 요소를 분해하여 여러 변수에 할당할 수 있다.

let a, b, c;

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

    console.log(a)
    console.log(b)
    console.log(c)

배열의 요소를 개별 변수에 할당하는 방법 중 하나이며, 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있다.

배열 구조 분해 할당은 대괄호[ ]를 사용하여 구현한다.

변수의 선언과 할당을 동시에 처리할 수 있다.

배열 구조 분해 할당을 사용하여 변수를 처리할 수도 있다.

또한 기존에 존재하는 변수에도 값을 할당할 수 있다.

배열 구조분해할당을 사용하면 변수를 일일히 선언하거나 값을 할당하는 코드를 줄일 수 있다.

함수의 매개변수에서도 사용할 수 있으며, 배열이나 객체의 중첩된 값에도 적용할 수 있다.

객체: 데이터 불러오기

:객체 안이 있는 값을 .(온점)을 찍어 불러오는 방법

const obj = {
        a:100,
        b:200,
        c:"javascript"
    }
    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);

객체의 속성 값에 직접 접근하는 방법 중 하나로, 객체 이름 뒤에 .(온점)을 찍고 접근하고자 하는 속성의 이름을 작성한다.

객체 : 데이터 불러오기 (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));

console.log(Object.keys(obj)); //객체의 키를 불러오는 문법

console.log(Object.values(obj)); //객체의 값을 불러오는 문법

console.log(Object.entries(obj)); //객체의 배열 자체를 불러오는 문법

객체 : 데이터 불러오기 : 변수를 통해 불러오기

:객체 안에 있는 값을 변수처럼 선언하여 불러오는 방법.

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)

객체의 속성 이름을 변수에 저장하여 해당 변수를 이용해 속성에 접근하여 값을 불러올 수 있다.

obj 객채에 접근하여 안에 있는 a, b, c 각 속성의 값을 각각 name1, name2, name3 변수에 할당하고

각 변수의 값을 출력하는 방식이다.

obj.a에서 obj는 객체를 의미하고 a는 속성값을 의미한다.

객체 : 데이터 불러오기 (for in)

:객체 안에 있는 값을 for in 문을 통하여 불러오는 방법.

const obj = {
    a:100,
    b:200,
    c:"javascript"
}
for (let key in obj){
    console.log(key);
    console.log(obj[key]);
}

for in문은 객체 obj의 속성 이름을 순회하면서 각 속성 이름을 변수 key에 할당한다.

그리고 obj[key]를 사용하여 key에 해당하는 속성 값을 출력한다.

따라서 console.log(key)는 각 속성의 이름(a, b, c)을 출력하고,

console.log(obj[key])는 각 속성의 값(100, 200, "javascript")을 출력하게 된다.

객체 : 데이터 불러오기 (map( ))

:객체 안에 있는 값을 map()을 사용하여 불러오는 방법.

 const obj = [
    {a:100, b:200, c:"javascript"}
]
    obj.map((el) => {
        console.log(el.a)
        console.log(el.b)
        console.log(el.c)
    });

obj 배열은 하나의 객체를 요소로 가지고 있으므로, map() 메소드는 해당 객체를 매개변수 el로 받아서 각 속성의 값을 출력한다.

따라서 console.log(el.a)는 객체의 a 속성 값(100)을 출력하고, console.log(el.b)는 b 속성 값(200)을 출력하고,

console.log(el.c)는 c 속성 값("javascript")을 출력한다.

배열 안에 객체가 있어야만 map()을 사용할 수 있다.

배열이 없이 객체만 있다면 "Uncaught TypeError: obj.map is not a function"obj.map()이 함수가 아니라는 경고창이 표시되기 때문에

객체가 배열 안에 있는지를 주의하여 확인해야 한다.

객체 : 데이터 불러오기 (hasOwnproperty( ))

:객체 안에 있는 값을 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

console.log("a" in obj);        
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);

hasOwnProperty() 메소드(Method)는 객체가 특정 속성(데이터)의 유무를 검사하는 자바스크립트 내장 메소드이다.

해당 메소드는 객체에 직접 접근하여 사용할 수 있으며, 결과값은 true(일치하는 속성이 있을 시)나 false(일치하는 속성이 존재하지 않을 시)만을 반환한다.

hasOwnProperty()는 객체의 속성을 검사하지만, 다른 객체나 상속받은 속성은 검사하지 않는다.

객체의 속성을 정확하게 확인하는데 유용하다.

기본적으로는 console.log(obj.hasOwnProperty("검사할 속성의 이름"));의 형태를 가지지만,

console.log("검사할 속성의 이름" in obj);처럼 약식으로 표현할 수도 있다.

객체 : 데이터 불러오기 (객체 펼침연산자)

:객체 내의 속성들을 개별적인 값으로 분해하지 않고도 객체에 값을 추가하거나 덮어씌울 수 있다.

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

console.log(spread.a);
console.log(spread.b);
console.log(spread.c);

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

console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);

3. const obj1 = {
    a:100,
    b:200
} 
const obj2 = {
    c:"javascript",
    d:"react"
} 

const spread = {...obj1, ...obj2}

console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);

자바스크립트의 새로운 기능 중 하나로, ...로 표현된다.

객체 펼침 연산자를 사용하면 객체 내의 속성들을 개별적인 값으로 분해하지 않도고 객체를 간단히 복제하거나,

새로운 객체를 만들 때 속성을 추가하고 덮어쓸 수 있다.

1. 객체 펼침연산자를 사용하여 obj 객체를 복사한 수 spread 변수에 할당하는 코드이다.

spread 변수는 obj 객체와 동일한 속성(a, b, c)를 가지고 있다.

2. obj 객체를 복제하고 d라는 새로운 속성을 추가한 후, 변수에 할당한다.

따라서 처음에 선언된 객체에 존재하지 않았던 d의 값이 출력된다.

3. 객체 펼침 연산자를 사용하여 obj1 객체와 obj2 객체를 합친 뒤 변수에 할당한다.

spread 변수는 obj1, obj2 객체의 모든 속성을 가지고 있다.

따라서 obj1에 할당되지 않았던 c값과 d값이 추가되어 출력되며, obj2에 할당되지 않았던 a값과 b값이 추가되어 출력된다.

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

:객체를 분해하여 개별적인 변수에 할당하는 것.

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

console.log(a);
console.log(b);
console.log(c);

console.log(x);         //undefind (키값을 그대로 써주어야 함)

2. const obj = {
    a:100,
    b:200,
    c:"javascript"
}
const {a:name1, b:name2, c:name3} = obj;

console.log(name1);
console.log(name2);
console.log(name3);

자바스크립트의 새로운 기능 중 하나로, 객체를 분해하여 개별적인 변수에 할당하는 것이다.

객체구조분해할당은 객체에서 필요한 속성들만 추출하여 변수에 할당할 때 유용하며,

코드의 가독성과 유지보수성을 높여준다는 장점이 있다.

객체의 속성들이 많아지면 개별 변수에 할당하는 것이 코드를 간결하게 만들기 때문이다.

또한 객체구조분해할당은 기본값을 설정할 수도 있다.

1. 객체에서 a, b, 속성을 추출하여 각각 a, b, c 변수에 할당한다.

따라서 console.log(a)는 100을 출력하고, console.log(b)는 200을, console.log(c)는 javascript를 출력한다.

2. 객체에서 a, b, c, 속성의 값을 각각 name1, name2, name3 상수에 할당한 뒤, console.log를 사용하여 상수의 값으로 출력한다.

if 문

가장 기본적인 조건문으로 0을 제외한 모든 숫자와 문자를 조건식에 넣으면 전부 참(true)인 결과를 출력한다.

빈 배열 [ ]을 넣어도 결과는 true가 된다.

데이터에 값이 없으면 false가 된다.

0 외에도 거짓(false)가 되는 것들로는 null, undefiend, false(불린), " "(빈 문자열)이 있다.

형식

ex)

if(0) {
document.write("실행되었습니다 (true)");
} else {
document.write("실행되었습니다 (false)");
}  			//조건식에 0을 넣었으므로 이 예제의 결과는 false가 된다.

if문 생략

if문을 생략하여 간결한 코드를 작성하는 것을 조건 표현식이라고 한다.

조건 표현식이  if를 대체할 수는 없으므로 간단한 코드인 경우에 한하여 사용하는 것이 좋다.

간단한 조건 검사후, 반환값을 바로 대입하여 한 줄로 표현할 수 있다.

ex)

if(num) document.write("실행되었습니다(ture)")
    else document.write("실행되었습니다(false)")

삼항 연산자

세 항으로 줄였기 때문에 삼항 연산자라고 부른다. (조건 연산자라고도 함.)

기존 if문이 실행문을 두 번 읽어들이기 때문에 식이 길어질수록 결괏값 출력이 느리고 데이터의 용량 차지가 크다는 단점을 보완하여 나오게 되었다.

첫번째 실행문만 읽어들여 결괏값의 출력이 빠르고 효율적이라는 장점이 있다.

형식

ex)

(num == 100) ? document.write("True") : document.write("false");

다중 if 문

여러 개의 조건문(if)를 사용하여 여러 조건을 검사할 수 있기 때문에 복잡한 조건문을 처리할 수 있다.

형식

ex)

const num = 100;
     if(num === 90) {
         document.write("실행되었습니다(num == 90)");
     } else if(num === 100) {
         document.write("실행되었습니다(num == 100)");
     } else if(num === 110) {
         document.write("실행되었습니다(num == 110)");
     } else if(num === 120) {
         document.write("실행되었습니다(num == 120)");
     } else {
         document.write("실행되었습니다");
     }

등호 (=) 2개는 값만 같으면 true(참)으로 인식하지만 3개(===)는 데이터 타입도 같아야 참(ture)이 된다.

값이 문자(ex. "100")인지 숫자(100)인지도 구분한다는 것이다.

그렇기에 같은 100이라도 데이터 타입이 다르면 false로 인식한다.

결괏값이 정확하고 한 치의 오차도 없기를 바란다면 ===를 쓰는 것이 좋다.

중첩 if문 

:조건문(if) 안에 또 다른 조건문 (if)를 포함하여 더욱 복잡한 조건을 만족시킬 때 사용한다.

겉에 있는 조건문과 안에 포함 된 조건문이 모두 참(ture)일 때 실행문이 출력된다.

조건1은 일치하더라도 조건 2가 일치하지 않으면 실행되지 않는다.

가독성이 떨어지고 복잡하기 때문에 꼭 필요한 경우에만 사용하는 것이 좋다.

형식

ex)

 const num = 100;
    if(num == 100) {
        document.write("실행되었습니다(1)");
        if(num == 100) {
            document.write("실행되었습니다(2)");
        } 
            if(num == 100) {
                document.write("실행되었습니다(3)");
        } 
    }  else {
        document.write("실행되었습니다(4)");
    }

swich문

: 다중 if문과 같은 형식이지만 else if 대신 case를 사용한다.

case와 값을 하나씩 비교하여 일치하는 case를 실행(출력) 시킨다.

조건이 일치하면 종료되는 if문과는 다르게 조건 만족 후에도 식이 종료되지 않으므로 break를 사용하여 식을 중지시켜 주어야 한다.

형식

ex)

const num = 100;

switch(num) {
    case 90:
        document.write("실행90");
        break;
    case 80:
        document.write("실행80");
        break;
    case 70:
        document.write("실행70");
        break;
    case 60:
        document.write("실행60");
        break;
    case 50:
        document.write("실행50");
        break;
    default:
        document.write("0");
}

default (기본값)은  case와 일치하는 값이 없을 때 출력된다.

while문

: 조건부터 체크한 후 조건이 참(true)인 동안 반복한다.

조건이 false라면 실행문은 단 한번도 실행되지 않을 수도 있다.

증감식의 위치에 따라 값이 바뀐다.

형식

ex)

let num = 0;

while(num<5) {
    num++;                          //1
    document.write(num);            //2
}

출력문 다음(2번 위치)에 증감식이 오면 증감 되지 않은 상태에서 출력되어 0부터 시작하고,

출력문 이전(1번 위치)에 증감식이 오면 증감 되지 않은 상태에서 출력되어 1부터 시작하게 된다.

do while문

:초기 값이나 반복 횟수 없이 조건만 주어졌을 때 주로 사용한다.

while문과 다르게 일단 결과를 출력하고 나서 조건을 체크하므로  while문이었으면 결과값이 출력되지 않았을 식을 작성하여도 결괏값이 일단 한 번은 출력된다.

do를 먼저 실행하기 때문에 첫 번째 실행은 조건에 상관이 없기 때문이다.

또한 do while문은 조건식을 뒤에 작성한다.

while문과 같이 증감식의 위치에 따라 결과값이 달라진다.

형식

ex)

let num2 = 0;
do{
    document.write(num2);
    num2++;
} while(num2<5);

for문

:조건이 참이 동안 계속 반복된 동작을 수행한다.

초기값이 증감식에 따라 변하면서 조건값을 만족시킬 때까지 반복 수행을 지속하며, 조건이 만족되고 나면 자동으로 식이 종료된다.

for문은 증감식에 따라 초기값이 계속 변화하므로 let으로 선언해주어야 한다.

형식

ex)

for(let i=; i<=50; i++) {
    document.write(i)
}

중첩 for문

:반복문 안에 새로운 반복문이 들어가 있는 것으로, 겉에 있는(감싸안은) for문이 1번 실행될 때마다 안에 있는(감싸 안겨진)for문은 모든 반복을 실행한다.

안의 for문의 동작이 완료되면 다시 겉에 있는 for문이 1번 반복하고, 안의 for문이 모든 반복을 실행하는 동작이 반복되는 것이다.

형식

ex)

for(let i=2; i<=9; i++){
    document.write(i + "단","<br>");

    for(let j=1; j<=9; j++){
        document.write(i + "X" + j + "=" + i*j);    //i(곱해지는 수) * j (곱하는 수)
        document.write("<br>");               		//가독성을 위하여 줄바꿈 태그를 추가함.
    }

    document.write("<br><br>");        			 //각 숫자의 단이 깔끔하게 정리되기 위하여 줄바꿈 태그를 추가함.
}

break 문

:현재 실행문을 중지 시키고 다음 실행문으로 넘어가게 하는 중지문이다.

반복문은 지정한 횟수만큼 명령을 반복하지만, break문을 사용하면 반복문을 중간에 끝내게 하여 식이 조건을 만족하여 알아서 종결되는 것이 아니라 break문에 의해 반복문을 끊어버리는 것이다.

형식

ex)

for(let i=1; i<100; i++){
    document.write(i)
    if(i == 50) {
        break;
    }

이 식은 1부터 100까지 출력해야 하는 반복문이지만 break문을 사용하므로 50까지만 반복하고 식이 종결되어버린 것이다.

coutinue 문

:조건을 만족하면 실행하던 반복 문장을 건너뛰는 건너뛰기 문이다.

조건에 해당되는 값을 만났을 때 실행하던 반복 문장을 건너 뛰고 반복문의 맨 앞으로 되돌아가 다음 반복 과정으로 넘어가도록 한다.

반복과정을 한 차례 건너뛰는 것이기 때문에 조건에 해당하는 값이 출력되지 않는다.

continue문이 실행문 이후에 위치하면 건너뛰어지지 않고 실행되기 때문에 반드시 실행문 이전에 continue문을 작성하여야 한다.

형식

ex)

for(let i=1; i<10; i++){
    if(i == 10) {
        continue;
    }
document.write(i)
}

함수

: 프로그램에서 반복적으로 사용되는 기능별로 다양한 여러 개의 명령을 묶어놓은 코드들의 집합.

종류

함수의 선언과 호출

선언

: function이라는 예약어를 사용하여 함수 이름을 적은 후, 중괄호 { } 안에 실행할 여러 개의 명령을 묶어주는 것

호출

: 미리 선언해 놓은 함수를 실행할 때 함수 이름을 사용하는 것.

선언적 함수

형식

:

호출

:선언적 함수는 함수를 호출할 때 앞 또는 뒤에서 호출 가능함.

ex)

변수나 함수를 선언하지 않고 호출하였을 때 에러가 발생하는 것이 맞지만,^[각주:1] var로 선언한 변수와 선언적 함수는 선언 이전에 호출하여도 에러를 발생시키지 않음.

이를 호이스팅^[각주:2]이라고 함.

익명 함수 

:변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어줌.

형식 

:

호출

: 선언적 변수와 다르게 반드시 변수 선언 이후에 호출해야 함.

ex)

익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수가 존재. ^[각주:3]

선언과 동시에 함수가 실행되며, 함수명이 없기 때문에 재호출이 불가능함.

보통 처음 한 번만 실행하는 초기화 코드에 사용됨.

^[각주:4]

매개변수 함수

:함수를 호출할 때  전달하는 변수를 가리키기도 하고, 함수를 선언할 때 외부에서 값을 받는 변수를 가리키는 말이기도 함.

흔히 'a는 b와 c 를 연결해주는 역할을 한다'는 뜻인 '매개체'를 생각하고 이해하는 것이 편함.

함수 이름 옆의 소괄호 ( ) 안에 매개변수 이름을 넣어주어 사용할 수 있으며, 이름을 붙이는 방법은 변수 이름을 붙이는 방법과 같음.

선언 된 함수에서만 사용하며, 여러 개의 매개변수를 나열할 때에는 "," (쉼표)로 구분함.

형식

:

ex)

return 함수

:함수를 통해 처리된 결과를 반환시켜주는 명령어.

함수에서 실행한 후 결과까지 처리할 수도 있지만, 함수의 실행 결과를 받아 또 다시 처리해야 하는 경우도 많음.

이 경우, 함수의 실행 결과를 다시 함수를 실행한 시점으로 넘겨주어야 하는데 이것을 '함숫값을 반환한다'고 함.

함수의 결괏값을 반환할 때에는 return 다음에 넘겨줄 값이나 변수를 지정하면 됨.

형식

:

ex)

화살표 함수

:ECMA Script (2015)에 추가된 내용으로  부등호(=>)를 이용하여 함수를 간결하게 표현할 때 사용.

function 키워드를 생략하고 합쳐진 부등호(=,>)을 합쳐 사용하며 항상 익명 함수 형식으로 표현함.

단일 명령문일 경우에는 함수의 중괄호 { }와 return을 생략할 수 있음.

ex)

▶변수

-데이터를 저장하는 저장소(공간).

▷ var나 let으로 변수를 선언할 수 있음.

▷ var는 구 방식으로 현재는 var 보다 let을 주로 사용함.

-  저장한 데이터를 변경할 수 있음.

▷ 변수는 재선언이 가능함.

▷ 재선언 시 이전 값은 표시되지 않고 재선언한 값이 표시됨.

- 데이터를 추가할 수도 있음.

▷ 변수는 연산자를 이용해서 연산이 가능하며, 연산된 값이 출력됨.

▷ +연산자를 변수(숫자)에 사용하면 더해진 값이 결과로 출력되고, 문자에 사용하면 두 값이 연결 되어^[각주:1] 결과에 출력됨.

▶상수

-변수와 똑같이 데이터를 저장하는 저장소(공간

-그러나 변경은 불가능

▷ 상수는 var나 let이 아니라 const를 사용하여 선언함.

▷ const를 사용하여 선언하였을 경우 재선언 하였을 때 값이 바뀌어서 출력되지 않고

라는 경고문구가 출력됨.

▶배열

-여러 데이터를 저장할 수 있음

-소괄호 ( )가 아니라 대괄호 [ ]를 사용함

-배열의 선언은 arr, Array로 함.

▷ 변수나 상수와 달리 변수만 쓰는 것이 아니라 arr [ ]를 같이 작성해야만 값이 출력됨.

▷ 배열의 키값은 0부터 시작함.

-  new Array( ); 선언을 빼고 arr만 작성하여 배열을 선언할 수도 있음.

-아예 new Array 선언을 빼고 arr 만으로도 선언할 수 있음.

-반복되는 arr 선언을 줄여 한 줄로 선언하는 것도 가능함.

▶객체

-데이터 뿐 아니라 그 속성(키와 값)까지 저장

-배열의 특징도 같이 가지고 있음.

-객체의 선언은 Object로 함.

-데이터를 식별하여 가져오는 것도 가능

-데이터의 키와 값을 직접 지정할 수 있음

▷ 배열처럼 지정된 [0], [1], [2]를 사용할 수도 있지만 키값을 직접 지정할 수 있음.

▷ a, b, c로 키값을 지정해준 것.

-{ } 중괄호로 표시

▷ 선언이 반복되는 것을 줄여 { } 중괄호 안에 한 줄로 만들 수 있음.

-객체 안에 배열을 넣어 하나의 객체 안에 두 개 이상의 값을 가질 수 있도록 할 수 있음

▷ 불러올 때에는 객체를 불러오기 위해 obj 작성 후 키 값과 배열의 위치를 작성해주면 됨.

▷ 단순히 b나 c라고만 적어주면 값이 아니라 배열 자체가 불러와지기 때문에 주의.

-배열 안에 객체를 넣을 수도 있음

▷ 배열 안에 객체가 있는 형태로 키값을 먼저 작성하는 것이 아니라 배열의 위치부터 작성한 뒤에 키값을 작성해야 함.

-객체 안에 변수를 저장 시킬 수 있음

▷ 데이터 값 안에 변수를 저장시킬 수 있음.

▷ a 대신에 변수가 저장된 형태로 키 값은 생략할 수 있음.

-함수를 포함시켜 실행문을 작성할 수도 있음

▷ d는 함수가 포함된 실행문이기 때문에 console.log를 작성하지 않음.

▷d는 키 값도 없기 때문에 obj.d ( )라고만 작성해주면 실행문이 출력됨.

▶if 문

-if 다음에 소괄호( )를 사용해서 조건을 표기

-조건을 체크한 후 결괏값이 참(true)이면 if 문에 있는 명령(들)을, 거짓(false)이면 if문에 있는 명령(들)을 건너뛰고 그 다음 명령을 실행

▷if문의 기본 형식

조건 (빨간 밑줄)이 참(true)라면 첫번째 명령문 (파란색 밑줄)을, 거짓(false)라면 그 다음 명령문(노란색 밑줄)을 출력한다.

위 예시 같은 경우, 0  은 false가 출력된다. ^[각주:1] 

▶if else문

^[각주:2] 

-조건을 체크한 후 true(참) 일 때 처리할 명령과 false(거짓)일 때 처리할 명령이 따로 있을 때 사용

-if else 안에 또 다른 if문이나  if else문을 사용할 수 있음

▷if else 문의 기본 형식

상수 값(분홍색 밑줄)이 쳐진 곳이 아래 조건들(빨간색 밑줄, 파란색 밑줄, 노란색 밑줄) 중 일치하는 결괏값이 출력된다.

기본 형식에서의 조건 1 즉, true일 때 실행될 명령이 파란색 밑줄이 쳐진 곳이 되며,  거짓(false)일 때 출력되는 곳들이 노란색 밑줄이 쳐진 곳임.

else (노란색 밑줄)은 분홍색 밑줄의 값이 빨간색 밑줄, 파란색 밑줄 중에서 일치하는 것이 없을 때 출력된다.

▶중첩 if 문

-조건문(if) 안에 또 다른 조건문(if)을 포함하여 더욱 복잡한 조건을 만족할 때 사용

-겉에 있는 조건문과 안에 포함된 조건문에서 모두 참일 때 실행

-조건 1이 참(true)지만 조건 2가 거짓이면 실행되지 않음.

-가독성이 현저히 떨어지기 때문에 꼭 필요한 경우에만 사용하는 것이 좋음.

▷중첩 if문의 기본 형식 

분홍색 밑줄 (조건)이 빨간색 밑줄들과 일치해야만 명령이 실행된다.

하나라도 일치하지 않으면 중첩된 if 문들은 실행되지 않으며, else 문(노란색 밑줄) 이 실행된다. 

▶삼항 연산자 ^[각주:3]

-연산자가 3개라 삼항 연산자라고 함.

-조건이 복잡하지 않고 참(true)과 거짓(fasle)이 명확할 경우 if 문을 사용하지 않고 삼항 연산자 만으로 조건을 체크할 수 있음

 -조건에 따라 결과를 반환함

▷삼항 연산자의 기본 형식

흰 박스 안에 있는 식을 한 줄로 줄일 수 있다.

조건(빨간 밑줄)이 true(참)이면 첫번째 명령 (노란색 밑줄의 명령)을,  false(거짓)이면 두번째 명령(파란색 밑줄의 명령)을 실행한다.

▶for문

: 자바스크립트에서 가장 많이 사용하는 반복문.

조건에 들어가는 값이 일정하게 커지면서 명령 반복 실행할 때 편리.

몇 번 반복했는지 기록하기 위해 카운터를 사용하며, 첫 항에서 카운터 변수를 지정함.

▷for문의 실행순서

: 초깃값 할당^[각주:1] > 조건 체크 > 명령실행 > 증가식 실행 

▷예제의 실행 순서를 표로 그려보면 다음과 같다.

▶forEach문

:배열에서는 forEach 문을 사용해서 편리하게 반복할 수 있음.

배열의 길이가 바뀌어 정확하게 배열의 크기를 알 수 없을 때, 배열의 요소를 가져와서 함수^[각주:5]를 설정해야 할 때 사용함.

for문을 작성하여 배열 안에 있는 모든 수를 불러 오려면  초깃값을 할당하고, 조건과 증감식을 작성해야 했는데 forEach 문을 사용하면 초깃값을 할당하고, 조건을 지정하고 증감식을 작성해야 할 필요가 없어짐.

▶for...in문

- 배열 안에서만 반복되는 반복문이 forEach 문이라면 for...in 문은 반복해서 객체의 값을 가져와 처리할 수 있게 함.

 - 객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하기 위해 [ ] (대괄호)를 사용함.

- 모든 열거할 수 있는 속성들을 순회할 수 있도록 함.

- 순서를 지정할 수 없기 때문에 속성들 간의 순서가 중요한 객체에서는 사용하지 않는 것이 좋음.

▶for...of문

: 문자열이나 배열과 같은 반복 가능^[각주:7] 자료에서 사용하는 반복문.

forEach 문를 사용해서 작성했던 것과 같은 결과를 볼 수 있음.

let a 안에 값이 있는동안 계속 반복함.

▶산술 연산자

▶+ 연산자

-좌변과 우변에 숫자가 아닌 문자나 변수 등이 오면 연결 연산을 함.

-숫자가 오면 더하기 연산을 함.

▶% 연산자

-반복적인 숫자 구간의 패턴이나 조건문을 사용한 짝, 홀수 판단 등의 식을 만드는데 사용함.

▶++ , -- 연산자

-++나 -- 사이에 공백  존재 X.

-1씩 증가 · 감소 시키는 연산자

-변수의 앞이나 뒤에 붙여서 사용. (연산자의 위치에 따라 값이 달라짐)

▶대입 연산자

▶ = 

▶ += 

▶비교 연산자

▶ > (초과)

▶ <= (이하 / ~까지)

▶ 논리 연산자

▶ 비트 연산자 (잘 쓰이지 않음 / 죽은 문법)

▷ &  (AND 연산자)

1&1, 1&0=0, 0&0=0

ex) [ 1 & 3 ]
1의 2진수는 0001, 3의 2진수는 0011
  0001
&0011          2진수 0001은 10진수 1.
----------
   0001

▷ | (OR 연산자)

1|1=1, 1|0=0, 0|0=0

ex) [ 1 |3]
   0001
 | 0011          2진수 0011은 10진수 3.
----------
   0001

▷ ~ (NOT 연산자)

ex) ~2 (음수 만들기)

2의 2진수는 0010이고 부호를 음수로 바꾸기 위해 1을 더함
0010 + 1 = 0011
2진수 0011은 10진수 3. 그러나 부호가 반대라 -3.

▷ ^ (XOR 연산자)

1^1, 1^0=0, 0^1=1, 0^0=0

ex) [ 1 ^ 3 ]
    0001
 ^ 0011          2진수 0010은 10진수 2.
 ----------
    0001

▷ << (LEFT Shift) 

왼쪽으로 이동 시, 오른쪽 끝자리는 0.

ex) 1 << 2
1의 2진수는 0001, 왼쪽으로 2번 이동 시 0100.
2진수는 0100은 10진수 4

▷>> (Right Shift)

오른쪽으로 이동 시, 왼쪽 끝자리는 0.

ex) >> 1 의 경우
8의 2진수는 1000, 왼쪽으로 1번 이동 시 0100.
2진수 0100은 10진수 4

▶ 삼항 연산자 

:조건식의 결과 (true, false)에 따라 결과 값을 다르게 나오게 해주는 연산자

-형식

조건식 ? 실행문1 : 실행문 2

조건식이 true 일 때 : 실행문 1 실행

조건식이 false 일 때  : 실행문 2 실행

ex)

자료형^[각주:1]

: 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 지정해야 함. 그런 자료의 형태.

크게 원시 유형과 객체로 나누어짐.

▶ typeof() 함수

-자바스크립트에 미리 만들어져 있는 함수.

-소괄호() 안에 값이나 변수를 넣으면 어떤 자료형인지 알려줌.

▶숫자형

-모든 프로그램에서 가장 기본이 되는 자료형.

-정수와 실수를 함게 묶어서 '숫자형'이라고 함.

 -" " 없이 입력하면 숫자로 인식.

-그러나, " "로 묶으면 문자열로 인식함.

▶문자열

-작은 따옴표(' ')나 큰 따옴표(" ")로 묶은 데이터를 의미.

-문자열의 앞 뒤에 붙이는 따옴표는 같아야함.

-따옴표만 있고 내용이 없어서 문자로 인식함.^[각주:4]

▶논리형

-참(true)이나 거짓(false) 값을 표현하기 위한 데이터 유형.

-사용할 수 있는 값은 true, false이며 지정한 조건과 일치/불일치 여부를 확인하는 조건식에서 자주 사용함.

▶undefined

-변수를 만들기만 하고 값이 할당되지 않았을 때 자동으로 부여하는 변수의 초깃값.

-값이면서 동시에 자료형.

-빈 값인지, 유효한 값인지 정할 수 없는 상태.

-사용자가 실수로 값을 지정하지 않은 것.

▶null

-값이 없거나 유효하지 않은 값.

-반환하거나 사용자가 할당할 수 없는 값.

-값이면서 동시에 자료형.

-사용자가 일부러 유효하지 않은 값을 지정한 것.

▶객체

-하나의 변수에 다양한 정보가 포함되어 있는 자료형.

-{} (중괄호) 안에 모든 정보를 담음.

-데이터와 그 속성까지 저장함.

-키와 값으로 하나 또는 여러 개의 쌍을 만들 수 있음.

-여러 정보를 하나의 객체로 만들 수 있음.

-배열의 특징을 가짐.

-데이터를 식별하여 불러올 수 있음.

ex)

▷객체 값 출력

▶배열

-하나의 변수에 여려 개의 값을 저장할 수 있는 유형. 역시 객체임.

-[ ] (대괄호)로 묶고 그 안에 값을 나열하며, 각 값은 쉼표(,)로 구분함.

-[ ] 안에 아무 값이 없어도 배열로 인식함. (빈 배열)·

   배열명  = [값, 값, ····]

ex)

▶심벌 (Symbol)

-에크마스크립트^[각주:5] 2015에 새롭게 추가된 원시 유형의 자료형.

-유일성을 보장함.

-객체 프로퍼티^[각주:6]의 키로 사용할 수 있음.

-한 번 만들면 변경할 수 없음.

-같은 값을 가진 심벌을 만들 수도 없음.

Symbol ()

ex)