Goorm(부트캠프)/Front-End 3회차

JAVASCRIPT(1일차)

inzero98 2025. 3. 11. 15:10
반응형

변수

  • 변수(variable) : 데이터를 저장할 때 쓰이는 "이름이 있는 저장소"

변수 만드는 방법

let

  • let : 변할 수 있는 변수를 선언할 때 사용
  • let 으로 선언한 변수에 저장한 값은 다른 값으로 얼마든지 변경 가능
  • 변수의 데이터는 다른 변수에 복사할 수도 있다.
  • 같은 변수를 두 번 선안하면 에러 발생
let message; // message 라는 이름의 변수를 생성
message = "hello"; // message 라는 변수에 문자열 저장


let message = "hello"; // 변수 생성과 동시에 문자열 저장
message = "world"; // 변수에 저장되었던 값을 변경


let message = "hello";
let another;
another = message; // "hello" another 변수에 복사


let message = "hello";
let message = "world"; // 같은 변수를 반복했기 때문에 에러 발생
💡 var 라는 친구도 let 과 거의 동일하게 동작하지만 오래된 방식이기 때문에 사용하지 않는 것을 권장

const

  • const : 변하지 않는 변수를 선언할 때 사용
    이렇게 const로 선언한 변하지 않는 변수를 '상수'라고 부른다.
  • 상수는 재할당X → 즉, 이미 값을 할당한 변수에 새로운 값을 할당하려고 하면 에러 발생
    왜냐하면, const를 사용했다는 것이 변수의 값이 절대 변경되지 않을 것이라는 확신하는 것이기 때문에
const helloworld = "Hello World";
helloworld = "new world!"; // error: 재할당 불가능

 

대문자 상수

  • 기억하기 힘든 값을 변수에 할당할 때 별칭으로 사용할 때 이런 상수는 대문자와 밑줄(_)로 구성된 이름으로 변수명을 명명한다.
// 예를 들어, 다양한 색상 코드를 반복적으로 사용한다고 했을 때 색상 코드 다 외울 순 없기 때문에
// 그런 기억하기 힘든 값을 대문자 상수로 만들어주는 것.
const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

 

❓ 그럼 언제 일반 상수를 사용하고, 언제 대문자 상수를 사용해야 될까?
  • 일반 상수 : 코드가 실행된 이후 계산되어 할당되는 변하지 않는 상수
  • 대문자 상수 : 코드가 실행되기 전에도 이미 그 값을 알고 있는 (하드코딩해주는) 상수

 

변수명에 대한 중요한 사실

  • 변수명은 간결하고, 명확해야 된다.

변수 명명 규칙

  1. 변수명에는 only 문자, 숫자, 기호 중에서는 $ _ 만 들어갈 수 있다.
  2. 첫 글자는 숫자로 불가능하다.
// ✅ 올바른 변수명
let $personal;
let _personal;
let personalData;
let personal123;

// ❌ 잘못된 변수명
let 1A; // 숫자로 시작하면 안됨
let my-name; // 하이픈은 변수명으로는 사용 안됨

 

자료형

1. 숫자형 : Number Type

  1. 일반 숫자값 : 1, 2, 3, ...
  2. 특수 숫자값 : Infinity(무한대), -Infinity, NaN(계산 중 에러 발생했다는 걸 나타내는 값)

2. 문자형 : String Type

let str = "Hello"; // 큰 따옴표 사용
let str2 = 'Single quotes are ok too'; // 작은 다옴표 사용
let phrase = `can embed another ${str}`; // 백틱 사용


// → 백틱을 사용하면 문자열 안에 변수를 넣을 수 있어요.
let name = "Lisa";

// 변수를 문자열 중간에 삽입할 수 있음
alert( `Hello, ${name}!` ); // Hello, Lisa!

3. 불린형 : Boolean Type

  1. true(긍정) / false(부정) 두 가지 값밖에 없는 자료형

4. null 값

  1. 오로지 null 값만 포함하는 별도의 자료형을 만듦

5. undefined 값

  1. 변수는 선언했는데 값을 할당하지 않았다면 자동으로 undefined 할당됨
let name;

console.log(name); // undefined 출력됨

6. 객체(object) & 심볼(symbol)

  1. 데이터 컬렉션이나 복잡한 개체를 표현할 수 있음
💡
  • null vs undefined 정확히 알아두시면 high level 개발자
    • 왜냐, 다른 언어에서의 null과 js에서의 null 성격이 조금 다르기 때문
    • JS에서의 null = 존재하지 않는 값 / 비어 있는 값 / 알 수 없는 값
      • 변수가 비어있거나 알 수 없는 상태를 나타내려면 null 사용하세요.
    • JS에서의 undefined = 값이 할당되지 않은 상태
      • 개발자가 직접 할당하는 것은 권장하지 X
      • undefined 는 값이 할당되지 않은 변수 초기값을 위한 예약어로 남겨두기
  • typeof 연산자
    • 어떤 자료형인지 확인할 수 있는 연산자입니다.
    • ex) let numberValue = 3; console.log(typeof numberValue);

 

유저와 상호작용할 수 있는 함수

  • alert
    이 함수가 실행되면 사용자가 '확인'버튼을 누를 때까지 메시지 보여준 창이 계속 뜬다.
    alert으로 인해 작은 모달 창이 뜨게 되면, 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 영역을 클릭할 수 없다.
    ex)  alert('hello')
  • prompt
    이 함수가 실행되면 텍스트 메시지와 입력 필드, 확인 및 취소 버튼이 있는 창이 뜬다.
    ex) prompt('Write your name')
    • 입력하고 확인 클릭 시 → 입력한 값 반환
    • 취소 클릭 시 → null 반환
  • confirm
    이 함수가 실행되면 확인 또는 취소 버튼이 있는 창이 뜬다.
💡만약 prompt로 입력받은 값을 변수로 담고 싶다면? 
const name = prompt('Write your name')
console.log(name)
/*
prompt 로 본인의 이름 데이터 를 입력 받고, 
입력 받은 데이터로 confim 모달 창으로 해당 이름이 본인 이름인지 확인하세요.
본인 이름이 맞다면 console 에 true 가 찍히고, 본인 이름이 아니면 false 가 찍히도록 해주세요.
*/

const myName = prompt('이름을 입력하세요.')
const isMyName = confirm(`${myName} 라는 이름이 당신의 이름이 맞나요?`)
console.log(isMyName)

 

연산자

연산자의 종류

기본 연산자

// 자바스크립트 수학 연산자 종류
덧셈 연산자 +
뺄셈 연산자 -
곱셈 연산자 *
나눗셈 연산자 /
나머지 연산자 %
거듭제곱 연산자 **

나머지 연산자

  • %
  • a % b = a를 b로 나눈 후 그 나머지를 정수로 반환한다.
console.log(5 % 2) // 1
console.log(8 % 3) // 2

거듭제곱 연산자

console.log( 2 ** 2 ); // 4  (2 * 2)
console.log( 2 ** 3 ); // 8  (2 * 2 * 2)
console.log( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)
// ‘+’ 는 문자열 연결에도 사용할 수 있다는 점
let s = "hello" + "world";
console.log(s); // helloworld

// 더하기 연산하는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 반환되어 계산됨
console.log('1' + 2); // "12"

// 만약 앞에 숫자 2개가 나오고 전부 덧셈이라면 숫자는 더해지고, 그 뒤에 문자열 붙고 문자열로 변환됨
console.log(2 + 2 + '1') // 41
console.log(typeof (2 + 2 + '1')) // string

// 하지만 - , / 는 다름
console.log(6 - '2') // 4 -> '2'를 숫자로 바꾼 후 연산하기 때문
console.log('6' / '2') // 3 -> 두 문자열 모두 숫자로 변환 후 연산하기 때문

증가 연산자

  • ++
  • 변수를 1 증가시키는 연산자
let counter = 2;
counter++;      // counter = counter + 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
console.log( counter ); // 3

감소 연산자

  • --
  • 변수를 1 감소시키는 연산자
let counter = 2;
counter--;      // counter = counter - 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
console.log( counter ); // 1
⚠️ 증가 / 감소 연산자는 변수에만 사용가능하며, 1++ 이런 건 불가능

 

비교 연산자

console.log(2 > 1); // true
console.log(2 == 1); // false

console.log(2 == '2'); // true
console.log(2 == 2); // true

console.log(2 === '2'); // false
console.log(2 === 2); // true

console.log(2 != '2'); // false
console.log(2 !== '2'); // true

console.log(true == 1); // true
console.log(true === 1); // false

console.log(null == undefined); // true
console.log(null === undefined); // false

// == : 동등 연산자
// === : 일치 연산자(엄격한 동등 연산자, 자료형의 동등 여부까지 검사함)

