자바스크립트 배열(Array), 객체(Object)와 프로퍼티 접근 방법(Dot vs Bracket), for/while 반복문

keepitupcoding

배열(Array)

const friends = ['Michael', 'Steven', 'Peter'];
const years = new Array(1991, 1984, 2008, 2020);

// 인덱스 사용
console.log(friends[0]);
console.log(friends[2]);

// 길이 구하는 메소드
console.log(friends.length);
console.log(friends[friends.length - 1]);

// 인덱스를 활용한 데이터 변경
friends[2] = 'Jay';
  • JS의 배열은 mutable하므로 데이터 변경이 가능하다.
const jonas = ['Jonas', 'Schemedtmann', 2037 - 1991, 'teacher', friends];
console.log(jonas);
  • 배열의 아이템은 expression(e.g. 2037-1991)이나 배열이 될 수 있다.
function calcAge(birthYear) {
  return 2037 - birthYear;
}
const years = [1990, 1967, 2002, 2010, 2018];

console.log(calcAge(years)); // NaN
console.log(years + 10); // 1990,1967,2002,2010,201810
console.log(years - 10); // NaN
  • 데이터 타입이 맞지 않을 경우 에러가 나는 것이 아니라 NaN 등의 리턴 값으로 표현된다.

배열의 대표적인 메서드(Method)

push

  • 배열의 마지막에 아이템을 추가
  • new length를 리턴
const friends = ['Michael', 'Steven', 'Peter'];
console.log(friends.push('Jay')); // 4(new length를 리턴함)
console.log(friends); // ['Michael', 'Steven', 'Peter', 'Jay']

unshift

  • 배열의 첫번째에 아이템을 추가
  • new length를 리턴
friends.unshift('John');
console.log(friends); // ['John', 'Michael', 'Steven', 'Peter', 'Jay']

pop

  • 배열의 마지막 아이템을 삭제
  • 삭제한 아이템을 리턴
friends.pop();
console.log(friends.pop()); // Peter
console.log(friends); // ['John', 'Michael', 'Steven']

shift

  • 배열의 첫번째 아이템을 삭제
  • 삭제한 아이템을 리턴
friends.shift();
console.log(friends); // ['Michael', 'Steven']

indexOf

  • 해당 요소가 없으면 -1을 리턴
console.log(friends.indexOf('Steven')); // 1
console.log(friends.indexOf('Steve')); // -1

includes

  • 형변환을 허용하지 않는 것 주의
console.log(friends.includes('d')); // false
console.log(friends.includes('Steven')); // true

friends.push(23);
console.log(friends.includes('23')); // false
console.log(friends.includes(23)); // true

객체(Object)

const jonas = {
  firstName: 'Jonas',
  lastName: 'Schemedtmann',
  age: 2037 - 1991,
  job: 'teacher',
  friends: ['Michael', 'Peter', 'Steven']
};
console.log(jonas);
console.log(jonas.lastName); // Schemedtmann
console.log(jonas['lastName']); // Schemedtmann
  • 오브젝트는 key-value 형태로 데이터를 담는 자료구조이다.
  • key-value 쌍은 프로퍼티(property)라고 부른다.
  • value에 접근하기 위해 dot notation과 bracket notation을 사용할 수 있다.
const nameKey = 'Name';
console.log(jonas['first' + nameKey]);
console.log(jonas['last' + nameKey]);

const interestedIn = prompt('What do you want to know about Jonas? (firstName, lastName, age, job, friends)');
console.log(interestedIn);
console.log(jonas[interestedIn]);
  • bracket의 경우 위와 같이 계산된 문자열 혹은 문자열을 담은 변수를 사용할 수 있다.
if (jonas[interestedIn]) {
  console.log((jonas[interestedIn]));
} else {
  console.log('Wrong request!')
}
  • 없는 key 값에 접근할 경우 undefined를 리턴한다.
  • undefined는 falsy value이므로 조건문을 작성하기 편하다.
jonas.location = 'Portugal';
jonas['twitter'] = '@jonasschmedtman';
  • 새로운 프로퍼티 추가시에도 dot notation, bracket notation을 둘 다 사용할 수 있다.

객체의 대표적인 메서드(Method)

