[코딩 자율학습 HTML+CSS+자바스크립트] 3주차 학습

 

9. 자바스크립트 기초 문법

용어 정리 (변수)

① 키워드 : 어떤 역할이나 기능이 정해진 단어, 예약어

② 식별자 : 변수명

③ 연산자

④ 표현식

⑤ 세미콜론

 

10. 자바스크립트 함수 다루기

함수를 정의하는 방법

 

 

함수 기능 확장하기

function gugudan(dan){
    for(let i = 1; 1 <= 9; i++){
        console.log('${dan} * ${i} = ${dan*i}');
    }
}

gugudan(3);
gugudan(5);
gugudan(8);

dan : 매개변수

3,5,8 : 인수

 

 

함수의 특징 이해하기

• 스코프(scope) : 변수나 함수와 같은 참조 대상 식별자를 찾아내기 위한 규칙

let a = 10; // 전역 스코프
function sum() {
    let b = 15; // 지역 스코프
    console.log('함수 내부:${a}');
    console.log('함수 내부:${b}');
}

sum();
console.log('함수 외부:${a}');
console.log('함수 외부:${b}');

>> 함수 내부: 10

      함수 내부: 15

      함수 외부: 10

      ReferenceError: a is not defined

 

• 호이스팅(hoisting) : 코드를 선언과 할당으로 분리해 선언부를 자신의 스코프 최상위로 끌어올리는 것

printHello();
function printHello(){
    console.log("Hello");
}


>> Hello

 

 

 

11. 자바스크립트 객체 다루기

1) 객체란

키(key)와 값(value)으로 구성된 속성의 집합

 

2) 객체 속성 다루기

객체 속성에 접근할때 대괄호 연산자와 마침표 연산자 두가지 방법이 있다.ㅋ

• 대괄호 연산자

const person = {
    name : "Hong Gildong",
    age : 20
};

console.log(person["name"]);    // Hong GilDong
console.log(person["age"]);    // 20

• 마침표 연산자

const person = {
    name : {
        firstName : "Gildong",
        lastName : "Hong"
    },
    age : 20,
    likes : ["apple", "samsung"],
    printHello : function() {
        return "hello";
    }
};

console.log(person.name.lastName);    // Hong
console.log(person.age);    // 20
console.log(person.likes[0]);    // apple
console.log(person.printHello());    // hello

 

객체의 데이터 관리 방법

 

• 깊은 복사(deep copy) : 복사한 값을 재할당할 때 한쪽 데이터가 변경되어도 서로 영향을 미치지 않게 복사 되는 것
• 얕은 복사(shallow copy) : 데이터를 복사했을 때 한쪽 데이터가 변경되면 다른 쪽 데이터도 변경되어 서로 영향을 받는 것