논리 연산자

  • || (OR)
// 둘 중 하나라도 true면 true, 그렇지 않으면 false
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
  • && (AND)
// 둘 중 하나라도 false 면 무조건 false 반환
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
  • ! (NOT)
// 피연산자를 불린형으로 변환하고, 해당 불린형의 역을 반환합니다.
console.log(!true); // false
console.log(!0); // true


// !! NOT을 2개 연달아 사용하면 값의 불린형으로 변환할 수 있다.
console.log(!!null); // false
console.log(!!"HELLO"); // true
  • ?? nullish 병합 연산자
    a ?? b → a가 null도 아니고, undefined도 아니면 a값 반환 / 그 외의 경우 b 반환
⚠️ ?? 랑 || 
두 연산자 굉장히 비슷하지만, 중요한 차이점이 있습니다.
  • || 연산자는 첫 번째 truthy 값을 반환합니다.
  • ?? 연산자는 첫 번째 정의된 (즉, null이나 undefined가 아닌) 값을 반환합니다.
 
// 예시
let height = 0

// 0은 fasly하므로 해당 콘솔은 100을 반환합니다.
console.log(height || 100) 

// height가 null,undefined가 아닌 0이라는 값이 할당되었기 때문에 0이 출력됩니다.
console.log(height ?? 100) 

---

// 만약, height 값이 undefined 라면?
let height; // 아무 값도 할당하지 않았으므로 undefined

// height가 undefined 이므로 100 출력됨
console.log(height ?? 100)

 

조건문

if문

if(조건문) {
	// 조건문이 true라면 해당 코드 블럭 실행됨
}
  • 조건문에 뭐가 들어가던 무조건 불린값으로 변환하여 반환된다.
    → 즉, true / false 만 나온다는 뜻
불린형 다시 기억하기
  • 숫자 0, 빈 문자열, null, undefined, NaN → false 반환
  • 문자열 ‘0’을 포함한 그 외 → true 반환

 

if else문

if (1 === 1) {
	// 조건문이 true이면 해당 코드 블럭이 실행됨
} else {
	// 조건문이 false이면 해당 코드 블럭이 실행됨
}

// 만약, 처리해야 할 조건문이 여러개라면?
if (조건문1) {
	// 조건문1 이 true이면 해당 코드 블럭이 실행됨
} else if (조건문2) {
	// 조건문2 가 true이면 해당 코드 블럭이 실행됨
} else if (조건문3) {
	// 조건문3 이 true이면 해당 코드 블럭이 실행됨
} else {
	// 조건문1,2,3이 전부 false이면 해당 코드 블럭이 실행됨
}

조건부 연산자 ? = 삼항 연산자

// if문을 활용한 버전
let accessAllowed;
let age = prompt('나이를 입력해 주세요');

if (age > 18) {
	accessAllowed = true;
} else {
	accessAllowed = false;
}

console.log(accessAllowed);

// 삼항 연산자
let accessAllowed;
let age = prompt('나이를 입력해 주세요');

accessAllowed = age > 18 ? true : false; // 비교 연산자 자체가 true,false를 반환하기 때문에 accessAllowed = age > 18; 만 적어도 정상동작함

console.log(accessAllowed);

 

반복문

while문

while (condition) {
	// condition(조건)이 truthy이면 반복문 본문 코드 실행
}

// 예시
let i = 0
while (i < 3) {
	console.log(i) // 0, 1, 2 가 순서대로 출력됨
	i++
}

 

조건문을 활용하지 않고 반복문 탈출 하는 방법 : break 사용

while (true) {
	if(condition) break;
	// condition에 true가 아니라면 반복문 실행
}

do...while문

// 별 거 없습니다. 그냥 조건문을 아래로 옮기는 방법이에요.
// 단, 얘는 분문 코드를 최소 1번이라도 실행하고 싶을 때만 사용해야 합니다.
// 웬만하면 일반 while 문이 적합합니다.
let i = 0
do {
	console.log(i) // 0, 1, 2 가 순서대로 출력됨
	i++
} while (i < 3)

for문

  • begin : 반복문 집입 시 단 한 번 실행
  • condition : 반복마다 해당 조건이 확인되며, false이면 반복문 멈춤
  • step : 각 반복의 body가 실행된 이후에 실행됨
  • 반복문 본문 코드 : 조건문이 truthy일 동안 계속해서 실행됨
for(begin; condition; step) {
	// condition truthy 하다면 반복문 실행
}