const jonas = {
  firstName: 'Jonas',
  lastName: 'Schemedtmann',
  birthYear: 1991,
  job: 'teacher',
  friends: ['Michael', 'Peter', 'Steven'],
  hasDriverLicense: true,
  calcAge: function(birthYear) {
    return 2037-birthYear;
  }
};

console.log(jonas.calcAge(1991));
console.log(jonas['calcAge'](1991));
  • 오브젝트의 value에는 function expression도 들어갈 수 있다.

this 키워드

const jonas = {
  firstName: 'Jonas',
  lastName: 'Schemedtmann',
  birthYear: 1991,
  job: 'teacher',
  friends: ['Michael', 'Peter', 'Steven'],
  hasDriverLicense: true,
  calcAge: function () {
    return 2037 - this.birthYear;
  }
};

console.log(jonas.calcAge());
  • 오브젝트에서 this를 사용하면 코드를 반복할 필요 없이 자기 자신을 가리킬 수 있다.
const jonas = {
  firstName: 'Jonas',
  lastName: 'Schemedtmann',
  birthYear: 1991,
  job: 'teacher',
  friends: ['Michael', 'Peter', 'Steven'],
  hasDriverLicense: true,
  calcAge: function () {
    this.age = 2037 - this.birthYear;
    return this.age;
  },
  getSummary: function () {
    return `${this.firstName} is a ${this.calcAge()}-year old teacher, 
    and he has ${this.hasDriverLicense ? 'a' : 'no'} driver's license.`
  },
};

console.log(jonas.calcAge()); // jonas.age 추가
console.log(jonas.age);
console.log(jonas.age);
console.log(jonas.age);
  • jonas.calcAge() 함수가 여러번 실행되는 것이 부담되면 함수 안에서 새로운 프로퍼티를 넣도록 할 수 있다.
  • 대신 한 번의 호출은 필요하다.
  • 오브젝트의 value에 function을 넣은 것을 오브젝트의 메소드라고 한다.

for 반복문

// for loop keeps running while condition is TRUE
for (let rep = 1; rep <= 10; rep++) {
  console.log(`Lifting weights repetition ${rep} 💪`)
}
  • for (초기 구문; 조건 구문; 업데이트 구문)

배열의 인덱스를 사용한 반복문

const friends = ['Michael', 'steven', 'Peter'];
const jonas = ['Jonas', 'Schemedtmann', 2037 - 1991, 'teacher', friends];

for (let i = 0; i < jonas.length; i++) {
  console.log(jonas[i]);
}

break & continue

for (let i = 0; i < jonas.length; i++) {
  if (typeof jonas[i] !== 'string') continue;
  console.log(jonas[i]);
}

for (let i = 0; i < jonas.length; i++) {
  if (typeof jonas[i] === 'string') break;
  console.log(jonas[i]);
}
  • continue 조건에 해당할 경우 아래 코드 블럭을 스킵한 후 다음 순서로 이동해서 계속 진행한다.
  • break 조건에 해당할 경우 for loop을 중단한다.

배열 마지막 순서부터 진행

for (let i = jonas.length - 1; i >= 0; i--) {
  console.log(jonas[i]);
}

for 반복문 중첩

for (let exercise = 1; exercise < 4; exercise++) {
  console.log(`------- Starting exercise ${exercise}`);

  for (let rep = 1; rep < 6; rep++) {
    console.log(`Exercise ${exercise}: Lifting weight repetition ${rep}💪`);
  }
}


console.log(exercise); // ReferenceError: not defined
console.log(rep); // ReferenceError: not defined
  • 바깥쪽 for loop의 let 변수(카운터)를 안쪽의 for loop에서도 접근할 수 있다.

while 반복문

for (let rep = 1; rep <= 10; rep++) {
  console.log(`Lifting weight repetition ${rep}💪`);
}

let rep = 1;
while (rep <= 10) {
  console.log(`Lifting weight repetition ${rep}💪`);
  rep++;
}

let dice = Math.trunc(Math.random() * 6) + 1;
while (dice !== 6) {
  console.log(`You rolled a ${dice}`);
  dice = Math.trunc(Math.random() * 6) + 1;
  if (dice === 6) console.log('Loop is end...');
}
  • while 반복문은 카운터를 복잡하게 지정할 수 있으므로 다양한 활용이 가능하다.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *