[새싹 성동 2기] 3. Javascript 문법 기초(3)

목차

 

1. 배열

2. 객체

 

 

[1] 배열

 - 배열의 기초

// 배열 선언
let values = ["lobotomy", "LOR", "Limbus", true, 8];
console.log(values);            // ['lobotomy', 'LOR', 'Limbus', true, 8]

// 배열 길이는 length 속성으로 알 수 있음
console.log(values.length);     // 5
console.log(values["length"]);  // 5

// 배열 데이터(요소)를 추가하는 방법
values.push("김지훈");
console.log(values);            // ['lobotomy', 'LOR', 'Limbus', true, 8, '김지훈']

values[values.length] = "하무하무팡팡";
console.log(values);            // ['lobotomy', 'LOR', 'Limbus', true, 8, '김지훈', '하무하무팡팡']

values[values.length + 3] = "치명적인 귀여움";
console.log(values);            // ['lobotomy', 'LOR', 'Limbus', true, 8, '김지훈', '하무하무팡팡', …, '치명적인 귀여움']
console.log(values[7]);         // undefined

 

 - 모든 배열 요소를 순차적으로 접근하는 방법

// 배열 선언
let values = ["lobotomy", "LOR", "Limbus", true, 8];
console.log(values);            // ['lobotomy', 'LOR', 'Limbus', true, 8]

// 모든 배열 요소를 순차적으로 접근하는 방법
console.log('방법1. ------------------');
console.log(values[0]);         // lobotomy
console.log(values[1]);         // LOR
console.log(values[2]);         // Limbus
console.log(values[3]);         // true
console.log(values[4]);         // 8


console.log('방법2. ------------------');
for (let i = 0; i < values.length; i++) {
    console.log(values[i]);
}


console.log('방법3. ------------------');
for (let index in values) {
    console.log(index, values[index]);
}


console.log('방법4. ------------------');
for (let value of values) {
    console.log(value);
}


console.log('방법5-1. ------------------');
{   // 함수 선언문 형식으로 콜백 함수를 정의
    function printItem(value) {
        console.log(value);
    }
    values.forEach(printItem);
}


console.log('방법5-2. ------------------');
{   // 함수 표현식 형식으로 콜백 함수를 정의
    const printItem = function (value) {
        console.log(value);
    };
    values.forEach(printItem);
}


console.log('방법5-3. ------------------');
{   // 화살표 함수 형식으로 콜백 함수를 정의
    const printItem = (value) => {
        console.log(value);
    };
    values.forEach(printItem);
}


console.log('방법5-4. ------------------');
{   // 간략한 화살표 함수 형식으로 콜백 함수를 정의
    const printItem = value => console.log(value);
    values.forEach(printItem);
}


console.log('방법5-5. ------------------');
{   // 콜백 함수를 직접 정의
    values.forEach(value => console.log(value));
}


// 인덱스를 함께 출력
console.log('방법6-1. ------------------');
{   // 함수 선언문 형식으로 콜백 함수를 정의
    function printItem(value, index) {
        console.log(index, value);
    }
    values.forEach(printItem);
}


console.log('방법6-2. ------------------');
{   // 함수 표현식 형식으로 콜백 함수를 정의
    const printItem = function (value, index) {
        console.log(index, value);
    };
    values.forEach(printItem);
}


console.log('방법6-3. ------------------');
{   // 화살표 함수 형식으로 콜백 함수를 정의
    const printItem = (value, index) => {
        console.log(index, value);
    };
    values.forEach(printItem);
}


console.log('방법6-4. ------------------');
{   // 간략한 화살표 함수 형식으로 콜백 함수를 정의
    const printItem = (value, index) => console.log(index, value);
    values.forEach(printItem);
}


console.log('방법6-5. ------------------');
{   // 콜백 함수를 직접 정의
    values.forEach((value, index) => console.log(index, value));
}

 

 

 

[2] 객체

// 객체 선언
let person = {
    "name" : "김지훈",
    "age" : 32,
    "development" : [ "Lobotomy", "LOR", "Limbus"]
}

// 객체 속성 참조 방법 : 객체변수.속성이름(키) 또는 객체변수['속성이름(키)']
console.log(person.name);           // 김지훈
console.log(person['age']);         // 32
console.log(person["development"]); // ['Lobotomy', 'LOR', 'Limbus']

// 객체 속성의 값을 변경하는 방법
person.name = "슈나쟝";
console.log(person.name);           // 슈나쟝

// 객체 속성을 추가하는 방법
person.isCute = true;
person['position'] = "CEO";
console.log(person);    // {name: '슈나쟝', age: 32, development: [ "Lobotomy", "LOR", "Limbus"], isCute: true, position: 'CEO'}

// 객체 속성을 순회하면서 값을 가져오는 방법
console.log('방법1. for-in 구문을 이용');
for (let key in person) {
    console.log(`${key}: ${person[key]}`);
}

// !!! for-of 구문은 객체에 사용할 수 없다. !!!

// Object.keys() 메소드를 이용
console.log('방법2. Object.keys() 메소드를 이용');
let keys = Object.keys(person);
console.log(keys);
keys.forEach(key => console.log(`${key}: ${person[key]}`));