// 예시
// 1. i라는 변수가 0으로 할당되며 실행된다.
// 2. i 가 3 보다 작은지 조건문이 확인된다.
// 3. truthy하다면 반복문 본문 코드가 실행, 아니라면 반복문 멈춤
// 4. 반복문 본문 실행됬다면 step을 실행하여 i++ 로 1 증가 시켜줌.
// 5. 다시 조건문으로 돌아와서 1 증가된 i 가 3 보다 작은지 확인한다.
// 6. truthy하다면 반복문 본문 코드가 실행, 아니라면 반복문 멈춤
// 7. falsy하여 반복문 멈출 때까지 반복...
for (let i = 0; i < 3; i++) { 
  console.log(i); // 0, 1, 2가 출력됩니다.
}

위 예시처럼 begin 부분에서 변수를 선언(인라인 변수 선언)하고 할당까지 전부 할 수 있고,

혹은 밖에서 변수는 따로 선언하고 begin에서는 초기값만 할당해도 된다.

 

반복문을 돌다가 중간에 반복문 스킵하고 싶을 때

  • continue로 현재 실행 중인 반복문을 멈추고, 실행 조건에 통과하면 다음 반복문이 실행된다.
for (let i = 0; i < 10; i++) {

  // 조건이 참이라면 남아있는 본문은 실행되지 않습니다.
  if (i % 2 == 0) continue;

  console.log(i); // 1, 3, 5, 7, 9가 차례대로 출력됨
}

switch문

  • 복수의 if 조건문을 switch문으로 바꿀 수 있다.
// x 에는 변수 가 들어갑니다
switch(x) { 
  case 'value1':  // if (x === 'value1')
    ...
    break;

  case 'value2':  // if (x === 'value2')
    ...
    break;

  default:
    ...
    break;
}

// 예시
let a = 2 + 2;

switch (a) {
  case 3:
    console.log( '비교하려는 값보다 작습니다.' );
    break;
  case 4:
    console.log( '비교하려는 값과 일치합니다.' );
    break;
  case 5:
    console.log( '비교하려는 값보다 큽니다.' );
    break;
  default:
    console.log( "어떤 값인지 파악이 되지 않습니다." );
}

// 만약 break 를 적지 않는다면 조건에 해당하는 모든 케이스가 전부 실행되겠죠?

 

/*
1. 짝수일 때만 console 찍어보기
2. i 변수의 초기값은 0 으로, 해당 반복문은 10번 반복합니다.
3. 만약 i 가 0 이 아니고, 짝수라면 console 에 `짝수 발견 : i 값` 을 찍어주세요.
*/

for(let i = 0  ; i < 10 ; i ++) {
    if(i !== 0 && i % 2 === 0) console.log('짝수 발견 : ', i)
}

/*
for 루프를 사용하여 i 값을 0부터 9까지 1씩 증가시키며 반복 실행합니다.
let i = 0: i를 0으로 초기화합니다.
i < 10: i가 10보다 작을 때만 반복합니다.
i++: 반복할 때마다 i의 값을 1 증가시킵니다.

if 조건문을 사용하여 특정 경우에만 console.log를 실행합니다.
i !== 0: i가 0이 아닐 때 (즉, 0은 제외).
i % 2 === 0: i가 2로 나누어 떨어질 때 (짝수일 때).
조건을 만족하면 console.log('짝수 발견 : ', i);가 실행되어 콘솔에 i 값을 출력합니다.
*/

함수

함수란?

  • 우리가 스크립트를 작성하다보면 비슷한 동작을 하는 코드가 여러 곳에서 필요할 때가 많아요.
    이럴 때 해당 동작의 스크립트를 하나의 상자 안에 담고, 필요한 곳에서 상자만 불러쓰면 편하겠죠? 이 상자가 함수입니다.
function showMessage() {
	console.log('show message')
}

// 함수 사용할 때
showMessage() // show message
showMessage() // show message

 

지역 변수 vs 외부 변수

  • 지역 변수 : 함수 내에서 선언한 변수 (함수 안에서만 접근 가능)
function showMessage() {
	let msg = 'show message' // msg는 지역변수
	console.log(msg)
}
showMessage() // show message
console.log(msg) // ReferenceError: msg is not defined
  • 외부 변수 : 함수 외부에 선언한 변수 (함수 안에서도 접근 및 수정 가능)
// 외부 변수 접근하기
let userName = 'Lisa';

