[JavaScript] 기본 문법 #2 - 스코프, 함수, 객체

 

* 스코프(Scope)

변수를 사용할 수 있는 범위로, 블록 {} 내부를 말한다.

 

let a=1;

let b=1;

{

    let a=2;

    {

        let a = 3;

        console.log(a);  // 3

        console.log(b);  // 1

    }

    console.log(a);  // 2

    console.log(b);  // 1

}

console.log(a);  // 1

console.log(b);  // 1

 

* 함수

1. 선언적 함수(일반 함수)

 

// 함수 생성 방법

function 함수_이름() {}

function 함수(){  // 함수 생성

    console.log("함수의 첫 번째 줄");

    console.log("함수의 두 번째 줄");

}

함수();  // 함수 호출

console.log(함수);  // 함수 출력

// 출력

함수의 첫 번째 줄

함수의 두 번째 줄

ƒ 함수(){  

    console.log("함수의 첫 번째 줄");

    console.log("함수의 두 번째 줄");

}

 

2. 익명 함수

이름이 없는 함수로, 이름을 붙이지 않고 함수를 생성한다. 

 

// 익명 함수 생성 방법

let 변수명 = function() {};

let 함수 = function() {  // 익명 함수 생성

    console.log("함수의 첫 번째 줄");

    console.log("함수의 두 번째 줄");

};

함수();  // 함수 호출

console.log(함수);  // 함수 자체를 출력

// 출력

함수의 첫 번째 줄

함수의 두 번째 줄

ƒ () {  

    console.log("함수의 첫 번째 줄");

    console.log("함수의 두 번째 줄");

}

 

3. 화살표 함수(ES6: ECMAScript6)

화살표 함수를 사용하면 function 키워드 대신 화살표 =>를 사용해 함수를 간략히 정의할 수 있다.

 

let 함수 = () => { // 화살표 함수 생성

    console.log("함수의 첫 번째 줄");

    console.log("함수의 두 번째 줄");

};

함수();

console.log(함수);

// 출력

함수의 첫 번째 줄

함수의 두 번째 줄

() => {  

    console.log("함수의 첫 번째 줄");

    console.log("함수의 두 번째 줄");

}

 

* 자바스크립트 객체

자바스크립트에서 객체는 여러 개의 프로퍼티(property)와 메서드(method)로 구성되어 있다.

- 프로퍼티(property): 객체의 고유한 속성(변수)

- 메서드(method): 함수

자바스크립트 객체 account

배열은 요소에 접근할 때 인덱스를 사용하고, 객체는 키를 사용한다.

ex) 자동차(객체)의 색상(속성명, key)은 파란색(값, value), 사람(객체)의 이름(속성명, key)은 김주리(값, value)

 

// 객체 접근 방법

1. 객체명.키

2. 객체명['키']

 

let object = {  // 객체 선언

    name: '바나나',

    price: 1200

};

console.log(object.name);

console.log(object.price);

// 출력

바나나

1200

 

// 객체에 for in 반복문 적용

let object = {  // 객체 선언

    name: '바나나',

    price: 1200

};

for (let key in object) {  // object 객체의 모든 속성 반복

    console.log(`${key}: ${object[key]}`);  // ${key}는 속성명, ${object[key]}는 값에 접근

}

// 출력

name: 바나나

price: 1200

 

// 속성과 메소드

let object = {

    name: '바나나',

    price: 1200,

    print: function() {  // 메소드: 속성을 함수로

        console.log(`${this.name}의 가격은 ${this.price}원입니다.`)  // this.name은 name의 속성값 가리킴

    }

};

object.print();  // 메소드 호출

// 출력

바나나의 가격은 1200원 입니다.

 

 

성결대학교 정보통신공학과 웹서버프로그래밍 강의(2024)  

본 게시물은 위 강의 및 교재를 기반으로 정리한 글입니다.