function showMessage() {
  let msg = 'Hello, ' + userName; // userName은 외부 변수니까 여기서도 접근 가능
  console.log(msg);
}

showMessage(); // Hello, Lisa
console.log(userName); // Lisa

// 외부 변수 수정하기
let userName = 'Lisa';

function showMessage() {
  userName = "Bob"; // (1) 외부 변수를 수정함

  let msg = 'Hello, ' + userName;
  console.log(msg); 
}

console.log( userName ); // 함수 호출 전이므로 John 이 출력됨

showMessage(); // Hello, Bob

console.log( userName ); // 함수에 의해 Bob 으로 값이 바뀜

함수에 매개변수를 전달할 수 있다.

  • 이 매개변수(인자라고도 불림)를 통해 함수에 필요한 데이터를 전달할 수 있게 된다.
function showMessage(text, writer) {
	console.log(`${writer} : ${text}`)
}

showMessage('Hello', 'Lisa') // Lisa : Hello
showMessage('Bye', 'Mandoo') // Mandoo : Bye
showMessage('what') // undefined : what

만약, 매개변수가 넘어오지 않는다면? 위 예시처럼 undefined가 출력될 것이다.

필수로 받아올 필요 없는 매개 변수라면 기본값을 설정해주면 된다.

function showMessage(text, writer = 'Lisa') {
	console.log(`${writer} : ${text}`)
}

showMessage('Hello') // Lisa : Hello
showMessage('Bye', 'Mandoo') // Mandoo : Bye

 

함수를 호출했을 때 특정 값을 반환하게 만들 수 있다.

function sum(a, b) {
  return a + b;
}

let result = sum(1, 2);
console.log( result ); // 3

// 만약 return문 없거나, return 지시자만 있는 경우는 undefined 반환함.

무언의 약속 ! 함수 이름 짓는 방법

show...로 시작하는 함수 무언가를 보여주는 함수
get...로 시작하는 함수 값을 반환함
calc...로 시작하는 함수 무언가를 계산함
create...로 시작하는 함수 무언가를 생성함
check...로 시작하는 함수 무언가를 확인하고 불린값을 반환함

 

함수 표현식 vs 함수 선언식 vs 화살표 함수

  • 함수 선언문
// 함수 선언문
function 함수명() {
  // 함수 로직
}

function sum(a, b) {
  return a + b;
}
  • 함수 표현식
//함수를 생성하고 변수에 값을 할당하듯 함수가 할당되었습니다.


let sayHi = function() {
	console.log('hi')
}
console.log(sayHi) //ƒ () {console.log('hi')} -> 함수 자체가 보임
sayHi() // hi -> 함수가 실행됨(자바스크립트는 괄호가 있어야 함수가 실행됨)

// 함수 복사도 가능
function sayHi() {   // (1) 함수 생성
  console.log('hi')
}

let func = sayHi;    // (2) 함수 복사

func(); // hi     // (3) 복사한 함수를 실행
sayHi(); // hi    // (4) 본래 함수도 정상적으로 실행됩니다.

// 함수 표현식 안에서도 종류가 있습니다.
// 기명 함수 표현식 vs 익명 함수 표현식

// 기명 함수 표현식(named function expression)
var foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
var bar = function(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined
💡콜백 함수에 대해서
     콜백 함수 : 함수를 값처럼 전달하는 것		 
// 콜백 함수를 위한 예시 함수
// 함수에 질문을 하면, 사용자 답변에 따라 yes / no 를 출력하는 함수입니다.
function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "동의하셨습니다." );
}

function showCancel() {
  alert( "취소 버튼을 누르셨습니다." );
}

// 사용법: 함수 showOk와 showCancel가 ask 함수의 인수로 전달됨
// 즉, 여기서 showOk, showCancel 가 콜백 함수 라고 불리는 친구들
ask("동의하십니까?", showOk, showCancel);

 

함수 표현식과 함수 선언식의 차이점

  • 함수 표현식 : 실제 실행 흐름이 해당 함수에 도달했을 때 함수가 생성된다.
    →즉, 코드 실행 흐름이 함수에 도달했을 때부터 해당 함수를 사용할 수 있다.
  • 함수 선언문 : 함수 선언문이 정의되기 전에도 호출할 수 있음
// 예시

// 함수 선언문
// 아래 코드 실행해보면 함수 정의한 것보다 함수 호출한 것이 위에 있어도 정상 동작됨
sayHelloToName('lisa') // Hello, lisa

function sayHelloToName(name) {
  console.log( `Hello, ${name}` );
}

// 함수 표현식
// 반면, 아래 코드는 함수 정의하기 전에 함수를 호출했을 때 아직 정의되지 않았기 때문에 에러남
sayHelloToName2('lisa') // ReferenceError: sayHelloToName2 is not defined

let sayHelloToName2 = function (name) {
  console.log( `Hello, ${name}` );
}

 

  • 화살표 함수
    함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법
// 함수 선언식
function sum(a, b) {
	return a + b
}

// 화살표 함수 ex 1
const sum = (a, b) => {
	return a + b
}

// 만약 return 문 1줄만 필요할 경우 중괄호 생략 가능
const sum = (a, b) => a + b

// 화살표 함수 ex 2
const printHello = () => console.log('hello')

printHello() // hello

 

 

객체

객체 기본 문법

  • 키(key) + 값(value)로 구성된 프로퍼티들의 집합
// 빈 객체를 만드는 법
let user = new Object() // 객체 생성자 문법
let user = {} // 객체 리터럴 문법 (권장)

중괄호 {...}를 이용해 객체를 선언하는 것 = 객체 리터럴
new 키워드와 함께 객체를 생성하고 초기화 하는 함수 = 객체 생성자

const user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

console.log(user) // { name: 'John', age: 30}
console.log(user.name) // John -> 객체 안에 있는 특정 키의 값을 꺼내고 싶을 때

user.name = 'Lisa'

console.log(user.name) // Lisa
console.log(user['name']) // Lisa

delete user.age // 객체의 프로퍼티 삭제하기

console.log(user) // {name: 'Lisa'}

왠만하면 객체 리터럴로 생성하는 걸 추천 / 생성자 함수로 객체를 유용하게 쓰는 법

// 생성자 함수는 객체를 생성하기 위한 탬플릿(클래스)처럼 사용할 수 있어요
// 생성자 함수 Person -> 생성자 함수는 대문자로 시작함
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}

// 인스턴스의 생성 -> person1, person2 를 인스턴스라고 합니다.
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.log('person1: ', typeof person1); // person1:  object
console.log('person2: ', typeof person2); // person2:  object
console.log('person1: ', person1); // person1:  Person {name: 'Lee', gender: 'male', sayHello: ƒ}
console.log('person2: ', person2); // person2:  Person {name: 'Kim', gender: 'female', sayHello: ƒ}

person1.sayHello(); // Hi! My name is Lee
person2.sayHello(); // Hi! My name is Kim

객체를 만들 때 단축 프로퍼티로 줄여쓸 수 있다.

function createUserInfo(name, age) {
	return {
		name: name, // 이렇게 키, 값 이름이 변수의 이름과 동일할 때 사용할 수 있는 단축 프로퍼티
		age: age
	}
}

const user = createUserInfo("Lisa", 30)
console.log(user)

// 단축 프로퍼티로 수정해보면
function createUserInfo(name, age) {
	return {
		name, // name: name 과 같은 의미 입니다.
		age
	}
}

const user = createUserInfo("Lisa", 30)
console.log(user)
in 연산자로 객체 프로퍼티 존재 여부를 확인할 수 있다.
"key" in object

// example
const user = {name: "Lisa", age: 30}
console.log("age" in user) // true
console.log("city" in user) // false​

​for...in 반복문으로 객체의 모든 키를 순회한다.
(for...in과 for문은 다르다) 
for (key in object) {
  // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  console.log( key );  // name, age, isAdmin
  // 키에 해당하는 값
  console.log( user[key] ); // John, 30, true
}​

 

객체 정렬 방식

  • 객체 프로퍼티(key)가 정수 프로퍼티면 자동으로 정렬
  • 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬

"+"를 붙이면 속임수가 가능한 이유

  • "+"는 단항 연산자, 자바스크립트에서 숫자로 변환하는 연산자 이기도 한다.
// 예시
console.log(+"49"); // 49 (문자열 → 숫자)
console.log(+"hello"); // NaN (숫자로 변환 불가능)
console.log(+true); // 1
console.log(+false); // 0

// 그래서 우리 위 코드에서 + 연산자가 있기 때문에 문자열을 숫자로 변환하려고 시도하게 됩니다.
// 즉, console.log( +"+49" ) 에서 "+49" 앞에 + 가 붙었으니
// 해당 문자열을 숫자로 바꾸려고 시도하여 49 가 출력되는 것임
반응형